D4rkDragon
Lemon Dragon
Towns Folk
Welcome back everybody, for this third part of Let's Make a Game !
As I told you in the latest part, this one will be dedicated to buttons and pictures.
Oh, and considering it would be too short, I've decided to cover user input as well.
1> So you mean I'll be able to have my own buttons I can click ?
Yes. And see, it's even easier than you think !
Creating buttons with Haxeflixel is really easy, and in a fact, you can do it in three lines:
^ This should go before the Create() method in your state. Any state can have buttons, by the way 
(Also, please change the X and the Y and enter values for it. It'll be your button's position on your screen.
And swap the "Text" and the Method as well as you like. Method means that you need to make a method.*
(*Basic Method Creation in Haxe works like this:
^ Use only of the access identifiers, and swap myFunction with a better function name.
Also, if you make a function instead, replace Void with the type returned (Int, Float...)*, and don't forget to place a "return value;" at the end !
)
And now, to display it, just add this, before the super.create() line in your Create() method:
Run and enjoy ! Ok, if you haven't made a method yet (such as something that will print something on the screen), nothing will happen when you'll click your button. But, we'll cover that later !
2> Pictures or Sprites !
Nope, it has nothing to do with magic or stuff like that. People who ever tried to make a fan game or something like that might however find that term familiar, as it is used to qualify a sheet containing a character's animations, or simply a picture ripped from a game.
And here, we'll know how to display one ! Again, nothing too complicated, the guys behind HaxeFlixel at least made displaying pictures easy (Look out however, as a wrong path might reward you an error!).
Anyway, here's the simple way to create a FlxSprite:
Again, the same as for the button, don't forget about the add() part in your state's create() method.
Wait, what's the ?SimpleGraphic stuff ? What's the Dynamic type ?
I'll solve those questions in a few lines: The ? before a parameter means it's optional. If you don't want to specify it, you can leave it blank. And the Dynamic type is a type that can be anything. Kinda like C++'s "auto" keyword. But don't abuse it, as using the Dynamic type prevents the compiler from optimizing your code.
Anyway, pick your 3DSPedia avi, and save it to your computer. Then, go get it, and put it in your project folder (Generally, it's Documents\Projects\ProjectName\assets\images).
Normally, it'll appear in FlashDevelop, and it's good. Right-Click it, and select "Generate embed code..."
A new line will appear in your code. Cut it, and paste it where the SimpleGraphic argument should be.
If you have set up everything else, run the program.
And your 3DSPedia avi should pop up!
3> Keyboard Input, and moving an image !
This one is a bit tougher though. While with HaxePunk, you had the neat moveTo() method, HaxeFlixel makes it 1000x harder by having you do all the stuff. Not nice, but luckily enough for us, we can exploit another variable used by FlxSprite to make the thing easier.
Anyway, let's get started.
In order to handle a key being pressed, you need to type this:
^^ Swap Value by a number (Negative to go left, Positive to go right)
Or if you want to move on the Y axis, type this:
^^ Same here. (Negative = UP, Positive = DOWN)
Also, in the case where you want to make a 2D racing game, I might suggest you to take a look at the drag/acceleration value. It's used for deceleration/acceleration, but I won't cover it here (I don't want this tutorial to become something completely off-topic.)
Oh, and you might want to put those if() cases in your update() method
Also, take note: this works with any instance of the FlxSprite class.
4> What's next ?
Ok, this tutorial is the shortest of the series, but I wanted to cover those things apart from the others.
Next time, we'll get deeper with Haxe, and we'll make a class ! And I'll also cover a special editor for those of you who want to make RPGs/platformers easily ! Oh, and collisions !
Again, if you have any questions, please ask !
PS: Sorry for the lateness of this part, it's just that I was working on the next ones, and correcting typos of all of them at the same time (nope, I won't tell you how many parts are left !)
As I told you in the latest part, this one will be dedicated to buttons and pictures.
Oh, and considering it would be too short, I've decided to cover user input as well.
1> So you mean I'll be able to have my own buttons I can click ?
Yes. And see, it's even easier than you think !
Creating buttons with Haxeflixel is really easy, and in a fact, you can do it in three lines:
Code:
private var _myBtn:FlxButton;
_myBtn = new FlxButton(X,Y,"Text", Method)(Also, please change the X and the Y and enter values for it. It'll be your button's position on your screen.
And swap the "Text" and the Method as well as you like. Method means that you need to make a method.*
(*Basic Method Creation in Haxe works like this:
Code:
public/private function myFunction():Void
{
//Insert Code Here...
}Also, if you make a function instead, replace Void with the type returned (Int, Float...)*, and don't forget to place a "return value;" at the end !
Int: Integer. Can be Negative or Positive, but has a shorter "range" than UInt.
Uint: Unsigned Number. Can only be positive, but has a bigger positive range than Int.
Float: Decimal Number
String: An array of characters. ie: "Hi, 3DSPedia!" is a string.
Uint: Unsigned Number. Can only be positive, but has a bigger positive range than Int.
Float: Decimal Number
String: An array of characters. ie: "Hi, 3DSPedia!" is a string.
And now, to display it, just add this, before the super.create() line in your Create() method:
Code:
add(_myBtn);Run and enjoy ! Ok, if you haven't made a method yet (such as something that will print something on the screen), nothing will happen when you'll click your button. But, we'll cover that later !
2> Pictures or Sprites !
Nope, it has nothing to do with magic or stuff like that. People who ever tried to make a fan game or something like that might however find that term familiar, as it is used to qualify a sheet containing a character's animations, or simply a picture ripped from a game.
And here, we'll know how to display one ! Again, nothing too complicated, the guys behind HaxeFlixel at least made displaying pictures easy (Look out however, as a wrong path might reward you an error!).
Anyway, here's the simple way to create a FlxSprite:
Code:
private var _myPic:FlxSprite;
_myPic = new FlxSprite(X, Y, ?SimpleGraphic:Dynamic)Again, the same as for the button, don't forget about the add() part in your state's create() method.
Wait, what's the ?SimpleGraphic stuff ? What's the Dynamic type ?
I'll solve those questions in a few lines: The ? before a parameter means it's optional. If you don't want to specify it, you can leave it blank. And the Dynamic type is a type that can be anything. Kinda like C++'s "auto" keyword. But don't abuse it, as using the Dynamic type prevents the compiler from optimizing your code.
Anyway, pick your 3DSPedia avi, and save it to your computer. Then, go get it, and put it in your project folder (Generally, it's Documents\Projects\ProjectName\assets\images).
Normally, it'll appear in FlashDevelop, and it's good. Right-Click it, and select "Generate embed code..."
A new line will appear in your code. Cut it, and paste it where the SimpleGraphic argument should be.
If you have set up everything else, run the program.
And your 3DSPedia avi should pop up!
3> Keyboard Input, and moving an image !
This one is a bit tougher though. While with HaxePunk, you had the neat moveTo() method, HaxeFlixel makes it 1000x harder by having you do all the stuff. Not nice, but luckily enough for us, we can exploit another variable used by FlxSprite to make the thing easier.
Anyway, let's get started.
In order to handle a key being pressed, you need to type this:
Code:
if (FlxG.keys.anyPressed(["KEYNAME", "KEYNAME1"...])
^ Of course, swap KEYNAME with the name of a key. You can specify multiple keys by doing as I typed here.
Once you've done this, type this, straight after the if (no endline):
[code]_myPic.velocity.x = value;Or if you want to move on the Y axis, type this:
Code:
_myPic.velocity.y = value;Also, in the case where you want to make a 2D racing game, I might suggest you to take a look at the drag/acceleration value. It's used for deceleration/acceleration, but I won't cover it here (I don't want this tutorial to become something completely off-topic.)
Oh, and you might want to put those if() cases in your update() method
Also, take note: this works with any instance of the FlxSprite class.
4> What's next ?
Ok, this tutorial is the shortest of the series, but I wanted to cover those things apart from the others.
Next time, we'll get deeper with Haxe, and we'll make a class ! And I'll also cover a special editor for those of you who want to make RPGs/platformers easily ! Oh, and collisions !
Again, if you have any questions, please ask !
PS: Sorry for the lateness of this part, it's just that I was working on the next ones, and correcting typos of all of them at the same time (nope, I won't tell you how many parts are left !)
Last edited: