此篇文章是 Pharser 系列的一部分。點選這裡 查看這個系列的第一篇文章。 場景是我們定義遊戲的地方，在配置中將它們作為屬性傳遞給 scene 物件。 特別是，我們可以定義 preload 是我們載入外部資源的函式 create 在遊戲剛剛建立時被呼叫，在這裡我們可以定義遊戲開始時所需的 GameObjects update 是遊戲事件迴圈，用於定義遊戲的運作方式 GameObjects 是 Phaser 物件的一種特殊類型 以下是上述提到的兩個事件的範例： function preload() {} function create() {} new Phaser.Game({ width: 450, height: 600, scene: { preload: preload, create: create } }) 或者，因為在這種情況下每個屬性都與函式具有相同的名稱： new Phaser.Game({ width: 450, height: 600, scene: { preload, create } })
本篇文章是 Phaser 系列的一部分。點擊這裡查看系列文章的第一篇。 你可以將圖片添加為 GameObjects，但在遊戲開始時顯示圖片時，需要在 preload() 函數中將它們預加載。我們要為它們分配一個標識符，然後在 create() 函數中使用該資源添加圖片： function preload() { this.load.image('apple', 'apple.png') } function create() { this.add.image(200, 200, 'apple') } 注意，200, 200 是我們要放置圖片的位置。它指的是圖片的中心點。 如果要將其設置為左上角位置（較易於理解），可以在圖片上調用 setOrigin() 方法： const image = this.add.image(200, 200, 'apple') image.setOrigin(0, 0) 一旦圖片被創建並添加，我們可以對其進行多種操作，包括縮放： image.setScale(2) 翻轉： image.flipY = true image.flipX = true 等等。
本篇文章是 Phaser 系列的一部分。點擊這裡查看系列的第一篇文章。 Phaser 提供了三種不同的內建物理引擎: Arcade 物理引擎 Matter.js Impact (相容 Impact.js) Arcade 物理引擎是其中最簡單的一種，現在我們就來介紹它。 在 Phaser.Game 初始化配置物件中，通過添加 physics 屬性來啟用 Arcade 物理引擎: const config = { //... physics: { default: 'arcade', arcade: { debug: false } } } 你可以將物理引擎添加到一個單獨的遊戲對象中，如下所示: const dog = this.physics.add.sprite(20, 20, 'dog') 你也可以創建一個物理組。 組對於設置一組物件的共同規則非常有用。 我們有兩種類型的組: 靜態組和動態組。靜態組包含不會移動的元素，例如平台遊戲中的地面: //在 preload() 方法中 this.load.image('ground', 'assets/platform.png') //在 create() 方法中 const platforms = this.physics.add.staticGroup() const ground = this.add.sprite(200, 200, 'ground') platforms.add(ground) 注意: 可以從 https://github.com/photonstorm/phaser3-examples/tree/master/public/assets 下載該資源。...
本文章是 Phaser 系列文章的一部分。點擊這裡查看系列文章的第一篇。 在 Phaser 中，除了 preload() 和 create() 這兩個場景外，我們還有第三個場景，被稱為 update()。 在這裡，一切事情都會發生。 preload() 和 create() 只會執行一次。 update() 會一直被呼叫，成為一個無窮迴圈，直到遊戲結束。 在這個例子中，我們創建了一個文字，它慢慢地移動到畫布的右下角： let text function create() { text = this.add.text(100, 100, 'test') } function update() { text.x += 1 text.y += 1 } const game = new Phaser.Game({ width: 400, height: 400, scene: { create, update } }) 注意我在頂部添加了 let text，這樣我們可以在 create() 和 update() 中引用它。 在 update() 中，我修改了 x 和 y 屬性。您還可以修改其他屬性，例如可以修改 angle 以旋轉物體：...
在這個教程中，我將使用Phaser.js創建一個平台遊戲。 玩家可以使用左/右箭頭鍵移動，使用上箭頭鍵跳躍。目標是收集遊戲中的所有星星： 當玩家收集到所有星星時，我們將在頂部顯示“遊戲結束”，然後沒有其他操作。 雖然這非常簡單，但這是開始一個非常有趣的遊戲的開始，並且這也是展示Phaser以及JavaScript作為遊戲創作編程語言的絕佳方式。 設置專案 創建一個空文件夾，然後運行以下命令： npm init -y 這將初始化一個最小的’package.json’文件。 然後運行以下命令： npm install phaser 如果尚未安裝Parcel，請運行以下命令： npm install -g parcel-bundler 現在創建一個’app.js’文件，然後運行： parcel watch app.js 這將告訴Parcel在’dist/app.js’文件中構建我們的遊戲。 創建一個’index.html’文件，內容如下： <!DOCTYPE html> <html> <head> <script src="./dist/app.js"></script> </head> </html> 安裝’browser-sync’以運行包含此文件夾內容的HTTP服務器： npm install -g browser-sync 然後運行以下命令： browser-sync start --server --files "." 以上命令會觀察當前文件夾（以及所有子文件夾）中的所有文件的變化，並在端口3000上啟動一個Web服務器，自動打開一個瀏覽器窗口以連接到服務器。 每次更改文件，瀏覽器都會刷新，因此我們可以更快地進行開發。 太好了！我們可以開始了。 初始化Phaser 打開’app.js’並編寫以下代碼： import Phaser from 'phaser' 讓我們添加一個最小的配置： const config = { width: 800, height: 600, backgroundColor: 0xffffff, scene: { preload, create, update }, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } } } const game = new Phaser....
選擇一個專業領域是定義你的網絡角落內容的一種方式。 它可以是關於你自己，你的愛好、熱情和故事。但這樣不會吸引太多人。也許一篇文章能解決他們的問題，但他們還會回來嗎？可能不會。 因為你的博客不是關於你，而是關於你的讀者。 選擇一個專業領域。一個小的主題。 比如說你是一個程序員。你可以寫一個關於C++編程語言的博客，每週寫兩篇文章，20年都寫不完題目。甚至這個專業領域可能還太廣了，並不是一個真正的專業領域。 一個更好的專業領域可以是C++嵌入式設備編程，或者使用C++建立遊戲。 然後再對這一群人進行進一步的過濾。比方說使用C++構建2D遊戲引擎。 你也可以從這個專業領域寫幾年的內容，但這一次如果有人對這個主題感興趣，他們會收藏你的網站，下載你的所有東西，因為你是專家（或者至少比他們更專業），他們可以從你這裡獲得很多價值。
建立一個現代化的項目，並開始使用Phaser 3構建JavaScript HTML5遊戲 Phaser是一個了不起的平台，它使創建遊戲變得非常簡單，還支持物理引擎。它足夠受歡迎，你可以找到插件和工具來更好地構建遊戲並更快地構建遊戲。 它基於HTML5技術，這意味著您可以通過Web進行遊戲分發，並且如果需要，也可以將其打包為桌面或移動應用程序。 遊戲編程是一個大的主題，在這個介紹中，我想談談基本知識，這些基本知識足以創建簡單的遊戲。 在這個教程中，我想詳細介紹一個最佳設置，以使用Phaser 3構建遊戲。 讓我們在文件夾中使用npm安裝phaser： npm init -y npm install phaser 現在讓我們設置 Parcel 來打包我們的遊戲： npm install -g parcel-bundler 現在創建一個 game.js 文件，內容如下： import Phaser from 'phaser' new Phaser.Game() 現在運行 parcel watch game.js Parcel將在 dist/game.js 文件中生成我們的JavaScript代碼。 現在創建一個 index.html 文件，內容如下： <!DOCTYPE html> <html> <head> <script src="./dist/game.js"></script> </head> </html> 安裝 browser-sync 以運行一個包含這個文件夾內容的HTTP服務器： npm install -g browser-sync 然後運行 browser-sync start --server --files "." 上述命令將監視當前文件夾（和所有子文件夾）中的所有文件的變化，并在端口3000上啟動一個Web服務器，自動打開一個瀏覽器窗口連接到服務器。 每次您更改文件時，瀏覽器將自動刷新。 在我們原型開發遊戲時，這將非常有用。 您現在應該在瀏覽器中看到一個空白屏幕，因為我們初始化了Phaser： import Phaser from 'phaser' new Phaser....