Forums » Help » Startup menu with custom background image

This might be pretty simple but I can't figure it out.

I want to make a startup menu with my own background image and with instructions, like x for jump, c for shoot and so on.

There is a sample of this in the biolab game, http://playbiolab.com/, where you have to press x or c to play.

Anyone have any suggestions for how to implement this?

Its fairly simple add this at the end of your main.js before your canvas call.

Intro = ig.Class.extend({
        introTimer: null,
        font: new ig.Font( 'media/04b03.font.png' ),
        init: function() {
            this.timer = new ig.Timer(30);
        },
        run: function() {
        
        if(this.introTimer.delta()<0){
            this.font.draw("INTRO MESSAGE", 100, 100, ig.Font.ALIGN.CENTER);
        }else{
            myGameMode = 1;
            ig.system.setGame(MyGame);
        }
                    
        
        }
});

Now in your main.js init function add

    if(myGameMode == 1){
			this.loadLevel(MyGameLevel);
			}

add this to your main.js

run:function(){
		if(myGameMode > 0){
			this.update();
			this.draw();
		}else{
			ig.system.setGame(Intro);
		}
	},

finally add thisline after the intro function

var myGameMode = 0;

What it does really is also simple - you set global variable that will pretty much direct what happens with your game.

When the variable myGameMode is set to "0" its the intro mode. When its larger than 0 it runs the game's draw/update loops.

the whole trick is in ig.system.setGame() calls.

This intro will position the intro message at 100,100 coords and display it for 30 seconds and then set the myGameMode to 1 and setGame to MyGame. Of course you will need to change MyGame to anything you called your main game function.

If you want to set game on key press just change this bit of code

 if(this.introTimer.delta()<0){
            this.font.draw("INTRO MESSAGE", 100, 100, ig.Font.ALIGN.CENTER);
        }else{
            myGameMode = 1;
            ig.system.setGame(MyGame);
        }

and rather react on timer set it to react on keypress. If you want to add images, animations etc. Read up on images and animations in the docs.

Good code, i couldnt figure out by myself, if somebody is trying this solution i think there is an error in this line :


this.timer = new ig.Timer(30);
//put this one
this.introTimer = new ig.Timer(30);