我对pahser的理解

标签：androi   社区   editor   sdn   blog   init   移动浏览器   cdn   javascrip   

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 });

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

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

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

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

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);

我对pahser的理解

标签：androi   社区   editor   sdn   blog   init   移动浏览器   cdn   javascrip   

原文地址：https://www.cnblogs.com/lichunjing/p/9481423.html