Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

This question already has an answer here:

I'm trying to create screen transitions similar to those found in Mega Man or Legend of Zelda (i.e. the active elements of the first screen are stopped as the screen scrolls in the direction of the new screen then the active elements of the new screen become active again). I'm making this for a 2D browser game written in JavaScript.
Right now, I can only make the screen scroll as long as the player remains on the edge of the screen; the player can still move when the transition is taking place, which stops the scrolling midway through transition. Below is the code I'm using to make this happen. If anyone can help me with this, I would really appreciate it.

//checks if player has touched right side of screen
//*used to change screen color
if(this.rightX == gameWidth){
    screenShift = true;
    if(bgDrawX2 > 600){
    screenShift = false;

if(this.leftX == 0){
    screenShift = true;
    if(bgDrawX2 < 1200){
    screenShift = false;
share|improve this question

marked as duplicate by Anko, Trevor Powell, Byte56 Mar 11 '14 at 23:00

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

So don't let the player move when the transition is taking place? What problem are you having, precisely? – Trevor Powell Feb 27 '13 at 22:52
Related Question (not focused on javascript though) – Constantin Feb 28 '13 at 9:27

I don't know most of your code but, apparently you have already a global variabel to hold the scrolling-state (screenShift). Why not simply ignore all incoming key/control-events until the variable screenShift is false again?

share|improve this answer

The way that I solved this in Hikari (a Mega Man clone) is by using different game "substates" and triggers to start the transitions.

There are triggers, called "transition regions" which sit at the sides of each room where the player can transition to another room. When the player enters the region, the game substate is set to "transitioning".

When the "transitioning" state is entered, all of the enemies in the current room are removed and the player controls are disabled. The transition takes place, moving the player and the camera into the next room. After the transition finishes, new enemies are spawned and the player's controls are restored.

Here's some pseudo C++-style code that describes the basic flow I'm using:

class SubState {
  void enter();
  void update(dt);
  void exit();

class TransitionSubState : public SubState {
  void enter() {
    // 1) Remove all enemies
    // 2) Disable player controls

  void update(dt) {
    // 1) Move the camera and the player into the new room
    // 2) Check to see if we're done

    if(in new room) {
      // Set the substate back to something else, we're done transitioning

  void exit() {
    // 1) Restore player controls
    // 2) Spawn enemies in the new room

This can all be implemented in JavaScript as well. The key is that you have some kind of enter/update/exit set of functions you call to complete the lifecycle of the transition.

The code in Hikari is actually a bit more complex, but at a high level that same thing is happening.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.