首先,確保你已經安裝了 Node.js 和 npm。然后按照以下步驟操作:
一、使用pnpm初始化一個新的 Vite 項目
pnpm create vite
輸入名字
選擇模板,這里我選擇Vanilla,也可以選擇其他的比如vue
選擇語言
項目新建完成
二、安裝相關依賴
進入項目,安裝依賴
cd vite-phaserjs-demo01
pnpm install
pnpm add --save phaser
三、替換main.js文件內容
import Phaser from 'phaser';const config = {type: Phaser.AUTO,width: 800,height: 600,scene: {preload: preload,create: create,update: update}
};const game = new Phaser.Game(config);
var text;var textStyle= { font: "48px Arial", fill: "#ff0044", align:"center" };
function preload () {//preload...
}function create () {// 添加文本到場景中text = this.add.text(400, 300, 'Hello, Phaser!', {fontSize: '48px',color: '#ffffff',fontFamily: 'Arial'});console.log('text', text)//錨點設置// 設置文本錨點為中心text.setOrigin(0.5);
}function update () {//update ...
}
最后輸入pnpm run dev運行效果如下: