Forums » Help » An Image After The Last Stage Of The Game

Hello, I would like to show an image after the last stage of the game.
how can I do?
I have three levels and as a conclusion of the game, vorreri show a picture?
must leave the game?
I tried with 'ig.system.context.drawImage', but does not work.

Thank you very much

simplest way is to have a level called end level and load it as you would a normal level...

Probably the easiest way is to create a new game which would also be included and use ig.system.setGame to switch to the new game context (which also deals with cleaning up the update cycle etc.)

This is what Biolab Disaster does and it works very well.

how can I put the image in the layer?
I tried to put it in the tilesets, but does not show the whole picture

thanks

Same way Biolab Disaster does it.

In this new game object, define the image up front as a new ig.Image() the same way you do with entities etc.

Then in the game's draw() method, just draw it.

E.g.

ig.module( 
	'game.gameover' 
)
.requires(
	'impact.game',
	'impact.font'
)
.defines(function(){

Gameover = ig.Game.extend({
  myimage: new ig.Image('media/gameover.png'),

  draw: function() {
    this.myimage.draw(0, 0);
  }
});

});

Assuming it's the full area of the display, of course.

More importantly, how can we load resources dynamically? I want to load levels as well as images.

@ Arantor
Thanks, you are very kind :-)

You generally don't load levels dynamically because you normally bake all resources in and distrbute a single minified JS file, but loading a level is just as simple as adding a script tag to the page pointing to the level.

As for other assets, just call for new ig.Image or ig.Sound or whatever and it should be loaded but remember that you'll have to roll your own new instance of ig.Loader to show users that things are loading.

@arantor

How do I load the level from within the game context though. I don't want to have to leave the game context to load resources. I want to load them from within the context of the game loop.

You see the larger the game gets, you don't want to have to load all your resources up front. It's smarter to 'load as you go' so that as you go to the next level you can have a load screen and load the resources for that new level.

This also makes for a more dynamic game that can be extended. modularized and easily interfaced with a backend.

So I guess what I'm asking is how do I load the level from within the game context

You should probably look at the Drop game source which will give you an idea of how levels are created on the fly. It's all the same idea... either create it procedurally or you could be loading it via ajax right from the game. Levels are just simple arrays... easy to modify.

You can't do it in the game context in a browser, by definition.

A level is raw JS. The only way to get that into the browser, other than baking it all in, is to add a script tag calling the file containing the level, which will instantiate the level as an object, then you can use loadLevel to initialise it.

I am well aware of the consequences of baking everything up front vs "being smarter" and have to say that from my experience it hasn't been worth the effort especially since there isn't a particularly good way to handle load failure, and it still ends up in memory if the user plays again anyway...

As far as loading otherwise, create a new instance of ig.Loader, which is all documented... But even then all it's going to do what Impact does to dynamically load levels.

Well I had some free time so I gave it a go... wasn't all that difficult.

Step 1, Include jQuery in your index.html (just to make ajax much easier)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Step 2, Modify the level .js file from WM. Because it preps it as a module it will have a tough time loading that on the fly. Remove all lines except for line 4. The one that looks like this:

LevelTest=/*JSON[*/{"entities":[{"type":"EntityPlayer","x":88,"y":138}, ... ... ...

Step 3, where you want to load your level in the game (init, or other trigger) you can load the level with this code:

$.ajax({
	url: "lib/game/levels/test.js",
	success: function(data){
		ig.game.loadLevel( LevelTest );  //change this to match level object
	}
});

That's pretty much it. Impact reads in the level object like normal. This is a quick and dirty approach.. but seems to work.

Or just take a look at the code in Impact.js, ig._loadScript, and do something similar (note; that includes how to do error handling, and no extra dependence on jQuery just to perform a file include)

Please forgive my ignorance about javascript.

Just wanted to verify something in the _loadScript process.

The final line in the code is:

ig.$('head')[0].appendChild(script);

Does appending this script to the head automatically get parsed and processed by the browser -- even though my page might have finished its initial load?

Or, is there a refresh or other activating call one needs to make to get this going?

@ Arantor
I'm sorry I can not call the object that you suggested.
I added the module 'game.gameover' in the file and called the main object as ig.game.Gameover ().
where am I doing wrong?

thank you very much

Hmm... tricky. It would be much, much less of a hack if you can have it load a proper module and not have to alter the level file any. It would be something like this:

ig._loadScript('game.levels.test');
ig.game.loadLevel(LevelTest);

(untested)

My guess is there would be some "order of execution" problems because the loadLevel() would probably call before the script was loaded in. With the jQuery solution the level was loaded on the success/complete callback.

If you could solve that issue then it would work like a dream.

You can't inject into the core to add a callback so it would require hacking up the core or coming up with some other check in game. Maybe you can while loop until its loaded or just flip a bool... I dunno.. my brain is done working for today. ;)

Thank you very much
I try with your tip :-)

Does appending this script to the head automatically get parsed and processed by the browser -- even though my page might have finished its initial load?

Yes. It's what Impact does.

I added the module 'game.gameover' in the file and called the main object as ig.game.Gameover ().

You're not supposed to call it as ig.game.Gameover, you're supposed to call it as ig.system.setGame(Gameover) or whatever the object is called.

My guess is there would be some "order of execution" problems because the loadLevel() would probably call before the script was loaded in.

There would, but there should be an event firing much like _loadScript sets one for onerror. Off the top of my head, it should be possible to use oncomplete as the event handler.

Hi,

I was able to load the object with the object 'game.gameover':

ig.module (
'game.gameover'
)
. Requires (
'impact.game',
'impact.font'
)
. defines (function () {

Ig.Game.extend gameover = ({
myimage: new ig.Image ('media / gameover.png'),

draw: function () {
this.myimage.draw (0, 0);
}
});

});

and then invoked by:

ig.system.setGame (gameover);

but now the image is 320x320 pixels loaded only the leftmost part.

in main.js I defined:

ig.main (&039; canvas', MyGame, 60, 160, 240, 2);

how can I fix this?

thank you very much :-)

I apologize! I had not realized that you could format your code