View source for Building the Side Scroller Template

===Templates===


This tutorial explains how we built the ''Side Scroller'' template.  The template is included ready-made in the ''Shoot 'em Up Kit'' and you can [[Create from a Template|create a new game using it as a starting point]].  


===Build the Game===

Create a new Empty Project
 

[[File:Asteroids1.jpg|link=]]


Give the project a name.


Select ''2D with models''


Click the ''OK'' button to create the project.


[[File:Asteroids2.jpg|link=]]


Select the [[Level Editor|Level Editor]]
 

[[File:Asteroids3.jpg|link=]]


The scene is empty except for a single directional [[Add a Light|light]].  A grid to help visualise the area is shown.  Because we selected to create a 2D game the objects we place will be placed on this plane by default.




'''Modify the End of Level Conditions'''


To make the game easier and quicker to test, we’ll first remove the ''End of Level condition'' that all enemy can be killed.  This condition prevents us from testing a level until there is at least one enemy.  So, we will remove it for now.


Open the Level Settings by clicking the [[File:ToolsMenu16.png|link=]] ''Level Settings'' icon on the [[Tools Menu|Tools Menu]].
 

[[File:Side1.png|link=]]


Clear the ''All Enemy Killed'' checkbox in the 3rd column.


Now we’re ready to start building our level and, once we’ve [[Add a Player|added a player]], can test the game at any point by clicking the [[File:ToolBarTestGame.png|link=]] ''Test Game'' or [[File:ToolBarTestLevel.png|link=]] ''Test Level'' icons on the [[Tool Bar|Tool Bar]].




'''Add some background tiles'''


Set the ''Layer'' to 2 in the [[Tools Menu|Tools Menu]] so we can add some background tiles behind the player


Add a [[File:ToolsMenu01.png|link=]] [[Add Scenery|Scenery item]].  Select ''Tile – Tech 02'' and place into the scene.
 

[[File:Side2.png|link=]]


Set ''Rotation Pitch'' to 270 in the [[Scenery General Tab|properties window]].


[[Level Editor#Moving Around the Level|Zoom out]] using the mouse wheel so that you can see more of the level.


Select ''Snap to Object'' in the [[Tools Menu|Tools Menu]] 


Copy using the [[File:ToolBarCopy.png|link=]] copy icon on the [[Tool Bar|Tool Bar]] (make sure the tile is selected).


Paste a Clone using the [[File:ToolBarPasteInst.png|link=]] Paste Instance icon on the [[Tool Bar|Tool Bar]]


Once you’ve pasted three in a column select them all (CTRL+Click) and [[File:ToolBarCopy.png|link=]] copy


[[File:ToolBarPasteInst.png|link=]]Paste Instance to paste all 3 
 

[[File:Side3.jpg|link=]]




'''Add a Player'''


Set the ''Layer'' to 0 in the [[Tools Menu|Tools Menu]]


Turn off ''Snap to Object'' in the [[Tools Menu|Tools Menu]] 


[[Add a Player|Add a Player]] by clicking the [[File:ToolsMenu02.png|link=]] ''Player'' icon on the [[Tools Menu|Tools Menu]].  Select ''Sci-Fi Ship 01-B'' and place it in the level.


In the  [[Player General Tab|''Properties'']] window:

Set ''Rotation Yaw'' to 90.  ''Pitch'' to 0 and leave ''Roll'' at 0.

Select an [[Input Definition|Input Definition]].  Choose ''4 Direction (XY) + Fire''.

Select a [[Movement Definition|Movement Definition]].  Choose ''Quadratic Axis''.




'''Add an [[Active Area|Active Area]]'''


We are now going to add an area of the screen that the ship can move around in.  The player will be able to move around freely in this area.  Later, we will make this area move to the right (the +X axis) at a constant velocity so that the player will always be travelling along the level but still be able to move freely within the active area.


Add a [[File:ToolsMenu10.png|link=]] [[Add a Trigger|Trigger]].  A sphere will appear.  Place the sphere anywhere on the map and the ''Properties'' window will open.
 

[[File:Side4.png|link=]]


Set the ''Shape'' to be a ''Box''.

Set the ''Name'' to ''Player Area''.

The ''Position'' and ''Size'' properties are set as a percentage of the screen.  We will allow the player to move within 40% of the screen width and 80% of the screen height.

Set the ''Position X'' to 30 and ''Position Y'' to 50.

Set the ''Size X'' to 40 and ''Size Y'' to 80.
 

[[File:Side5.jpg|link=]]


Select the Player ship again.  You can either click the ship or use the [[File:ToolsMenu18.png|link=]] ''Select Item'' option on the [[Tools Menu|Tools Menu]] to select it from a list of all items in the level.


In the [[Player General Tab|General properties window]], click [[Active Area|''Active Area'']] to open a list of areas.  The Player Area which we’ve just created will be in the list.  Select the Player Area and the window will close and we’ll get two new options for our Area.

 
[[File:Side6.png|link=]]


Leave the ''Area Movement'' property as ''Fixed'' because we want the area to remain fixed to a region of the screen (because we set it to be a screen-based trigger).  The level will scroll by, but the player will always be constrained to the 40% of the screen width and 80% of the screen height.


Set the ''Area Action'' property to ''Stop'' so that the player ship will stop if it reaches the limits of the active area. We could have the player wrap-around the area, or bounce off the edge, but classic side-scrollers simply make the player stop at the edges of the active area.

 
[[File:G4.png|link=]]




'''Set the Camera'''


Create a new camera by clicking the [[File:ToolsMenu06.png|link=]] ''Camera icon'' on the [[Tools Menu|Tools pane]] and place it near the player’s starting location in the level.  You will see a green icon showing where the camera is targeting and you may also see a yellow model of the actual camera location.

 
[[File:Side8.png|link=]]


We can set the camera to follow the player or any other in-game item. For a classic side-scroller game we needn’t do this as the player can move around the screen independently of the Camera. However, we could use the tracking feature to ensure the camera remains a fixed distance from the player.


Clicking the ''Tracking Entity'' property will allow us to select which item the camera will follow.  Select ''Player_1'' from the list.  Some new options will appear in the ''General properties window''.


We can set the ''Tracking Distance'' property to control how far way the camera will be from the Entity.

 
[[File:G5.png|link=]]


We will set the ''Tracking Style'' to ''Fixed Direction''.  This will leave the camera pointing in a single direction, which is very common in side-scroller games.  We don’t need to set any ''Target Offset'' values because we are using a fixed direction.




'''Moving Camera'''


Side-scrolling style games are set in a constantly moving level. We can achieve this by setting the Camera to move at a constant velocity.


Set the ''Movement Style'' property to ''Velocity''; and set the speed in which you’d like the camera to move using the ''Velocity X, Y and Z'' properties.

 
[[File:G8.png|link=]]


The camera will now move in the X direction while the player is free to move around in the active area which is contained within the screen.




'''Automatically Moving Player'''


The Player is free to move around within the [[Active Area|active area]] and will be pushed forward if the player ship reaches the back ‘wall’ of the active area.  This method is used by some side-scrollers.


Another option is to automatically move the player forward at the same speed as the camera.  We can do this using the Player’s [[Movement Definition|Movement Definition]].


Select the Player ship by clicking it or using the [[File:ToolsMenu18.png|link=]] ''Select Item'' option on the [[Tools Menu|Tools Menu]]


On the ''Movement Definition'' property, which we set to ''Quadratic Axis'' earlier, click the ''Go to Definition'' arrow.
 

[[File:Side11.png|link=]]


The ''Quadratic Axis'' definition will open.
 

[[File:Side12.png|link=]]


The ''Velocity'' type is already set to ''Constant'', which will provide a constant velocity force to any item this definition is applied to.  In this example, it is the player ship.


Change the ''Velocity X'' value to 20, which will match the value we set for the Camera.


Click the ''OK'' button to close the window.


A list of all the [[Movement Definition|Movement Definitions]] will open.  Close this list as we don’t want to work on any other definitions.




===Test the Game===


Click the [[File:ToolBarTestGame.png|link=]] ''Test Game'' or [[File:ToolBarTestLevel.png|link=]] ''Test Level'' icons on the [[Tool Bar|Tool Bar]] to test the game.


The player will now be moving at the same speed at the camera and so will not need to be constantly moved forward using a controller.


The player can move around within the bounds of the active area and the player can fire.


The player and camera will move slowly along the level.