Archive | July 2012

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

Pixas Tutorial Series Part 1: Building Your First Application

This entry is part 1 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, I will show you how to build a brand new application with Pixas. Probably you have no idea what does this object mean but no worries, I just want to bring the idea that how easy this Engine works.

The project is hosted on GoogleCode:
http://code.google.com/p/pixas/

In terms of your personal preference, three ways to get code are as follows:
check out the code through svn
download an rar file (15.4 KB)
download an swc file (11.0 KB)

Also, you can check out the code from GitHub:
https://github.com/rison/pixas

After that, you should add the source folder to your global or project Classpaths.

Ok, let’s take it simple. If you have any preceding knowledge about pixel art, to create an isometric pixel cube must be the first show you would like to see. Here’s the code:

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

var cube:Cube = new Cube();
var po:PixelObject = new PixelObject(cube);
po.x = 200;
po.y = 150;

addChild(po);

Cube is a type of Primitive, we create an instance of Cube, then assign it to the PixelObject’s constructor parameter.
The PixelObject holding all of the primitives is extended from Sprite, which means we can simply add it onto the stage.

Run this program and you will see this cube on your stage:

It’s really easy right? Let’s zoom in the cube to take a closer look at it:

Now we’ve made the first application work, and you can see all of the pixel lines arrange fine. In the next part, we will learn about the coordinate system.