Forums » Help » Game Intro / Game over?

Is there a tutorial that explains how to make different 'screens' in Impact? If I want to make an intro screen or a game over screen, each with some buttons, what classes do I extend? I assume buttons would be entities but would the background graphics be as well? If someone could point out a good tutorial that'd be great.

Different games will require different approaches. For simple screens, you could create levels and load them when prompted--say, by a dying player entity--from within your game subclass.

// player.js
kill: function()
{
	this.parent();
	ig.game.gameOver();
}

// main.js
state: {},

gameOver: function()
{
	this.state.gameover = true;
	this.loadLevel(LevelGameOver);
},

update: function()
{
	this.parent();

	if (this.state.gameover)
	{
		// do something
	}
	else
	{
		// game is not over, do something else
	}
},

draw: function()
{
	this.parent();
	
	if (this.state.gameover)
	{
		// draw something
	}
	else
	{
		// game is not over, draw something else
	}
}

For more involved screens--those that require more coding for updates, draws, etc.--a better way would be for each screen to extend ig.Game:

// main.js
MyGame = ig.Game.extend({

state: {},

...

gameOver: function()
{
	ig.system.setGame(GameOver);
},
});


GameOver = ig.Game.extend({

font: new ig.Font( 'media/04b03.font.png'),

init: function()
{
	// load level here or build your own
	this.loadLevel(LevelGameOver);
	
	// setup event handling
	ig.input.bind(ig.KEY.MOUSE1, 'mouse1');
},
update: function()
{
	// event handlers, etc.
	if (ig.input.state('mouse1'))
		ig.system.setGame(MyGame);
},
draw: function()
{
	// images, font draws, etc.
	this.font.draw('GAME OVER\n\nPLAY AGAIN', ig.system.width/2, ig.system.height/3, ig.Font.ALIGN.CENTER);
}

BTW, Jesse Freeman's Introducing HTML5 Game Development is quite good. Focused on impactjs, it's a fast read and you're ready to run with impactJS. Highly recommended. Chapter 7's "Creating Game Screens" isi just what you need.

Thanks alexandre, this is just what I needed. I bought the kindle version of the book, and the chapter on creating game screens was perfect. I did the same thing and extended game to make different screens... I don't really like his inner class method though, I prefer to keep things cleaner and so each screen is its own class/file.

Sounds good. Also, if you need to share state between ig.game subclasses, I recommend jsantell's amazingly convenient and well featured impact storage plugin. You can find it on pointofimpactjs.com in the plugins section. Cheers.