我对pahser的理解

Posted 2020-12-29 lichunjing

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我对pahser的理解相关的知识，希望对你有一定的参考价值。

Phaser就是一款免费开源的html5游戏框架。

特点：

高性能：快速、免费、易于维护。一方面，开发者可以直接通过Koding平台上的VM开发系统进行代码编写及预览。另一方面，也可以在支持Canvas的浏览器中直接安装Phaser来进行游戏开发。

多种支持：javascript、TypeScript双重支持、内置游戏对象的物理属性、WebGL、Canvas渲染自由切换、完全支持Web音频、输入：多点触控、键盘、鼠标、MSPointer事件。

兼容性强：除了IE 9+、Firefox、Chrome、Safari及Opera等桌面浏览器之外，Phaser还支持Mobile Chrome（android 2.2+）及Mobile Safari（ios 5+）等移动浏览器。使用Phaser进行游戏开发没有任何语言设定。

它能做什么？这个就简单了，做H5小游戏非常方便。

为什么选择它？在根据统计到的《2016年最火的15款html5游戏引擎》（原文地址：https://www.diycode.cc/topics/16）文章中可以看到，phaser.js排在第二位，在pixi.js和egret.js之前，而排在第一位的three.js学习难度和周期比较高，如果从受欢迎程度来讲的话，当然优先考虑phaser.js，如果专注于html5游戏开发或者有这方面的发展意向，那这几个都可以深入学习下。另外值得一提的是，egret.js是国内开发的一款H5框架，也就是俗称的白鹭，来自北京白鹭时代信息技术有限公司，毫无疑问，国人开发的框架，中文API读起来是最方便的，有兴趣的同学也可以优先考虑这个框架。

开始写了

引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>

创建game对象

var game = new Phaser.Game(720,1280, Phaser.CANVAS, ‘ballGame‘, true, true);

参数：宽，高，游戏引擎，画布在所在对象，是否是透明画布，纹理是否有锯齿；

这里主要的是游戏引擎，你使用什么样得引擎就有不一样的方法，像一些多边形碰撞问题就必须用它的p2引擎，想一些普通AUTO就可以。根据需求来。

游戏的状态

var GameState = function (game) {
    this.init = function () {
    }，
    this.preload = function () {
    }，
    this.create = function () {
    }，
    this.update = function () {
    }，
    this.render = function () {
    }，
}   
game.state.add("main", GameState, true);

状态就是当前场景从初始化到渲染到监测。init是初始化，perload是加载一些静态资源，create是创建这个场景，update一般用于实时检测，render一般用于调试信息的渲染（也是实时的）。另外还有很多，自己查找文档根据需求来。

设置基本的参数

设置使用的引擎

game.physics.startSystem(Phaser.Physics.P2JS);

设置重力，这个属于设置整体，属于它里面所有的元素全都设置了这个属性

game.physics.p2.gravity.y = 1000;

设置材料，弹力，摩擦力这之类，这个就是定义了个属性对象，一下可以设置多个

//设置Body拥有的Shapes，可以设置接触材料摩擦和回复等特性
ballMaterial = game.physics.p2.createMaterial(‘ballMaterial‘);
worldMaterial = game.physics.p2.createMaterial(‘worldMaterial‘);
//设置材料
game.physics.p2.setWorldMaterial(worldMaterial);
game.physics.p2.createContactMaterial(ballMaterial, worldMaterial, { restitution: 0.7, friction: 0 });
game.physics.p2.createContactMaterial(ballMaterial, ballMaterial, { restitution: 0, friction: 0, stiffness: 0.00001 });

渲染图片，渲染的这个对象的属性，渲染文字什么的也是同理

line = game.add.tileSprite(game.world.centerX, 165, game.world.centerX + 130, 32, "direction");

line.anchor.setTo(0, 0.5);

line.visible = false;

属性里面有几个比较重要的

anchor（锚点）：取值范围0~1，其实就是，元素（图片、文字等）中心与放置位置（添加到的坐标）相对于自身长宽的一个比例，比如（0,0）表示元素左上角坐标和放置位置坐标重合，（1,1）表示元素右下角坐标和放置位置坐标重合，（0.5,0.5）表示元素中心和放置位置重合，其他则根据元素长宽比例来设置。

scale（缩放比例）：相对于元素原始尺寸的比例。

angle（角度）：一个有效的数字，一般取值0~360.

alpha（透明度）：也就是rgba中的a，取值范围0~1.

根据位置找雪碧图不同得小图

this.load.spritesheet("shapes", ‘resource/shapes.png‘, 92, 92);

动态渲染，改变完立马刷新

scoreText.update = function () { this.text = "得分：" + _score; };

组。组就像array一样，这个组里面可以填很多子项，设置得属性应用于组，就可作用于子项。组可以作为子对象的集合实现平移，碰撞检测等

shapes = game.add.physicsGroup(Phaser.Physics.P2JS);

碰撞检测

ground.body.onBeginContact.add(function (b1, b2) {
　　b1为碰撞ground的子项，b2的被碰撞的项
}

补间动画，b1为使用补间动画的对象，to为一个动画。

game.add.tween(b1)
    .to({ x: game.world.width - 10, y: game.world.height - 40 }, 100, "Linear", false)
    .to({ x: game.world.width - 10, y: 0 }, 400, "Linear", false)
    .to({ x: game.world.width / 2, y: 0 }, 100, "Linear", true);