使用P2物理引擎制作物理小球

今天分享的内容是:基于Egret使用P2物理引擎实现物理小球示例效果。

了解更多信息,您可以查看P2物理引擎GitHub地址或者是EgretP2物理系统文档。

* 第三方库的引入
* 创建一个P2物理项目

一、第三方库的引入

1.首先新建一个项目。

2.在GitHub上下载包括P2物理引擎库的完整第三方库,解压后按照路径找到physics模块。

3.将physics模块放到新建项目根目录的同级目录。

4.修改egretProperties.json,modules数组里增加

{
"name":"physics",
"path":"../physics"
}

5.然后找到插件-Egret项目工具-编译引擎编译一下就成功引入P2库,如下图。

二、创建一个P2物理项目

使用P2物理引擎创建物理应用的过程大致分为5个步骤:

1.创建world世界
2.创建shape形状
3.创建body刚体
4.实时调用step()函数,更新物理模拟计算
5.基于形状、刚体,使用Egret渲染,显示物理模拟效果

**下面根据这5个步骤进行代码构建。

1.打开Main.ts,首先创建world世界**

//创建Word世界
private world:p2.World;
private CreateWorld(){
    this.world = new p2.World();
    //设置world为睡眠状态
    this.world.sleepMode = p2.World.BODY_SLEEPING;
    this.world.gravity = [0,1]
}

gravity是一个Vector2向量对象,表示world世界中重力加速度,默认为垂直向上的向量[0,-9.81],将gravity设置为[0,0]可以取消重力;gravity的x分量也是有意义的,将其设置为一个非0数值后,重力就会朝向量[x,y]方向。

2.创建地板Plane

//生成地板Plane
private planeBody:p2.Body;
private CreatePlane(){
    //创建一个shape形状
    let planeShape:p2.Plane = new p2.Plane();
    //创建body刚体
    this.planeBody= new p2.Body({
        //刚体类型
        type:p2.Body.STATIC,
        //刚体的位置
        position:[0,this.stage.stageHeight]
    });
    this.planeBody.angle = Math.PI;
    this.planeBody.displays = [];
    this.planeBody.addShape(planeShape);
    this.world.addBody(this.planeBody);
}

Plane相当于地面,默认面向Y轴方向。 因为这个Y轴是P2的Y轴,而不是Egret的Y轴。P2和Egret的Y轴是相反的。所以将地面翻转180度。
planeBody.angle = Math.PI

3.点击创建足球或者矩形方块

private shpeBody:p2.Body;
//贴图显示对象
private display:egret.DisplayObject;
private onButtonClick(e:egret.TouchEvent) {
    if(Math.random() >0.5){
        //添加方形刚体
        var boxShape:p2.Shape = new p2.Box({width:140 ,height:80});
        this.shpeBody = new p2.Body({ mass: 1, position: [e.stageX, e.stageY], angularVelocity: 1});
        this.shpeBody.addShape(boxShape);
        this.world.addBody(this.shpeBody);
        this. display= this.createBitmapByName("rect_png");
        this.display.width = (<p2.Box>boxShape).width
        this.display.height = (<p2.Box>boxShape).height
    }
    else{
        //添加圆形刚体
        var circleShape:p2.Shape = new p2.Circle({radius:60});
        this.shpeBody = new p2.Body({ mass: 1, position: [e.stageX, e.stageY]});
        this.shpeBody.addShape(circleShape);
        this.world.addBody(this.shpeBody);
        this.display = this.createBitmapByName("circle_png");
        this.display.width = (<p2.Circle>circleShape).radius * 2
        this.display.height = (<p2.Circle>circleShape).radius * 2
    }
        this.display.anchorOffsetX = this.display.width / 2
        this.display.anchorOffsetY = this.display.height / 2;
        this.display.x = -100;
        this.display.y = -100;
        this.display.rotation = 270
        this.shpeBody.displays = [this.display];
        this.addChild(this.display);
}

上述代码中先创建Box或者Circle形状,并通过addShape()函数,将其添加到刚体body中,最后通过world的addBody()将刚体添加到世界中,完成一个P2物理应用创建。 注意:Egret中加载进来的图像,其原点默认为左上角,而P2中刚体的原点处于其中心位置,如下图(盗了一张图)

所以需要根据刚体重心坐标偏移量(offsetX,offsetY)设置图像的anchorOffsetX ,anchorOffsetY 属性。

4.帧函数实时调用step()函数

//帧事件,步函数
private update() {
    this.world.step(2.5);
    var l = this.world.bodies.length;
    for (var i:number = 0; i < l; i++) {
        var boxBody:p2.Body = this.world.bodies[i];
        var box:egret.DisplayObject = boxBody.displays[0];
        if (box) {
            //将刚体的坐标和角度赋值给显示对象
            box.x = boxBody.position[0];
            box.y = boxBody.position[1];
            box.rotation = boxBody.angle * 180 / Math.PI;
            //如果刚体当前状态为睡眠状态,将图片alpha设为0.5,否则为1
            if (boxBody.sleepState == p2.Body.SLEEPING) {
                box.alpha = 0.5;
            }
            else {
                box.alpha = 1;
            }
        }
    }
}

world中所有的刚体都保存在属性bodies数组中,通过数组的foreach()方法,可以遍历其中的每一个body,然后拿到body的显示对象,再将刚体的坐标和角度属性赋值给显示对象,实时更新即可。

5.在createGameScene()中依次调用

protected createGameScene(): void {
    let img:egret.Bitmap = new egret.Bitmap();
    img = this.createBitmapByName("bg_jpg");
    img.width = this.stage.stageWidth;
    img.height = this.stage.stageHeight;
    this.addChild(img);
    this.CreateWorld();
    this.CreatePlane();

    this.addEventListener(egret.Event.ENTER_FRAME,this.update,this);
    this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.onButtonClick,this);
}

本教程所涉及的内容,只是对P2物理引擎的初级了解和使用。然而物理引擎需要我们学习的知识还有很多,还有更强大更好玩的功能等待我们去探索!

附上GitHub源码地址:https://github.com/duan003387...

原文地址:http://blog.51cto.com/11960887/2175349

时间: 2024-08-02 12:50:25

使用P2物理引擎制作物理小球的相关文章

cocos2dx自带物理引擎-创建物理世界

首先在createScene()里 auto scene = Scene::createWithPhysics(); 创建带有物理的场景 然后再OnEnter里创建边界框 auto body = PhysicsBody::createEdgeBox( visibleSize, PHYSICSBODY_MATERIAL_DEFAULT, 3); 创建一个节点承载边界 auto edgeShape = Node::create(); 将图形和刚刚创建的世界绑定 edgeShape->setPhysi

物理引擎——03物理材质

学习笔记适合新手,如有错误请指正.?号处也请各位指点下,谢谢. 物理材质Physics Material,当碰撞器交互时,他们的表面需要模拟材质的属性 虽然碰撞器的形状在碰撞时不会改变,但是它们的摩擦力和弹性可以用物理材质来设置 Create>Physics Material

关于Unity中物理引擎的使用

物理引擎控制刚体,刚体上面贴上图片,所以看起来就是游戏运行起来的状态 物理世界计算刚体的运行状态,通过贴图显现出运算结果. 一.物理引擎 1:Unity 2D物理引擎基于Box2D封装而成;2: 物理引擎模拟物理运动和计算,物理引擎帮助我们计算物体运动; 3: 重力加速度;4: 碰撞器是物体的形状 + 碰撞的物理参数(物理材质);5: 刚体控制物体运动和受力; 二.步骤 1.创建一个Canvas 2.对Canvas进行初始化,记得把Game视图的分辨率调成和Canvas里面设置的一样的分辨率64

Cocos2d-x 物理引擎及碰撞

基础知识: 1 #ifndef __HELLOWORLD_SCENE_H__ 2 #define __HELLOWORLD_SCENE_H__ 3 4 #include "cocos2d.h" 5 6 class HelloWorld : public cocos2d::Layer 7 { 8 private: 9 Size visibleSize; 10 public: 11 // there's no 'id' in cpp, so we recommend returning t

Cocos2d-js官方完整项目教程翻译:六、添加Chipmunk物理引擎在我们的游戏世界里

添加Chipmunk物理引擎在我们的游戏世界里         一.简介                   cocos2d JS能给我们力量来创造令人印象深刻的游戏世界.但缺乏某种现实.          虽然我们可以做复杂的计算,使游戏世界更真实的,但有另一个选择          它可以缓解我们的生活.答案是物理引擎.          物理引擎提供了重力,碰撞检测和物理模拟,可以使我们的游戏世界看起来更真实.          在本教程中,我们将介绍的ChipMunk的物理引擎进入我们的

p2.js物理引擎学习

P2简介 P2是一款基于Javascript编写的HTML5 2D物理引擎,和Box2D.Nape等2D物理引擎一样,P2集成了各种复杂的物理公式和算法,可以帮助我们轻松的实现碰撞.反弹等物理现象的模拟. 学习资料 P2 API认识HTML5物理引擎P2 元素介绍 World(世界),这就是一个模拟的物理世界,所有的刚体和约束创建后都要放进来. Body(刚体),它是一块无限坚硬的物体.因此,在这块物体上任何两点之间的距离都被认为是固定的.Body(刚体)有自己的参数用来规定位置.质量和速度等,

制作简单的2D物理引擎(零)

最近发现了Github上的开源物理引擎项目Matter.js,对它很感兴趣,发现源码并不算长,算上注释大约1万行左右,值得剖析一番.Matter.js实现一个最小化的2D物理引擎,性能不错,故打算用C#重写并学习之. 由于JS是弱类型,而C#是强类型的,所以不得不还原相应的类型.在重写过程中,我也发现了源码中的一些问题,以及代码冗余,不过都无关紧要.在一万行之内实现一个简单的物理引擎本来就很令人激动了,这样可以以最小的工作量来熟悉物理引擎. 重写过程中,渲染用自带GDI实现,所以只需考虑物理引擎

Box2D物理引擎模拟炸弹爆炸效果

今天咱们来模拟炸弹效果.于是问题一来了:"为什么要模仿这么暴力的效果呢?莫非几日不见,Yorhom人品煞变?" 其实玩过愤怒的小鸟的同学都应该对这种效果似曾相识,因为据非官方报道,第二厉害的小鸟--黑色鸟的特技就是自爆.问题二出现了:"那第一厉害的小鸟是哪一种呢?"据Yorhom我本人测试,那只红色大鸟应该是最厉害的,不过貌似没有特技?愤怒的小鸟这种肤浅的游戏,Y某我最擅长了,以后有时间会专门写写这个游戏的攻略.这两种鸟的靓照如下: 敷衍了问问题二的同学,问题三就来

cocos2dx 3.2中的物理引擎初探(一)

cocos2dx在设计之初就集成了两套物理引擎,它们是box2d和chipmunk.我目前使用的是最新版的cocos2dx 3.2.引擎中默认使用的是chipmunk,如果想要改使用box2d的话,需要修改对应的android工程或者是ios工程的配置文件. 在2.x版本的cocos中,使用物理引擎的步骤十分繁琐.但在3.x版本中变得非常方便了.我这次的学习目标是制作一个打砖块的小游戏. 首先,现在的Scene类提供了一个静态工厂方法,用以创造一个集成物理引擎的场景. Scene::initWi