Jump to content

Platformer using Phaser and Tiled Not working


It's-The-Bat
 Share

Recommended Posts

Hi guys, I need some help with this game I'm working on. I've created a platformer map with Tiled and I'm trying to get the game to work with phaser, but it just doesn't work. I get an error code saying:

 

Phaser.Tileset - image tile area is not an even multiple of tile size

 

and another error repeating 5 times saying

 

Tilemap.createLayer: Invalid layer ID given: null

 

The code (commented out codes are a little messy) is as follows. Please help.

 

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" />
    <title>WeWork Game</title>
    <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
    <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>
 
<script type="text/javascript">
 
var game = new Phaser.Game(/*2084, 1989*/1200, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, /*render: render*/ });
 
 
function preload() {
 
//    game.load.image('platform', './objects/platform.png')
//    game.load.image('background', './background/background.gif');
//    game.load.image('ground', './objects/platform.png');
      game.load.image('stars', './objects/energy.png');
      game.load.spritesheet('zero', './characters/zero.png', 50, 50, 2);
 
    game.load.tilemap('myTilemap', './background/tilemaps/tilemap.json');
    game.load.image('myTileset', './background/tilemaps/bg.png');
 
 
}
 
var player;
//var platform;
var cursors;
 
var map;
var backgroundLayer;
var blockLayer;
var patches;
 
var stars;
var score = 0;
var scoreText;
 
function create() {
 
    map = game.add.tilemap('myTilemap');
    map.addTilesetImage('bg.png', 'myTileset');
    
    blockLayer = map.createLayer('solids');
    backgroundLayer = map.createLayer('cosmetics');
    patches = map.createLayer('backing');
 
    //  We're going to be using physics, so enable the Arcade Physics system
    game.physics.startSystem(Phaser.Physics.ARCADE);
 
    //  A simple background for our game
    //    game.add.sprite(0, 0, 'bg');
 
    //  The platform group contains the ground and the 2 ledges we can jump on
    //platform = game.add.group();
 
    //  We will enable physics for any object that is created in this group
    //platform.enableBody = true;
 
    // Here we create the ground.
    //var ground = platform.create(0, game.world.height - 70, 'ground');
 
    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
    //ground.scale.setTo(1, 1);
 
    //  This stops it from falling away when you jump on it
    //ground.body.immovable = true;
 
    //  Now let's create two ledges
    //var ledge = platform.create(500, 350, 'ground');
    //ledge.body.immovable = true;
 
    //ledge = platform.create(-300, 270, 'ground');
    //ledge.body.immovable = true;
    
    
 
    // The player and its settings
    player = game.add.sprite(55, game.world.height - 150, 'zero');
 
    //  We need to enable physics on the player
    game.physics.arcade.enable(player);
 
    //  Player physics properties. Give the little guy a slight bounce.
    player.body.gravity.y = 400;
    player.body.collideWorldBounds = true;
 
    //  Our two animations, walking left and right.
    player.animations.add('left', [1, 2, 3, 4, 5], 5, true);
    player.animations.add('right', [0, 1, 2, 3, 4, 5], 30, true);
    
 
    //  Finally some stars to collect
    stars = game.add.group();
 
    //  We will enable physics for any stars that is created in this group
    stars.enableBody = true;
 
    //  Here we'll create 12 of them evenly spaced apart
    for (var i = 0; i < 12; i++)
    {
        //  Create a stars inside of the 'stars' group
        var star = stars.create(i * 70, 0, 'stars');
 
        //  Let gravity do its thing
        star.body.gravity.y = 300;
 
        //  This just gives each stars a slightly random bounce value
        star.body.bounce.y = 0.7 + Math.random() * 0.2;
    }
 
    //  The score
    scoreText = game.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#FFFFFF' });
    
 
    //  Our controls.
    cursors = game.input.keyboard.createCursorKeys();
    
    //Command that uses camera to follow player
    //game.camera.follow(player);    
    
}
 
function update() {
 
    //  Collide the player and the stars with the platform
    //game.physics.arcade.collide(player, platform);
    //game.physics.arcade.collide(stars, platform);
 
    //  Checks to see if the player overlaps with any of the stars, if he does call the collectstars function
    game.physics.arcade.overlap(player, stars, collectstars, null, this);
 
    //  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.animations.add('stand', [0, 1, 2, 3], true);
        player.animations.add('stand', [0, 1, 2, 3], true);
    }
    
    //  Allow the player to jump if they are touching the ground.
    if (cursors.up.isDown && player.body.touching.down)
    {
        player.body.velocity.y = -450;
    }
    
    if (scoreText.text == 'Score: ' + 120) {
        //delete(scoreText.text);
        game.add.text(50, 50, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', { fontSize: '32px', fill: '#FFFFFF' });
        //game.add.text(25, 25, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', {fontSize: '50px', fill: '#FFFFFF' });
    }
 
}
 
 
 
function collectstars (player, stars) {
    
    // Removes the stars from the screen
    stars.kill();
 
    //  Add and update the score
    score += 10;
    scoreText.text = 'Score: ' + score;
 
}
 
/*function render() {
 
    game.debug.cameraInfo(game.camera, 32, 32);
    game.debug.spriteCoords(player, 32, 500);
 
}*/
 
</script>
 
</body>
</html>

 

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...