Archive | Pixas RSS for this section

Pixas Editor Launched

Check the details at here:


Pixas Slope Primitives Added

The Four directions of Slope Primitives has been added into Pixas.

The parameters for the Slope constructor (take SlopeEast for example):


public function SlopeEast(_dms:SlopeDms = null, _color:SlopeColor = null, _border:Boolean = true)

_dms:SlopeDms - the SlopeDms dimension obj for rendering
_color:SlopeColor - the SlopeColor color obj for rendering
_border:Boolean - whether show border and highlight

The Slope Group has four sides: left slope, right slope, left side and right side. As it was introduced in the Color Tutorial, the SlopeColor.getByHorizontalColor(); static method helps you calculate values from light to dark automatically and returns an instance of SlopeColor which contains the values set.

Note: The horizontal side is taken as the reference side, in order to keep the same light source with other Primitives. However, you should keep in mind that the horizontal side does not really exist in each Slop Primitive. And the rendering effect for combination of Cube and Slopes will be like this:

Pixas Showcase Updating: Uncle Big’s Adventure

This time I decided to make Uncle Big Stand up~

Check the details at here:
Many thanks to the cartoon author UncleBig2D

Pixas has been added to Libraries

Pixas has been added to online building Libraries, which means from now on you can import the pixas classes when building applications on
Cheers, thanks to mash and sugi!

Check how it behaves here:

This is an examle:

And here’s the code:

	import com.bit101.components.*;
	import com.risonhuang.pixas.dimensions.CubeDms;
	import com.risonhuang.pixas.colors.CubeColor;
	import com.risonhuang.pixas.objects.PixelObject;
	import com.risonhuang.pixas.objects.primitives.Cube;
    import flash.display.Sprite;
     * @author max.huang
     * @see
    public class Main extends Sprite 
        private var vBox:VBox;
        private var vBoxColor:VBox;
        private var vBoxBorder:VBox;
        private var sliX:HUISlider;
        private var sliY:HUISlider;
        private var sliZ:HUISlider;
        private var colorChooser:ColorChooser;
        private var cb:CheckBox;
		private var outPO:PixelObject;
        public function Main():void 
            outPO = new PixelObject();
            outPO.x = Math.floor(stage.stageWidth / 2);
            outPO.y = Math.floor(stage.stageHeight / 2);
            //control menu
            vBox = new VBox(this , 5, 4);
            var lableA:Label = new Label(vBox, 0, 0, "Cube dimension:");
            sliX = new HUISlider(vBox, 0, 0, "X", updateCube);
            sliY = new HUISlider(vBox, 0, 0, "Y", updateCube);
            sliZ = new HUISlider(vBox, 0, 0, "Z", updateCube);
            var s:HUISlider;
            for each(s in [sliX, sliY, sliZ])
                s.setSliderParams( 6, 220, 100);
                s.tick = 2;
                s.labelPrecision = 0;
            sliZ.tick = 1;            
            vBoxColor = new VBox(this , 5, 110);
            var lableB:Label = new Label(vBoxColor, 0, 0, "Cube top side color:");
            colorChooser = new ColorChooser(vBoxColor, 0, 0, 0xE6E8E9, updateCube);
            colorChooser.usePopup = true;
            vBoxBorder = new VBox(this , 5, 180);
            cb = new CheckBox(vBoxBorder, 0, 0, "Cube border", updateCube);
            cb.selected = true;
        private function updateCube(e:Event = null):void
            while (outPO.numChildren > 0)
			var dms:CubeDms = new CubeDms(sliX.value, sliY.value, sliZ.value);
			var color:CubeColor = CubeColor.getByHorizontalColor(colorChooser.value);
            var cube:Cube = new Cube(dms , color, cb.selected);
			outPO.addChild(new PixelObject(cube));

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.x = 240;
po_out.y = 180;

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.