Help With Sprite and Game World Loading

Phaser 3
1

Hi,

I have used tiled to generate a tile map for a platform game I am making. The map loads correctly and so to the sprites which are generated from the object layer, but the issue seems to be that it loads the platforms after the sprites have loaded and the gravity takes affect so they fall through their proper locations. When I look at where the sprites are at, it looks as if they are in the correct x coordinates, but as if they have started falling before the platforms are added.

Please see my code below, I’d be grateful for any help with this.

import Phaser from "phaser";

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {y: 500},
            debug: false
        }
    },
    scene: {
        key: 'main',
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

var map;
var player;
var spider;
var spidergroup;
var cursors;
var groundLayer, coinLayer, platformLayer, platformBoundaries;
var text;
var score = 0;

function preload() {

    // map made with Tiled in JSON format
    //this.load.tilemapTiledJSON('map', 'assets/map.json');
    // tiles in spritesheet
    //this.load.spritesheet('tiles', 'assets/tiles.png', {frameWidth: 70, frameHeight: 70});
    // map made with Tiled in JSON format
    this.load.tilemapTiledJSON('map', 'assets/bofmap5.json');
    // tiles in spritesheet
    this.load.spritesheet('tilemap', 'assets/tilemap.png', {frameWidth: 30, frameHeight: 30});
    // simple coin image
    this.load.image('coin', 'assets/coinGold.png');
    // player animations
    this.load.atlas('player', 'assets/player.png', 'assets/player.json');
    this.load.atlas('spider', 'assets/spider.png', 'assets/spider.json');
    this.load.atlas('bof', 'assets/bof.png', 'assets/bof.json');
}

function create() {
    // load the map
    map = this.make.tilemap({key: 'map'});

    // tiles for the ground layer
    var groundTiles = map.addTilesetImage('tilemap');
    // create the ground layer
    groundLayer = map.createDynamicLayer('ground', groundTiles, 0, 0);
    // the player will collide with this layer
    groundLayer.setCollisionByExclusion([-1]);

    // create the platforms layer
    platformLayer = map.createDynamicLayer('platforms', groundTiles, 0, 0);
    // the player will collide with this layer
    platformLayer.setCollisionByExclusion([-1]);

    console.log(platformLayer);

    platformBoundaries = map.createDynamicLayer('invisiblewalls', groundTiles, 0, 0);
    // the player will collide with this layer
    platformBoundaries.setCollisionByExclusion([-1]);

    // set the boundaries of our game world
    this.physics.world.bounds.width = groundLayer.width;
    this.physics.world.bounds.height = groundLayer.height;

    // create the player sprite
    player = this.physics.add.sprite(200, 200, 'bof');
    player.setBounce(0.2); // our player will bounce from items
    player.setCollideWorldBounds(true); // don't go out of the map

    // Spider group
    var spiders = map.getObjectLayer('spiders')['objects'];
    spidergroup = this.physics.add.group();

    spiders.forEach(spider => {
      console.log(spider.y);
      // Add new spikes to our sprite group, change the start y position to meet the platform
      spidergroup.create(spider.x, spider.y, 'spider');
    });

    // spider walk animation
    this.anims.create({
        key: 'spiderr',
        frames: this.anims.generateFrameNames('spider', {prefix: 'sprite_', start: 0, end: 12}),
        frameRate: 10,
        repeat: -1
    });

    // small fix to our player images, we resize the physics body object slightly
    player.body.setSize(player.width, player.height-8);

    // player will collide with the level tiles
    this.physics.add.collider(groundLayer, player);
    this.physics.add.collider(platformLayer, player);
    this.physics.add.collider(groundLayer, spidergroup);
    this.physics.add.collider(platformBoundaries, spidergroup);
    this.physics.add.collider(platformLayer, spider,enemyHitsPlatform,null,this);

    // player walk animation
    this.anims.create({
        key: 'walk',
        frames: this.anims.generateFrameNames('bof', {prefix: 'sprite_', start: 1, end: 2}),
        frameRate: 10,
        repeat: -1
    });
    // idle with only one frame, so repeat is not neaded
    this.anims.create({
        key: 'idle',
        frames: [{key: 'bof', frame: 'sprite_0'}],
        frameRate: 10,
    });


    cursors = this.input.keyboard.createCursorKeys();

    // set bounds so the camera won't go outside the game world
    this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
    // make the camera follow the player
    this.cameras.main.startFollow(player);

    // set background color, so the sky is not black
    this.cameras.main.setBackgroundColor('#ccccff');

    // this text will show the score
    text = this.add.text(20, 570, '0', {
        fontSize: '20px',
        fill: '#ffffff'
    });
    // fix the text to the camera
    text.setScrollFactor(0);

    //console.log(platformLayer);
}
2

Turn on physics.arcade.debug and then add to update():

this.scene.pause();
3

Thanks, the debug mode is useful. I found that it was a simple error as the collider I had added was referencing a previous sprite that I had created and not the group.

Sorry, I should have noticed that.