November 16, 2013

A football game based on Flixel game engine

The first time I read about the Flixel game engine was in an article talking about a game that could run at 60 fps on a smartphone: without using Stage3D! The game was very simple but I was really impressed by its performance. Later, I was required to make a soccer game similar to Sport head football and I thought it would be the perfect opportunity to test and use Flixel.

Flixel is a very popular library for fast 2D game development. It has been ported to many programming languages, although it was first written in Actionscript. You can find on the internet lots of tutorials and complex documentation about how to implement all parts of the game: collision system, particle system, tiles, maps, user input system, physics among others.

Football Game Flash

Football Game Flash

During the Football game’s development I really enjoyed using Flixel, so I’ll try to comment about one of the tricks I learnt while using it.

Box2D and Flixel. How to integrate Flixel with a physics engine

The Flixel library doesn’t have a physics engine but you can choose your favorite and integrate it. The main idea is to use “composition” ( wiki) to add a physical behavior to a native Flixel visual object. For this sample I´ll use the Box2D engine (link):

1. First we create our Box2D world in a very accessible place like PlayState class ( states are like screens in Flixel):

//  game class
public class PlayState extends FlxState
{
    public var _world:b2World;

override public function create():void
{
    //Set up the world
    setupWorld();
    var gravity:b2Vec2 = new b2Vec2(0, 9.8);
    _world = new b2World(gravity, true);
}

2. Then we define a class that extends a visual Flixel visual object like FlixelSprite, and in the constructor, we pass a reference to our Box2D world. Using this reference, we can create a Box2D object similar to the visual FlixelSprite and add this to the world.

public class B2FlxSprite extends FlxSprite
{
  // constructor
  public function B2FlxSprite(X:Number, Y:Number, Width:Number, Height:Number, w:b2World):void
  {
      super(X,Y);
      width = Width;
      height = Height;
      _world = w
  }
}

3. Next, we define a method to create the physical object. Flixel creates visual objects in 0.0 point and Box2D uses the w/2,h/2 point, and whilst the angles in Flixel are measured using degrees, Box2D uses radians. So, we need to make some little adjustments:

public function createBody():void
{            
     var boxShape:b2PolygonShape = new b2PolygonShape();
     boxShape.SetAsBox((width/2) / ratio, (height/2) /ratio);
 
     _fixDef = new b2FixtureDef();
     _fixDef.density = _density;
     _fixDef.restitution = _restitution;
     _fixDef.friction = _friction;                        
     _fixDef.shape = boxShape;
            
     _bodyDef = new b2BodyDef();
     _bodyDef.position.Set((x + (width/2)) / ratio, (y + (height/2)) / ratio);
     _bodyDef.angle = _angle * (Math.PI / 180);
     _bodyDef.type = _type;
            
     _obj = _world.CreateBody(_bodyDef);
     _obj.CreateFixture(_fixDef);
}

And the most important part: everytime our B2FlxSprite updates, it uses the position and angle of the Box2D object, making the corresponding adjustments to define its own position.

override public function update():void
{
       x = (_obj.GetPosition().x * ratio) - width/2 ;
       y = (_obj.GetPosition().y * ratio) - height/2;
       angle = _obj.GetAngle() * (180 / Math.PI);
       super.update();
}

Note that if we remove the Flixel object we should also remove the corresponding object from the Box2D world.

override public function kill():void
{
    _world.DestroyBody(_obj);
    super.kill();
}

4. Finally, in the Flixel main loop we update the Box2D world. Consequently, all Box2D objects are updated, not to mention all B2FlxSprite updates as well.

override public function update():void
{
    _world.Step(FlxG.elapsed, 10, 10);
    super.update();	
}

Using this procedure we can integrate our favorite physics engine very quickly.

Good points of Flixel

I´m not a specialist in game programming but without too much effort, due to its numerous advantages, I will be sure to use it again:

  1. You can build scenarios based on tiles very easily. This is highly recommended for platform games.
  2. Powerful and simple navigation system using States ( screens). You can add a login or settings screen very quickly.
  3. Some standard components like buttons and labels and a customizable preload.
  4. Utils classes like FlxG y FlxU to control the game, the user input, to manage assets and more functionalities.
  5. Very extensible y very well documented.
  6. The icing on the cake is that Flixel has been ported to multiple languages:

With these advantages starting to learn Flixel is a good idea if you want to make indie 2D games.

2 Comments

  1. Zouhair November 16, 2014

    Hi, i love the job with the football game based on flixel, i was wondering if there is a link to the game code on github or something like that?

Post a Reply

Your email address will not be published. Required fields are marked *