Hello cube

Note

Probably first step with pixeopolis could be hard without knownledge about structure.

To understand structure of pixelopolis, please read this document: Structure

In first time, It would be great to create own cube. Cubes have an ideal shape and are very friendly for environment and your friends!

Our cube should be like as:

../../_images/hello-cube.png

The code is very simillar to CSS code - if don’t know about website styles, we have a super-shorcut syntax: (Schema)

rule {
    param: value; /* comment */
}

another-rule.class-name {
    param: value;
}

First, you need to create the world, the main rule describing sizes and the first rendered object:

world {
    width: 400;           /* width of image in pixels */
    height: 400;          /* height of image in pixels */
    body: my-little-cube; /* first element to rendered at position (0, 0, 0) */
    /* yep - our world is 3d rendered in Cavalier projection. */
}

When we have the world, then we can describe our cube:

my-little-cube {
    display: cube;   /* we need to write a type of draw-object. */
    wall: wall.wall; /* link to another element which describes color of wall */
    roof: wall.roof; /* this same like above, but describes color of roof */

    /* Size of cube */
    width: 100;
    depth: 100;
    height: 100;
}

Now, we need to describe wall-objects for walls and roof.

Each wall can have texture (as background) and floor-objects (It will be about this in next step).

For now, wall and roof will have named textures:

wall.wall { texture: tex.salmon; }
wall.roof { texture: tex.blue; }

And we need textures of solid colors for wall-objects:

/* you can generate colors in hexs here:
   ttps://htmlcolorcodes.com */
tex.salmon { color: #FA8072; } /* nice salmon color */
tex.blue { color: #3498DB; }   /* BLUE COLOR OMG! */

And done! Of course, it’s a your cube - you can change colors, and size. If you don’t like the cube (how could you?!), you can change shape (Basic Shapes)

The final code should be like this:

world {
    width: 400;
    height: 400;
    body: my-little-cube;
}

my-little-cube {
    display: cube;
    wall: wall.wall;
    roof: wall.roof;

    width: 100;
    depth: 100;
    height: 100;
}

wall.wall { texture: tex.salmon; }
wall.roof { texture: tex.blue; }

tex.salmon { color: #FA8072; }
tex.blue { color: #3498DB; }

You can try it online: https://pixelopolis.herokuapp.com/examples/Tutorial/Hello-Cube

On the next tutorial, I will describe floor and textures: (Textures)