craftyjs.github.com

Crafty.isometric

Place entities in a 45deg isometric fashion.

Back to top

Crafty.isometric.size

public this Crafty.isometric.size(Number tileSize)

tileSize
The size of the tiles to place.

Method used to initialize the size of the isometric placement. Recommended to use a size values in the power of 2 (128, 64 or 32). This makes it easy to calculate positions and implement zooming.

Example

var iso = Crafty.isometric.size(128);

See Also

Back to top

Crafty.isometric.place

public this Crafty.isometric.place(Number x, Number y, Number z, Entity tile)

x
The x position to place the tile
y
The y position to place the tile
z
The z position or height to place the tile
tile
The entity that should be position in the isometric fashion

Use this method to place an entity in an isometric grid.

Example

var iso = Crafty.isometric.size(128);
iso.place(2, 1, 0, Crafty.e('2D, DOM, Color').color('red').attr({w:128, h:128}));

See Also

Back to top

Crafty.isometric.pos2px

public this Crafty.isometric.pos2px(Number x,Number y)

x
y

Returns

Object {left Number,top Number}

This method calculate the X and Y Coordinates to Pixel Positions

Example

var iso = Crafty.isometric.size(128,96);
var position = iso.pos2px(100,100); //Object { left=12800, top=4800}
Back to top

Crafty.isometric.px2pos

public this Crafty.isometric.px2pos(Number left,Number top)

top
left

Returns

Object {x Number,y Number}

This method calculate pixel top,left positions to x,y coordinates

Example

var iso = Crafty.isometric.size(128,96);
var px = iso.pos2px(12800,4800);
console.log(px); //Object { x=-100, y=-100}
Back to top

Crafty.isometric.centerAt

public this Crafty.isometric.centerAt(Number x,Number y)

top
left

This method center the Viewport at x/y location or gives the current centerpoint of the viewport

Example

var iso = Crafty.isometric.size(128,96).centerAt(10,10); //Viewport is now moved
//After moving the viewport by another event you can get the new center point
console.log(iso.centerAt());
Back to top

Crafty.isometric.area

public this Crafty.isometric.area()

Returns

Object {x:{start Number,end Number},y:{start Number,end Number}}

This method get the Area surrounding by the centerpoint depends on viewport height and width

Example

var iso = Crafty.isometric.size(128,96).centerAt(10,10); //Viewport is now moved
var area = iso.area(); //get the area
for(var y = area.y.start;y <= area.y.end;y++){
  for(var x = area.x.start ;x <= area.x.end;x++){
      iso.place(x,y,0,Crafty.e("2D,DOM,gras")); //Display tiles in the Screen
  }
}