Pixas Tutorial Series Part 5: Dimension

This entry is part 5 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, we will learn the dimension assigning.

Actually if you have followed the preceding parts, you might already have the idea about how to define the dimension for primitives.

For Brick, SideX and SideY, you should pass two parameters to the constructor which represent the 2 dimensions in x-axis, y-axis or z-axis.
For Cube, you should pass three parameters to the constructor which represent the 3 dimensions in x-axis, y-axis or z-axis.
For Pyramid, the bottom must be a square, which means you just have to pass one parameter to the constructor.
As follows:

var xDms:uint = 20;
var yDms:uint = 30;
var zDms:uint = 40;

var brickDms:BrickDms = new BrickDms(xDms,yDms);
var sideXDms:SideXDms = new SideXDms(xDms, zDms);
var sideYDms:SideYDms = new SideYDms(yDms, zDms);

var cubeDms:CubeDms = new CubeDms (xDms, yDms, zDms);
var pyDms:PyramidDms = new PyramidDms(xDms);

For Pyramid, you might notice that it has another parameter, which means whether to generate a taller pyramid. In 3d pixel isometric projection, there are two types of pyramid.

Now we try to build a pyramid group, assign colors for them by PyramidColor.getByRightColor() mentioned in the previous part, if you run the code below, you will get this:

import com.risonhuang.pixas.colors.PyramidColor;
import com.risonhuang.pixas.dimensions.PyramidDms;
import com.risonhuang.pixas.objects.primitives.Pyramid;
import com.risonhuang.pixas.math.Coord3D;
import com.risonhuang.pixas.math.ColorPattern;
import com.risonhuang.pixas.objects.PixelObject;

var dms:uint = 30;

//out pixel object
var po_out:PixelObject = new PixelObject();

//tall pyramid
var pyTallColor:PyramidColor = PyramidColor.getByRightColor(ColorPattern.YELLOW);
var pyTallDms:PyramidDms = new PyramidDms(dms, true);
var pyTall:Pyramid = new Pyramid(pyTallDms, pyTallColor);
var po_pyTall:PixelObject = new PixelObject(pyTall);

//short pyramid
var pyColor:PyramidColor = PyramidColor.getByRightColor(ColorPattern.GRASS_GREEN);
var pyDms:PyramidDms = new PyramidDms(dms);
var py:Pyramid = new Pyramid(pyDms, pyColor);
var po_py:PixelObject = new PixelObject(py);
po_py.position = new Coord3D((dms - 2) * 2, dms - 2, 0);

//the other short pyramid
var py2Color:PyramidColor = PyramidColor.getByRightColor(ColorPattern.PINK);
var py2Dms:PyramidDms = new PyramidDms(dms);
var py2:Pyramid = new Pyramid(py2Dms, py2Color);
var po_py2:PixelObject = new PixelObject(py2);
po_py2.position = new Coord3D((dms - 2), (dms - 2) * 3);

po_out.addChild(po_pyTall);
po_out.addChild(po_py);
po_out.addChild(po_py2);

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

So far, we’ve explored most of the Pixas engine, hope you find it interesting and would like to explore your own idea into it. Any comments, feel free to drop me a line.

Advertisements

Pixas Tutorial Series Part 4: Color

This entry is part 4 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, we will learn how to assign color to all of these pixel objects.

Firstly let’s take a look at the ColorPattern Class. There is a set of bright or comfortable color value defined as the const variables of the Class, which means you can get a certain color value as follows:

ColorPattern.PURPLE;
ColorPattern.PINK;

Or get a random color value from all of the color const variables defined in the ColorPattern Class like this:

var random_color:uint = ColorPattern.getRandomComfortableColor();

For the primitive just having one side like Brick, SideX and SideY, we set color by assigning an instance of SideColor to the primitive constructor, like this:

var brickDms:BrickDms = new BrickDms(60,60);
var sideColor:SideColor = new SideColor(0x666666,0x33CCCCCC);
var brick:Brick = new Brick(brickDms, sideColor);	

The frist parameter represents the border color and the second represents the side color. You can also assign an aRGB color value to parameters if you want to get transparent. In the preceding code, 0x33 indicates the alpha value of the side inner color.

For the Cube primitive, we set color by assigning an instance of CubeColor to the primitive constructor, like this:

var cubeDms:CubeDms = new CubeDms(60, 60, 60);
var cubeColor:CubeColor = CubeColor.getByHorizontalColor(ColorPattern.PINK);
var cube:Cube = new Cube(cubeDms, cubeColor);	

Every cube has three sides,an out dark border and an inner highlight border, so normally we should have prepared for five color parameters. However, to simplify this procedure, the CubeColor.getByHorizontalColor(); static method helps you calculate values from light to dark automatically and returns an instance of CubeColor which contains the values set. To invoke this method,just one color value is needed(usually color value of the lightest horizontal side).

This approach is highly recommended, but still you are allowed to assign all of the colors to create a CubeColor instance totally by yourself, like this:

var cubeColor:CubeColor = new CubeColor(0x949698, 0xFFFFFF, 0xC9CFD0, 0xE6E8E9, 0xEEEFF0);

For the Pyramid, it looks quite similar to the Cube. The only difference is to obtain color set by calling: PyramidColor.getByRightColor();

var pyColor:PyramidColor = PyramidColor.getByRightColor(ColorPattern.YELLOW);
var pyDms:PyramidDms = new PyramidDms(xDms);
var py:Pyramid = new Pyramid(pyDms, pyColor);	

That’s all done, now let’s use 125 cubes to make a 5x5x5 cube block with random colors. Run the code below and you will receive this:

Here’s the code:

import com.risonhuang.pixas.math.Coord3D;
import com.risonhuang.pixas.math.ColorPattern;
import com.risonhuang.pixas.colors.CubeColor;
import com.risonhuang.pixas.dimensions.CubeDms;
import com.risonhuang.pixas.objects.primitives.Cube;
import com.risonhuang.pixas.objects.PixelObject;

var po_out:PixelObject = new PixelObject();
for (var i:uint = 0; i <= 4; i++ )
{
	for (var j:uint= 0; j <= 4; j++ )
	{
		for (var k:uint = 0; k <= 4; k++ )
		{
			var c3d:Coord3D = new Coord3D(30 * i, 30 * j, (32 +1)*k);
			var cubeDms:CubeDms = new CubeDms (30, 30, 32);
			var cubeColor:CubeColor = CubeColor.getByHorizontalColor( ColorPattern.getRandomComfortableColor() );
			var cube:Cube = new Cube(cubeDms, cubeColor,false);		
			var po_tmp:PixelObject = new PixelObject(cube,c3d);
			po_out.addChild(po_tmp);
		}
	}				
}

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

In the next part, we will learn about the dimension of the primitive.

Pixas Tutorial Series Part 3: Primitives

This entry is part 3 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

Primitives are basic geometric shapes such as cube, pyramid. Due to the pixel arrangement restriction, we only care about isometric primitives in Pixas.

Since now Pixas has a set of 5 primitive 9 primitive shapes, and more isometric primitives will be added into this engine in the future. These primitives are showed as follow:
• Update: 4 directions Slope primitives have been added

For each primitive, we will go through the parameters for the constructor.

Brick
public function Brick(_dms:BrickDms = null, _color:SideColor = null, _border:Boolean = true)

Parameters
_dms:BrickDms - the BrickDms dimension obj for rendering
_color:SideColor - the SideColor color obj for rendering
_border:Boolean - whether show border

SideX
public function SideX(_dms:SideXDms = null, _color:SideColor = null, _border:Boolean = true)

Parameters
_dms:SideXDms - the SideXDms dimension obj for rendering
_color:SideColor - the SideColor color obj for rendering
_border:Boolean - whether show border

SideY
public function SideY(_dms:SideYDms = null, _color:SideColor = null, _border:Boolean = true)

Parameters
_dms:SideYDms - the SideYDms dimension obj for rendering
_color:SideColor - the SideColor color obj for rendering
_border:Boolean - whether show border

Cube
public function Cube(_dms:CubeDms = null, _color:CubeColor = null, _border:Boolean = true)

Parameters
_dms:CubeDms - the CubeDms dimension obj for rendering
_color:CubeColor - the CubeColor color obj for rendering
_border:Boolean - whether show border and highlight

Pyramid
public function Pyramid(_dms:PyramidDms = null, _color:PyramidColor = null, _border:Boolean = true)

Parameters
_dms:PyramidDms - the PyramidDms dimension obj for rendering
_color:PyramidColor - the PyramidColor color obj for rendering
_border:Boolean - whether show border and highlight

For example:
Here’s the code to create a brick primitive, with both 120 pixel dimension on x-axis and y-axis:

var brickDms:BrickDms = new BrickDms(120,120);
var brick:Brick = new Brick(brickDms);

This time let’s add SideX and SideY to the preceding code:

import com.risonhuang.pixas.objects.primitives.*;
import com.risonhuang.pixas.colors.SideColor;
import com.risonhuang.pixas.dimensions.*;
import com.risonhuang.pixas.math.Coord3D;

//color obj
var sideColor:SideColor = new SideColor(0x87A900,0xCCFF00);

//brick
var brickDms:BrickDms = new BrickDms(120,120);
var brick:Brick = new Brick(brickDms, sideColor);
var po_brick:PixelObject = new PixelObject(brick);

//SideX
var sideXDms:SideXDms = new SideXDms(120, 60);
var sideX:SideX = new SideX(sideXDms, sideColor);
var po_x:PixelObject = new PixelObject();
po_x.primitive = sideX;
po_x.position = new Coord3D(4, 0, 8);
			
//SideY
var sideYDms:SideYDms = new SideYDms(120, 60);
var sideY:SideY = new SideY(sideYDms, sideColor);
var po_y:PixelObject = new PixelObject();
po_y.primitive = sideY;
po_y.position = new Coord3D(0, 4, 8);

//out PixelObject container
var po_out:PixelObject = new PixelObject();
po_out.addChild(po_brick);
po_out.addChild(po_x);
po_out.addChild(po_y);
po_out.x = 240;
po_out.y = 160;

You may see that we create a SideColor obj firstly for these three primitives.
And in the SideX and SideY part, we didn’t pass the sideX and sideY instance into the construtor, instead of, we set the primitive property after the instance was created. These two approaches are both OK. Actually, you can retrieve and modify the “primitive” property any time with the PixelObject instance.

Runs the code and you will receive this:

Now we know about the primitives, in the next part, we will learn the color manipulating.

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.

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.