Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Okay im having a problem with drawing an isometric map exported from tiled.
Here is my problem. My problem
where it should be like this

actual

Here is the code that i used to reproduce the 1st image, what's wrong with it?

for (var y = 0; y < this.height; y++){
            for (var x = 0; x < this.width; x++){
                counter++;  
                var sprite = this.tilemap.getSprite(this.data[ counter ], this);    
                var drawX = 0, drawY = 0;


                if ( sprite ) {     
                    var cell = sprite.cell[ this.data[counter] ];   
                    if (!cell) continue;

                    if (this.orientation == 'isometric') {
                        // Isometric maps 
                        drawX = x * cell.w;
                        drawY = y * cell.h; 
                    } 


                    if (sprite && cell){
                        Engine.currentGame.ctx.drawImage(
                         sprite.sprite.img,
                         cell.x,
                         cell.y,
                         cell.w,
                         cell.h,
                         drawX, 
                         drawY,
                         cell.w,
                         cell.h
                        );
                    }
                }       
            }
        }
        game.currentGame.ctx.restore();
        return this;
    };

UPDATE:

var counter = 0;
        game.currentGame.ctx.save();
        for (var x = 0; x < this.width; x++){
            for (var y = 0; y < this.height; y++){
                counter++;  
                var sprite = this.tilemap.getSprite(this.data[ counter ], this);    
                var drawX = 0, drawY = 0;


                if ( sprite ) {     

                    //console.log( counter );
                    var cell = sprite.cell[ this.data[counter] ];   
                    if (!cell) continue;

                    if (this.orientation == 'isometric') {
                        // Isometric maps 
                        drawX = x * cell.w;
                        drawY = y * cell.h; 
                    } 


                    if (sprite && cell){
                        Engine.currentGame.ctx.drawImage(
                         sprite.sprite.img,
                         cell.x,
                         cell.y,
                         cell.w,
                         cell.h,
                         drawX, 
                         drawY,
                         cell.w,
                         cell.h
                        );
                    }
                }       
            }
        }
        game.currentGame.ctx.restore();
        return this;

update

share|improve this question

closed as off-topic by Krom Stern, Anko, congusbongus, bummzack, Boreal Sep 26 '14 at 4:03

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about debugging a problem in your project must present a concise selection of code and context so as to allow a reader to diagnose the issue without needing to read all of your code or to engage in extensive back-and-forth dialog. For more information, see this meta thread." – Krom Stern, Anko, congusbongus, bummzack, Boreal
If this question can be reworded to fit the rules in the help center, please edit the question.

1  
This seems like a trivial positioning problem. What have you tried? –  Krom Stern Aug 29 '14 at 11:27
    
You need to divide by 2 for a 2:1 perspective ratio. –  Gerben Jacobs Aug 29 '14 at 11:29
    
jsiso.com/tutorials/isometric-engine-basics.html gamedev.stackexchange.com/questions/47388/… gamedev.stackexchange.com/questions/24602/… Ive read all of them but cant get it to work @GerbenJacobs divide what by 2? the width and height –  ryanc1256 Aug 29 '14 at 11:31
    
The position of your tiles, based on the widht and height yeah. So if you have 20x20 blocks, you need to position them on -10 on the x axis, for example. –  Gerben Jacobs Aug 29 '14 at 11:43

2 Answers 2

up vote 1 down vote accepted

From the screens it's kinda obvious, that your tiles are positioned wrong.

So it seems your X axis needs to go from top-left to bottom-right and Y axis from top-right to bottom-left. Right now X goes from left to right and Y from top to bottom. Can you update your code to accommodate for that?

Also your spacing between the tiles is too big, but first - solve the first issue ;)

share|improve this answer
    
Okay I did, but now it look's very weird, ill add the new code –  ryanc1256 Aug 29 '14 at 11:36
    
Your new code is the same as the old? –  Krom Stern Aug 29 '14 at 11:41
    
Na, it's not I just switched some values around like you said –  ryanc1256 Aug 29 '14 at 11:54
    
So you want me to read through all of your code once again and cross-check this with the old code? –  Krom Stern Aug 29 '14 at 11:56
    
Okay i just did a bit more research and got it working!! Thank you –  ryanc1256 Aug 29 '14 at 12:21

Iso-tiled maps needs "Z-axis" work, where you must draw from the upper left, moving to the bottom right, as you already know, you must overwrite already existing tiles.

Your code right now is a basic work for common 2D tilesets.

if (this.orientation == 'isometric') { // Isometric maps drawX = x * (cell.w / 2); drawY = y * (cell.h / 2); }

This should do the trick.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.