How to load next levels without game frameworks ?

[Asisvenia]

Hello everyone,

I'm new to programming and HTML5 game development. In these days I'm trying to make a platformer shooter game, but before starting that project I tried to learn many concepts such as collision detection, shooting, sprite animation etc.. and I've coded many of them with pure Javascript and HTML5 canvas. But I just don't know how to load next level when player reaches the destination.

If you wonder, why I don't use Phaser or any other game frameworks, I just wanted to make my first game with pure JS and HTML5 canvases after that project I'll start to learn Phaser

I found "Finite State Machine" logic to load the next levels but it made me confused because there aren't plain tutorials out there.. For example that article seems useful but I didn't figure out.

https://codeincomplete.com/posts/javascript-gauntlet-logic/

So, which way is best for the loading next levels ?

Thanks.

 

[Cronos72]

I think there are many ways to do it. I haven't tried phaser 3 yet, but generally phaser is pretty un-opinionated. Which means you can choose the paradigm that fits you best.
I like having a play state and a level object. The level objects acts as a controller for the play state. For example the game i am working on has a state called "play"  in which the instance of the level class determines how many units and where they get spawned. It also checks for the victory condition and if meet if it should create a new instance of a higher level.

 

[Asisvenia]

On 2/23/2018 at 11:02 AM, Cronos72 said:

I think there are many ways to do it. I haven't tried phaser 3 yet, but generally phaser is pretty un-opinionated. Which means you can choose the paradigm that fits you best.
I like having a play state and a level object. The level objects acts as a controller for the play state. For example the game i am working on has a state called "play"  in which the instance of the level class determines how many units and where they get spawned. It also checks for the victory condition and if meet if it should create a new instance of a higher level.

 

Thank you very much for your comment for me. I've used setIntervals and clearIntervals with if/else statements when they detect next state then they change the level as I expected. I don't know it is the best way but currently it works fine.

[mattstyles]

There's no great magic to it, an FSM is just a collection of nodes (states) and a collection of edges that determine mutation when the state changes.

Many libraries implement an FSM by including a load of 'lifecycle' methods to the states, which can help determine the edges i.e the transitions. Traditionally transitions are synchronous i.e. changing a game state variable from 'menu' to 'play'.

You mention loading, which is inherently asynchronous, so I suspect your problem is to due to treating a synchronous edge as an asynchronous mutation (which is totally possible, but often not worth it).

In your case I think you need that defined load state, which handles the asynchronicity, i.e. you enter the load state with a variable somewhere that states the 'next' level, based on this 'next' level variable you load all assets required for this level and then transition to your play state.

You shouldn't need setInterval or setTimeout, simply enter the load state, start loading stuff, listen for events when all loads have completed (and/or handle failures) then enter the play state.

 

[Asisvenia]

On 3/1/2018 at 1:53 AM, mattstyles said:

There's no great magic to it, an FSM is just a collection of nodes (states) and a collection of edges that determine mutation when the state changes.

Many libraries implement an FSM by including a load of 'lifecycle' methods to the states, which can help determine the edges i.e the transitions. Traditionally transitions are synchronous i.e. changing a game state variable from 'menu' to 'play'.

You mention loading, which is inherently asynchronous, so I suspect your problem is to due to treating a synchronous edge as an asynchronous mutation (which is totally possible, but often not worth it).

In your case I think you need that defined load state, which handles the asynchronicity, i.e. you enter the load state with a variable somewhere that states the 'next' level, based on this 'next' level variable you load all assets required for this level and then transition to your play state.

You shouldn't need setInterval or setTimeout, simply enter the load state, start loading stuff, listen for events when all loads have completed (and/or handle failures) then enter the play state.

 

Thanks for your advice. Next time I'll try to load those levels without using setInterval and setTimeout functions but this time I already implemented them :/