我正在尝试使用Tiled创建一个平台游戏来创建我的地图。我制作了地图并将其导出为.json对象。我可以让地图出现在我的游戏中，但是我的精灵在我的地板上掉了下来。
我已经经历了几个小时的教程，似乎在阳光下尝试了一切，没有运气。我甚至在Tiled中创建了一个新的“碰撞”图层。这是我所有相关的代码：
JSON：
{ "height":20,
"layers":[
{
"data":[491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602, 631, 632, 633, 634, 635, 636, 637, 638, 639, 631, 632, 633, 634, 635, 636, 637, 638, 639, 631, 632, 633, 634, 635, 636, 637, 666, 667, 668, 669, 670, 671, 672, 673, 674, 666, 667, 668, 669, 670, 671, 672, 673, 674, 666, 667, 668, 669, 670, 671, 672, 701, 702, 703, 704, 705, 706, 707, 708, 709, 701, 702, 703, 704, 705, 706, 707, 708, 709, 701, 702, 703, 704, 705, 706, 707, 736, 737, 738, 739, 740, 741, 742, 743, 744, 736, 737, 738, 739, 740, 741, 742, 743, 744, 736, 737, 738, 739, 740, 741, 742, 491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602, 631, 632, 633, 634, 635, 636, 637, 638, 639, 631, 632, 633, 634, 635, 636, 637, 638, 639, 631, 632, 633, 634, 635, 636, 637, 666, 667, 668, 669, 670, 671, 672, 673, 674, 666, 667, 668, 669, 670, 671, 672, 673, 674, 666, 667, 668, 669, 670, 671, 672, 701, 702, 703, 704, 705, 706, 707, 708, 709, 701, 702, 703, 704, 705, 706, 707, 708, 709, 701, 702, 703, 704, 705, 706, 707, 736, 737, 738, 739, 740, 741, 742, 743, 744, 736, 737, 738, 739, 740, 741, 742, 743, 744, 736, 737, 738, 739, 740, 741, 742, 491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602],
"height":20,
"name":"dark_background",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":25,
"x":0,
"y":0
},
{
"data":[579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 579, 580, 581, 582, 583, 0, 0, 0, 0, 0, 579, 580, 581, 582, 583, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 579, 580, 581, 582, 583, 579, 580, 581, 582, 579, 579, 580, 581, 582, 583, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 580, 581, 582, 583, 579, 580, 581, 582, 583, 0, 0, 0, 0, 0, 579, 580, 581, 582, 583, 579, 580, 581, 582, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 580, 581, 582, 583, 579, 580, 581, 582, 583, 579, 580, 581, 582, 583, 579, 580, 581, 582, 583, 579, 580, 581, 582, 583],
"height":20,
"name":"metal_tileset",
"opacity":1,
"properties":
{
"collision":"true"
},
"type":"tilelayer",
"visible":true,
"width":25,
"x":0,
"y":0
},
{
"data":[813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 813, 813, 813, 813, 813, 0, 0, 0, 0, 0, 813, 813, 813, 813, 813, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 0, 0, 0, 0, 0, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813],
"height":20,
"name":"collision",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":25,
"x":0,
"y":0
}],
"nextobjectid":1,
"orientation":"orthogonal",
"properties":
{
},
"renderorder":"right-down",
"tileheight":32,
"tilesets":[
{
"firstgid":1,
"image":"scifi_platformTiles_32x32.png",
"imageheight":736,
"imagewidth":1120,
"margin":0,
"name":"scifi_platformTiles_32x32",
"properties":
{
},
"spacing":0,
"tilecount":805,
"tileheight":32,
"tilewidth":32
},
{
"firstgid":806,
"image":"collidable.gif",
"imageheight":137,
"imagewidth":480,
"margin":0,
"name":"collision",
"properties":
{
},
"spacing":0,
"tilecount":60,
"tileheight":32,
"tileproperties":
{
"7":
{
"Collidable":"True"
}
},
"tilewidth":32,
"transparentcolor":"#ff0018"
}],
"tilewidth":32,
"version":1,
"width":25
}
Javascript：
var game = new Phaser.Game(800, 640, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.tilemap('mapName', 'assets/tilemap.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('sprites', 'assets/scifi_platformTiles_32x32.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var map;
var platforms;
function create() {
map = game.add.tilemap('mapName');
map.addTilesetImage('scifi_platformTiles_32x32', 'sprites');
background = map.createLayer('dark_background');
level1 = map.createLayer('metal_tileset');
background.resizeWorld();
game.physics.startSystem(Phaser.Physics.ARCADE);
}
我已经查看了“Tilemap Collisions don't work in Phaser”，它似乎没有帮助我......
答案 0 :(得分：2)
如果有人在Phaser3中寻找解决方案：
var map = this.make.tilemap({ key: 'map', tileWidth: 16, tileHeight: 16 });
var tileset = map.addTilesetImage("tileset-images", 'tiles');
var tile_layer = this.map.createStaticLayer('walls', tileset, 0, 0);
// Set collision with player (can also be a group)
tile_layer.setCollisionByExclusion([-1]);
this.physics.add.collider(player, tile_layer);
（在create方法中使用过此方法）
答案 1 :(得分：1)
您尚未启用与瓷砖的碰撞。
为此，在您的创建功能中，您必须添加function update(){
this.game.physics.arcade.collide(player, level1);
}
当然你需要改变＆＃34; collisionLayer＆＃34;使用您的图层，但您可以阅读更多here。
此外，在您的更新功能中，您必须检查播放器和碰撞层之间的碰撞，如下所示：
#include "point.h"
#include <deque>
class A {
std::deque<Point> a;
public:
const std::deque<Point>& getdq() const { return a; }
};
其中＆＃34; level1＆＃34;是碰撞层。