Forums » Help » How to separate ig.game instances from main.js

Normally main.js structured this way:

ig.module( 
	'game.main' 
)
.requires(
    'impact.game'
)

.defines(function(){

MyGame = ig.Game.extend({
    
	init: function() {

	},
    update: function() {
    	// Update all entities and BackgroundMaps
    	this.parent();
    },
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();
	}
});


// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

});

When I need more than one ig.game instance in main.js, the file becomes huge and hard to maintain. For example if I have several mini games in main.js each extended from ig.game then they will make main.js really big. Is there a good way to separate these game instance to some external file or plugin?

In my games I had the same problem. I simply created a "scenes" folder inside the game folder. In your case every mini game would be a separate .js file inside this folder that looks something like this:

ig.module( 
        'game.scenes.minigame1' 
)
.requires(
        'impact.game'
)
.defines(function(){

SceneMiniGame1 = ig.Game.extend({
        init: function() {
                this.parent();
        },
        
        update: function() {
                this.parent();
        },
        
        draw: function() {
                this.parent();
        },
    };
});
});

It has to be required in main.js like this:

.requires(
        'impact.game',
        'game.scenes.minigame1',
        'game.scenes.minigame2'
)

To load them you can either directly do it, when creating the canvas

ig.main( '#canvas', SceneMiniGame1, 60, 320, 240, 1 );

or you could use Impact's setGame method:

ig.system.setGame(SceneMiniGame2);

Hopefully not too confusing ;)

That's great help!
Can't wait to try it. Thank you!