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的下载地址

https://download.csdn.net/download/tx101q/10760079