phaser遊戲開發入門2
阿新 • • 發佈:2018-12-19
上一節我們展示了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的下載地址