Jump to content

Strange error with tilemaps


Lomaz
 Share

Recommended Posts

Hello! so I've just generated my first fairly big map (240x240) and I'm having an issue.. there are some tiles that are.... dead

 

When I walk on them, or even up to them I get a strange error

 

"Uncaught TypeError: Cannot read property '2' of undefined"

 

It's complaining about this line in phaser:

 

 set = this.map.tilesets[this.map.tiles[tile.index][2]];

 

I've been trying to figure it out for a couple hours now and am just about to give up.. any ideas guys?

Link to comment
Share on other sites

A bit more useful information, I put:

 

console.log(tile.index) right before it and the console looked somthing like this:

 

201

201

203

203

201643265

...and then it blew up... ideas?

 

 

 

HACK: I altered the condition to look like

 

               if (tile && tile.index > -1 && tile.index < 2000)
                {
                    set = this.map.tilesets[this.map.tiles[tile.index][2]];
 
and it fixed my issue, obviously changing phaser.js in the way is a bad idea, so I'd really like to figure out what is exactly going on.
Link to comment
Share on other sites

This is in the phaser v2.0.6 file. line 57810

/*** Renders the tiles to the layer canvas and pushes to the display.* @method Phaser.TilemapLayer#render* @memberof Phaser.TilemapLayer*/Phaser.TilemapLayer.prototype.render = function () {    if (this.layer.dirty)    {        this.dirty = true;    }    if (!this.dirty || !this.visible)    {        return;    }    this._mc.prevX = this._mc.dx;    this._mc.prevY = this._mc.dy;    this._mc.dx = -(this._mc.x - (this._mc.startX * this.map.tileWidth));    this._mc.dy = -(this._mc.y - (this._mc.startY * this.map.tileHeight));    this._mc.tx = this._mc.dx;    this._mc.ty = this._mc.dy;    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);    this.context.fillStyle = this.tileColor;    var tile;    var set;    if (this.debug)    {        this.context.globalAlpha = this.debugAlpha;    }    for (var y = this._mc.startY, lenY = this._mc.startY + this._mc.maxY; y < lenY; y++)    {        this._column = null;        if (y < 0 && this.wrap)        {            this._column = this.layer.data[y + this.map.height];        }        else if (y >= this.map.height && this.wrap)        {            this._column = this.layer.data[y - this.map.height];        }        else if (this.layer.data[y])        {            this._column = this.layer.data[y];        }        if (this._column)        {            for (var x = this._mc.startX, lenX = this._mc.startX + this._mc.maxX; x < lenX; x++)            {                var tile = null;                if (x < 0 && this.wrap)                {                    tile = this._column[x + this.map.width];                }                else if (x >= this.map.width && this.wrap)                {                    tile = this._column[x - this.map.width];                }                else if (this._column[x])                {                    tile = this._column[x];                }                if (tile && tile.index > -1 && tile.index < 2000)                {                    set = this.map.tilesets[this.map.tiles[tile.index][2]];                    if (this.debug === false && tile.alpha !== this.context.globalAlpha)                    {                        this.context.globalAlpha = tile.alpha;                    }                    set.draw(this.context, Math.floor(this._mc.tx), Math.floor(this._mc.ty), tile.index);                    if (tile.debug)                    {                        this.context.fillStyle = 'rgba(0, 255, 0, 0.4)';                        this.context.fillRect(Math.floor(this._mc.tx), Math.floor(this._mc.ty), this.map.tileWidth, this.map.tileHeight);                    }                }                this._mc.tx += this.map.tileWidth;            }        }        this._mc.tx = this._mc.dx;        this._mc.ty += this.map.tileHeight;    }    if (this.debug)    {        this.context.globalAlpha = 1;        this.renderDebug();    }    if (this.game.renderType === Phaser.WEBGL)    {        // PIXI.updateWebGLTexture(this.baseTexture, renderSession.gl);        PIXI.updateWebGLTexture(this.baseTexture, this.game.renderer.gl);    }    this.dirty = false;    this.layer.dirty = false;    return true;};
Link to comment
Share on other sites

There are a number of possible fail points in that code.  I suggest stepping through it to see which one it is...

 

For instance:

if (x >= this.map.width && this.wrap){tile = this._column[x - this.map.width];}

If x is greater than 2 x the map width, this will fail because it's only wrapping once.  I would change the if into a "while" and do the subtraction x -= this.map.width; in each loop.

Same thing for the < 0 case and y direction wrapping also.

 

Remember the problem you're looking for is that tile.index becomes invalid... so look for anything that might make tile get a wrong value too.  That includes column which is where tile comes from.  Sometimes you have to step back quite a long way to find the original error because JS is very fault tolerant so errors get propagated forwards a long way before the code goes boom!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...