Home » Phaser Example

Phaser 官方範例 - load an image

[ 日期： | 瀏覽：23,529 | 迴響：搶沙發 ]
範例 1

Phaser 官方有一系列的範例，我會一一的針對這些範例來帶各位看看 Phaser 這遊戲框架能做到怎樣的效果。首先來看第一個範例，從範例中可以學到使用 Phaser 的基本用法跟如何預載圖片。

在網頁中基本上只要有個 div 就可以了：

檢視原始碼 HTML
1
2
3

<body>
	<div id="phaser-example"></div>
</body>

當然要記得引用 phaser.js 才行喔！接著來建立一個簡單的遊戲世界吧：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 在 #phaser-example 中產生遊戲畫布
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {
	preload: preload,
	create: create
});
 
function preload() {
    //  載入一張圖片, 將名稱命名為 pikachu
    game.load.image('pikachu', 'assets/pics/pikachu.jpg');
}
 
function create() {
    //  加入一個 Sprite, 影像來源就是一開始載入的圖片
    game.add.sprite(0, 0, 'pikachu');
}

只要使用 new Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig) 就能建立一個遊戲的世界了。在建立的過程中除了指定寬高之外，我們還能決定是要使用 Canvas 還是 WebGL 方式來渲染畫面。一開始我們先傳入前 5 個參數就好，其它的之後再說明。

在建立遊戲世界時，可以自訂在 preload，create，update 及 render 等狀態時要執行的動作；像是在 preload 狀態時預載各種圖片資源檔等等。

我們在 preload 狀態時使用 Loder 的 image(key, url) 方法來載入圖片，並給予一個特別的名稱來識別字。

當完成後即會進入到 create 狀態，在這邊我們就能取用剛剛已經預載下來的資源檔案來加入像是圖片或是 Sprite 等元素了。而要加入一個 Sprite 則可以使用 GameObjectFactory 的 sprite(x, y, key) 方法來將指定識別字的資源檔放在指定的座標上囉！

若沒有意外的話，瀏覽範例時就會看到一隻皮卡丘在畫面的左上角了：
load-an-image_0

各位可以試著載入不同的圖片並一一加到指定的座標上。

範例 1

官方範例網址：load an image

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響