CocosCreator物理引擎Demo源码分析(2)-tiled

我不是女神ヾ 2022-05-27 00:58 200阅读 0赞

tiled示例展示了如何控制人物在地图上左右和向上跳跃。

## 技术点 ##

1、地图由若干个刚体组成，摄像机跟随人物高度位置做缩放。  
2、通过施加冲量到刚体，快速改变刚体的线性速度。  
3、通过改变刚体的线性速度来控制刚体左右运动。

## 源码分析 ##

### hero-control.js ###

该源文件功能是通过键盘的方向键来控制人物的左右和向上跳跃。核心函数是设置 linearVelocity 值。

const MOVE_LEFT = 1; // 向左移动标志位
    const MOVE_RIGHT = 2; // 向右移动标志位
    
    cc.macro.ENABLE_TILEDMAP_CULLING = false;
    
    cc.Class({
        extends: cc.Component,
    
        properties: {
            maxSpeed: 500, // 线性速度最大值
            jumps: 2,
            acceleration: 1500, // 每秒移动最大线性速度
            jumpSpeed: 200, // 跳起高度
            drag: 600 // 惯性速度
        },
    
        // LIFE-CYCLE CALLBACKS:
    
        onLoad () {
            // 注册键盘按下和释放事件的回调
            cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
            cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
    
            this.moveFlags = 0;
            this._up = false;
        },
    
        start () {
            // start 在 onLoad 之后，此时RigidBody组件已经被加载进来
            this.body = this.getComponent(cc.RigidBody);
        },
    
        onKeyDown(event) {
            switch(event.keyCode) {
                case cc.KEY.a:
                case cc.KEY.left:
                    this.moveFlags |= MOVE_LEFT; // 添加向左移动的标志位
                    break;
                case cc.KEY.d:
                case cc.KEY.right:
                    this.moveFlags |= MOVE_RIGHT; // 添加向右移动的标志位
                    break;
                case cc.KEY.up:
                    if (!this._upPressed) {
                        this._up = true; // 添加向上跳起的标志位
                    }
                    this._upPressed = true;
                    break;
            }
        },
    
        onKeyUp (event) {
            switch(event.keyCode) {
                case cc.KEY.a:
                case cc.KEY.left:
                    this.moveFlags &= ~MOVE_LEFT; // 清除向左移动标志
                    break;
                case cc.KEY.d:
                case cc.KEY.right:
                    this.moveFlags &= ~MOVE_RIGHT; // 清除向右移动标志
                    break;
                case cc.KEY.up:
                    this._upPressed = false;
                    break;
            }
        },
    
        updateMotorSpeed(dt) {
            // 判断this.body是否可用
            if (!this.body) {
                return;
            }
    
            var speed = this.body.linearVelocity;
            if (this.moveFlags === MOVE_LEFT) {
                // 如果目标当前是向右的，则做水平翻转
                if (this.node.scaleX > 0) {
                    this.node.scaleX *= -1;
                }
                speed.x -= this.acceleration * dt;
                if (speed.x < -this.maxSpeed) {
                    speed.x = -this.maxSpeed;
                }
            } else if (this.moveFlags === MOVE_RIGHT) {
                // 如果目标当前是向左的，则做水平翻转
                if (this.node.scaleX < 0) {
                    this.node.scaleX *= -1;
                }
                speed.x += this.acceleration * dt;
                if (speed.x > this.maxSpeed) {
                    speed.x = this.maxSpeed;
                }
            } else {
                if (speed.x != 0) {
                    var d = this.drag * dt;
                    if (Math.abs(speed.x) <= d) {
                        speed.x = 0;
                    } else {
                        speed.x -= speed.x > 0 ? d : -d;
                    }
                }
            }
    
            if (Math.abs(speed.y) < 1) {
                this.jumps = 2;
            }
            if (this.jumps > 0 && this._up) {
                speed.y = this.jumpSpeed; // 向上跳起
                this.jumps--;
            }
            this._up = false;
            // 通过改变刚体的线性速度来控制刚体的位置
            this.body.linearVelocity = speed;
        },
    
        update (dt) {
            this.updateMotorSpeed(dt);
        },
    });

### impulse.js ###

该源文件功能是实现类似于弹簧式跳板，使人物急速上跳。核心函数是 applyLinearImpulse。

cc.Class({
        extends: cc.Component,
    
        properties: {
            impulse: cc.v2(0, 1000)
        },
    
        onBeginContact: function(contact, selfCollider, otherCollider) { 
            // 获取世界坐标系下的信息
            let manifold = contact.getWorldManifold();
            if (manifold.normal.y < 1) return;
    
            let body = otherCollider.body;
            body.linearVelocity = cc.v2();
            // 施加冲量到刚体上的中心点，改变刚体的线性速度
            body.applyLinearImpulse(this.impulse, body.getWorldCenter(), true);
        },
    
        // LIFE-CYCLE CALLBACKS:
    
        // onLoad () {},
    
        start () {
    
        },
    
        // update (dt) {},
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 CocosCreator之做个基于物理引擎的绳子关节

章转载自：[https://blog.csdn.net/kuokuo666/article/details/85016624][https_blog.csdn.net_k...

太过爱你忘了你带给我的痛/ 2024年04月18日 07:48/ 0 赞/ 64 阅读

相关 Pytorch Mobile 之Android Demo源码分析

现如今，在边缘设备上运行机器学习/深度学习变得越来越流行，它需要更低的时延。而从Pytorch 1.3开始，我们就可以使用Pytorch将模型部署到Android或者ios

矫情吗；*/ 2023年06月11日 13:28/ 0 赞/ 103 阅读

相关 cocos2d-x物理引擎

今天学物理引擎的时候又遇到了数组越界的问题，报错信息 libpng warning: iCCP: known incorrect sRGB profile Initiali

￡神魔★判官ぃ/ 2022年08月13日 07:58/ 0 赞/ 201 阅读

相关最全的iOS物理引擎demo

概述最全的iOS物理引擎demo，实现重力、碰撞、推力、摆动、碰撞+重力、重力弹跳、仿摩拜单车贴纸效果、防iMessage滚动效果、防百度外卖首页重力感应等效果！

深碍√TFBOYSˉ_/ 2022年05月31日 11:17/ 0 赞/ 186 阅读

相关 CocosCreator物理引擎Box2D的Demo示例physics-example介绍

CocosCreator的内置物理引擎是Box2D，CocosCreator官方文档中也推荐了一个物理引擎Demo示例包（physics-example，下载链接：[https

末蓝、/ 2022年05月29日 04:36/ 0 赞/ 238 阅读

相关 CocosCreator物理引擎Demo源码分析(1)-infinite-world

infinite-world示例展示了小球顺着山坡凹凸做左右滚动的效果。技术点 1、山坡由数量不等动态生成的的竖条状方块组成。 2、每个方块动态添加RigidBo

女爷i/ 2022年05月28日 12:50/ 0 赞/ 330 阅读

相关 CocosCreator物理引擎Demo源码分析(2)-tiled

tiled示例展示了如何控制人物在地图上左右和向上跳跃。技术点 1、地图由若干个刚体组成，摄像机跟随人物高度位置做缩放。 2、通过施加冲量到刚体，快速改变刚体的线

我不是女神ヾ/ 2022年05月27日 00:58/ 0 赞/ 201 阅读

相关 CocosCreator物理引擎开发笔记

记录 1、在CocosCreator中，每个Node只能添加一个RigidBody，但Collider可以添加多个。 2、在物理引擎的调试绘制开关打开情况下，刚体设置

不念不忘少年蓝@/ 2022年05月25日 23:52/ 0 赞/ 368 阅读

相关 CocosCreator物理引擎Demo源码分析(3)-stick-arrow

stick-arrow示例展示了如何动态发射刚体飞往目标点。技术点 1、触摸屏幕发射刚体，计算起点和目标点的夹角，设置刚体的线性速度。 2、在Update中不断施

缺乏、安全感/ 2022年05月25日 23:49/ 0 赞/ 289 阅读

相关 springboot-Quartz 集成源码分析和demo

springboot-Quartz 集成源码跟踪在pom.xml里加入 <dependency> <groupId>org.springframew

╰半夏微凉°/ 2022年04月08日 14:28/ 0 赞/ 318 阅读