Index
Previous part: Getting the tools
In the previous part we have focused on getting all the tools running and configured correctly, now we will start by getting to know how Flixel works.
I have talked about the ‘gameloop’ before, it is something that is ran in the background by Flixel that keeps all objects up-to-date. We can’t update this unless we call the update() function. We don’t just want to run the regular object updates, we want to add our own things to update to it, we want to override it. In the PlayState.as file, add the following function.
override public function update():void
{
super.update();
}
This function will be called each frame and for now it will just do the regular updates of the object, since we call super.update() inside the function and have nothing else besides it.
Say we want to make the ‘Hello World’ text move across the screen, we can adjust the x value of the object, and increase it each frame.
// Increase the x position of the text object. text.x++;
After adding this to the update function, you will see that Flashdevelop has underlined the code we have just added, this is to indicate that there is something wrong with the code. The variable ‘text’ is declared locally in the constructor, so the scope is limited to only that function, if we want to use it inside the whole class, we will have to declare it as a private variable.
public class PlayState extends FlxState
{
// Create a variable 'text' of class FlxText.
private var text:FlxText;
public function PlayState()
{
// Instantiate 'text' with an x and y of 10, width of 100,
// and the classic text of 'Hello World'.
text = new FlxText(10, 10, 100, "Hello World");
// Add the created variable to the gameloop,
// so the Flixel engine will update it.
add(text);
}
override public function update():void
{
// Increase the x position of the text object.
text.x++;
super.update();
}
}
The scope of the ‘text’ variable now stretches across the whole PlayState class, so we can reference to it inside every function. You will see that the red line has disappeared, you can now compile the file by pressing ‘f5’.
The text moves towards the right side of the screen until it is disappeared completely. We want to keep it inside the window, so we will have to make sure that the text only moves when it is inside the screen. First we will have to import the FlxG class, this class contains a lot of useful values that you can call any time.
import org.flixel.FlxG;
In the update function we will add an if-statement to check if the x value of the text is smaller than the width of the screen.
// Check if the x of the text is smaller than the width of the screen.
if (text.x < FlxG.width)
{
// Increase the x position of the text object.
text.x++;
}
Compile and see what happens… the text still goes off-screen? This is caused by the fact that the x value is measured from the left-side of the object, so we will have to add the width to the calculation.
if (text.x + text.width < FlxG.width)
Since the width of the object is wider than the width of all the letters, you will now see that the text stops way before it reaches the edge of the screen. Say we want to change the text when it has reached the edge, we can adjust the text the same way as we adjust the position.
// Check if the x of the text is smaller than the width of the screen.
if (text.x + text.width < FlxG.width)
{
// Increase the x position of the text object.
text.x++;
}
// Else it will do the following
else
{
// Change the text.
text.text = "Hello mister edge, how are you?";
}
You will see that the text has changed once the first condition is not fulfilled. When typing the name of a variable and then a dot ‘.’, Flashdevelop will give you a list of functions and variables that you can use. Doing this can be useful if you want to quickly see what an object can do, without looking at the documentation.
Now for something that is very important in games, player input. We want to control objects on the screen, for example by pressing the arrow keys. Add the following code to your update function, and test it by pressing the ‘down arrow’ key.
if (FlxG.keys.DOWN)
{
text.y++;
}
Pretty cool, right? Now you are able to program the different movements, remove all the code in your update loop except for the ones used to control the object.
override public function update():void
{
// If down arrow key is pressed.
if (FlxG.keys.DOWN)
{
// Move down.
text.y++;
}
// If up arrow key is pressed.
if (FlxG.keys.UP)
{
// Move up.
text.y--;
}
// If left arrow key is pressed.
if (FlxG.keys.LEFT)
{
// Move left.
text.x--;
}
// If right arrow key is pressed.
if (FlxG.keys.RIGHT)
{
// Move right.
text.x++;
}
super.update();
}
These controls are pretty basic and a bit unbalanced, since pressing both up and right will lead to faster movement than just pressing one of the buttons. You can fix this by writing ‘else if’ for all the if-statements after the first if-statement, this will ensure that only one of them is used. This does, however, limit the movement to only one of the four directions, so you can’t move diagonally at all.
In games usually there is a different sprite animation for each direction the player moves, we can simulate this with the text example by changing the text for each movement direction. You should know how to do this by now, so go ahead and give it a try, when you are ready you can come back here and check if we both have found the same solution.
package com
{
import org.flixel.FlxState;
import org.flixel.FlxText;
import org.flixel.FlxG;
/**
* ...
* @author kcnh
*/
public class PlayState extends FlxState
{
// Create a variable 'text' of class FlxText.
private var text:FlxText;
public function PlayState()
{
// Instantiate 'text' with an x and y of 10, width of 100,
// and the classic text of 'Hello World'.
text = new FlxText(10, 10, 100, "Hello World");
// Add the created variable to the gameloop,
// so the Flixel engine will update it.
add(text);
}
override public function update():void
{
// If down arrow key is pressed.
if (FlxG.keys.DOWN)
{
// Move down.
text.y++;
// Change text.
text.text = "n";
}
// Else if up arrow key is pressed.
else if (FlxG.keys.UP)
{
// Move up.
text.y--;
// Change text.
text.text = "u";
}
// Else if left arrow key is pressed.
else if (FlxG.keys.LEFT)
{
// Move left.
text.x--;
// Change text.
text.text = "D";
}
// Else if right arrow key is pressed.
else if (FlxG.keys.RIGHT)
{
// Move right.
text.x++;
// Change text.
text.text = "c";
}
super.update();
}
}
}
You have learned about how updates work in Flixel and how you can use them to manipulate properties of objects. In the next part we will start by creating a Character class and giving it proper functions, while learning about object orientated programming.
You can download the code for this part here: Flixel Adventure Game Tutorial part 2 code