UnPacking the Code...
As explained in my excellent post Phaser Games states a well designed Phaser game has game states.
These game states are separate JavaScript programs or files. These are shown in my example as preload, create and update. These name come from the original tutorial from Phasers.io own tutorial section. These are all loaded separately like this :-
<script src="js/create.js"></script>
<script src="js/update.js"></script>
One of the main advantages or separating a game into separate sections is that we can have a reusable code sections that we can use elsewhere. Intelligent code design is about managing our code into logical sections. We could put all three together into one piece of code and it would perform the same function. However for larger games this get messy.
So lets think about a game that has multiple levels. Lets talk about how to design this using just the concept of game states!
So the preload section is all about loading up the sounds and the sprites ready to display them. Its like the RED in a traffic light sequence!
The Create is about the initial placement (physics ect..). The score is set to zero every thing is ready to go. Its like the AMBER in a traffic light.
The update is the game is playing we deal with animations, collision, score increasing dealing with damage and dying and ending the game or moving to next level. Its like the GREEN in a traffic light sequence!
So for One level we do preload then create and finally update.
So what do we do for 2 levels then ?
When its harder than you think bu the answer is this...
Preload
Create - level 1
Update - level 1
create: function() { },
update: function(){ },
Create - level 2
Update - level 2
So you do a create and update for each level as well and you only usually need one preload.
Ok this is all fairly basic coding really and also it is how I do code design and I am not saying this is the perfect way of doing this for large projects but... Its clean a it works for what we are looking at..
So the reality is you could have for a 2 level game code that looks like this ...
preload
Lose
GameOne and GameTwo have the basic setup of both create and update functions.
update: function(){ },
Using these basic principles you can create a multileveled Phaser game!
Goto http://phaser.io/examples and find the code you want and then put it into the correct structure and voilà you are away.
No comments:
Post a Comment