Rico Posted December 18, 2014 Share Posted December 18, 2014 Hi all, I am a total rookie when it comes to using Phaser, but am taking my first stumbling steps at a platformer. At this point I am just trying to get my head around how to work with layers, collisions and overlaps but am not getting it to work (probably) due to my lack of knowledge. Here is what I got (single HTML-file):<!DOCTYPE html><html><head><meta charset="ISO-8859-1"><title>Platform Test</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><script type="text/javascript" src="js/gamecontroller.js"></script><script type="text/javascript" src="js/phaser.min.js"></script></head><script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload : preload, create : create, update : update, render : render }); function preload() { this.load.tilemap('level1', 'assets/tilemaps/level2.json', null, Phaser.Tilemap.TILED_JSON); this.load.image('gameTiles', 'assets/images/tiles_2.png'); game.load.image('card', 'assets/images/player.png'); } var card; var cursors; function create() { map = game.add.tilemap('level1'); map.addTilesetImage('tiles_2', 'gameTiles'); backgroundlayer = map.createLayer('backgroundLayer'); blockedLayer = map.createLayer('blockedLayer'); ladderLayer = map.createLayer('ladderLayer'); map.setCollisionBetween(1, 256, true, blockedLayer); map.setCollision([ 32, 33 ], true, 'ladderLayer'); backgroundlayer.resizeWorld(); card = game.add.sprite(200, 200, 'card'); game.physics.arcade.enable(card); card.body.gravity.y = 500; card.body.drag.x = 500; game.camera.follow(card); cursors = game.input.keyboard.createCursorKeys(); } function update() { game.physics.arcade.collide(card, blockedLayer); game.physics.arcade.overlap(card, ladderLayer, onLadder, null, this); if (cursors.left.isDown && !card.body.blocked.left) { card.body.velocity.x = -200; } if (cursors.right.isDown && !card.body.blocked.right) { card.body.velocity.x = 200; } if (cursors.up.isDown && card.body.blocked.down) { card.body.velocity.y -= 400; } if (cursors.down.isDown) { card.y += 4; } } function onLadder() { console.log('OnLadder...'); } function render() { game.debug.cameraInfo(game.camera, 500, 32); game.debug.spriteCoords(card, 32, 32); game.debug.text(card.onLadder, 10, 10); }</script><style>body { padding: 0px; margin: 0px;}</style><body></body></html>My tilemap is split into three layers, one backgroundlayer, one layers for blocking tiles and one layer for ladders. With the code above, collision with the blocking layer works just fine. The problem occurs when I add the overlap for the ladderLayer. What happens is that the player stops at the ladder and can't pass through it (as if it where a tile on the blocking layer), but apparently the callback in the overlap is caleld since I get "On ladder..." in the console. If I remove the line game.physics.arcade.overlap(card, ladderLayer, onLadder, null, this) the player can pass by the ladder but of course I don't get anything in the log (the onLadder callback is not called). The same thing happens if I keep the overlap-line and instead remove the line map.setCollision([ 32, 33 ], true, 'ladderLayer'); How is this supposed to work? I have also tried to use the setTileIndexCallback-function but to no avail so far... Any ideas? Finest regards,Rico Link to comment Share on other sites More sharing options...
redsheep Posted January 26, 2015 Share Posted January 26, 2015 For physics between sprite vs tilemapLayer, the overlap and collide method are in fact doing same thing. (I think this problem is caused by careless.) If you want to handle the overlap with collision response, try "getTiles" method of tilemapLayer. you can check the implementation of arcade, http://docs.phaser.io/World.js_.html#sunlight-1-line-716 Link to comment Share on other sites More sharing options...
Recommended Posts