相位器没有加载我的磁贴图，只显示黑屏

我正在尝试加载在平铺地图编辑器中创建的平铺地图。我已经将其导出为json文件，并将其与我的标题表一起放在公共文件夹中的资产文件夹中。画布上显示的都是黑色的。我试着改变相机的位置，看看是否有什么不同，但它没有。我没有得到任何错误，在网络选项卡上，我可以看到地图和标题表正在加载。我无论如何也找不到一个对这个问题有效的答案。

我main.js

var config = {
type: Phaser.CANVAS,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update,
},
render() {
Phaser.Renderer.CANVAS
},
}
var game = new Phaser.Game(config)
function preload() {
console.log('preload')
// Load assets here
this.load.setBaseURL('http://localhost:5500/public/assets/')
this.load.tilemapTiledJSON('map', 'map.json')
this.load.image('tiles', 'Tileset.png')
}
function create() {
// Set up game objects and logic here
const map = this.make.tilemap({ key: 'map' })
const tileset = map.addTilesetImage('RPG_Tileset', 'tiles')
console.log(tileset)
const layer = map.createLayer('Tile Layer 1', tileset, 0, 0)
// Center the layer
const width = layer.widthInPixels
const height = layer.heightInPixels
layer.setPosition(
game.config.width / 2 - width / 2,
game.config.height / 2 - height / 2
)
// Set up the camera to show the relevant portion of the map
this.cameras.main.setBounds(0, 0, game.config.width, game.config.height)
this.cameras.main.centerOn(map.widthInPixels / 2, map.heightInPixels / 2)
}
function update() {
// Update game state here
}

我的index . html。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Phaser Game</title>
</head>
<body>
<canvas id="game"></canvas>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
<script src="main.js"></script>
</body>
</html>

我已经记录了tileset和map out，两者都正确加载了对象。如有任何帮助，不胜感激

编辑:我还克隆了一个应该从github工作的repo，我对他们的代码有同样的问题。真的不知道发生了什么。这是我从github检查的repo: https://github.com/ourcade/phaser3-dungeon-crawler-starter

除了config中的render函数，我不理解，一切似乎都很好。你可以检查JSON/Tiled和你的代码中的Layer和Tileset的名称，如果它们匹配(注意空格和正确的大小写)。这可能导致无法绘制地图。尤其是以下语句:

const map = this.make.tilemap({ key: 'map' })
- 这里的map键
const tileset = map.addTilesetImage('RPG_Tileset', 'tiles')
- 这里RPG_Tileset和tiles
const layer = map.createLayer('Tile Layer 1', tileset, 0, 0)
- 这里的Tile Layer 1

即使缺少尾随空格也会导致创建失败。

顺便说一句: 你下载了SourceWithAssets.zip文件从这里https://github.com/ourcade/phaser3-dungeon-crawler-starter/releases/tag/latest或使用git-lfs中提到的readme.md?如果是这样的话，这应该是可行的，我刚刚做了，它是可行的。如果不能确保更新node和/或npm版本，并按照readme中提到的在主文件夹中执行命令npm install。

相关内容

最新更新

热门标签：