Sign in to follow this  
ekeimaja

Problem with loading CSV tilemap

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.