Jump to content

New To Phaser - Issues With Initialization


onmyown
 Share

Recommended Posts

Hello, I am new to phaser.js (starting today! :)) after being inspired by a Google Doodle to learn to make games that you can play over the internet.

I have some JavaScript experience, and am posting my code below:

My tilemap:

 

{ "height":6,
 "layers":[
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2052, 0, 0, 0, 77, 77, 77, 77, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77, 77, 77, 77, 77, 77, 77, 0, 0, 77, 77, 0, 0, 77, 77, 77, 77, 0, 0, 0, 77, 77, 77, 77, 77, 77, 77, 0, 0, 0, 0, 0, 77, 77, 77, 77, 77, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         "height":6,
         "name":"TileLayer",
         "opacity":0.899999976158142,
         "type":"tilelayer",
         "visible":true,
         "width":48,
         "x":0,
         "y":0
        }],
 "nextobjectid":1,
 "orientation":"orthogonal",
 "properties":
    {

    },
 "renderorder":"right-down",
 "tileheight":32,
 "tilesets":[
        {
         "columns":23,
         "firstgid":1,
         "image":"..\/images\/tiles_spritesheet.png",
         "imageheight":934,
         "imagewidth":790,
         "margin":0,
         "name":"tiles_spritesheet",
         "properties":
            {

            },
         "spacing":1,
         "tilecount":644,
         "tileheight":32,
         "tilewidth":32
        }, 
        {
         "columns":23,
         "firstgid":645,
         "image":"..\/images\/tiles_spritesheet.png",
         "imageheight":934,
         "imagewidth":790,
         "margin":0,
         "name":"tiles_spritesheet",
         "properties":
            {

            },
         "spacing":2,
         "tilecount":621,
         "tileheight":32,
         "tilewidth":32
        }, 
        {
         "columns":23,
         "firstgid":1266,
         "image":"..\/images\/tiles_spritesheet.png",
         "imageheight":934,
         "imagewidth":790,
         "margin":0,
         "name":"tiles_spritesheet",
         "properties":
            {

            },
         "spacing":1,
         "tilecount":644,
         "tileheight":32,
         "tilewidth":32,
         "transparentcolor":"#ff00ff"
        }, 
        {
         "columns":11,
         "firstgid":1910,
         "image":"..\/images\/tiles_spritesheet.png",
         "imageheight":934,
         "imagewidth":790,
         "margin":0,
         "name":"tiles_spritesheet",
         "properties":
            {

            },
         "spacing":2,
         "tilecount":143,
         "tileheight":70,
         "tilewidth":70
        }],
 "tilewidth":32,
 "version":1,
 "width":48
}

 

My JavaScript:

var game = new Phaser.Game(768, 384, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

    game.load.image('sky', 'img/ZlOsM7Z.png');
    game.load.spritesheet('baker', 'img/baker.png', 115, 188);
    game.load.tilemap('level1', 'javascript/level1.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('gametiles', 'img/tiles_spritesheet.png');
}

function create() {
//game.add.sprite(0, 0, 'sky');
// The player and its settings

this.map = this.game.add.tilemap('level1');

game.stage.backgroundImage = 'sky';

    //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset
    this.map.addTilesetImage('tiles_spritesheet', 'gametiles');
    
    //this.backgroundlayer = this.map.createLayer('Image Layer 1');
    this.TileLayer = this.map.createLayer('TileLayer');

    //collision on blockedLayer
    this.map.setCollisionBetween(1, 5000, true, 'TileLayer', false);

    //  We need to enable physics on the player
    player = game.add.sprite(115, game.world.height - 150, 'baker');
    game.physics.arcade.enable(player);

    //  Player physics properties. Give the little guy a slight bounce.
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 300;
    player.body.collideWorldBounds = true;

    //  Our two animations, walking left and right.
    player.animations.add('left', [0, 1], 10, true);
    player.animations.add('right', [3,4], 10, true);
    this.TileLayer.resizeWorld();
}

function update() {
cursors = game.input.keyboard.createCursorKeys();
//  Reset the players velocity (movement)
    player.body.velocity.x = 0;

    if (cursors.left.isDown)
    {
        //  Move to the left
        player.body.velocity.x = -150;

        player.animations.play('left');
    }
    else if (cursors.right.isDown)
    {
        //  Move to the right
        player.body.velocity.x = 150;

        player.animations.play('right');
    }
    else
    {
        //  Stand still
        player.animations.stop();

        player.frame = 2;
    }

    //  Allow the player to jump if they are touching the ground.
    if (cursors.up.isDown)
    {
        player.body.velocity.y = -350;
    }
}

My errors:

 

! phaser.js:93527 Phaser.Tileset - image tile area is not an even multiple of tile size
X phaser.js:93446 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

 

Please assist me in squashing my two errors! I do not understand why they appear!

Link to comment
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...
 Share

  • Recently Browsing   0 members

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