Main game loop

[MrOrphanage]

Hi all,

I'm fairly new to programming so I'm sorry if this is an incredibly stupid question. I'm writing a simple dice game in Phaser. Things are working for the most part but I'm having an issue figuring out how to implement turns. Here's a quick rundown of the game. You play against the AI. You have 5 dice that you roll. The computer then does the same. Then you get to roll again. Then the computer. That happens for a total of 3 turns. Then the round is over and a winner is declared. Next round - the computer starts first. Rinse. Repeat.

The problem I'm running into is that I need a proper game loop to handle the round resets and I have no clue where to put it. I could just make a function called gameLoop or something that will count turns and call itself after the third turn is finished. However, I'm not sure where that function should get called then. Where would I actually tell Phaser to start running gameLoop? In the create statement?

Any help is appreciated!

 

[spinnerbox]

Here is an example of a complete game: Breakout

On "preload" state you load assets, sounds, images, sprites, atlases etc.

On "create" you instantiate game objects with those assets and put them on stage visually.

On "update" you update what your object should do 60 times per second or as much as the computer can process. It varies. This rate is called fps or frames per second. 24 to 30 fps is good animation rate. 60 is very smooth. It is not fixed to 60 but 60 is the largest fps Phaser will allow. There is also fixed rate calculations, good for physics based animations. Cannot recall the name. Frame based animations might have lag i.e it varies, so it will not be smooth at times. But physics based animations always works on fixed rate. For example each second or each millisecond.

Consult Phaser State Class

There are other things you can do, like pause the game loop or shut it down, etc...

[scheffgames]

Take a look at some game examples made with Phaser.

You should put your loop inside update since that's called every frame. Inside create init your variables. 

How you actually manage to implement this specific game it's a matter of preference and figuring out what it works. Start simple - when the game starts have it only allowing you to roll 5 dice. Than take a look at the code and figure out how to change states and let the computer roll the dice. And so on, and so on. 

[MrOrphanage]

Thanks for the responses! I'm looking into it all more. The truth is I had the loop inside update but I was worried that wasn't the correct place since it's called 60 times per second. And evaluating whether the remainingTurns variable is greater than zero 60 times per second seemed unnecessarily wasteful to me. But if there's not some obviously-better solution, I'll continue down this path without worrying about inefficiencies.

[mattstyles]

I wouldn't worry about inefficiencies until they become a problem, doing a simple check isn't going to harm anything 60 times a second. Knowing when and what might become a problem further down the line takes a lot of experience and even then you might be surprised how far you get by taking the easier route, in any case, the easier route should result in working software faster and you can then iterate based on that working experience (rather than guessing).

If you're worried about this particularly inefficiency then its probably because Phaser's update loop isn't suitable for your project (not for this bit anyway). I think I would approach it (using Phaser and its raf update loop) by using pub/sub (event emitter) that switches some variables and the update loop then acts based on those variables, kind of like a switch (infact it could very well be a switch), you might even decide you need a couple of states for this stuff, one for the AI turn, one for the user turn. The event emitter thing might work by:

* enter AI game state

* set an array of 5 integers all set to 0 (or null)

* set a timeout for a random time between 1s and 3s

* in the update

*   for each item in the array grab the corresponding sprite and set it to either the value of the array item, or to a blank face if null/0

*   grab the first null/0 entry in the array, lets say its the first one, grab the sprite corresponding to that and update its animation frame

* that update logic in the above bullet point keeps going until...

* the timeout expires and an event is triggered, this updates the first null slot in our array to a random number between 1-6

* if all elements in the array are > 0 or non-null then we update the game state to the user state for the user turn (or show a button that the user press to initiate their turn, whatever)

* if not then the we queue up another timeout and the update keeps on ticking

This is attractive in a number of ways because we've separated our view layer from our logic layer i.e. the view layer is pretty dumb, it just queries the array and displays the correct graphics in their places, you could get fancier with what the array holds but simple integers would suffice to get going.

As Phaser uses PIxi underneath for graphics we can take the approach that we're going to re-render the entire screen each tick and let the rendering engine (Pixi in this case) work out an efficient way of doing it (it does this with a scene graph and dirty checking, I'd be surprised if most other popular renders didn't work in a very similar fashion). This approach is easy for us as devs to understand and work with, "here's the data, view layer transforms data into pretty graphics, keep doing it", no intermediate state flicking around, just a persistent data set and some process to transform it into a visual representation, no worrying about syncing stuff up, just change the data and on the next loop round the view layer will transform it into the next visual state, pretty simple and simple is good.

[MrOrphanage]

Thanks for all the suggestions matt, looking into them now!