Building a Canvas Editor - HTML5 Mobile Game Development - page 372

var player = stage.insert(new Q.Player({ x:100, y:0, z:3 }));
stage.insert(new Q.Enemy({ x:400, y:0, z:3 }));
stage.insert(new Q.Enemy({ x:600, y:0, z:3 }));
stage.insert(new Q.Enemy({ x:1200, y:100, z:3 }));
stage.insert(new Q.Enemy({ x:1600, y:0, z:3 }));
stage.add('viewport');
stage.follow(player);
stage.add('editor');
stage.editor.setFile(levelFile);
stage.bind('reset',function() {
Q.stageScene("level",0,Q.PlatformStage);
});
}, { sort: true }));
Q.load(['sprites.png','sprites.json',
'background-wall.png',levelFile],function() {
Q.compileSheets('sprites.png','sprites.json');
Q.animations('player', {
run_right: { frames: _.range(7,-1,-1), rate: 1/15},
run_left: { frames: _.range(19,11,-1), rate:1/15 },
fire_right: { frames: [9,10,10], next: 'stand_right', rate: 1/30
},
fire_left: { frames: [20,21,21], next: 'stand_left', rate: 1/30 },
stand_right: { frames: [8], rate: 1/5 },
stand_left: { frames: [20], rate: 1/5 },
fall_right: { frames: [2], loop: false },
fall_left: { frames: [14], loop: false }
});
Q.animations('blob', {
run_right: { frames: _.range(0,2), rate: 1/5 },
run_left: { frames: _.range(2,4), rate: 1/5 }
});
Q.stageScene("level",0,Q.PlatformStage);
});
The primary change is the addition of the levelFile variable, which stores the name of the level file
loaded into the editor. This can be changed by adding a parameter called level to the end of the URL, for
example:
http://localhost:3000/?level=level2
This would attempt to load data/level2.json instead of the default file data/level.json .
The second change marked here is adding the editor component to the stage. This component isn't written
yet, so running the code currently results in an error, but it will be written in the next section.
The code also binds to a new event on the stage called reset , which is used by the editor to tell the game
to reset itself (which the game does by just reloading the required scene).