Jump to content

How to load next levels without game frameworks ?


Asisvenia
 Share

Recommended Posts

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.

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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 :/

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...