上一節我們展示了phaser構建遊戲的基本結構

本文繼續深入，展示圖片

下面先將圖片放在res資料夾中

然後再用game.load.image("指定資源名稱"，"資源地址")載入到遊戲緩衝中，以便使用時呼叫

載入後就可以直接使用了，下面是一個旋轉的美眉程式碼

其他內容不變，直接上

main.js

//第二節 載入展示圖片的程式碼

//構建遊戲  第一第二個引數是遊戲螢幕的寬高，這裡設定的是自適應螢幕寬高，第三個引數是渲染的方式，這裡採用基礎的canvas，可以無需伺服器就能直接檢視結果。如果換成WEBGL，渲染效率高，但是需要裝置支援WEBGL，不佈置到伺服器上無法檢視結果
//第四個引數是指定canvas附著的div  這裡可以設定為null，第五個引數遊戲開始時三個階段。第一個階段是預載靜態資源。第二初始化遊戲 第三遊戲渲染更新。
var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'phaser-example', { preload:preload,create: create,update:update });
var k=false;
var mm_pic=null;//定義一個美眉
function preload(){

console.log("預載美眉圖片開始");
//想要展示圖片先要載入一張圖片資源，下面載入一張美眉的圖片
//第一個引數是制定資源名稱，第二個引數是資源的地址
game.load.image("mm","./res/mm.jpg");

}
function create() {
 console.log("初始化開始");
 game.stage.backgroundColor=0xffffff;
 //向舞臺新增文字
 // 第一引數  x; 第二個引數 y 第三個引數，文字內容，第四個文字樣式
 game.add.text(100,100,"展示圖片演示",{font: "65px Arial", fill: "#ff0044", align: "center" });
  //向舞臺新增一個美眉，引數 第一第二是座標，第三個是資源名稱
 mm_pic=game.add.sprite(300,300,'mm');
 mm_pic.width=300;//設定圖片的寬，
 mm_pic.height=300;//設定圖片的高
 mm_pic.anchor.set(0.5,0.5);//軸心點，旋轉時候圍繞的點
}
function update(){
	//此處內容迴圈執行，所以要加一個控制程式碼。
	if(!k){
	console.log("更新！");
	k=true;
	}
//讓美眉轉起來
mm_pic.rotation+=0.01;

}
 

執行不出錯的話就會如下

 本節的demo2的下載地址