Problems with isometric tiles

36 views
Skip to first unread message

MegaBite

unread,
Apr 27, 2016, 11:10:10 AM4/27/16
to haxef...@googlegroups.com
Hey guys and gals!

I'm trying to figure out how to work with isometric tiles and if you did the same, you probably already know this tutorial on Creating Isometric Worlds. I don't know what the problem is, but I can't get it to work. The main problem I have is that in the tutorial it says "Here we assume that tile width and tile height are equal" - but the tile height must be half of the width to get that classical isometric top-down look, right? So what don't I understand? I use a simple 128x32 sheet with two tiles, so one tile is 64x32. Basically I don't understand if the actually graphic or the isometric projected sprite has to have the same width and height. Somehow I managed to have the tiles placed in a way that seemed correct, but when I added the function to retrieve the position of the tiles with a mouse click, the numbers are a little (or way) off. Or I get huge gaps, but the numbers are okay. Still I'm too dumb to see the problem...

At the moment, my code looks like this:

   
    public static var TILE_WIDTH:Int = 64;
   
public static var TILE_HEIGHT:Int = 32;
   
public var _MapGroup:FlxSpriteGroup;
   
public var _Map1:Array<Array<Int>> =
   
[[0, 0, 0, 1, 0, 0, 0],
     
[0, 1, 1, 1, 1, 1, 0],
     
[0, 1, 1, 1, 1, 1, 0],
     
[0, 0, 0, 0, 0, 0, 0]];
   
   
override public function create():Void
   
{
       
super.create();
        _MapGroup
= new FlxSpriteGroup();
        add
(_MapGroup);
        buildMap
(_Map1);        
   
}
   
   
public function isoTo2D(pt:FlxPoint):FlxPoint{
     
var tempPt:FlxPoint = new FlxPoint(0, 0);
      tempPt
.x = ((2 * pt.y) + pt.x) / 2;
      tempPt
.y = ((2 * pt.y) - pt.x) / 2;
     
return tempPt;
   
}

   
public function twoDToIso(pt:FlxPoint):FlxPoint{
     
var tempPt:FlxPoint = new FlxPoint(0,0);
      tempPt
.x = pt.x - pt.y;
      tempPt
.y = (pt.x + pt.y) / 2;
     
return tempPt;
   
}
   
   
public function placeTile(type:Int = 0, point:FlxPoint, pos:Array<Int>):Void
   
{
       
var tile:MyTile = new MyTile(point.x, point.y);
            tile
.loadGraphic("assets/images/tiles.png", true, TILE_WIDTH, TILE_HEIGHT);
            tile
._Type = type;
            tile
._Pos = pos;
            tile
.animation.add("tile0", [0]);
            tile
.animation.add("tile1", [1]);
            tile
.animation.play("tile" + tile._Type, true);
            _MapGroup
.add(tile);
           
FlxMouseEventManager.add(tile, onTileDown);
   
}
   
   
private function onTileDown(tile:MyTile):Void
   
{
       
var mousePoint:FlxPoint = new FlxPoint(FlxG.mouse.x, FlxG.mouse.y);
        trace
("Iso Coords: " + getTileCoordinates(isoTo2D(mousePoint)));
   
}
   
   
public function buildMap(map:Array<Array<Int>>):Void
   
{
       
for (i in 0...map.length) {
         
for (j in 0...map[0].length) {
             
var X:Int = j * TILE_WIDTH;
             
var Y:Int = i * TILE_HEIGHT;
              placeTile
(map[i][j], twoDToIso(new FlxPoint(X, Y)), [i,j]);
         
}
       
}
   
}
   
   
public function getTileCoordinates(point:FlxPoint):FlxPoint{
       
var tempPt:FlxPoint = new FlxPoint(0, 0);
           tempPt
.x = Math.floor(point.x / TILE_WIDTH);
           tempPt
.y = Math.floor(point.y / TILE_HEIGHT);
           
return(tempPt);
   
}

The functions to convert the coordinates and to get the tile coordinates are straight out of the tutorial. If anyone could just take a quick look at the code and tell me what I'm doing wrong, I would highly appreciate it!

Reply all
Reply to author
Forward
0 new messages