Make a Quick Flash Game using Flixel Part-1
Lets get into Game making, shall we. Now get ready with your FlashDevelop(Download), Set it up if you haven’t(Setting up FlashDevelop), go through the hello World program for Flixel (in case to check the flixel stuff) and come back here. Lets make a Flash Game using Flixel.
What we are going to create, looks in paper(well, not exactly) like this.
“A Game of size 640×480 (width x height of screen), arrow keys to move right and left & Up key to jump, Hit the bouncing Flixel Text as much as you can, and display the score. If Flixel text hit the ground, its GameOver”.
We will start making a quick working game and modify it with sophisticated features later (check if it works before doing big things !)
First version looks like this
PLAY Version 1.0
Now lets start making it. Setup the Main Class. Main class inherits the FlxGame Class which is the very important to flixel i think.
In the Main function (constructor) call the super() with arguments 320, 240 (width and height & is Zoomed to Double the size by passing the Zoom Factor, which makes it 640,480), GameState class(in this case ‘StartLevel’), 2 as Zoom Factor. And we turn on forceDebugger to true to check various things during gameplay.
Click to see the Source Code.
[expand title=”Show Code” swaptitle=”Hide Code”]
[snippet id=”398″]
[/expand]
Now create a new Class called StartLevel in src folder (using super class as FlxState ) and make it look like this (after you read about whats going on in there).
We override two main function.
Create function – Called on creating the level, can be used to initialize our things.
We create 3 things, Floor, Player and FlixelText. Floor is a grey rectangle below. Player is a red box and flixelText is a Text.
To make the floor, we create a sprite at position of top-left corner of floor and fill with grey using makeGraphic() function.
To make player, we use same method as floor.
To make flixeltext, no further method is necessary other than creating a new instance of it (eg. new FlxText(x,y,”Tex”);)
And after creating this we add this to current level using this.add(Stuff-to-add);
Add gravity to player by having a downward acceleration by player.acceleration.y = 200;
Adjusting the properties of FlixelText to have a bouncy feel & gravity and velocity.
Make floor immovable to make it static.
Update function – Called continuously, can be used to do everything(Checking keys, mouse, change speed) while the game is running.
Collide the player with the Floor (Flixel takes care of the calculations). Collide player with the Flixeltext and make the text Bounce. we use FlxG.collide(object1,object2,function-called-when-collision-occurs); For this. In this function we change flixelText’s x velocity and y velocity(upward).
We check for continuous pressing of Left and Right keys using FlxG.keys.LEFT & FlxG.keys.RIGHT and adjust the x velocity of player. We check for single press of UP key using FlxG.keys.justPressed(“UP”) and also R key to reset the Level. That’s all. The game should now be working fine. In case your’e stuck somewhere feel free to comment or contact me. The final code looks like this.
Click to see the Source Code.
[expand title=”Show Code” swaptitle=”Hide Code”]
[snippet id=”399″]
[/expand]
In the next part we’ll look into adding sounds and music & couple of visual effects and tweaking to make our game a better one.
