Launch Fighters – Part 3: Porting Launch Fighters to a Mobile Phone

Rotating the Stage and Assets

The obvious difference in a port between two devices is the screen size. The iRiver U10 has a screen size of 320 x 240 and landscape screen orientation. The Nokia 6680 has a screen size of 176 x 208 and runs in portrait mode. The aspect ratios are close enough that I decided to simply rotate the entire game 90 degrees and rely on Flash to scale the game down to the smaller resolution. I began by changing the stage size from 320 x 240 to 240 x 320, essentially rotating the screen orientation.

Because a movie clip's coordinate system will rotate with it, it was fairly simple to rotate the game, because I built most of the game functionality inside movie clips. I was able to go through each application state and select everything on the stage, rotate it 90 degrees clockwise, and then center everything.

Since I rotated the screen, I had to make a few adjustments in the code. Although most of the functionality is built into movie clips, the player's ship movie clip is on the main Timeline. This means the code controlling its movement will need to be updated. Additionally, the input controls on the two devices are different and will need to be updated as well.

Adjusting the Code for the Ship Movement

Since the stage size didn't change, the number of pixels the ship needs to move doesn't change. However, the direction that the ship needs to move does change. This was a simple matter of changing the movement from the x-axis to the y-axis (see Figure 1). The code change is in the frame labeled game on the left and right buttons.

Figure 1. Ship movement buttons indicated by red circles

Original iRiver U10 code:

on(keyPress "<Left>"){
    if(ship._x > 55){
        ship._x-=35;
        ship_position--;
    }
}

Nokia 6680 code:

on(keyPress "<Left>"){
    if(ship._y > 55){
        ship._y-=35;
        ship_position--;
    }
}

The same change is made for the keyPress "<Right>" button event on the same frame.

Adjusting the Code for the Game Controls

Since there are a number of game states that require user interaction, adjusting the code for controlling the game was the bulk of the changes required for the port. The code changes were made where interaction exists in the menu, instructions, game, and lose states.

Menu Control

The menu is controlled by pressing the up and down keys to switch the menu option, and the right key to select. Since the device itself will be rotated during game play, the original controls will no longer correspond to the orientation of the directional control on the device.

In the menu_mc movie clip on the menu frame, the key catcher button contains the code that controls the menu.

Original iRiver U10 code:

on(keyPress "<Down>"){
    if(btn._y < 150){
        btn._y+=32;
        menu_selection++;
    }
}
on(keyPress "<Up>"){
    if(btn._y > 100){
        btn._y-=32;
        menu_selection--;
    }
}
on(keyPress "<Right>"){
    if(menu_selection == 1){
        tellTarget("_level0"){
            gotoAndPlay("game");
        }
    }
    if(menu_selection == 2){
        tellTarget("_level0"){
            gotoAndPlay("instructions");
        }
    }
    if(menu_selection == 3){
        fscommand2("quit");
    }
}

Nokia 6680 code:

on(keyPress "<Left>"){
    if(btn._y < 150){
        btn._y+=32;
        menu_selection++;
    }
}
on(keyPress "<Right>"){
    if(btn._y > 100){
        btn._y-=32;
        menu_selection--;
    }
}
on(keyPress "<Down>", "<Enter>"){
    if(menu_selection == 1){
        tellTarget("_level0"){
            gotoAndPlay("game");
        }
    }
    if(menu_selection == 2){
        tellTarget("_level0"){
            gotoAndPlay("instructions");
        }
    }
    if(menu_selection == 3){
        fscommand2("quit");
    }
}

Instruction Control

Similar adjustments need to be made in the instructions state. The key catcher button in the instruction screen contains the code.

Original iRiver U10 code:

on(keyPress "<Down>"){
    tellTarget("_level0"){
        gotoAndPlay("menu");
    }
}
on(keyPress "<Right>"){
    tellTarget("_level0/instruct"){
        play();
    }
}

Nokia 6680 code:

on(keyPress "<Left>"){
    tellTarget("_level0"){
        gotoAndPlay("menu");
    }
}
on(keyPress "<Down>"){
    tellTarget("_level0/instruct"){
        play();
    }
}

Game Control

Since I already changed the code for the ship movement, the code left to change in this state is the fire button and the menu button. The weapon control code is located on the button that is now on the left side of the Stage and the code to get back to the menu is on the button on the opposite side of the Stage (see Figure 2).

Figure 2. Weapon and menu control indicated by red circles

Original U10 code for weapon control:

on(keyPress "<Down>"){
    tellTarget("ship"){
        play();
    }
    tellTarget("shotSound"){
        gotoAndPlay(2);
    }

Nokia 6680 code for weapon control:

on(keyPress "<Left>"){
    tellTarget("ship"){
        play();
    }
    tellTarget("shotSound"){
        gotoAndPlay(2);
    }

Original iRiver U10 code for menu button:

on(keyPress "<Up>"){
    gotoAndPlay("menu");
}

Nokia 6680 code for menu button:

on(keyPress "<Right>"){
    gotoAndPlay("menu");
}

Lose State Menu Button

There's only one button in the lose state that takes the player back to the menu and reinitializes the game. A key catcher button contains the code.

Original iRiver U10 code:

on(keyPress "<Down>"){
    gotoAndPlay("splash");
}

Nokia 6680 code:

on(keyPress "<Left>"){
    gotoAndPlay("splash");
}

Page 2 of 4

Previous Page

Next Page