Thursday, November 7, 2013

COLTJS shooting Starling (2D Platformer) Games

I've some time between projects and wanted to test how new JS support of COLT function as was very satisfied by AS3 version having in mind that AS3 is compiled. I saw that there is WebGL cross compilation of Starling by Renaun tested on Chrome, but as everything is still chaotic(freedom and unification said my friend) in Web world today so I chose to use minified hackish starlingJS.js from area 51. I was praying so it's functional enough to support my test but I needed to fix some bugs and add some modification in order Starling to support spritesheets as JS version doesn't. I wonder why they have injected loader into Starling core?
Let listen to onload event and create Starling in JS in an old AS3 way :).


   function onload(){

        //init starling (same as Starling.current)
        var myStarling =new starling.core.Starling(Main,"stage");
        myStarling.start();

        Keys.init(myStarling.stage);

     
        // File complete handler
        function handleManifestLoad(event) {

            console.log("loaded");

            starling.core.Starling.current.root.init();
        }

        myStarling.addEventListener("complete",handleManifestLoad);

        myStarling.load([{src:"assets/spritesheet.png"},{src:"assets/spritesheet.xml"}]);

    }


Get atlas and start add elements of your game:
atlas = Assets.getTextureAtlas("assets/spritesheet");

//add background
 background = new starling.display.SimpleImage(atlas.getTexture("background"));
 this.addChild(background);
Add function change listener
//ADD CHANGE LISTENER
    LiveCodeRegistry.getInstance().trackMethod(Main.prototype.init);
This will track changes in init() function;
Add Hanlder in Main.js constructor
//@code-update
        function onLiveCodeUpdate (e) {
           
            
            if(e.methods!=undefined && e.source=="Main.js"){
                 console.log("[onLiveCodeUpdate in "+e.source+"]");
                for(var i=0;i<e.methods.length;i++)
                 e.methods[i].call(_this);//this call init() function for i=0;
            }

             //So my tool react(on change of bouncing velocity) and recalc display of onionskins
             if(e.source=="Mario.js"){
                if(_this._isPaused){
                    console.log("RECALC")
               _this.toolPanel.target.recalcStatesFrom(_this.toolPanel.value);
                _this.toolPanel.clear();
                _this.toolPanel.drawOnionSkin(_this.toolPanel.target);
                 }

            }
           
        }
Functions in loop doesn't need change listeners. Be sure Function you recall clean all the garbage or you will end up in memory leaks and weird functionality while prototyping;
If you want to track assets changes register listener handler:
//ADD ASSET UPDATE HANDLER
//@asset-update
function onAssetUpdate(e){
    starling.core.Starling.current.load([{src:e.sources[0]},{src:"assets/spritesheet.xml"}]);
}
Use "S" key to save your moving. Press "P" to pause. Use slider to move throughout time. Click on button to see onion skin. Make the changes in your Text Editor and see COLT applying them life. Press "P" again to unpause.

Download source




No comments:

Post a Comment