Handling Room Switching - 2D Top Down

[hobz]

I want to make a game like Smash TV or Binding of Isaac where you jump from room-to-room. I've been looking around for some tutorials and best practices on this, but I'm coming up short. Perhaps it's just because I don't know the proper words to google?

 

I'm struggling with how to create seperate rooms in the code, that the player can enter, and then get locked in. They then have to fight off the enemies in that room before they can leave. I also don't get how to handle the canvas scrolling in a best practice kind of way.

 

For now I want to avoid using an engine, as I want to understand the logic behind the 'room navigation'.

 

If anyone could point me in the direciton of useful links, it would be greatly appreciated.

 

Thanks!

[mattstyles]

The sliding screen thing could actually be solved with multiple canvasses and css, which would at least save you working out the movement (or that horrible phrase, tweening).

 

In pure canvas world, lets say your canvas is 600x600.

 

Whack one container at 0,0 and make it 600,600 and stuff everything in your current room in view.

Create another, translate it to 600,0.

 

At the trigger of some event (presumably, in this case, it is the player hitting the Eastern door in the current room) then render the initial state of the new room into the container at 600,0 and  start your animation to move the current screen and the new container 600px to the left.

 

The easiest way to do the animation is to subtract 1 (or whatever) from the x coords of the containers each tick until they reach a set value and then your animation has finished. There are more complicated ways, most of them being variations on the above, the idea being that you update position each tick until your desired state is reached, and then you stop.

 

Depending on how your character enters a 'scene', you'll either have to move it during the animation, or, wait until the animation is finished and then display the character in the start position.

 

If you're not sure how to trigger actions on when things in your game happen then try googling for event emitters, publish/subscriber pattern or even observer pattern. There are smarter and better techniques but using pub/sub is very easy conceptually and you'll get it working very quickly. The basic premise is that you register callbacks that are called when a certain event (or action) is emitted (or fired), for example, you probably have some sort of character walk manager which updates the position of your character when keys are pressed, you could attach a callback function that fires a notification when the walk manager fires a 'walk left' event, the walk manager then fires the 'walk left' event whenever the left key is pressed and the callback 'hears' the emission and your eventemitter code executes the callback and you get your notification. The nice thing about this is that your notification code is decoupled from your walking code and the logic probably lives where it should live, there are downsides too of course but they are more complicated to explain and you probably wont run foul of them for a while.