Is there a built in way to add an animation on loading ?
Shri

Gio,

 

I was wondering if there is a way to add an an animation on loading.

I figure I could load one image (an animated gif) but I don't want to go that route.

I would like to load an animation just like I would in a game via new Animation();

It looks like wade.setLoadingImages is set up for it (files = string | array) ?

but I'm not sure how to set it up or if I am interpreting the idea of an array of images

right ?

 

As usual, any help you can provide would be appreciated.

 

cheers,

Shri

All 2 Comments
Gio

Hi Shri

 

Very good question :)

 

The array of images is just to display more than one image. Could be useful, for example, if you wanted a static background jpeg, and an animated spinner type of thing (gif) on top of it.

 

When wade is waiting for a file to load, it doesn't really update the simulation of the game, it's all stopped until all the files that are being loaded have finished loading. That's why that array is only intended for static images.

 

However...

 

It isn't difficult to create a mini wade scene that you load immediately and display (with animations and all that) while loading all the files of your game. The trick is to use the preload functions, rather than the load one, so wade.preloadImagewade.preloadJson, etc.

 

Those "preload" functions run in the background, without interfering with the game simulation and rendering. And all those functions can be called with a 'callback' parameter to execute a custom function when each asset is finished loading. So you could do something like this:

App = function(){	this.init = function()	{		wade.loadScene('miniSceneToShowWhileLoading.json', false, function()		{			var imagesToLoadForTheGame = ['a.jpg', 'b.jpg', 'c.jpg'];			var numImagesLoaded = 0;			for (var i=0; imagesToLoadForTheGame.length; i++)			{				wade.preloadImage(imagesToLoadForTheGame[i], function()				{					if (++numImagesLoaded == imagesToLoadForTheGame.length)					{						wade.clearScene();						wade.app.startGame();					}				});			}		});	};	this.startGame()	{	};};

Now that you make me think about it, having a wade.preloadScene() function would be quite handy, so you could load the first scene with wade.loadScene() and while that's running you could use wade.preloadScene() to load the second one.

 

I'll try to get that in for the next release.

Gio

I forgot to say, we've added this in 1.4.3, so now you can do the same thing in a better way with much less typing:

App = function(){    this.init = function()    {        wade.loadScene('miniSceneToShowWhileLoading.json', false, function()        {             wade.preloadScene('mainScene.json', false, startGame, true);        });    };};

Where startGame is a function of your choice.

 

The scene json files can contain a list of images, sounds, scripts, json files, as well as actual scene objects positioned in the scene. You can see the documentation of wade.loadScene() for more details.

Post a reply
Add Attachment
Submit Reply
Login to Reply