Problem with loading CSV tilemap

[ekeimaja]

So I am trying to import CSV tilemap to my game, using csv collision sample as help. Now it gives this error.

 

Uncaught TypeError: Cannot read property 'width' of undefined

 

which is pointing to this line. Variable map is defined in beginning

map = this.game.add.|tilemap('kentta', 20, 20);

Preloading is made in external preload.js file, in preload function like this:

this.game.load.tilemap('kentta', 'assets/kentta.csv', null, Phaser.Tilemap.CSV);this.game.load.image('tileset', '/assets/tileset.png');

[ekeimaja]

Nobody knows or cannot help? My whole project is now stopped because of this.

[ekeimaja]

Seems that I have to bump this again. This is unbelieveable.

[drhayes]

It's probably not because you're exporting it as CSV because the CSV example works with 2.3: http://phaser.io/examples/v2/tilemaps/csv-map

 

I'm wondering if it's a mismatch between the name of the tileset in the GAME vs. the tileset in the MAP. That "'width' of undefined" error smells like a missing texture to me.

[MishaShapo]

Does the bar between 'add' and 'tilemap' have to do with anything?

 

Or the slash before 'assets' when loading the tile set?

[ekeimaja]

I have version 2.3. That red bar is indicating area, where debugger is pointing the problem. Now I added slashes, and now it says this.game.load.tileset is not a function. If I delete preloading of map in level file, then it says again about width.

 

Which is better, to preload levels in preload.js, or in beginning of level file?

[drhayes]

Can you post a code example somewhere? I think there's something larger at work.

 

I don't think there's one, specific better way; I think it depends on what platform you're targeting and how big your levels are. I haven't had a problem loading all my levels up front but I'm specifically doing a desktop game so memory probably won't be an issue.

[ekeimaja]

Here's my codes:

 

• Preload.js
• index,html
• Level1.js
• kentta.csv
   
• Map opened in Tiled

 

[drhayes]

You're not specifying the tilewidth and tileheight when loading your CSV map.

 

In Level1.js, change this line:

this.map = this.game.add.tilemap("kentta");

To this:

this.map = this.game.add.tilemap('kentta', 40, 40); // or whatever the tile's width and height is

And that should help.

[ekeimaja]

Still saying Uncaught TypeError: this.game.load.tileset is not a function at level1.js in preload.

[drhayes]

Hey, at least that's a different error than what you were getting before. Progress!

 

The way you defined your class I expected to see a line that says something like "game.state.add('game', new BasicGame.Game()));". Where are you instantiating the Phaser game and adding your states?

[ekeimaja]

It is in app.js

(function () {    var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game');    game.state.add('Level1', BasicGame.Game);    game.state.start('Level1');})();

[drhayes]

Looking at the StateManager code, it looks like you didn't quite declare your states right.

 

Can you add this to your BasicGame.Game function?

Phaser.State.call(this);

Then, right under it, before you declare your prototype, write this:

BasicGame.Game.prototype = Object.create(Phaser.State.prototype);BasicGame.Game.prototype.constructor = BasicGame.Game;

Then, instead of writing "BasicGame.Game.prototype = {};", write "BasicGame.Game.prototype.preload = function() {}" for each of your functions.

 

That should do it. I hope.

[ekeimaja]

Nope, still saying Uncaught TypeError: this.game.load.tileset is not a function.

[drhayes]

Add a "debugger;" statement just before your "this.game.load.tileset" statement. Open your dev tools, then reload your game. You should be able to poke around and see what "this" is, what "this.game" is, etc... and see the call stack for the code that got you there, see if something's going wrong.

[ekeimaja]

It points to app.js

(function () {    var game = new Phaser.Game(900, 700, Phaser.AUTO, 'game');    game.state.add('Level1', BasicGame.Game);    game.state.start('Level1');})();

and when I move mouse onto load tileset, it says this.game.load.tileset is not defined

[drhayes]

What's "it", in that statement? Is the value of "this" pointing to that IIFE somehow?

 

"this" should be an instance of Phaser.State. If it's not, there's something wrong with how your code is organized/written.

[ekeimaja]

Here is now all files. https://www.sendspace.com/file/i4f6un

[drhayes]

Okay: https://gist.github.com/drhayes/ef775a97aecaa5549404 That loads the level with no errors, all fixes in Level1.js.

 

You put the "BasicGame.Game.prototype" lines inside your constructor function instead of following it, tried to use "this.game.load.tileset" instead of "this.game.load.image", "this.game.add.tileset" instead of "this.map.addTilesetImage", tried to set the collision range before creating the layer, tried to use "setCollisionRange" instead of "setCollisionBetween", "this.game.add.tilemapLayer" instead of "this.map.createLayer".

 

Should've caught that before but I wasn't reading closely enough. There's no function "game.load.tileset". That probably would've made the other stuff easier.