phaser.js 显示对象笔记

创建游戏容器需要几个基本参数，宽、高、第三个现在我还不造啥意思，div的id（应该是拿它来当游戏的容器的意思吧），一个总管对象（它至少包括preload,create两个方法）

 var game = new Phaser.game(w,h,Phaser.AUTO,"div的id",state);

function state(game){

    this.preload = function(){

        game.load.image("cat","images/cat.png");

        //这里加载图片对象，必须参数是，名称，路径。这里用的是相对路径

    }

    this.create = function(){

        game.add.image(100,50,"cat");

        //这里创建图片对象并显示出来。x、y坐标，要显示的图片名称

    }

}

还可以创建雪碧图，

game.load.spritesheet("sprite","images/sprite.png",100,100);

//加载一个雪碧图列表，名称，相对路径，单个元素的宽高

game.add.image(0,0,"sprite",0);

game.add.image(50,0,"sprite",1);

game.add.image(0,50,"sprite",2);//最后一个参数代表要取第几个，从0开始

这样就从一张图里显示出了多个图片对象，换而言之就是说，可以把多个图片对象合成到一张图里，从而减少http请求次数。只是这里要如何才能区分这多个图片对象呢，暂时还没看到为spritesheet里的子对象命名啊。

 

Phaser的显示对象除了图片外，还有

图片、图形、按钮、文字、精灵、瓦片精灵、瓦片地图、粒子，初学阶段先了解前面5种吧。。。（好困难的样子orz）

图形graphics：

game.add.graphics(x,y,group);x，y坐标，所属分组

有点疑问，怎么没有参数表示这是创建一个什么图形呢，常见的不是有矩形，原型三角形什么的吗，然后才发现，这其实并不是特指某个图形，其实是画板的意思，得有了画板才能往上画图形，所以明白了，创建图形对象必须先有这个graphics画板，画板画板画板。用这个可以绘制出矩形、圆角矩形、圆、椭圆、弧形、多边形、直线、折线、曲线。。和canvas差不多。

graphics.drawRect() 圆形

graphics.drawRoundedRect()圆角矩形

graphics.drawCircle()圆

graphics.drawEllipse() 椭圆

graphics.arc() 弧形

graphics.drawPolygon() 多边形

graphics.moveTo() 折线

graphics.lineTo()直线

graphics.bezierCurveTo() 曲线

图形填充：

graphics.beginFill(color,alpha)颜色16进制，透明度0-1之间

graphics.endFill()结束填充

图形描边：

graphics.lineStyle（lineWidth,color,alpha）描边粗细，颜色，透明度

清空画板：

graphice.clear()会清空之前绘制的所有图形，同时也会清空设置过的描边和填充样式。

 

按钮button

game.add.button(x,y,key,callback,callbackContent,overFrame,outFrame,downFrame,upFrame,group)

参数是：xy坐标值，要显示的图片，回调函数，回调函数this所指代的值，按钮的4个状态分别显示哪个帧图(over/out/down/up)非必须