couple questions (scenes)
krumza

Hi all. I need to talk about graceful scene manager (GSM below in text).

I think that construction is one way to create GSM that give WADE :

App = function()
{
    this.load = function(){
        
    }
	this.init = function()
	{
       wade.app.loadintro();
	};
	this.loadintro = function(){
		wade.loadScene('intro.wsc', true ,function(){
		    console.log("intro load");
            //some action
            wade.app.loadmainmenu();
		});	    
	}
	this.loadmainmenu = function() {
        wade.clearScene();
        wade.loadScene('dashboard.wsc', true, function(){
            wade.app.onMouseMove = function(){
                console.log('a')
            }
            wade.app.onClick = function(){
                wade.app.gotoshop();
            }
        });	    
	}
	this.gotoshop = function() {
	    wade.clearScene();
        wade.loadScene('shop.wsc', true, function(){
            wade.app.onMouseMove = function(){
                console.log('b')
            }
            wade.app.onMouseWheel = function(eventData) {
                console.log('c')
            };  
        });
	}	
};

And here arises a number of issues.

Personally, I find it hard to use the scene editor, I prefer to write all the script body. Although, it is Your editor - the best in this area.
However, all of my files .wsc inside look like this: {},
All the objects I put on the code. Path, objects, event handlers I put as callback

	this.loadsample = function() {
        wade.clearScene();
        wade.loadScene('sample.wsc', true, function(){
            var Path = new...
            var Object = new ...
            ...
            wade.app.onMouseMove = function(){
                console.log('a')
            }
            wade.app.onClick = function(){
                wade.app.gotoanothercsene();
            }
        });	    
	}

when changing the scene the clearScene() will remove all the objects and I assume that all Paths deleted by the garbage collector of js. But what to do with the listening events.
It is clear that the listeners for the objects themselves will be cleared when objects are deleted. I see only removeEventListener(sceneObject,event) in API but i dont see as example "clearGlobalEventListener(event)" so I'm doing this:

wade.loadScene('paintcalc.wsc', false, function(){
   wade.app.onMouseMove = function(){};
   wade.app.onMouseWheel = function() {};
   wade.app.onClick = function() {};
   wade.app.onMouseDown = function() {};
   wade.app.onKeyDown = function() {};
   //here logic of scene
});

In every scene or :

var clearGlobalListeners = function(){
   wade.app.onMouseMove = function(){};
   wade.app.onMouseWheel = function() {};
   wade.app.onClick = function() {};
   wade.app.onMouseDown = function() {};
   wade.app.onKeyDown = function() {};
}

wade.loadScene('paintcalc.wsc', false, function(){
    clearGlobalListeners();
    //logic of scene
});

Question 1: Here, in General, am I doing it right? I would like to hear tips on best practice in this area.

---------------------------------------------------------------------------------/end chapter one/----------------------------------------------------------;)

Next

Alas, I have not figured out how to freeze the scene (pause to pose). 
If I move from one scene to another with a complex scenario that is always drawn over. 
You can draw a new scene on another layer, dimming the first - but I don't think this is the best option, because it will suffer performance

But this code - be recreate again and again scene:

App = function()
{
    this.load = function(){
        
    }
	this.init = function()
	{
       wade.app.loadintro();

	};
	this.loadintro = function(){
		wade.loadScene('intro.wsc', true ,function(){
		    var func = function(){
               wade.app.loadmainmenu();
		    }
		    setTimeout(func, 1000);
		});	    
	};
	this.loadmainmenu = function() {
        wade.clearScene();
        wade.loadScene('mainmenu.wsc', true, function(){
            var a = new Sprite('images/game.png',4);
            var b = new SceneObject(a,0,offsetH,offsetT+110);
            wade.addSceneObject(b,true);
            wade.addEventListener(b, 'onClick');
            b.onClick = function(){
                wade.app.loadgame();
                return true;                
            }; 
        });	    
	};
	this.loadgame = function() {
        wade.clearScene();
        wade.loadScene('game.wsc', true, function(){
            
            var a = new Sprite('images/pencil.png',4);
            var b = new SceneObject(addpoint,0,offsetH,offsetT+110);
            wade.addSceneObject(b,true);
            wade.addEventListener(b, 'onClick');
            b.onClick = function(){
                wade.app.loadmainmenu();
                return true;                
            }; 
            //more more objects

        });	    
	};

}

It may be an option with export/import of scenes and save it in local storage?

App = function()
{
    this.load = function(){
        
    }
	this.init = function()
	{
       wade.app.loadintro();

	};
	this.loadintro = function(){
		wade.loadScene('intro.wsc', true ,function(){
		    var func = function(){
               wade.app.loadmainmenu();
		    }
		    setTimeout(func, 1000);
		});	    
	};
	this.loadmainmenu = function() {
        wade.clearScene();
        wade.loadScene('mainmenu.wsc', true, function(){
            var a = new Sprite('images/game.png',4);
            var b = new SceneObject(a,0,offsetH,offsetT+110);
            wade.addSceneObject(b,true);
            wade.addEventListener(b, 'onClick');
            b.onClick = function(){
                wade.app.loadgame();
                return true;                
            }; 
        });	    
	};
	this.loadgame = function() {
        wade.clearScene();
        wade.loadScene('game.wsc', true, function(){
            var localsave = retrieveLocalObject('savedstate');
            if(localsave) {
              //block A  - will it fully work well?

              wade.importScene(localsave)
            } else {
                //block B 

                var a = new Sprite('images/pencil.png',4);
                var b = new SceneObject(addpoint,0,offsetH,offsetT+110);
                wade.addSceneObject(b,true);
                wade.addEventListener(b, 'onClick');
                b.onClick = function(){
                   var save = wade.exportScene(true,[],true);
                   wade.storeLocalObject('savedstate',save);
                   wade.app.loadmainmenu();
                   return true;                
                }; 
                //more more objects
            }
        });	    
	};

}

Will this work? If the block And entirely the same as the block B. What are the ways to pause the state of the scene to return later to the same state. How to deal with the online processes, for example,

if the game scene is changed not only by user actions but also from the sockets? I don't know how, but it might be worth it to send to any web worker that he caught sockets and changed them

Question 2: How to save the state of the scenes to transition between them was already drawn States

----------------------------------------------------------------------------------------/end chapter two/-------------------------------------------------------;)

Previous question blends in with the other, and how to load the scene with their parameters and variables?

For example, when we implement something similar to a router inside WADE or full router based on the "/#!/" in the url address bar (and why not?:)).

Ie for example we don't just have a scene "store" but we need the scene "store" specifically selected "good"

Right now I see the solution is:

App = function()
{
    // this is where the WADE app is initialized
    this.load = function(){
        
    }
	this.init = function()
	{
       wade.app.mainmenu();
	};

	this.loadmainmenu = function() {
        wade.clearScene();
        wade.loadScene('dashboard.wsc', true, function(){
           var param = {}// it may be an [],'string' or whatever else

           wade.app.loadintro(param);
           //some code
        });	    
	}
	this.gotoshop = function(param) {
	    wade.clearScene();
        wade.loadScene('main_menu.wsc', true, function(){
             var param = param;
             //code
        });
	}
	
};

Question 3: Are there any other ways of switching between scenes with the parameters?

I would like to not only developers but WADE replied and joined the others WADE users as I

All 3 Comments
Gio

Question 1: Here, in General, am I doing it right? I would like to hear tips on best practice in this area.

 

Yes that works, but you don't have to use empty functions that do nothing to cancel global event handlers. You could simply set all your handlers to null:

wade.app.onMouseMove = wade.app.onMouseWheel = wade.app.onMouseDown = null;

 

> Question 2: How to save the state of the scenes to transition between them was already drawn States

 

This really depends on what you want to do. Importing / exporting the scene and saving it local storage would be a good solution if you need the scene to be the same across different play sessions. This will work for all Wade objects, however if you have anything else that is going on (websockets, etc). you need to add your own code to save and restore the state of that separately.

If, however, you just want to do a transition between the current scene and the next, pausing the scene and fading it out to go back to it later, I would do it this way:

1. Use wade.screenCapture() to get a screen shot with what is currently on the screen. Note that you can do this for each layer separately if you want to exclude the UI layer for example... you would just need to write a little bit more code and use wade.drawLayerToImage() instead.

2. Create a Sprite with that image but don't add it to the scene just yet

3. Create an array containing all the objects in the scene, then clear the scene

var objectsInTheScene = wade.getSceneObjects();
wade.clearScene();

4. Add the Sprite from point 2 above to the screen and show it. Fade it out, or do whatever you like with it while you transition to another scene.

5. When you want to go back to your original scene:

wade.clearScene();
for (var i=0; i<objectsInTheScene.length; i++)
{
    wade.addSceneObject(objectsInTheScene[i]);
}

> Question 3: Are there any other ways of switching between scenes with the parameters?

I am not really sure what you want to do there... what is the purpose of those parameters? Could you make an example?

krumza
I am not really sure what you want to do there... what is the purpose of those parameters? Could you make an example?

this situation can be for example if we have a universal scene shop, but the player need a detailed description of one specific item, then there's no need to make a separate scene for the item, and use the scene shop, but with the parameter.

or for example when we have a global map large size and we leave the scene menu to go back and not lose the camera settings they need to be stored somewhere and pass

it is done in a way that I have described above, when a parameter is passed to the function.

------

Question 4

Is there an example of how to break the code into multiple files? and even me is scared of my "sheet" of a few thousand lines

Gio

Ok, I think I understand. Your solution for question 3 seems quite good to me, I can't think of better ways of doing it.

Regarding question 4, yes, you can certainly split your code into multiple files. For example, instead of defining this.goToShop inside the definition of your App object in app.js, you can move it to a separate file, for example call it shop.js, and do this:

wade.app.goToShop = function()
{
    // your code here
};

The only important thing to remember, is to load this script. This can be done in the load function in your app.js:

wade.loadScript('shop.js');

Or you could add the file to the list of scripts for your scene.

Post a reply
Add Attachment
Submit Reply
Login to Reply