Saya cuba memuatkan peta jubin yang dibuat dalam editor peta Berjubin. Saya telah mengeksportnya sebagai fail json dan meletakkannya dalam folder aset dalam folder awam bersama set jubin saya. Semua yang muncul di kanvas adalah hitam. Saya cuba menukar kedudukan kamera untuk melihat sama ada itu membuat perbezaan, tetapi tidak berjaya. Saya tidak mendapat sebarang mesej ralat dan pada tab rangkaian saya dapat melihat peta dan set jubin dimuatkan. Saya tidak dapat mencari jawapan untuk masalah ini.
Saya utama.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')
// 在这里加载资源
this.load.setBaseURL('http://localhost:5500/public/assets/')
this.load.tilemapTiledJSON('map', 'map.json')
this.load.image('tiles', 'Tileset.png')
}
function create() {
// 在这里设置游戏对象和逻辑
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)
// 居中图层
const width = layer.widthInPixels
const height = layer.heightInPixels
layer.setPosition(
game.config.width / 2 - width / 2,
game.config.height / 2 - height / 2
)
// 设置相机以显示地图的相关部分
this.cameras.main.setBounds(0, 0, game.config.width, game.config.height)
this.cameras.main.centerOn(map.widthInPixels / 2, map.heightInPixels / 2)
}
function update() {
// 在这里更新游戏状态
}
Indeks saya.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>
Saya telah log set jubin dan peta dan kedua-duanya memuatkan objek dengan betul. Sebarang bantuan amatlah dihargai.
EDIT: Saya juga mengklon repositori pada github yang sepatutnya berfungsi dengan baik, tetapi saya menghadapi masalah yang sama dalam kod mereka. Benar-benar tidak tahu apa yang berlaku. Ini adalah repositori yang saya periksa dari github: https://github.com/ourcade/phaser3-dungeon-crawler-starter
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Semuanya nampak baik kecuali
config中的renderfungsi yang saya tidak faham. Anda boleh menyemak nama Layer dan Tileset dalam JSON/Tiled dan kod anda untuk melihat sama ada ia sepadan (perhatikan ruang dan huruf besar yang betul) . Ini boleh menyebabkan peta gagal dilukis. Terutama ayat berikut:const map = this.make.tilemap({ key: 'map' })mapconst tileset = map.addTilesetImage('RPG_Tileset', 'tiles')RPG_Tileset和tilesconst layer = map.createLayer('Tile Layer 1', tileset, 0, 0)Tile Layer 1Malah kehilangan ruang belakang boleh menyebabkan penciptaan gagal.
By the way: Adakah anda memuat turun fail zip SourceWithAssets.zip dari sini https://github.com/ourcade/phaser3-dungeon-crawler-starter/,releases Atau jika ia seperti arahan
readme.md中提到的那样使用了git-lfs？如果是这样，它应该可以工作，我刚刚尝试了一下，它可以工作。如果不行，请确保更新您的node和/或npm版本，并按照readme中的说明在主文件夹中执行npm install.