In this tutorial we will do two basic things:
- Make a Ball class in Haxe. Ball is a plain circle for simplicity.
- Make a MovingBall class which will create an object or instance of the Ball and animate it.
The target platform is Flash. You can download the attachment containing the code and resulting swf at the end of this tutorial.
Tutorials on Haxe basics:
Understanding the flash stage:
The animation will be shown on the flash stage.
Origin (0,0) is the top-left corner of the stage. The X-axis increases towards right and the Y-axis increases downwards. The measurements are in pixels.
The Ball.hx file below contains the Ball class. The constructor “new()” takes the radius and the colour of the ball as parameters. The init function draws a circle with centre at (0,0).
package com.qon; // Ball.hx file is in directory com\qon.
import flash.Lib;
import flash.display.Sprite;
/**
* ...
* @author Qoncious.com
*
*/
class Ball extends Sprite
{
private var _colour:UInt; // stores the colour of the ball
public var radius:Float;
public var vX:Float = 0; // stores the X-axis velocity of the ball
public var vY:Float = 0; // stores the Y-axis velocity of the ball
public function new (rad:Float = 20, col:UInt = 0x991166) // new() is the constructor
{
super();
radius = rad;
_colour = col;
init();
}
private function init():Void
{
graphics.beginFill(_colour);
graphics.drawCircle(0, 0, radius);
graphics.endFill();
}
}
The MovingBall.hx file:
package com.qon;
import flash.Lib;
import com.qon.Ball; // import the Ball class
import flash.display.Sprite;
import flash.events.Event;
/**
* ...
* @author Qoncious.com
*/
class MovingBall extends Sprite
{
private var _ball:Ball;
public function new()
{
super();
init();
}
private function init():Void
{
_ball = new Ball(25); // ball with radius = 25 pixels.
_ball.x = Lib.current.stage.stageWidth / 2; // X position at the centre of the stage
_ball.y = Lib.current.stage.stageHeight / 2; // Y position at the centre of the stage
_ball.vX = 3 + Math.random() * 3; // initial X-axis velocity between 3 and 6 (pixels per frame)
_ball.vY = 3 + Math.random() * 3;
addChild(_ball); // ball added on stage
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):Void
{
_ball.x += _ball.vX;
_ball.y += _ball.vY;
bounceFromWalls(_ball);
}
/**
* ...
* Bounces the ball back on the stage from the walls.
*/
private function bounceFromWalls(ball:Ball):Void
{
var radius:Float = ball.radius;
if (ball.x + radius > Lib.current.stage.stageWidth)
{
ball.x = Lib.current.stage.stageWidth - radius;
ball.vX *= -1;
}
else if (ball.x - radius < 0)
{
ball.x = radius;
ball.vX *= -1;
}
if (ball.y + radius > Lib.current.stage.stageHeight)
{
ball.y = Lib.current.stage.stageHeight - radius;
ball.vY *= -1;
}
else if (ball.y - radius < 0)
{
ball.y = radius;
ball.vY *= -1;
}
}
static function main()
{
Lib.current.addChild(new MovingBall());
}
}
In the init() function of the MovingBall class we created an object of the Ball class. The ball has a radius of 25 pixels.
Position the ball at the centre of the stage, and give a random value for both X-axis and Y-axis velocities.
Add the ball on the stage using the addChild() function.
The line “addEventListener(Event.ENTER_FRAME, onEnterFrame);”:
The onEnterFrame function is called every time there is an ENTER_FRAME event.
If the frame rate of the swf is 30 frames per second, the ENTER_FRAME event occurs 30 times in a second.
The “onEnterFrame” function:
In this function the value stored in _ball.vX and _ball.vY (X and Y components of the velocities) are added to the X-position and the Y-position of the ball respectively. So, both the X-position and the Y-position of the ball change on every frame. The ball changes its position 30 times in a second. It generates an illusion of continuous motion.
The “bounceFromWalls” function:
On every frame the _ball object is passed to the this function.
This function makes sure the ball does not go out of the stage.
Suppose, if in a frame the ball goes out of the right boundary of the stage.
It can be checked by the condition: ball.x + radius > Lib.current.stage.stageWidth. (Is the X-position of the centre of the ball + the radius of the ball greater than the width of the stage?). The ball is then repositioned at the right boundary and the X-component of the velocity is reversed by multiplying with it -1.
In the next frame the ball will move in the opposite(left) direction (because the X-component of the velocity is reversed) creating an illusion of bounce.
The movingBall.hxml file:
-swf movingBall.swf
-main com.qon.MovingBall
-swf-header 600:400:30:FFFFFF
-swf-version 10
Compile the MovingBall.hx file using the movingBall.hxml file.
