Pixas Tutorial Series Part 2: Coordinate System

This entry is part 2 of 5 in the Pixas tutorial series
part 1: building your first application
• part 2: coordinate system
part 3: primitives
part 4: color
part 5: dimension

In this part, you will learn how the coordinate system is defined in Pixas.

Coordinate system in Flash 2D stage is defined as below:

However in Pixas, the 3D coordinate system is defined like this:

In Pixas, every PixelObject has its own Pixas 3D coordinate system, and is located in the origin point (0,0,0) by default. Also, since PixelObject is extended from Sprite, it has its own Flash 2D coordinate system, and is located in the origin point (0,0) by default.

Let’s go back to the cube in the previous part. It is located in the Pixas coordinate origin point(0,0,0) as the figure shows below:

To assign an initial position for the cube, you can pass the 3D coordinate position Object to the PixelObject constructor method when create a new instance. Like this:

import com.risonhuang.pixas.math.Coord3D;

var c3d:Coord3D = new Coord3D(40, 40, 40);
var po:PixelObject = new PixelObject(cube,c3d);

You can also set the member value of the cube instance to change the position. Like this:

po.position = new Coord3D(40, 40, 40);

Or simply modify the position of X,Y,Z. Like this:

po.positionX = 40;
po.positionY = 40;
po.positionZ = 40;

The value 40 set above is the distance in the 3D coordinate system, try not to confuse it with the screen distance on the flash stage.

Note that you should know when to move the PixelObject in Flash coordinate and when in Pixas coordinate. Generally, it’s recommended to create an empty PixelObject nesting the other PixelObjects. Move this PixelObject on the stage by changing its Flash coordinate(po_out.x or po_out.y), and always to use the Pixas coordinate for the other PixelObjects nesting inside. So the whole code for the cube example should be like this:

import com.risonhuang.pixas.math.Coord3D;
import com.risonhuang.pixas.objects.primitives.Cube;  
import com.risonhuang.pixas.objects.PixelObject;  

var po_out:PixelObject = new PixelObject();
var c3d:Coord3D = new Coord3D(40, 40, 40);
var cube:Cube = new Cube();
var po:PixelObject = new PixelObject(cube,c3d);

po_out.x = 240;
po_out.y = 180;
po_out.addChild(po);
addChild(po_out);

Now we have learnt the coordinate system of Pixas and how to place a certain PixelObject. In the next part, we will get to know the primitives.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s