使用JSON和Tiled在Phaser中創建碰撞圖層

Question

我正在嘗試使用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」 已經和它似乎並不被幫助我...

Answer 1

您尚未啓用與磁貼的衝突。 爲了做到這一點，在您的創建功能中，您必須添加map.setCollisionBetween(1, 999, true, 'collisionLayer'); 當然，您需要更改圖層的「collisionLayer」，但您可以閱讀更多here。

此外，在更新功能，您必須檢查您的播放器和碰撞層之間的碰撞是這樣的：

function update(){ 
    this.game.physics.arcade.collide(player, level1); 
} 

其中「1級」是碰撞層。