akifox-transform (com.akifox.transform.Transformation)

HAXE/OpenFL Affine transformation class

The akifox-transform class aims to provide an easy tool to manage affine transformations using a reliable pivot point. What are the affine transformation you might ask...

• read this wikipedia page
• read this great flash tutorial

NOTE

The class works quite fine with OpenFL 3, there are just few incompatibilities that might present problems. If you see a possible bug please test your app with the option -Dlegacy before filing an issue.

Example demo

Flash build: transformation-example.swf

You should get a window with a OpenFL logo square.

• Z to toggle debug drawings
• SPACE to reset the transformations
• Drag to move
• Click to change the Pivot Point
• Drag+SHIFT to rotate around the pivot point
• Drag+ALT to scale related to the pivot point
• Drag+CMD/CTRL to skew related to the pivot point (the cross center represents a 0,0 skew)
• 1 to 9 to set the pivot point on the relative anchor point (TOPLEFT, MIDDLELEFT,BOTTOMLEFT,TOPCENTER... BOTTOMRIGHT)
• UP, DOWN, RIGHT, LEFT Move 15px
• Q, A to Skew X ±15deg
• W, S to Skew Y ±15deg
• E, D to Scale */1.5
• R, F to Rotate ±15deg

Install

You can easily install the library thru haxelib

haxelib install akifox-transform

In your project add the library reference in your project.xml

<haxelib name="akifox-transform" />

and finally you can import it in your project class with this import

import com.akifox.transform.Transformation;

Documentation

You can read the full Library documentation here

Using the library

The Transformation class works on Matrix objects. Anyway usually once you've got a DisplayObject (Sprites, Bitmap...) you want to link this to a Transformation.

package ;
import openfl.display.Sprite;
import openfl.Lib;
import openfl.geom.Matrix;
import com.akifox.transform.Transformation;

class Main extends Sprite {

    public function new() {
      super();
      Lib.current.stage.addChild(this);

      //[...]

      var trf = new Transformation();
      trf.bind(yourDisplayObject);
      trf.setAnchoredPivot(Transformation.ANCHOR_TOP_LEFT);

      // these are the Pivot Point coordinates (they will not change unless
      // you change the pivot point position)
      var pivotCoordinates:Point = trf.getPivot();

      trf.rotate(20); //rotate by 20deg clockwise
      trf.skewX(30); //skew X axis by 30deg
      Actuate.tween(trf,1,{'scalingX':2,'scalingY'"2}); //scale 2X in 1s using Actuate
    }

}

But you can use the library to manipulate a Matrix without bind it to a DisplayObject

package ;
import openfl.display.Sprite;
import openfl.Lib;
import openfl.geom.Matrix;
import com.akifox.transform.Transformation;

class Main extends Sprite {

    var trf:Transformation;

    public function new() {
      super();
      Lib.current.stage.addChild(this);
      trf = new Transformation(new Matrix(),100,50);
        addChild(trf.spriteDebug); //debug
      trf.addEventListener(Transformation.TRANSFORM, onTransform); //debug
      trf.rotate(20); //rotate by 20deg clockwise
      trf.skewX(30); //skew X axis by 30deg

      var transformedMatrix = trf.matrix; //get the matrix for your own use!
    }

    public function onTransform(event:Event) {
      trf.debugDraw();
    }

}

Best practice

The idea behind the library wants the developer to use the transformation to change the object affine transformation properties.

So you can work on the large amount of transformation properties and methods as:

These assignments modify the target/matrix property according to the pivot point (all of the degree ones are provided in Rad as well)

trf.x = valuePixels;
trf.y = valuePixels;
trf.rotation = valueDegrees;
trf.skewingX = valueDegrees;
trf.skewingY = valueDegrees;
trf.scaling = valueFactor; //set X and Y scale to this factor
trf.scalingX = valueFactor;
trf.scalingY = valueFactor;

The methods provide instead a algebric sum change according to the pivot point (all of the degree ones are provided in Rad as well)

trf.translate(addPixelsX,addPixelsY);
trf.translateX(addPixels);
trf.translateY(addPixels);
trf.rotate(addDegrees);
trf.skewX(addDegree);
trf.skewY(addDegree);
trf.scale(multiplyFactor);
trf.scaleX(multiplyFactor);
trf.scaleY(multiplyFactor);

There are some interesting examples in different classes on the PLIK library that shows how to encapsulate the transformation class with an object. See the Gfx Class, or Text, or SpriteContainer for an example.

Transformation class

• Unit test
• Cleaning and documenting code
• Pivot point managing
• Support for motion.Actuate (properties linked to functions get and set)
• Events (Transform and Pivot change)
• Translate
  • Get
  • Set
  • Add
• Skew
  • Get
  • Set
  • Add
• Scale
  • Get
  • Set
  • Add
• Flip
  • Get (it looks like impossible!)
  • Set
• Rotate
  • Get
  • Set
  • Add