Crafty.isometric

src/isometric/isometric.js#L5-L14

Place entities in a 45deg isometric fashion. The alignment of this grid's axes for tile placement is 90 degrees. If you are looking to have the grid of tile indicies for this.place aligned to the tiles themselves, use DiamondIso instead.

Methods

Back to top

Crafty.isometric.area()

src/isometric/isometric.js#L162-L183
public Object Crafty.isometric.area()
[Returns]

An obect with x and y fields, each of which have a start and end field. In other words, the object has this structure: {x:{start Number,end Number},y:{start Number,end Number}}

This method returns an object representing the bounds of the viewport

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
  }
}
Back to top

Crafty.isometric.centerAt()

src/isometric/isometric.js#L128-L148
public Obect Crafty.isometric.centerAt()
[Returns]

An object with top and left fields represneting the viewport's current center

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

The x position to center at

y

The y position to center at

This method centers the Viewport at an 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
Crafty.log(iso.centerAt());
Back to top

Crafty.isometric.place()

src/isometric/isometric.js#L50-L70
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()

src/isometric/isometric.js#L79-L96
public Object Crafty.isometric.pos2px(Number x,Number y)
x

A position along the x axis

y

A position along the y axis

[Returns]

An object with left and top fields {left Number,top Number}

This method converts a position in x and y coordinates to one in pixels

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()

src/isometric/isometric.js#L103-L121
public Object Crafty.isometric.px2pos(Number left,Number top)
top

Offset from the top in pixels

left

Offset from the left in pixels

[Returns]

An object with x and y fields representing the position

This method converts a position in pixels to x,y coordinates

Example

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

Crafty.isometric.size()

src/isometric/isometric.js#L26-L44
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