这两天由于项目的需要，所以简单学了一下phaser框架。

官网：http://phaser.io/

还有一个phaser小站，是中文的网站，但是内容不如英文文档全，大家也可以去看这个网站，需要查阅API时，再去英文网站也可以 ：https://www.phaser-china.com

分享一下入门教程：http://club.phaser-china.com/topic/59899a81484a53dd723f422b

demo地址：https://github.com/dreamITGirl/phaser  (持续更新中...)

先简单介绍一下pahser。

　　一、什么是phaser?

　　　　Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架，提供JavaScript和TypeScript双重支持，内置游戏对象的物理属性，采用Pixi.js引擎以加快Canvas和WebGL渲染，基于浏览器支持可自由切换。

　　二、phaser的特点：

　　　　快速、免费、易于维护，使用Phaser来开发2D小游戏的优势显而易见。一方面，开发者可以直接通过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进行游戏开发没有任何语言设定。
　　

　   三、创建游戏和新增场景

             1、使用方法

　　　　

　　　　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <link rel="stylesheet" href="css/reset.css" />

        <title></title>

        <style>

            body{

                width:100%;

                height:100%;

                overflow: hidden;

            }

        </style>

    </head>

    <body>

        <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>

        <script type="text/javascript" src="js/phaser.min.js" ></script>

        <!--加载游戏图片资源和精灵图-->

        <script type="text/javascript" src="js/demo01.js" ></script>

    </body>

</html>

　　2、创建游戏对象

　　

　　这个里面有一个问题，如果我页面中没有加1.png中的红框部分的代码，页面会有一个偏移量（当然，偏移量仅在移动端出现）问题页面如下图显示

　

　　在屏幕的右侧和底部都会有一个黑色的部分，但是canvas的区域也包含这一部分，所以，我们需要根据不同的手机，算一下偏移量，在封装添加图片或者精灵图的时候，计算尺寸中加上偏移量。

　　这一部分我会在后面的博客中写。本篇不做介绍。

var game = new Phaser.Game({

      width:800,//用户自己设置的屏幕宽度，这里以800*600为例

      height:600,

      canvas:$('canvas')[0],//由于我在html中添加了<canvas></canvas>标签，而我使用的是webGL的方式。这一行可以不设置

})

　这样基础的game对象我们就创建好了，接下来就是创建场景，我以项目为例，大家可以参考上一个图，可以从图上分析一下，从图上来看我至少需要创建7个场景，分别是Load场景，menu场景，还有图上的5个场景。而在Menu场景中，进入到下面的5个场景的按钮都是可点击的。所以，我们采用了game.States的状态管理

game.States = {}

game.States.Load = function (){

}

game.States.Menu = function (){

}

game.States.Billboard = function (){

}

game.States.Rule = function (){

}

game.state.add('Load',game.States.Load)

game.state.add('Menu',game.States.Menu)

game.state.add('Billboard',game.States.Billboard)

game.state.add('Rule',game.States.Rule)

game.state.start('Load')

由于在同一时间，同一页面只能执行一个场景，所以我们在用户一开始进入页面时首先执行Load场景　

　　四、游戏资源的加载添加

　　这里以加载精灵图和图片为例，加载音频，还有其他的媒体文件大家可以去看文档

//加载图片

this.load.image(key,url);//key代表你为这个图片起的名字，url代表图片的路径

//添加图片

game.add.image(x,y,key);//x表示在该图片在水平方向的偏移量，y表示该图片在垂直方向的偏移量

//加载精灵图

this.load.spritesheet(key,url,size,num)//size代表一大张精灵图中我们用到的这个精灵图的大小，num代表这个大的精灵图中包含几个我们的小的精灵图，num可不写，若不写，插件会自己算

//添加精灵图

game.add.sprite(x,y,key)//这个上面本身是没有事件的，如果使用这种方式添加，后面还是要额外添加该精灵图的点击事件。

//由于需求需要，我把Menu中的添加精灵图的方式换成了添加button的方式

game.add.button(x,y,key,callback,callbackContext,overFrame, outFrame, downFrame, upFrame, group)//callbackContext表示callback执行的上下文，默认是game。
//overFrame, outFrame, downFrame, upFrame,指的是按钮的4种状态，group该精灵图属于哪个组

实例代码：

//封装的全局方法，添加图片
function addImage(x,y,key,w,h){

    var IMAGE = game.add.image(x*bl,y*bl,key)

    IMAGE.width = w*bl;

    IMAGE.height = h*bl;

    return IMAGE

}
//封装的全局方法，添加精灵图
function addSprite(x,y,key,w,h,callback){ var SPRITE = game.add.button(x*bl,y*bl,key,callback,game,1,0,2) SPRITE.width = w*bl SPRITE.height = h*bl return SPRITE }

使用实例

game.States.Load = function (){
　　　　this.init = function(){
　　　　　　this.stage.disableVisibilityChange = true; //当页面失去焦点时动画，倒计时仍继续执行
　　　　}
　　　　this.preload = function(){
　　　　　　this.load.image('bg','./images/bg.png')
　　　　　　this.load.image('menu-score','./images/menu-score.png')

　　　　　　this.load.spritesheet('menu-logo','./images/menu-logo.png',560,248,4)
　　　　　　this.load.spritesheet('menu-one','./images/menu-one.png',560,150,3)
　　　　　　this.load.spritesheet('menu-pk','./images/menu-pk.png',560,150,3)
　　　　　　this.load.spritesheet('menu-rank','./images/menu-rank.png',560,150,3)
　　　　　　this.load.spritesheet('menu-list','./images/menu-list.png',260,150,3)
　　　　　　this.load.spritesheet('menu-rule','./images/menu-rule.png',260,150,3)
　　　　}
　　　　this.create = function(){
　　　　　　this.add.image(0,0,'bg')
　　　　　　addImage(40,40,'menu-logo',560,248).animations.add('shark').play(10,true)

　　　　　　addImage(40,318,'menu-score',560,65)

　　　　　　addSprite(40,407,'menu-rank',560,150,function(){
　　　　　　　　console.log(1)
　　　　　　})
　　　　}
　}

 

phaser小游戏框架学习（一）的更多相关文章

  1. phaser小游戏框架学习（二）

    今天继续学习phaser.js.上周写的学习教程主要内容是创建游戏场景,游戏中的显示对象,按钮对象的使用以及如何在不同屏幕大小中完美适配.这篇博客以介绍游戏榜单的渲染更新为主. 代码地址:https: ...

  2. phaser小游戏框架学习中的屏幕适配

    这篇博客主要讲一下上一篇博客的右侧和底部出现的问题.就是页面会有偏移量.说一下这个产生的原因吧. 一开始在构建html页面的时候,习惯性的在页面中加了 <meta name="view ...

  3. Phaser小游戏

    本来今天打算阅读AngularJs源代码的,但是上头下来了任务,做个小霸王上面的那种接金蛋的游戏,想象最近系统的学习了一下gulp和之前熟悉了一遍的Phaser,于是就打算用这两个东西一起来做个dem ...

  4. Python---战机小游戏，学习pygame

    import pygame # 导入游戏包 pygame.init() # 导入并初始化所有pygame模块,使用其他模块之前必须先调用init()方法 print('下面是游戏代码:') # 绘制矩 ...

  5. 例子：js超级玛丽小游戏

    韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键 ...

  6. 小游戏专场：腾讯云Game-Tech技术沙龙上海站顺利落下帷幕

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 9月14日腾讯云GAME-TECH技术沙龙小游戏专场在上海顺利举办,此次技术沙龙由腾讯云的资深专家,以及 ...

  7. Phaser开源2d引擎 javascript/html5游戏框架

    功能特点(Features) 易维护代码(Easy Asset Loading) Phaser可以加载图片,音频文件,数据文件,文本文件和自动解析精灵图和纹理地图集数据(出口纹理封隔器或Flash C ...

  8. JS写小游戏（一）：游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  9. Phaser开源2d引擎 html5游戏框架中文简介

    功能特点(Features) 易维护代码(Easy Asset Loading) Phaser可以加载图片,音频文件,数据文件,文本文件和自动解析精灵图和纹理地图集数据(出口纹理封隔器或Flash C ...

随机推荐

  1. docker 端口映射iptables: No chain/target/match by that name错误解决方法

    pkill docker iptables -t nat -F ifconfig docker0 down brctl delbr docker0 service docker restart

  2. 图解JVM和Tomcat类加载机制

    说到本篇的tomcat类加载机制,不得不说翻译学习tomcat的初衷. 之前实习的时候学习javaMelody的源码,但是它是一个Maven的项目,与我们自己的web项目整合后无法直接断点调试.后来同 ...

  3. 问题：oracle 排序 null值放在最后；结果： ORACLE中null的排序问题

    ORACLE中null的排序问题 关键字: oracle nulls 问题描述:    在平时的业务处理中,经常遇到要对业务数据进行排序,并且要对null值也做相应的排序.在Oracle中,进行Ord ...

  4. Android LRUCache

    package android.util; import java.util.LinkedHashMap; import java.util.Map; /** * A cache that holds ...

  5. VC++ 6.0 快捷键

    多行注释的快捷键    详细步骤 工具栏上右键-〉Customize-〉“Add-ins and Macro Files”tab页,把SAMPLE前面打上钩-〉“Commands”tab页,Categ ...

  6. 【转】Xcode 清理存储空间

    移除 Xcode 运行安装 APP 产生的缓存文件(DerivedData) 只要重新运行Xcode就一定会重新生成,而且会随着运行程序的增多,占用空间会越来越大.删除后在重新运行程序可能会稍微慢一点 ...

  7. [codeforces126B]Password

    解题关键:KMP算法中NEXT数组的理解. #include<bits/stdc++.h> #define maxn 1000006 using namespace std; typede ...

  8. [转]PHP 面试问哪些问题可以比较准确的反映出应聘者的开发水平？

    基础题 场景: 你入职了一家新公司. 上班第一天,接待人给你安排好了座位,然后拉过来一台没拆封的新电脑. 你把电脑连接好之后,按下电源.... 好吧,这真是一台新电脑,里边竟然内置了个DOS系统!! ...

  9. C++面向对象类的实例题目九

    题目描述: 编写一个学生和老师数据输入和显示程序,学生数据有编号.姓名.班号和成绩,教师数据有编号.姓名.职称和部门. 要求将编号.姓名.输入和显示设计成一个类person,并作为学生数据操作类stu ...

  10. 业务逻辑:五、完成认证用户的动态授权功能 六、完成Shiro整合Ehcache缓存权限数据

    一. 完成认证用户的动态授权功能 提示:根据当前认证用户查询数据库,获取其对应的权限,为其授权 操作步骤: 在realm的授权方法中通过使用principals对象获取到当前登录用户 创建一个授权信息 ...