Jump to content

Problem displaying player - Newbie in GameDev


Recommended Posts



I'm new to game development and after research I found this amazing framework called Phaser. I did the two elementary tutorials and started my own project. 

I created a tilemap which is succesfully displayed and has no issues. 

Now I'm trying to display my player but the player is not displayed or maybe behind some other objets(?). I use the same sprite as in the tutorials before. I really can't figure out where my mistake is and I hope someone can help me and give me some tipps for the future.


<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /><title>Super Abdi World</title><script type="text/javascript" src="js/phaser.min.js"></script>    <style type="text/css">        body {            margin: 0;        }    </style></head><body><script type="text/javascript">var game = new Phaser.Game(640, 640, Phaser.AUTO, '', { preload: preload, create: create, update: update });function preload() {    // background    this.load.image("bg", "assets/scifi_platform_BG1.jpg");        // load all game assets    // images, spritesheets, atlases, audio, etc..    this.load.tilemap("tilemap1", "assets/tilemaps/superworld1.json", null, Phaser.Tilemap.TILED_JSON);    this.load.image("myTileset", "assets/tilemaps/scifi_platformTiles_32x32.png");    this.load.spritesheet("abdi", "assets/dude.png", 32, 48); // abdi is the player   }    var map;var backgroundLayer;var blockLayer;var bg;  var abdi;    function create() {        this.physics.startSystem(Phaser.Physics.ARCADE);        // background    bg = this.add.tileSprite(0, 0, 640, 640, "bg");        map = this.add.tilemap("tilemap1");    map.addTilesetImage("scifi_platformTiles_32x32", "myTileset");        backgroundLayer = map.createLayer("background");    blockLayer = map.createLayer("blocklayer");        // physics and stuff    blockLayer.enableBody = true;    blockLayer.body.immovable = true;        // creating abdi    abdi = this.add.sprite(32, this.world.height - 150, "abdi");    this.physics.arcade.enable(abdi);    abdi.body.bounce.y = 0.2;    abdi.body.gravity.y = 300;    abdi.body.collideWorldBounds = true;        abdi.animations.add("left", [0, 1, 2, 3], 10, true);    abdi.animations.add("right", [5, 6, 7, 8], 10, true);           cursors = this.input.keyboard.createCursorKeys();}function update() {        this.physics.arcade.collide(abdi, blockLayer);    }</script></body></html>

I attached some maybe relevant files. Only file left is the json-tilemap which is not allowed to upload.

Also I attached a screenshot of what i get displayed.


Thank you in advance!





Link to comment
Share on other sites


  • Recently Browsing   0 members

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