用Cocos Creator讓嫦娥一步步跳上月亮

中秋

在中秋來臨之際，先要抗一波臺(tái)風(fēng)，然后空閑時(shí)，用Cocos Creator邊學(xué)邊寫一個(gè)簡單的“嫦娥奔月”場(chǎng)景

先來簡單的看看效果吧：

Cocos Creator

本次制作使用的工具是Cocos Creator，這是一款游戲開發(fā)引擎，現(xiàn)在市面上的游戲開發(fā)引擎還是很多的，比如最出名的應(yīng)該就是 Unity了吧。

相較于Unity，Cocos Creator對(duì)我來說有下面一些優(yōu)點(diǎn)：

Cocos Creator免費(fèi)

容易上手，使用JavaScript或者Typescript

中文開發(fā)文檔

與Unity類似的界面，同樣是數(shù)據(jù)驅(qū)動(dòng)的開發(fā)模式

官方網(wǎng)址： https://www.cocos.com/

靜態(tài)布局

首先在Cocos Creator中新建一個(gè)空項(xiàng)目，我室友的編輯器版本是2.4.5，也是一個(gè)比較新的編輯器版本了。點(diǎn)擊empty創(chuàng)建并打開。 (初次生成編輯是比較慢的)

當(dāng)前項(xiàng)目界面：

在界面的左下角，有資源管理器。 一個(gè)項(xiàng)目中其中比較重要的文件夾是assets，assets將會(huì)用來放置游戲中所有的本地資源、腳本和第三方庫文件。只有在 assets 目錄下的內(nèi)容才能顯示在 資源管理器 中。assets 中的每個(gè)文件在導(dǎo)入項(xiàng)目后都會(huì)生成一個(gè)相同名字的 .meta 文件，用于存儲(chǔ)對(duì)應(yīng)的資源配置和索引信息。.meta 文件需要一并提交到版本控制系統(tǒng)。

在資源文件夾中創(chuàng)建腳本文件夾和貼圖文件夾，并且創(chuàng)建場(chǎng)景Moon，雙擊打開場(chǎng)景。

創(chuàng)建背景bg的精靈節(jié)點(diǎn)

使用之前準(zhǔn)備好的背景圖作為SpriteFrame，此時(shí)在場(chǎng)景編輯器當(dāng)中，就可以看到夜晚的背景了。

然后可以直接拖動(dòng)person圖片到背景下，作為子節(jié)點(diǎn)?？梢栽趯傩詸z查器中調(diào)整節(jié)點(diǎn)的大小。

此時(shí)在上方運(yùn)行程序，可以在瀏覽器中看到相應(yīng)的效果了

接下來把月亮和云朵等元素也都添加到場(chǎng)景當(dāng)中

添加物理系統(tǒng)

完成上面的步驟后，此時(shí)頁面就好像一張畫一樣，嫦娥也沒有重力會(huì)把她拉回地面，所以此時(shí)需要使用腳本和物理系統(tǒng)了。 我使用TypeScript作為腳本格式。

在scripts文件夾當(dāng)中，創(chuàng)建一個(gè)bg.ts。

編輯bg.ts:

在onLoad()中添加：cc.director.getPhysicsManager().enabled = true，這句話能添加物理管理器。然后把bg.ts拖動(dòng)到bg節(jié)點(diǎn)中

給嫦娥添加物理組件Box，并且調(diào)整PhysicsBoxCollider的大小，將其放在嫦娥的腳邊緣即可。 （編輯物理組件需要勾選Editing）

創(chuàng)建分組

創(chuàng)建三種分組，分別是person人物、floor地面、cloud云朵。 并且人物和云朵，人物和地面產(chǎn)生分組配對(duì)。

將嫦娥的Group設(shè)置從default設(shè)置為person。

此時(shí)刷新瀏覽器界面，瀏覽器中嫦娥會(huì)掉下去，掉出場(chǎng)景。

所以此時(shí)需要給背景也添加物理組件。添加好物理組件后，可以給bg節(jié)點(diǎn)的RigidBody的type設(shè)置為Static，放置背景向下滑落。

這樣嫦娥從上方往下掉，碰到設(shè)置的物理組件就會(huì)停止，就好像停在地面上一樣。

可以在之前的bg.ts中設(shè)置cc.director.getPhysicsManager().debugDrawFlags = 1;，這樣能看到當(dāng)前的效果。

接下來類似的給云朵也設(shè)置物理組件，當(dāng)然云朵也需要設(shè)置為static防止下滑。

運(yùn)動(dòng)腳本

創(chuàng)建一個(gè)person.ts的運(yùn)動(dòng)腳本。

鍵盤按鈕進(jìn)行監(jiān)聽：

cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);

通過按鍵按下的keyCode判斷人物方向和動(dòng)作。

cc.macro.KEY.a

使用onBeginContact監(jiān)聽碰撞，此時(shí)在嫦娥的人物節(jié)點(diǎn)上將RigidBody的Enabled Contact Listener勾選上。

Person.ts代碼：

@ccclass export default class Person extends cc.Component { // 人物速度 @property(cc.Integer) speed:number = 0; // 人物方向 sp:cc.Vec2 = cc.v2(0, 0); lv:cc.Vec2 = cc.v2(0, 0); private Input:{} = { }; @property jumpHeight:number = 0; // 主角跳躍持續(xù)時(shí)間 @property jumpDuration:number = 0; // 是否正在跳躍 isJumping:boolean = false; // LIFE-CYCLE CALLBACKS: onLoad () { // 初始化鍵盤輸入監(jiān)聽 cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); } onKeyDown(event: cc.Event.EventKeyboard) { this.Input[event.keyCode] = 1; } onKeyUp(event: cc.Event.EventKeyboard) { this.Input[event.keyCode] = 0; } moveState() { let anim:string; let scaleX = Math.abs(this.node.scaleX); if (this.Input[cc.macro.KEY.a] || this.Input[cc.macro.KEY.left]) { this.sp.x = -1; this.node.scaleX = scaleX; } else if (this.Input[cc.macro.KEY.d] || this.Input[cc.macro.KEY.right]) { this.sp.x = 1; this.node.scaleX = -scaleX; } else { this.sp.x = 0; } if (this.Input[cc.macro.KEY.w] || this.Input[cc.macro.KEY.up]) { this.sp.y = -1; } else { this.sp.y = 0; } if (this.sp.x != 0) { this.lv.x = this.sp.x * this.speed; } else { this.lv.x = 0 } if (this.sp.y != 0) { if (this.isJumping) return; cc.tween(this.node).then(this.runJumpAction()).start(); } } // 跳躍方法 runJumpAction():cc.Tween { this.isJumping = true; // 跳躍上升 let jumpUp = cc.tween().by(this.jumpDuration, {y: this.jumpHeight}, {easing: 'sineOut'}) return jumpUp; } onBeginContact(contact:any, selfCollider, otherCollider) { this.isJumping = false; } update (dt) { this.lv = this.node.getComponent(cc.RigidBody).linearVelocity; this.moveState(); this.node.getComponent(cc.RigidBody).linearVelocity = this.lv; } }

將寫好的person.ts拖到person節(jié)點(diǎn)上面，并設(shè)置speed速度、JumpHeight跳躍高度、JumpDuration跳躍持續(xù)時(shí)間這三個(gè)屬性。

運(yùn)行程序，查看當(dāng)前的效果：

關(guān)于上面的物理組件樣式顯示，可以將bg.ts中的cc.director.getPhysicsManager().debugDrawFlags = 1;去除，或者置為0。

結(jié)尾

一個(gè)簡單的嫦娥奔月就這樣做完了，希望各位都有各自的收獲！

5G游戲 Cocos2D JavaScript web前端

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。