Map not appearing

[Thunderfist]

My game isn't loading the map I made using tiled. The file, testroom1.json, is called properly, but something in my game.js is keeping the game from loading the map itself.

var RPG = RPG || {};

RPG.GameState = {
    
    init: function (currentLevel) {
        //Needed to keep track of the level
        this.currentLevel = currentLevel || currentLevel === 'testroom1';
        
        //movement speed constants
        this.PLAYER_SPEED = 90;
        
        //no gravity in top down games
        this.game.physics.arcade.gravity.y = 0;
        
        //keyboard cursors for input
        this.cursors = this.game.input.keyboard.createCursorKeys();
    },
    create: function () {
        this.Game.onscreenControls = this.game.plugins.add(Phaser.Plugin.OnscreenControls);
        
        this.loadLevel();
    },
    update: function () {
        
    },
    loadLevel: function () {
        //create the tilemap object
        this.map = this.add.tilemap(this.currentLevel);
        
        //Join the tile images to the .json data
        this.map.addTilesetImage('tileset', 'tilesheet');
        
        //create tile layers
        this.backgroundLayer = this.map.createLayer('backgroundLayer');
        //this.collisionLayer = this.map.createLayer('collisionLayer');
        
        //set background to the back of screen
        this.game.world.sendToBack(this.backgroundLayer);
        
        //Collision Layer... if only I made it earlier
        //this.map.setCollisionBetween(1, 16, true, 'collisionLayer');
        
        //resize the world to fit the layer
        //this.collisionLayer.resizeWorld();
    },
    gameOver: function () {
        this.game.state.start('Game', true, false, this.currentLevel);
    }
};

I never made the collision layer. I plan on doing that AFTER getting the map to appear first.

Does anyone have any advice on how to tackle this?

[samme]

I don't see where you're loading the map.

[Thunderfist]

I just realized that loadLevel is only called upon in the create function. Should that be called on in another place too?

[samme]

You need this.load.tilemap(…) in a preload call.

[Thunderfist]

I just tried that, and now my browser's console says that the .csv file isn't found. How do I find it?

 

UPDATE: I got the .csv file to be found. Now I'm getting an error about the onscreenControls.js that game.js is trying to use. It says 'cannot set property 'onscreenControls' of undefined. How do I deal with this?

Edited March 22, 2018 by Thunderfist

[Thunderfist]

I think I found the big error! It's saying that the program can't read property width of undefined for this.loadLevel in my create function, and this.add.tilemap in the loadLevel function.

 

What do I do?

[samme]

Try to imitate https://samme.github.io/phaser-examples-mirror/tilemaps/csv map.html.

[Thunderfist]

Cannot read property 'loadTilesetImage' of undefined 

                  at Object.preload (game.js:20)

 

All that function is doing is trying to load the map terrains from the preload.js. I'm worried that I won't finish this project before May, and I'm still stuck on this part!

[samme]

Try to follow https://samme.github.io/phaser-examples-mirror/tilemaps/csv map.html closely.

loadTilesetImage goes in create, not preload.

[Thunderfist]

Someone recommended that I try using a .png and the canvas element instead of trying to implement a .json.