-2
\$\begingroup\$

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

\$\endgroup\$

closed as off-topic by Kromster, Anko, congusbongus, bummzack, jmegaffin 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." – Kromster, Anko, congusbongus, bummzack, jmegaffin
If this question can be reworded to fit the rules in the help center, please edit the question.

2
\$\begingroup\$

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

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

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.

\$\endgroup\$

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