phaser

榴莲不好吃

已于 2022-03-06 14:06:32 修改

阅读量813

点赞数 2

分类专栏：游戏文章标签：游戏美术

于 2022-03-03 21:03:32 首次发布

本文链接：https://blog.youkuaiyun.com/sllailcp/article/details/120528659

版权

游戏专栏收录该内容

12 篇文章

订阅专栏

注意：在Phaser只有一个game对象

常见的资源

图片image

game.load.image('logo','/xxx.png');

规则图集spritesheet（里面每个小图像的宽高都一样类似css里面的精灵图）

  game.load.spritesheet(key,图片资源地址,width,height,第几个)

不规则的精灵图atlasXML/atlas（里面每个小图像的宽高都不一样，位置也没有规律）

  1使用atlasXML添加xml描述文件
  game.load.atlasXML('xmlimg','/xxx.png','xxx.xml');
  2.使用atlas添加json描述文件
  game.load.atlas('jsonImg','xxx.png','/xxx.json');

字体 bitmapFont

// game.load.bitmapFont(key,图片地址,描述文件地址)
game.load.bitmapFont('cedFont','/xxx.png','/xxx,xml')

声音 audio

game.load.audio(key,'xxx.mp3');

视频video

game.load.video(key,'xxx.mp4')

load用来加载资源

cache用来缓存资源，以key:value的形式来缓存,使用资源的时候可以通过key来查找

logo:{'name':value}
audio:{'name':value}
video:{'name':value}
...

注意：key在相同的类型中式不可以重复的（后面的会覆盖前面的），只有在不同的类型可以重复；

资源加载回调事件

onFileStart:在每个资源下载前被调用
onFileError:在每个资源下载失败后被调用
onFileComplete: 在每个资源下载完成后被调用
onLoadStart: 会在每个load下载开始被调用
onBeforeLoadComplete：最后一个资源下载完成之前回调
onLoadComplete：最后一个资源下载完成回调

// onFileStart: (进度,key,资源路径)
game.load.onFileStart.add((progress, key, url) => {})

// onFileError: (key,{file,error}) 图片加载失败
game.load.onFileError.add((key, file) => {})

// onFileComplete(资源数量的进度,key,资源加载成功或者失败true/false,资源个数，所有的资源个数)
game.load.onFileComplete.add((progress, key, success, totalLoad, total) => {})

game.load.onLoadStart.add(() => {})

game.load.onBeforeLoadComplete.add(() => {})

game.load.onLoadComplete.add(() => {})

// 设置并行下载个数
game.load.maxParallelDownloads = 10;

// 执行顺序：
onLoadStart  // 只执行一次
onFileStart // 根据资源个数执行
onFileError
onFileComplete 
onBeforeLoadComplete
onLoadComplete

// 最常用的方法是onFileComplete

显示对象

Image

new Phaser.Image(game对象,x坐标,y坐标,key,哪张图片)
game.world.add(obj): 添加对象到world中才可以显示在屏幕上
上面两行代码可以简写成
game.add.image(x,y,key,frame,group)
注意：group为空的时候，默认添加到world中，如果组不为空就添加到组中

创建一个image对象，不显在屏幕上
game.make.image(x,y,key,frame)

Sprite

new Sprite(game,x,y,key,frame)
Sprite是image的超类，image的功能都有。
Sprite比image多了两个功能，第一个是帧动画，第二十支持物理引擎
Image一般适合在不使用物理引擎或者帧动画的时候使用，image比Sprite更轻量，占用内存会更少

Text

new Text(game,x,y,text,style); 文本对象

     var text = game.add.text(30, 125, "hello world",
        {
            fill: '#fff',
            fontWeight: 100,
            fontSize: '20px',
            backgroundColor: "red",
            wordWrap: true, // 是否换行
            wordWrapWidth: 20, // 超过20px就换行
            align: 'right',
            stroke : '#00000',//描边
            strokeThickness : 3// 描边颜色
        });

Graphics

-new Graphics(game,x,y)
画笔:可以画直线，曲线、多边形，圆形，弧形

var graphics = game.add.graphics(150, 200);     
 /**常用api
  *
  *
  * lineStyle(width, color, alpha);描边样式
  *
  * beginFill(color, alpha);填充样式
  * endFill();
  *
  * moveTo(x, y) 移动画笔到
  * lineTo(x, y) 直线
  *
  * drawCircle(x, y, diameter);圆形
  * drawEllipse(x, x, halfWidth, halfHeight)椭圆halfWidth/halfHeight： 半径
  * arc(x, y, radius) 弧形
  *
  * drawRect(x, y, width, height)矩形
  * drawPolygon(path)多边形，path：参数是多边形顶点的数组
  * */
 graphics.moveTo(0, 0);
 graphics.lineStyle(2, 0xffffff, 1);
 graphics.lineTo(200, 0)
 
 //描边样式
 graphics.lineStyle(2, 0x000000, 1)
 //填充样式
 graphics.beginFill(0xffffff, 1);
 graphics.drawCircle(0, 30, 60);
 
 //描边样式
 graphics.lineStyle(2, 0xffffff, 1)
 //填充样式
 graphics.endFill(); // 结束上一次的颜色
 graphics.beginFill(0x000000, 1);
 graphics.drawRect(0, 60, 100, 80)
 graphics.endFill();

常用显示对象属性

var cedImage = game.add.sprite(0,0,"person",1);
// 坐标 改变左边有3种方法
// 1
cedImage.position = new Phaser.Point(10, 10);
// 2
cedImage.position.x = 20;
cedImage.position.y = 20;
// 3,下面这种方法最常用
cedImage.position.set(game.world.centerX, 30);

// 大小
cedImage.width = 200;
cedImage.height = 200;

//- 缩放 (根据原始大小缩放)
//1
cedImage.scale = new Phaser.Point(0.1, 0.1)
//2
cedImage.scale.x = 0.2;
cedImage.scale.y = 0.2;
//3
cedImage.scale.set(2, 2);

// 锚点 ，中心点（旋转时候用到中心点）
//1
cedImage.anchor = new Phaser.Point(0.1, 0.1)
//2
cedImage.anchor.x = 0.2;
cedImage.anchor.y = 0.2;
//3
cedImage.anchor.set(0.3, 0.3);

// 旋转
cedImage.rotation = 200

// 透明度
cedImage.alpha = 0.5

// 遮罩
 var gmask = game.add.graphics(130, 130);
//填充样式
gmask.beginFill(0xffffff, 1);
gmask.drawRect(0, 0, 50, 50);
gmask.endFill();
logo.mask = gmask;

// 事件
cedImage.inputEnabled = true;
cedImage.events.onInputDown.add(function () {
	console.log("onInputDown了")
}, this);
cedImage.events.onInputUp.add(function () {
	console.log("onInputUp了cedImage")
}, this);

// 销毁
cedImage.destroy()

Phaser中的显示对象容器

text,sprite,image时显示对象也是显示对象容器
group是一个无形的显示对象容器

组的创建

new Group(game,parent,name,addToStage,enableBody,physicsBoayType);

game : game 对象
parent：默认world，也可以是group（组可以添加到组中）
name:组的名字，
addToStage 添加到舞台true/false
enableBody: 物理引擎
physicsBoayType: 物理引擎

var group = game.add.group();
//组中添加元素 三种方式
// 1
var gi1= game.add.image(0,0,"jsonImg",21,group)
// 2
var gi2= game.make.image(100,0,"jsonImg",2);
group.add(gi2);

// 3 只能创建精灵对象，如果创建text或者image就需要用到上面两种
var gs1 = group.create(0,300,"jsonImg",3);
var gs2 = group.create(100,300,"jsonImg",22);

// gs2 会覆盖gs1，可以使用下面两种发放来调节下顺序
group.bringToTop(gs1); //1 不管上面元素，放置到最上面
group.swap(gs1, gs2); //2 交换两个元素的位置

// 透明度
group.plpha = 0.6;
// 坐标
group.x= 100;
group.y= 200;

// 删除存在的对象
group.remove(gs1, true);

//添加子组
var groupChild = game.add.group(group);
groupChild.x=100;
groupChild.y=400;
var gc2 = groupChild.create(0,0,"jsonImg",2);

Phaser如何渲染显示对象

渲染对象列表
在这里插入图片描述
stage

显示容器
显示大小和显示效果

world

显示对象容器
有大小，而且任意大小

camera

 //设置背景颜色
game.stage.backgroundColor = "#a8d4bf";

// 设置世界的大小
game.world.setBounds(0, 0, 1500, 667); // 左上角的坐标，右下角的坐标

//创建两个图片
var gi1= game.add.image(0,0,"jsonImg",21)
var gi2= game.add.image(380,0,"jsonImg",21); // 380在可视范围外，所以要移动可视区域，也就是camera

//移动摄像机
game.camera.x=50;

state （类似vue中的router）

创建发方式

// 第一种对象方式创建
var state1 = {
	preload: function(){},
	create: function(){},
	update: function(){},
	render: function(){}
}
// 第二种构造函数的方式创建
var state2 = function() {
	this.preload(){}
	this.create(){}
	this.update(){}
	this.render(){}
}
// 第三种，继承的方式创建
states class extends Phaser.State{
	preload(){}
	create(){}
	update(){}
	render(){}
}
// 不管用上面方式创建,只要包含了preload||create||update||render其中一个，Phaser就可以把他当作是state,就可以把state对象添加到state管理器中

state使用方式

1.创建state1，然后添加到管理器中

game.state.add(key,state1)
2.start显示想要显示的场景
game.state.start(key)

state实现多页面原理

star(key,clearWoeld,clearCache,params);
clearWoeld：true先清除之前的state再添加，false不清空之前的
params：给下一个state传递参数，下一个state在init(props)中接受

state生命周期与工作原理

init、create，preload，update， shutdowm。
init是第一个执行方法，
然后是preload,触发资源加载系统加载资源，
然后触发create方法
其中init、create，preload只会执行一次
update用来做动画，循环执行
shutdowm:state每次销毁的时候调用，切换state的时候上一个state会执行这个方法，可以在这个方法中销毁一些对象
在这里插入图片描述

动画

补间动画

创建方式

var tween = game.add.tween(diplayObject)
//当前显示对象的状态属性是初始状态，用to显示最后的属性状态
tween.to(properties,duration,ease,autoStart,delay,repeat,yoyo)
//当前显示的属性状态是最后的状态，用from设置初始的属性状态
tween.from(properties,duration,ease,autoStart,delay,repeat,yoyo)
/*
properties：是一个对象，用来设置状态参数，例如{x:200,y:100}
duration：时长
ease：动画（doc/index.html下打开TweenManager的源码，easeMap中有所有的动画方式）
autoStart：是否自动播放，默认false
delay：延时，默认0
repeat：是否重复，默认false ，设置为-1的时候会无限次循环
yoyo：false，来回执行
*/

tween.start();// 开始动画，当autoStart设置为true的时候就不用设置tween.start()了

-监听事件
onStart:动画开始
onLoop动画循环
onComplete：动画完成，无线循环的动画不会执行onComplete方法

帧动画

创建方式，只有精灵才能有帧动画

var s = game.add.sprite(x,y,"图片集");
s.anamitions.add(name,frames,framesRate,loop,useNumbericIndex)
s.anamitions.play(name,framesRate,loop); // 播放
s.anamitions.stop(name); //停止动画
/*
name:动画名字
frames:动画集合中的哪几个图片，可以使用数字/字符串，也可以使用，null表示所有图片
framesRate:帧率，默认每秒40帧
loop:是否循环，默认false；
useNumbericIndex:指定第二个参数是否可以用数字来代表
*/

物理引擎

Arcade

简单的引擎：支持重力，摩擦力，加速度，碰撞检测等，只支持AA,BB检测，所有的对象都是规则的矩形，根据矩形的长款和位置检测。

常用方法

// 开启物理殷勤
game.physics.startSystem(Phaser.Physics.ARCADE);

// 只有在精灵上才可以使用
let sprite = game.add.sprite();
game.physics.enable(sprite,Phaser.physics.ARCADE)

// 在组中启动物理引擎
let group = game.add.group();
group.enableBody = true;
group.physicsBodyType = Phaser.Physics.ARCADE

// 设置速度，所有的物理属性，都通过body设置
sprite.body.velocity = new Phaser.Point(20,30);
 // sprite.body.velocity.x = 20;
 // sprite.body.velocity.y = 30;

碰撞检测

在update中调用下面的方法

// 精灵与精灵
game.physics.arcade.pverlap(sprite1,sprite2,this.callback)
// 精灵与组中的所有精灵
game.physics.arcade.overlap(sprite,group,this.callback)
//组与组中的所有精灵
game.physics.arcade.overlap(group1,group2,this.callback)
//组内所有的精灵
game.physics.arcade.overlap(group,this.callback)

P2

功能较多，支持不规则的检测，等

常用方法大全

Phaser.Game（游戏的核心）

new Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)：
/*
new Phaser.Game: width默认值800；height默认值600；render指要使用的渲染器：phaser.auto将自动检测，
phaser.webgl，phaser.canvas或phaser.headless；parent指将phaser插入哪个dom元素（dom的id），
parent为空时插入body中；state指默认状态对象，一个由状态函数（preload、create、update
（聚焦于游戏画布时会循环调用该函数）和render（循环调用））组成的对象或null；transparent指
是否使用透明的canvas画布背景
*/

add：// 返回Phaser.GameObjectFactory对象，用于添加音频、图像等元素
camera：// 返回Phaser.Camera对象
input：// 返回Phaser.Input对象
load：// 返回Phaser.Loader对象，用于加载游戏资源
make：// 返回Phaser.GameObjectCreator对象，创建一个新对象
physics：// 返回Phaser.Physics对象
rnd：// game.rnd随机数，返回一个Phaser.RandomDataGenerator对象,
scale：// 返回Phaser.ScaleManager对象
sound：// 返回Phaser.SoundManager对象
state：// 返回Phaser.StateManager对象
time：// 返回Phaser.Time对象,(类似的定时器)
world：// 返回Phaser.World对象

Phaser.Graphics

generateTexture(resolution, scaleMode, padding)
/*generateTexture返回PIXI.Texture对象，返回一个能用于创建sprite的texture，resolution指
texture的分辨率，默认值为1，scaleMode默认值为0，padding默认值为0;
let g= game.add.graphics(0, 0);
g.drawRect(0, 0, 100, 100);
const gImg = game.add.image(0, 0, g.generateTexture()); // 将矩形做成图片；
*/

beginFill(color,alpha) // 返回PIXI.Graphics对象，指定填充颜色和透明度

Phaser.World

bringToTop(child)// 将child移至group最上面 this.world.bringToTop(gImg);
randomY // 只读属性，获取一个小于等于world当前高度的随机整数
resize(width, height) // 更新world的宽高
setBounds(x,y,width,height)// 更新world的边界

Phaser.Image

events // 返回Phaser.Events对象
inputEnabled 
/* 默认游戏对象不处理任何input事件，将该值置为true则为游戏对象创建了一个inputHandler，
它会处理click或touch事件*/

kill() 
/* kill一个对象，一个被kill的对象其alive、visible和exists属性均为false，但不会销毁该对象，如果
游戏中不再需要该对象，应该使用destroy方法*/

smoothed 
/* 布尔值，默认为true，使texture平滑，仅当texture为image时该属性生效（感觉false时图片更清晰）*/

Phaser.Text

destroy(destroyChildren) 
/*destroy文本对象，将其从group中移除，destroyChildren默认为true，即该对象的所有
children均会被destroy*/

events // 返回Phaser.Events对象
input // 返回一个Phaser.InputHandler对象

inputEnabled 
/*布尔值，默认不处理任何input事件，inputEnabled为true时创建一个inputHandler，
开始处理click或touch事件*/

kill() // 返回一个PIXI.DisplayObject对象，kill一个文本对象，其alive, exists和visible属性均为false

setShadow(x, y, color, blur, shadowStroke, shadowFill) 
/* setShadow():返回Phaser.Text对象，x和y分别指水平和垂直的阴影距离，默认为0，color指阴影颜色，
默认为rgba(0,0,0,1)，blur指阴影模糊程度，默认为0不模糊，shadowStroke与shadowFill默认为true，
应用于文字描边与文字填充*/

setText(text, immediate) 
/* setText():返回Phaser.Text对象，设置显示文本，immediate布尔值，默认为false，
则在下一次render循环时自动更新文本，否则立即更新*/

setTextBounds(x, y, width, height) 
/* 设置文本边界，确定了文本样式中boundsAlignH与boundsAlignV属性值的基准线*/

Phaser.Group

callAll(method,context,args)：//为所有child（不管child是alive或dead）调用method方法
create(x, y, key, frame, exists, index)：
/*返回一个displayObject对象，创建一个Phaser.sprite对象并添加至该group，child元素自动添加在group顶部，
如果group.enableBody已设置，则该对象也有一个physics body，如果Group.inputEnableChildren已设置，
则该对象也有一个input处理器。x和y是相对于父元素的坐标值（number），key值为字符串、
Phaser.RenderTexture、Phaser.BitmapData、Phaser.Video或PIXI.Texture，frame为指定的frame id或
frame name，exists默认值为true，默认存在sprite的state属性。index控制child被插入至group第几层，0为最底层*/

createMultiple(quantity, key, frame, exists)：
/*返回一个Array对象，创建多个sprite对象并将其添加至group的顶部，quantity指sprite的数量，key指sprite的图片，
frame指哪些帧应用于这些sprite，exists布尔值，默认false*/

forEach(callback, callbackContext, checkExists, args)：
/*对group内所有child调用callback函数，callback函数的第一个参数为调用函数的child，callbackContext指定函数执行环境，
checkExist默认值为false，如果值为true则只有exists=true的child调用callback函数，其他child直接跳过，args指callback的
函数参数getChildAt(index)：返回指定索引的child*/

remove(child, destroy, silent)：
/*返回布尔值，移除指定child，child指移除的child，destroy为true，则调用destroy函数，silent为true则不触发
onRemovedFromGroup事件，否则触发*/
setAll(key, value, checkAlive, checkVisible, operation, force)：
/*为该group所有的child设置新属性值，新属性值仅改变当前group的child，不会递归影响下一层child。
key指属性，value指属性值，checkAlive布尔值，默认false，如果设置为true则只更新alive=true的child，
checkVisible布尔值，默认false，如果设置为true则只更新visible=true的child，operation控制值如何改变，默认为0，
即用新值替代，1相加，2相减，3相乘，4相除，force默认为false，如果值为true，则不管child属性是否存在，都将设置其值，
false则不进行任何操作*/