Tutorial: How to build a javascript application with jsc.


Written by Arvo Sulakatko 2008


In this tutorial you will learn how to build a javascript application with the jsc compiler. The objective is to have three main components, which will enable you to define new objects, select already defined objects, test those objects.


For more information visit http://zproxy.wordpress.com or http://jsc.sourceforge.net .

Source code is in the svn repository and visible at http://jsc.svn.sourceforge.net/viewvc/jsc/javascript/Examples/NatureBoyTestPad/NatureBoyTestPad/js/NatureBoyTestPad.cs?view=markup




Step 1: Creating the application

Create new ScriptApplication project



Save the project on the disk



Build the project as it is.


Check for jsc compiler errors, if there are none as there should not be, the look for the following line that says ďentrypoiny:Ē. An entrypoint is just a html file created for you to run your newly created application.



Letís have a look at that html file. Open your explorer at the projectís build directory.


I can use this command:


explorer.exe /n,/e,/root,"Z:\work\jsc\svn\javascript\Examples\NatureBoyTestPad\NatureBoyTestPad\bin\Debug"


Now there should be a directory called ďwebĒ. Open it.


Each referenced assembly will get its own javascript file. There is also a directory called version. Deleting that directory or the files in it will force the jsc compiler to regenerate the javascript files even if the file seems to be uptodate.


Now letís have a look at the html file.


Does not look that complicated or does it. Now we need to open it in a browser to confirm that we have a working script application.



Clicking on the button will change the text on the button, which proves that the we are all good.


By the way if you have enabled the console support in your browser you will also see the following in the console window.



Now would be a good time to check the project into your svn repository.


Note that I did not add some folders like bin and obj.


Step 2: Component wire-up


The control we are interested in has been downloaded with jsc package. Navigate your way to the c:\util\jsc\bin directory and add the selected dll as a reference.



Actually we need the other dll too, otherwise we would have the controller but nothing in it to control.



Now we need to write some code to wire up the simplest setup, which allows us to command a single actor.


First letís start by clearing out the current implementation for the constructor and create a new arena. Notice that we need to insert a using statement which can be done with some help from the IDE. (Ctrl+Shift+F10)



After a few moments the code looks like this:


Compiling it will us a control where we have the item selection ability.



Thatís no fun with no items, letís add an actor into the world.



That actor will be centered in the window and looking straight at you.



Compile and refresh your browser. Notice that as we have no preloading code you might have to refresh twice to get the images showing. If you wonder where the images are taken from Ė they are embedded inside the NaureBoy.dll.



Now we want to make him move on clicking.



And the actor moves!



Step 3: Make actors selectable


In this step we want be able to choose the actors on the fly. For this to work we need some refactoring. We also need to maintain a list of known actors.




Letís make them selectable and movable. Just some wireing.




Step 4: Adding and removing actors


The hardest part of this step is to create a draggable dialog.



Then we add three controls on that dialog.



We define the basic arsenal as a dictonary.



Now we have a dialog that looks like this:



A very basic dialog, not even that pretty. Now we need to wire those three controls. The combo will select an image from the arsenal we defined earlier. Clicking remove shall remove selection. Clicking on the image will insert a pending actor into the world.


Some wireup code:



Adding new actor while pending looks like this:



Step 5: Define new actors


In this step we need some buttons and a textarea to define new actors. After some coding the code looks like this:



And in the browser...



Now we need to create a parser. The format is described as follows:


††††††††††††††††††† // first line is the path

†††††††††† †††††††††// empty line

††††††††††††††††††† // stand array

††††††††††††††††††† // empty line

††††††††††††††††††† // walk array n


I know that the parser is not the cleanest, but it works!


Now we need some sprites. I have downloaded the last-guardian-sprites. You could get them at http://blogoscoped.com/archive/2006-08-08-n51.html .


To define a new actor with our new shiny dialog, the input should look like this:


file://D:\Documents and Settings\Neutron\Desktop\last-guardian-sprites

















If the path cannot be loaded the parser will let you know.



If you wont write a thing you get:


But if everything works you can see in the console:


And in the browser:


Now you can use this new actor.


Step 6: Predefine an actor


Create a new folder in the solution at web/assets/NatureBoyTestPad.



Include your sprites at that folder and set the Build Action to be Embedded Resource.



Now we need to define an assembly level attribute which allows jsc compiler to extract the resouces afterwards.



Now we have to name those sprites in the code.



And add this new actor to the combo.






Basically we are done with this tutorial.Good luck programming the next-gen web adventure game! J

Online demo

Youtube video