1. 程式人生 > >phaser遊戲開發入門2

phaser遊戲開發入門2

上一節我們展示了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的下載地址