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

技術(shù)點(diǎn)

1、地圖由若干個(gè)剛體組成，攝像機(jī)跟隨人物高度位置做縮放。
2、通過(guò)施加沖量到剛體，快速改變剛體的線性速度。
3、通過(guò)改變剛體的線性速度來(lái)控制剛體左右運(yùn)動(dòng)。

源碼分析

hero-control.js

該源文件功能是通過(guò)鍵盤(pán)的方向鍵來(lái)控制人物的左右和向上跳躍。核心函數(shù)是設(shè)置 linearVelocity 值。

const MOVE_LEFT = 1; // 向左移動(dòng)標(biāo)志位 const MOVE_RIGHT = 2; // 向右移動(dòng)標(biāo)志位cc.macro.ENABLE_TILEDMAP_CULLING = false;cc.Class({extends: cc.Component,properties: {maxSpeed: 500, // 線性速度最大值jumps: 2,acceleration: 1500, // 每秒移動(dòng)最大線性速度jumpSpeed: 200, // 跳起高度drag: 600 // 慣性速度},// LIFE-CYCLE CALLBACKS:onLoad () {// 注冊(cè)鍵盤(pán)按下和釋放事件的回調(diào)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 之后，此時(shí)RigidBody組件已經(jīng)被加載進(jìn)來(lái)this.body = this.getComponent(cc.RigidBody);},onKeyDown(event) {switch(event.keyCode) {case cc.KEY.a:case cc.KEY.left:this.moveFlags |= MOVE_LEFT; // 添加向左移動(dòng)的標(biāo)志位break;case cc.KEY.d:case cc.KEY.right:this.moveFlags |= MOVE_RIGHT; // 添加向右移動(dòng)的標(biāo)志位break;case cc.KEY.up:if (!this._upPressed) {this._up = true; // 添加向上跳起的標(biāo)志位}this._upPressed = true;break;}},onKeyUp (event) {switch(event.keyCode) {case cc.KEY.a:case cc.KEY.left:this.moveFlags &= ~MOVE_LEFT; // 清除向左移動(dòng)標(biāo)志break;case cc.KEY.d:case cc.KEY.right:this.moveFlags &= ~MOVE_RIGHT; // 清除向右移動(dòng)標(biāo)志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) {// 如果目標(biāo)當(dāng)前是向右的，則做水平翻轉(zhuǎn)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) {// 如果目標(biāo)當(dāng)前是向左的，則做水平翻轉(zhuǎn)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;// 通過(guò)改變剛體的線性速度來(lái)控制剛體的位置this.body.linearVelocity = speed;},update (dt) {this.updateMotorSpeed(dt);}, });

impulse.js

該源文件功能是實(shí)現(xiàn)類似于彈簧式跳板，使人物急速上跳。核心函數(shù)是 applyLinearImpulse。

cc.Class({extends: cc.Component,properties: {impulse: cc.v2(0, 1000)},onBeginContact: function(contact, selfCollider, otherCollider) {// 獲取世界坐標(biāo)系下的信息let manifold = contact.getWorldManifold();if (manifold.normal.y < 1) return;let body = otherCollider.body;body.linearVelocity = cc.v2();// 施加沖量到剛體上的中心點(diǎn)，改變剛體的線性速度body.applyLinearImpulse(this.impulse, body.getWorldCenter(), true);},// LIFE-CYCLE CALLBACKS:// onLoad () {},start () {},// update (dt) {}, });

總結(jié)

以上是生活随笔為你收集整理的CocosCreator物理引擎Demo源码分析(2)-tiled的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。