最近更新源代码：
/lixintong1992/egret_game
最近不务正业，参加了一个HTML5游戏设计比赛。速成了一个搭积木游戏。
因为有重力感应，手机玩效果好一些，微信扫一扫！（用的是比赛官方给的服务器，不知道什么时候链接就会失效）。。
好了！我们开始：
使用的是egret游戏引擎，因为以前没接触过H5游戏制作，这个的新手教程十分简单。
看了看入门：
/cn/index.php/docs/page/639
还有视频教程讲的也是十分的细致：
/cn/list/video/
编辑器用的也是egret wing，还是有一些bug的。开发过程中egret也在不断更新，还是蛮好哒。
P2物理库：
不好用啊，虽然是egret官方推荐的，但是教程非常少版本也是非常的旧。给开发带来了好多的麻烦。
竟然在创建三角形刚体上卡住了好久。。。最后请教了@ladeng6666（陈文登），用了神改过的P2库才解决问题。神的egret书要出版了，大家支持支持~
如果能再选择一次，我会去试试BOX2D，起码它教程很多，还跨平台。
创建工程，导入第三方库P2：
egret wing创建工程，在项目文件夹的平级目录加入第三方库文件。例如项目路径
C:\project\demo\src。拷贝
myLibs（http://download.csdn.net/detail/lixintong）第三方库文件夹位置到 C:\project。修改egretProperties.json文件
modules 中增加
之后运行命令行，cd到工程文件目录，执行下egret
P2物理世界初始化：
我们来创建世界！（中二病。。。）
private world: p2.World = new p2.World();节省资源模式启动！
this.world.sleepMode = p2.World.BODY_SLEEPING;我带了重力！
this.world.gravity = [0,-5];
P2物理世界通过
this.world.step(t);计算t秒后世界中所有刚体的位置。
egret中有心跳函数，我们只要每次心跳调用this.world.step(t);
就能让世界运转！
我写的不好，不明白的可以参考下
/cn/docs/page/627
重力感应：
var orientation = new egret.DeviceOrientation();//创建 DeviceOrientation 类
orientation.addEventListener(egret.Event.CHANGE,this.onOrientation,this);//添加事件监听器
orientation.start(); //开始监听设备方向变化
private onOrientation(e: egret.OrientationEvent) {
this.beta_gamma = Math.round(e.gamma);
}没什么好解释的···
游戏胜利失败判断：
过关条件：
1.场景中活动实体达到上限且都是静止
2.场景中活动实体达到上限且经过一段时间没失败
失败条件：
存在实体的y坐标超过屏幕下限（就是掉下去啦）
当然要在心跳函数中实时判断过关还是失败啦：
egret.Ticker.getInstance().register(function(dt) {
this.world.step(dt / 1000);
this.world.gravity[0] = this.beta_gamma / 30;
if(!this._isDebug) {
var stageHeight: number = egret.MainContext.instance.stage.stageH
var l = this.world.bodies.
for(var i: number = 0;i &i++) {
var boxBody: p2.Body = this.world.bodies[i];
if(boxBody) {
if(boxBody.displays[0]) {
var box: egret.DisplayObject = boxBody.displays[0];
box.x = boxBody.position[0] * this.
box.y = stageHeight - boxBody.position[1] * this.
if(box.y & 900) {
count = 0;
this.level(-2);
box.rotation = 360 - boxBody.angle * 180 / Math.PI;
if(boxBody.sleepState == p2.Body.SLEEPING) {
box.alpha = 0.8;
count_sleep += 1;
box.alpha = 1;
if(l == this.success_num[this.level_num]) {
if(count == 4000) {
this.level_num += 1;
Data.score = this.level_
this.level(this.level_num);
count = 0;
else { count = count + 1; }
if(count_sleep == this.sleep_num[this.level_num]) {
this.level_num += 1;
Data.score = this.level_
this.level(this.level_num);
count = 0;
count_sleep = 0;
count_sleep = 0;
},this);相当于一个while(1)，其中dt就是两次执行自身的时间间隔，遍历所有刚体，更新实体对应贴图的坐标，休眠的刚体变透明。判断胜利失败条件。
里面还加了一发重力感应：
this.world.gravity[0] = this.beta_gamma / 30;
创建支撑三角、方块、圆刚体：
创建那种不会动的静止刚体函数：
private supportertrect(_width:number,_height:number,_rotation:number,_x:number,_y:number) {
var supporterShape: p2.Shape = new p2.Box({ width: _width,height: _height });
var supporterBody: p2.Body = new p2.Body({ mass: 0,position: [_x/this.factor,_y/this.factor],angle:Math.PI*((_rotation)/180),angularVelocity: 0 });
supporterBody.addShape(supporterShape);
this.world.addBody(supporterBody);
var display: egret.DisplayObject = this.createBitmapByName(&rect2&);
display.width = (&p2.Box&supporterShape).width * this.
display.height = (&p2.Box&supporterShape).height * this.
display.anchorOffsetX = display.width / 2;
display.anchorOffsetY = display.height / 2;
supporterBody.displays = [display];
this.addChild(display);
private supportertriangle(_sidelenght:number,_rotation:number,_x:number,_y:number) {
var center1: number[] = new Array(0, 0);
var mousePos_11: number[] = new Array(0, _sidelenght/this.factor);
var mousePos_21: number[] = new Array(_sidelenght/this.factor, _sidelenght/this.factor);
var mousePos_31: number[] = new Array(0, 0);
var points1: number[][] = new Array();
p2.vec2.centroid(center1,mousePos_11,mousePos_21,mousePos_31);
p2.vec2.subtract(mousePos_11,mousePos_11,center1);
p2.vec2.subtract(mousePos_21,mousePos_21,center1);
p2.vec2.subtract(mousePos_31,mousePos_31,center1);
points1.push(mousePos_11);
points1.push(mousePos_21);
points1.push(mousePos_31);
var supporterBody: p2.Body = new p2.Body({ mass: 0,position: [_x/this.factor,_y/this.factor],angle:Math.PI*((_rotation)/180),angularVelocity: 0 });
supporterBody.fromPolygon(points1,{optimalDecomp:false});
this.world.addBody(supporterBody);
var items1:egret.Bitmap = new egret.Bitmap();
items1.texture = RES.getRes('triangle');
items1.width = _
items1.height = _
items1.rotation = -_
items1.x = _x;
items1.y = _y;
items1.anchorOffsetX = center1[0] * this.
items1.anchorOffsetY = items1.height-center1[1] * this.
supporterBody.displays = [items1];
this.addChild(items1);
private supportercircle(_radius:number,_x:number,_y:number) {
var supporterShape: p2.Shape = new p2.Circle( {radius:((_radius/2)/this.factor) });
var supporterBody: p2.Body = new p2.Body({ mass: 0,position: [_x/this.factor,_y/this.factor],angularVelocity: 0 });
supporterBody.addShape(supporterShape);
this.world.addBody(supporterBody);
var display: egret.DisplayObject = this.createBitmapByName(&circle2&);
display.width = _
display.height = _
display.x = _x;
display.y = _y;
display.anchorOffsetX = display.width / 2;
display.anchorOffsetY = display.height / 2;
supporterBody.displays = [display];
this.addChild(display);
三个函数的流程都一样，创建shape，创建body，通过body的addShape为body绑定shape，之后建立一个显示贴图的DisplayObject，通过body的displays为body绑定贴图。最后addChild。
对于三角形来说有点麻烦，三角形是通过创建多边形fromPolygon来实现的。fromPolygon是body的一个方法，给他坐标，它就能自动给你搞出来一个shape绑到body上
要根据三角形三点坐标算一下重心（centroid）。之后根据重心坐标对三个坐标做减法（subtract）
创建活动的三角、方块、圆刚体：
创建那种手指拖的活动的刚体：
private creatrect(_width:number,_height:number,_rotation:number,_x:number,_y:number){
var display :egret.DisplayObject= this.createBitmapByName('rect')
display.width = _
display.height = _
display.x = _x;
display.y = _y;
display.rotation = -_
display.anchorOffsetX = display.width / 2;
display.anchorOffsetY = display.height / 2;
this.addChild(display);
display.touchEnabled =
display.addEventListener(egret.TouchEvent.TOUCH_BEGIN,startMove,this);
display.addEventListener(egret.TouchEvent.TOUCH_END,stopMove,this);
var draggedObject:egret.S
var offsetX:
var offsetY:
function startMove(e:egret.TouchEvent):void{
//把手指按到的对象记录下来
draggedObject = e.currentT
//计算手指和要拖动的对象的距离
offsetX = e.stageX - draggedObject.x;
offsetY = e.stageY - draggedObject.y;
//把触摸的对象放在显示列表的顶层
this.addChild(draggedObject);
//手指在屏幕上移动，会触发 onMove 方法
this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,onMove,this);
function stopMove(e:egret.TouchEvent) {
console.log(22);
//手指离开屏幕，移除手指移动的监听
this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE,onMove,this);
draggedObject = e.currentT
var positionX: number = draggedObject.x / this.
var positionY: number = (egret.MainContext.instance.stage.stageHeight - draggedObject.y) / this.
var boxShape: p2.Shape = new p2.Box({width:_width/this.factor,height:_height/this.factor});
var boxBody: p2.Body = new p2.Body({ mass: 1,position: [positionX,positionY],angle:Math.PI*((_rotation)/180),angularVelocity: 0 });
boxBody.addShape(boxShape);
this.world.addBody(boxBody);
boxBody.displays = [e.currentTarget];
e.currentTarget.touchEnabled =
var sound:egret.Sound = RES.getRes( &bgm_2& );
var channel:egret.SoundChannel = sound.play(0,1);
function onMove(e:egret.TouchEvent):void{
//通过计算手指在屏幕上的位置，计算当前对象的坐标，达到跟随手指移动的效果
draggedObject.x = e.stageX - offsetX;
draggedObject.y = e.stageY - offsetY;
private creatrect_candy(_width:number,_height:number,_rotation:number,_x:number,_y:number){
var display :egret.DisplayObject= this.createBitmapByName('candy')
display.width = _
display.height = _
display.x = _x;
display.y = _y;
display.rotation = -_
display.anchorOffsetX = display.width / 2;
display.anchorOffsetY = display.height / 2;
this.addChild(display);
display.touchEnabled =
display.addEventListener(egret.TouchEvent.TOUCH_BEGIN,startMove,this);
display.addEventListener(egret.TouchEvent.TOUCH_END,stopMove,this);
var draggedObject:egret.S
var offsetX:
var offsetY:
function startMove(e:egret.TouchEvent):void{
//把手指按到的对象记录下来
draggedObject = e.currentT
//计算手指和要拖动的对象的距离
offsetX = e.stageX - draggedObject.x;
offsetY = e.stageY - draggedObject.y;
//把触摸的对象放在显示列表的顶层
this.addChild(draggedObject);
//手指在屏幕上移动，会触发 onMove 方法
this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,onMove,this);
function stopMove(e:egret.TouchEvent) {
console.log(22);
//手指离开屏幕，移除手指移动的监听
this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE,onMove,this);
draggedObject = e.currentT
var positionX: number = draggedObject.x / this.
var positionY: number = (egret.MainContext.instance.stage.stageHeight - draggedObject.y) / this.
var boxShape: p2.Shape = new p2.Box({width:_width/this.factor,height:_height/this.factor});
var boxBody: p2.Body = new p2.Body({ mass: 1,position: [positionX,positionY],angle:Math.PI*((_rotation)/180),angularVelocity: 0 });
boxBody.addShape(boxShape);
this.world.addBody(boxBody);
boxBody.displays = [e.currentTarget];
e.currentTarget.touchEnabled =
var sound:egret.Sound = RES.getRes( &bgm_2& );
var channel:egret.SoundChannel = sound.play(0,1);
function onMove(e:egret.TouchEvent):void{
//通过计算手指在屏幕上的位置，计算当前对象的坐标，达到跟随手指移动的效果
draggedObject.x = e.stageX - offsetX;
draggedObject.y = e.stageY - offsetY;
private creatcircle(_radius:number,_x:number,_y:number){
var display1 :egret.DisplayObject= this.createBitmapByName('circle')
display1.width = _
display1.height = _
display1.x = _x;
display1.y = _y;
display1.anchorOffsetX = display1.width / 2;
display1.anchorOffsetY = display1.height / 2;
this.addChild(display1);
display1.touchEnabled =
display1.addEventListener(egret.TouchEvent.TOUCH_BEGIN,startMove2,this);
display1.addEventListener(egret.TouchEvent.TOUCH_END,stopMove2,this);
var draggedObject:egret.S
var offsetX:
var offsetY:
function startMove2(e:egret.TouchEvent):void{
//把手指按到的对象记录下来
draggedObject = e.currentT
//计算手指和要拖动的对象的距离
offsetX = e.stageX - draggedObject.x;
offsetY = e.stageY - draggedObject.y;
//把触摸的对象放在显示列表的顶层
this.addChild(draggedObject);
//手指在屏幕上移动，会触发 onMove 方法
this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE,onMove2,this);
function stopMove2(e:egret.TouchEvent) {
console.log(22);
//手指离开屏幕，移除手指移动的监听
this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE,onMove2,this);
draggedObject = e.currentT
var positionX: number = draggedObject.x / this.
var positionY: number = (egret.MainContext.instance.stage.stageHeight - draggedObject.y) / this.
var boxShape: p2.Shape = new p2.Circle({radius:((_radius/2)/this.factor)});
var boxBody: p2.Body = new p2.Body({ mass: 1,position: [positionX,positionY] });
boxBody.addShape(boxShape);
this.world.addBody(boxBody);
boxBody.displays = [e.currentTarget];
e.currentTarget.touchEnabled =
var sound:egret.Sound = RES.getRes( &bgm_3& );
var channel:egret.SoundChannel = sound.play(0,1);
function onMove2(e:egret.TouchEvent):void{
//通过计算手指在屏幕上的位置，计算当前对象的坐标，达到跟随手指移动的效果
draggedObject.x = e.stageX - offsetX;
draggedObject.y = e.stageY - offsetY;
三个函数差不多的。先显示图，为这个图添加事件侦听。具体的图片移动看这个
/cn/docs/page/583
我就不细说了，在最后手离开屏幕的事件中，为这个贴图创建一个刚体body，以及shape。
整个游戏流程：
ps：流程图在线画哒：/network
最开始就是为每个关卡赋值对应的所有刚体数，能活动的刚体数。
初始化，大清洗，世界清空，显示清空
每个关卡函数就是这个样子啦
其他的就是基本教程里的东西啦，按钮啊，事件啦
本文已收录于以下专栏：
相关文章推荐
在本文中，我们将对比看一下当前三个非常流行的和一个目前还在开发中的JavaScript 物理引擎库，分别是： box2dweb，Ammo.js，JigLibJS 以及 Connon.js。我们会简短的...
告诉你p2物理引擎在egret中是如何运用的，成功实现一次贴图。
原文地址- 效果：点击在线查看 ，中间一个静态地面，一个长方形物体会掉在上面中间位置前言：使用egret游戏引擎，配置好p2物理引擎（是个坑，详情查看官方手册模块化配置和第三方库的使用方法）搞起来：步...
最近在学egret游戏引擎，他们推荐的第三方物理引擎库是p2.js，瑞士的一个杀马特开发的，中文资料很少，于是我就把他github项目的wiki给翻译出来了，这里是项目地址：https://githu...
在线运行地址点我网页看效果
扫描二维码手机看效果
Egret 和 p2.js 坐标对比图p2.js库的引用
地面被我注释掉了，需要的话将其中两端注释（L50-55，L105）去掉即可。...
JS物理引擎 p2.js 的中文版WIKI。物理引擎p2.js多用于开发HTML5游戏，国内Egret白鹭引擎使用p2.js物理引擎。
昨日因个人原因没能及时更新，今天补上！！！！
上接上一篇文章
（一）关于白鹭引擎Egret
Egret引擎是一个开源免费的游戏框架，用于构建二维游戏、演示程序和其他图形界面交互应用等。Egret使用TypeScript脚本语言开发。当游戏完成最终的打包后，...
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Egret是一套HTML5游戏开发解决方案,产品包含Egret Engine,Egret Wing,EgretVS,Res Depot,Texture Merger,TS Conversion,Egret Feather,Egret Inspector,DragonBones,...
Egret官网：/cn/github/egret-docs/Engine2D/getStarted/helloWorld/index.html
Typescript的api手册：/thread-.html
一.包结构：
1.\src目录下存放我们的代码。我们编写的源代码都放在src目录下面。
Main.ts文件是typescript文件，TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。&
2.bin-debug
目录，项目编译和运行的debug目录，一般我们不要修改该目录下的内容。
目录，这里面存放我们的库文件，包括 Egret 核心库和其他扩展库。当然以后添加了第三方库的话也会放在这里。
4.resource
目录，这里放置我们的资源文件，这里面有一个default.res.json&配置文件，用来配置资源。
template 目录，这里是项目调试过程中所需的目录，一般我们不需要修改该目录下的内容。
（1）egretProperties.json
项目的配置文件，一般我们会用到里面的modules&字段来配置项目的模块
（2）index.html
项目访问的入口文件，我们可以在这里面配置项目的旋转缩放模式背景颜色等。
（3）favicon.ico
LoadingUI.ts----加载UI
Main.ts----主函数
MyGrid .ts---网格布局
从左到右依次是debug，运行，发布
本文已收录于以下专栏：
相关文章推荐
在egret中，构造函数 constructor 在这个 test 类被实例化（new）时执行。class test extends egret.Sprite{
public construc...
主要使用 EgretWing  （是白鹭扩展的 VisualStudio Code） 新建 项目中  选择 生成的项目的结构： 
是TypeScript源码目录
　　resou...
protobuf简介ProtocolBuffer是用于结构化数据串行化的灵活、高效、自动的方法，有如XML，不过它更小、更快、也更简单。你可以定义自己的数据结构，然后使用代码生成器生成的代码来读写这个...
什么是白鹭引擎
Egret引擎是一个开源免费的游戏框架，用于构建二维游戏、演示程序和其他图形界面交互应用等。Egret使用TypeScript脚本语言开发。当游戏完成最终的打包后，可以将程序转换为H...
html5相关的信息我都不想说了，没写过网页，新接触，搞游戏直接从引擎入手吧，也有兴趣，以后有机会慢慢往底层走。
白鹭引擎官网：http://www.egret-labs.org/
由于Egret引擎的EUI扩展库的官方文档写得十分复杂，让很多开发者短时间内难以入手并且走了不少坑，在这里我将教你Egret引擎的扩展库EUI的基本使用方法。废话不多说，一起开始吧!
一、H5游戏开发的引擎介绍开发H5游戏的引擎有很多，比如egret、laya、cocos-js等等。这里主要是分析的是egret和laya，因为我们团队是从as3转过来的。所以天然地在有as3基因的e...
Egret引擎学习笔记之一：初识egret，实现简易贪吃蛇。
Egret教程、学习教程、学习方法、学习案例
告诉你p2物理引擎在egret中是如何运用的，成功实现一次贴图。
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)鏈?笘鏈}