In order to move the Paddle, we need to do the following things:
- Make the paddle into a class variable so that it can be accessed in other functions.
- Check for player UP and DOWN key inputs and move the paddle.
- Prevent the paddle from moving outside the screen.
Now we will need to modify our code a little:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
package; import flixel.FlxG; import flixel.FlxSprite; import flixel.FlxState; import flixel.text.FlxText; import flixel.ui.FlxButton; import flixel.util.FlxMath; /** * A FlxState which can be used for the game's menu. */ class MenuState extends FlxState { // class variables var paddle:Paddle; /** * Function that is called up when to state is created to set it up. */ override public function create():Void { super.create(); paddle = new Paddle(10, 50); add(paddle); } /** * Function that is called when this state is destroyed - you might want to * consider setting all objects this state uses to null to help garbage collection. */ override public function destroy():Void { super.destroy(); } /** * Function that is called once every frame. */ override public function update():Void { super.update(); if (FlxG.keys.pressed.UP) { // move paddle up paddle.y -= 5; } if (FlxG.keys.pressed.DOWN) { // move paddle down paddle.y += 5; } } } |
Step 1 is shown in lines 15-16 and 25-26 — The paddle variable is now a class variable, so that the update() function can later access it.
Step 2 is shown in lines 45-54 — Notice that to move the paddle up, we subtract the y-position, and vice versa. Remember, the origin of the screen begins from the top-left of the screen.
The same top-left origin applies for all objects (in this case, the paddle), unless you offset its origin — but for now we don’t need to worry about it.
Let’s now write some code to make sure the paddle doesn’t go out of the screen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
package; import flixel.FlxG; import flixel.FlxSprite; import flixel.FlxState; import flixel.text.FlxText; import flixel.ui.FlxButton; import flixel.util.FlxMath; /** * A FlxState which can be used for the game's menu. */ class MenuState extends FlxState { // class variables var paddle:Paddle; /** * Function that is called up when to state is created to set it up. */ override public function create():Void { super.create(); paddle = new Paddle(10, 50); add(paddle); } /** * Function that is called when this state is destroyed - you might want to * consider setting all objects this state uses to null to help garbage collection. */ override public function destroy():Void { super.destroy(); } /** * Function that is called once every frame. */ override public function update():Void { super.update(); if (FlxG.keys.pressed.UP) { // move paddle up paddle.y -= 5; } if (FlxG.keys.pressed.DOWN) { // move paddle down paddle.y += 5; } if (paddle.y < 0) { paddle.y = 0; } if (paddle.y > FlxG.stage.stageHeight - paddle.height) { paddle.y = FlxG.stage.stageHeight - paddle.height; } } } |
In lines 57-60, we make sure the paddle’s y-position does not exceed the screen’s top.
In lines 62-65, the code is a little longer. Remember that the y-position of the paddle is on its top-left, so to make sure that the paddle’s bottom doesn’t go out of the screen’s bottom, we need to add the paddle’s height into the equation.
Now go ahead and test your game again, back at the command prompt/terminal:
1 |
lime test neko |
And if everything was done right so far, you’ll be able to move your paddle with the UP and DOWN keys, and they won’t move out of the screen.
In the next post, we shall run through some code to create the second paddle.
Going through your tuts they are simply amazing. 🙂