Cocos2d-x là gì

     
Giới Thiệu

Thực tế thì tôi cũng chả phải là một trong những lập trình viên chăm game tuyệt gì cả, chỉ nên lần này mình có được trao làm một project game thời gian ngắn từ anh sếp với được recomend áp dụng Cocos Creator. Sau 1 thời gian không thực sự dài tiếp xúc với nó thì bản thân thấy nó cũng tương đối hay đề xuất muốn share cho mọi bạn về engine này

Theo như mình có theo thông tin được biết thì trước đây khi chưa xuất hiện Cocos Creator thì mọi bạn vẫn thực hiện Cocos2d-x code bằng C++. điểm yếu kém của thằng này là không tồn tại giao diện tín đồ lập trình nên tự tưởng tượng code và rồi chạy lên new thấy được kết quả. Để khắc chế điều này, có tác dụng tăng năng suất và đuổi theo kịp được cùng với Unity, thì Cocos Creator đã có được ra đời. Bây giờ thì thằng này chỉ hỗ trợ trên MAC với Window nên đồng đội nào sử dụng Ubuntu thì cứng cáp sẽ khá buồn.Bạn đang xem: Cocos2d-x là gì

Vậy Cocos2d-x là gì thì Cocos2d-x là một trong Engine cung ứng lập trình game đa nền tảng : thiết bị di động ( IOS, ANDROID, Blackberry, TIZEN, WP) Window, MacOS, HTML5,.. đại một số loại là đủ cả. Theo wikipedia thì tác giả của Cocos2d-x là 1 trong những người trung quốc có tên là Zhe Wang.

Bạn đang xem: Cocos2d-x là gì


*

*

2012, at Zynga. With Rolando Abarca and Zhe Wang discussing Cocos2d-x’s và cocos2d-iphone’s roadmaps

Hiện tại thì nó vẫn được những chúng ta láng giếng cách tân và phát triển khá là mạnh bạo và không chấm dứt hoàn thiện để biến hóa Unity phiên bạn dạng free, nhưng chặng đường chắc vẫn còn đó khá dài.

Thực Hành tạo thành Và Deploy Game

Mình thì không mê say dài loại mà mình thấy các cực tốt để học một chiếc gì là cứ cho vô làm luôn nó new nhanh vỡ lẽ ra được, chứ cứ triết lý suông thì rất cạnh tranh hình dung.


*

Đây là trang chủ để download cocos creator : https://www.cocos.com/en/creator

Sau khi cài về và cài đặt (cài điều này khá là lâu nha) thì giao diện thiết yếu của creator sẽ như thế này


*

Giờ chúng ta sẽ đi luôn vào có tác dụng game trước tiên như vào docs của cocos hướng dẫn. Dưới đó là nguồn assets làm game với game đã hoàn thành

Assets

Sau khi download Assets thuở đầu về họ sẽ import nó vào creator, rất đối chọi giản chỉ việc kéo thả vào thôi


*

Scene

Sau lúc đã bao gồm Assets ta sẽ tạo nên các Scene. Scene là một bạn dạng bồ 2 chiều và hoàn toàn có thể mở chế độ 3D, giúp chúng ta kéo tả, đổi khác tạo ra UI. Từng Scene đang là một screen kiểu như thể trên web chúng ta sẽ gồm trang home, trang detail, trang about thì scene chính là các view đó. Ta có thể tạo những scene và chuyển đổi giữa bọn chúng trong game.


Ở phía trên ta hoàn toàn có thể tùy kéo kéo chỉnh, biến đổi vị trí của các thực thể làm thế nào cho mình thấy ổn nhất. Bao gồm nhiều chế độ kéo thả

Di gửi theo chiều X - Y trước tiên chọn mặt góc trái sau đó có thể di đưa vị trí của thực thể


Thay đổi góc con quay của thực thể. Chọn và ra scene chuyển đổi góc quay


Rsize kích cỡ thực thể lựa chọn
và thay đổi kích thước


Ở bên trên scene ta chỉ việc nắm nuốm thôi là hoàn toàn có thể kéo thả, thay đổi kích thước và dic chuyển khắp bạn dạng đồ

Properties

Thì ngoài vấn đề kéo thả ngơi nghỉ scene chúng ta cũng gồm thể đổi khác vị trí, biến đổi độ trong suốt, thêm các script, thêm animation và không ít thức khác ở phần này


Position đó là vị trí của thực thể đó trên scene tính theo trục tọa đọ X-YRotaion là góc nghiêngScale là vẻ bên ngoài phóng to theo 2d x hoặc yAnchor là để chuyển đổi vị trí của thực thể so với cội tọa độ của chính nóSize thiết yếu là biến hóa kích thước width-Height của thực thểColor là color của thực thểOpacity độ trong suốt...

Node Tree

Đây khi khu vực để ta xác định được đâu là thành phần cha con của nhau hoặc thằng nào ở lớp trên, thằng làm sao ở lớp dưới.


thằng như thế nào càng sinh hoạt dưới tức là nó vẫn trên lớp cao nhất. Phong cách như sinh hoạt trong css có thuộc tính z-index khi ta áp dụng position vậy. Càng ở bên dưới thì z-index càng tốt và có thể che lớp thằng kia. Y như cái ground đang bịt đi cả thằng PurpleMonster.

Timeline

phần này dùng làm tạo ra các animation đối chọi giảm chị cần đổi khác góc nghiêng hay đổi khác vị trí của thực thể. Đây là lấy một ví dụ về 1 animation nhảy


Tạo Hình cùng Bắt Sự Kiện mang lại Nhân Vật

Bây giờ sau khoản thời gian đã đọc hết những phần và tính năng của nó chúng ta sẽ đi vào làm game trước tiên nha

Đầu tiên bọn họ cần kéo những thành phần của trò chơi vào để có một mẫu UI tổng quát

Sau khi áp dụng hết những kiến thức nghỉ ngơi trên để kéo thả ra một UI như trong hình, thì hiện nay công việc cần làm là địa chỉ cửa hàng thêm các script để bắt sự kiện trong game. Chế tạo ra một thư mục scripts --> và new một tệp tin Player.js.

Tạo folder


Click double vào tệp tin Player ta vẫn thấy một khung js gồm sẵn

// Player.js cc.Class( extends: cc.Component, properties: // foo: // // ATTRIBUTES: // default: null, // The default value will be used only when the component attaching // // lớn a node for the first time // type: cc.SpriteFrame, // optional, default is typeof default // serializable: true, // optional, default is true // , // bar: // get () // return this._bar; // , // set (value) // this._bar = value; // // , , // LIFE-CYCLE CALLBACKS: // onLoad () , start () , // update (dt) , );Giờ thêm các properties // Player.js //... Properties: // main character"s jump height jumpHeight: 0, // main character"s jump duration jumpDuration: 0, // maximal movement speed maxMoveSpeed: 0, // acceleration accel: 0, , //...Tiếp mang lại ta đã gắn js này mang lại thằng thực thể PurpleMonster để lát nữa sẽ giải pháp xử lý sự khiếu nại trong file js này. Cù về screen vào phần Node Tree nãy tôi đã nói, chọn thực thể PurpleMonster sau đó xem xét sang phần properties của nó. Ta vẫn xuống button add Component chọn Custom component và chọn Player

Sau lúc đã địa chỉ cửa hàng được js vào trong nó sẽ hiện ra các thuộc tính ta vừa có mang trong file Player sống trên và ta vẫn điền các thông số vào đây.


Bây tiếng ta đã viết một chiếc hàm nhảy mang lại thằng này

// Player.js properties: //... , setJumpAction: function () // jump up var jumpUp = cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut()); // jump down var jumpDown = cc.moveBy(this.jumpDuration, cc.v2(0, -this.jumpHeight)).easing(cc.easeCubicActionIn()); // repeat return cc.repeatForever(cc.sequence(jumpUp, jumpDown)); ,Sau lúc đã có hàm dancing rồi ta đang set hàm kia vào onLoad(). Điều này có tính năng là nó đã chạy ngay sau khi thực thể lại được load ra// Player.js onLoad: function () // initialize jump kích hoạt this.jumpAction = this.setJumpAction(); this.node.runAction(this.jumpAction); ,Ok thử nghiệm xem chạy ko nha. Chọn vào nút

Đã tạo được hàm nhảy, tiếp đến bọn họ sẽ sinh sản hành động dịch chuyển sang trái, sang đề xuất cho nhân vật.

Xem thêm: Hướng Dẫn Tạo Id Apple Trung Quốc ? Hướng Dẫn Tạo Id Apple Trung Quốc

// Player.js setJumpAction: function () //... , onKeyDown (event) // phối a flag when key pressed switch(event.keyCode) case cc.macro.KEY.a: this.accLeft = true; break; case cc.macro.KEY.d: this.accRight = true; break; , onKeyUp (event) // unset a flag when key released switch(event.keyCode) case cc.macro.KEY.a: this.accLeft = false; break; case cc.macro.KEY.d: this.accRight = false; break; ,onKeyDown là lúc ta nhấm phím, cònonKeyUp là lúc ta nhả phím ra. Sẽ có 1 switch sinh hoạt trong để đánh giá xem ta bấm phím làm sao ở keydown với nhả phím như thế nào ở keyup. Kế tiếp set hướng đến nó sinh sống keydown mang đến hướng đấy thành true và khi nhả phím thì mix lại thành false chỉ đơn giản dễ dàng vậy thôi.

Nhưng bận ước ao game cảm nhận ác hiệu lệnh đó của bản thân mình thì bạn cần khởi sản xuất bàn phím bằng cách như sau

// Player.js onLoad: function () // Initialize the jump action this.jumpAction = this.setJumpAction(); this.node.runAction(this.jumpAction); // Acceleration direction switch this.accLeft = false; this.accRight = false; // The main character"s current horizontal velocity this.xSpeed = 0; // Initialize the keyboard đầu vào listening cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); , onDestroy () // Cancel keyboard input monitoring cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); ,Khởi tạo thành lắng nghe keyboard khi load với hủy lắng nghe lúc thực thể đó bị phá hủy

Cuối cùng là phần update vị trí của nhân thiết bị khi ta bấm nút

// Player.js update: function (dt) // update speed of each frame according khổng lồ the current acceleration direction if (this.accLeft) this.xSpeed -= this.accel * dt; else if (this.accRight) this.xSpeed += this.accel * dt; // restrict the movement tốc độ of the main character to lớn the maximum movement speed if ( Math.abs(this.xSpeed) > this.maxMoveSpeed ) // if speed reach limit, use max speed with current direction this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed); // update the position of the main character according to lớn the current speed this.node.x += this.xSpeed * dt; ,Mình vẫn thử test thì thấy thằng update() này cứ 0,01 giây nó sẽ hotline một lần

update(dt) console.log("Run in function update() time : ", dt);
Tức là nó sẽ hotline hàm gần như liên tục

if (this.accLeft) this.xSpeed -= this.accel * dt; else if (this.accRight) this.xSpeed += this.accel * dt; Phần này sẽ kiểm tra xem người dùng đang bắt nhân vật chạy về phía nào. Tiếp nối sẽ biến hóa vị trí nhân vật theo phía đó bằng phương pháp trừ tuyệt công tọa đọ X cùng với một vận tốc tăng theo thời gian. Nhưng mà để chống trường phù hợp tăng vận tốc quá cấp tốc thì một phần giới hạn vận tốc được tùy chỉnh cấu hình ở ngay lập tức phía dưới.

if ( Math.abs(this.xSpeed) > this.maxMoveSpeed ) // if speed reach limit, use max speed with current direction this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed); Phần cuối của hàm l à set vị trí mang đến nhân vật

this.node.x += this.xSpeed * dt;

Tạo Hình và Bắt Sự Kiện mang lại Ngôi Sao

Sau khi đang thực hiện hoàn thành cho nhân vật dụng tiếp đến họ sẽ thực hiện cho ngôi sao. Do ngôi sao sáng sẽ xuất hiện và mất đi lúc nhân vật chạm tới nó. Có nghĩa là nó đang được tạo ra và tàn phá đi liên lục bởi vì vậy ở đây ta đã động va đến một quan niệm Prefab. Prefab là hồ hết node những thực thể ta đã tạo ra nhưng cần sử dụng đi thực hiện lại những lần, nó y hệt như khái niệm component ở trong những framework React giỏi Vue vậy.

Thì hiện nay ta sẽ tạo ra các Prefab như vậy bằng cách kéo ngôi sao 5 cánh vào Scene và chế tạo một file script rồi showroom vào cho nó.


// Star.js properties: // When the distance between the star và main character is less than this value, collection of the point will be completed pickRadius: 0, ,

Rồi sau khoản thời gian đã showroom script mang lại nó ta trở thành nó thành 1 một Prefab bởi cách. Kéo nó trường đoản cú Scene xuống ô Assets vậy là xong


Tiếp mang đến là chế tạo ra sự kiện để set vị trí cho ngôi sao khi nó xuất hiện. Tạo thành một tệp tin Game.js

// Game.js properties: // this property quotes the PreFab resource of stars starPrefab: default: null, type: cc.Prefab , // the random scale of disappearing time for stars maxStarDuration: 0, minStarDuration: 0, // ground node for confirming the height of the generated star"s position ground: default: null, type: cc.Node , // player node for obtaining the jump height of the main character và controlling the movement switch of the main character player: default: null, type: cc.Node ,starPrefab ta nhằm type là Prefab. Bây giờ địa chỉ cửa hàng script này đến thằng Canvas vuốt lên phần Node Tree --> chọn Canvas --> rồi Properties chọn showroom Component và chọn file script Game

Rồi giờ cho phần Generate sao bằng phương pháp random vị trí

// Game.js onLoad: function () // obtain the anchor point of ground level on the y axis this.groundY = this.ground.y + this.ground.height/2; // this.ground.top may also work // generate a new star this.spawnNewStar(); , spawnNewStar: function() // generate a new node in the scene with a preset template var newStar = cc.instantiate(this.starPrefab); // put the newly added node under the Canvas node this.node.addChild(newStar); // phối up a random position for the star newStar.setPosition(this.getNewStarPosition()); , getNewStarPosition: function () var randX = 0; // According khổng lồ the position of the ground level & the main character"s jump height, randomly obtain an anchor point of the star on the y axis var randY = this.groundY + Math.random() * this.player.getComponent("Player").jumpHeight + 50; // according lớn the width of the screen, randomly obtain an anchor point of star on the x axis var maxX = this.node.width/2; randX = (Math.random() - 0.5) * 2 * maxX; // return lớn the anchor point of the star return cc.v2(randX, randY); ,Test nào


Rồi giờ đính thêm sao vào với tổng thể game

// Game.js spawnNewStar: function() // ... // Staging a reference of trò chơi object on a star component newStar.getComponent("Star").game = this; ,// Star.js getPlayerDistance: function () // judge the distance according to lớn the position of the player node var playerPos = this.game.player.getPosition(); // calculate the distance between two nodes according to their positions var dist = this.node.position.sub(playerPos).mag(); return dist; , onPicked: function() // When the stars are being collected, invoke the interface in the game script to generate a new star this.game.spawnNewStar(); // then destroy the current star"s node this.node.destroy(); , update: function (dt) // judge if the distance between the star and main character is less than the collecting distance for each frame if (this.getPlayerDistance() this.pickRadius) // invoke collecting behavior this.onPicked(); return; ,

Add score

Điểm sẽ bước đầu từ 0 lúc trò nghịch bắt đầu. 1 điểm sẽ tiến hành thêm lúc 1 sao được thu thập. Để hiển thị điểm số, trước tiên họ nên sinh sản một node Label. Chọn Canvas trong Node Tree , nhấp chuột phải và lựa chọn Create -> Create Renderer Nodes -> Node With Label. Một node label mới sẽ tiến hành tạo bên dưới node Canvas. Tiếp theo, công ty chúng tôi sẽ sử dụng quá trình sau để cấu hình thiết lập node label này:

Thay thay tên node thành scoreChọn node score và thiết lập cấu hình position thành (0, 180)Chỉnh sửa trực thuộc tính String thành Score: 0Đặt Font kích thước là 50Kéo assets/mikado_outline_shadow(chú ý! biểu tượng là

Thêm logic kiếm được điểm vào script Game

// Game.js properties: // ... // reference of score label scoreDisplay: default: null, type: cc.Label ,Tiếp mang lại là khởi chế tác điểm vào onLoad()

// Game.js onLoad: function () // ... // initialize scoring this.score = 0; ,Sau đó thêm một cách làm mới được đặt tên gainScore :

// Game.js gainScore: function () this.score += 1; // update the words of the scoreDisplay Label this.scoreDisplay.string = "Score: " + this.score; ,

Invoke ăn điểm của trò đùa trong Star

// Star.js onPicked: function() // when the stars are being collected, invoke the interface in the trò chơi script to lớn generate a new star this.game.spawnNewStar(); // invoke the scoring method of the game script this.game.gainScore(); // then destroy the current star"s node this.node.destroy(); ,

Kéo những thành phần vào logic game

Chọn Canvas nhìn sang Properties và để ý phần Game sẽ có được các ngôi trường nhu sau


Đây chính là các properties ta đã quan niệm trong file Game.js. Tiếp sau ta yêu cầu kéo những thành phần quan trọng vào đây.


Sau khi đã kéo những thành phần vào properties thì ta cần xóa node star trên Node Tree đi. Vì sau này ta đã generate những star bằng Prefab yêu cầu thằng node này đang không cần thiết nữa. Còn nếu không xóa đi nó có khả năng sẽ bị hiện tượng lúc nào cũng có thể có 2 ngôi sao và một ngôi sao sáng không bao giờ biến mất như vậy này. À luôn tiện thể thử nghiệm xem hiệu quả luôn nhá


Kết quả đang ok

Game Over

Ta sẽ cấu hình thiết lập thời gian xuất hiện thêm của ngôi sao để làm sao tự khi ngôi sao 5 cánh được xuất hiện thêm mà 60s sau chẳng hạn, nhưng mà nó không được tích lũy thì sẽ game over. Vây đầu tiên cần thêm trở nên đếm thời gian

// Game.js onLoad: function () // ... // initialize timer this.timer = 0; this.starDuration = 0; // generate a new star this.spawnNewStar(); // initialize scoring this.score = 0; ,Sau đó thêm xúc tích đặt lại cỗ định thời vào cuối spawnNewStar phương thức, trong đó this.minStarDuration và this.maxStarDuration là những thuộc tính của game được khai báo nghỉ ngơi đầu. Chúng được thực hiện để quy định phần trăm ngẫu nhiên của thời gian sao:

// Game.js spawnNewStar: function() // ... // reset timer, randomly choose a value according the scale of star duration this.starDuration = this.minStarDuration + Math.random() * (this.maxStarDuration - this.minStarDuration); this.timer = 0; ,Thêm logic cập nhật bộ đếm thời hạn và phán đoán vượt vượt thời lượng cho cách thức update:

// Game.js update: function (dt) // update timer for each frame, when a new star is not generated after exceeding duration // invoke the xúc tích và ngắn gọn of game failure if (this.timer > this.starDuration) this.gameOver(); return; this.timer += dt; ,Cuối cùng, thêm phương thức gameOver

// Game.js gameOver: function () this.player.stopAllActions(); //stop the jumping action of the player node cc.director.loadScene("game"); Để bạn chơi biết rằng ngồi sao sắp biến mất ta cần có cho nó một hiệu ứng bằng phương pháp giảm opacity của nó xuống làm nó mờ dần dần đi.

// Star.js update: function() // ... // update the transparency of the star according to the timer in the game script var opacityRatio = 1 - this.game.timer/this.game.starDuration; var minOpacity = 50; this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));

Thêm hiệu ứng âm nhạc cho Player

Game mà yên lặng thì hết sức khô khan, hiện giờ chúng ta sẽ thêm cho nó hiệu ứng music khi nó triển khai các hành động.

Đầu tiên, thêm hiệu ứng âm nhạc nhảy. Mở Player.js cùng thêm ở trong tính tham jumpAudio

// Player.js properties: // ... // jumping sound effect resource jumpAudio: default: null, type: cc.AudioClip , ,Sau kia viết lại thủ tục setJumpAction chèn cuộc call lại để phát hiệu ứng music và vạc âm thanh bằng phương pháp thêm cách tiến hành playJumpSound

// Player.js setJumpAction: function () // jump up var jumpUp = cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut()); // jump down var jumpDown = cc.moveBy(this.jumpDuration, cc.v2(0, -this.jumpHeight)).easing(cc.easeCubicActionIn()); // showroom a callback function lớn invoke other defined methods after the kích hoạt is finished var callback = cc.callFunc(this.playJumpSound, this); // repeat unceasingly, and invoke callback to play sound after landing each time return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback)); , playJumpSound: function () // invoke sound engine to lớn play the sound cc.audioEngine.playEffect(this.jumpAudio, false); ,

Hiệu ứng âm thanh khi ghi điểm

Thêm trực thuộc tính âm thanh ăn điểm vào Game.js

// Game.js properties: // ... // scoring sound effect resource scoreAudio: default: null, type: cc.AudioClip ,Sau kia chèn vào cách làm gainScore

// Game.js gainScore: function () this.score += 1; // update the words of the scoreDisplay Label this.scoreDisplay.string = "Score: " + this.score.toString(); // play the scoring sound effect cc.audioEngine.playEffect(this.scoreAudio, false); ,Tiếp cho làm giống như như kéo cá thành phần, giờ ta đã kéo các file audio vào ô nằm trong tính tương ứng.

Xem thêm: Night Auditor Là Gì ? Công Việc Của Night Auditor Trong Khách Sạn


Đã hoàn toàn giờ chúng ta thử trả nghiệm thôi

Build với Deploy

Build

Phần Build của nó rất đơn giản. Chọn Project -> lựa chọn Build


Vậy là đang build kết thúc giờ có thể test công dụng build bằng cách chọn Play

Deploy

Để đơn giản dễ dàng hóa bài toán deploy bọn họ sẽ áp dụng surge: https://surge.sh/


insttall rất đối kháng giản

npm install --global surgesau khi đã thiết đặt ta sẽ vào thư mục nhưng vừa nãy ta build ra và mở terminal

Và phía trên là tác dụng :http://gamestar.surge.sh/

Tổng kết

Đến đây chắc rằng mọi người đã biết phương pháp làm sao để làm những game đơn giản dễ dàng với Cocos Creator rồi. Còn nếu còn muốn tạo gần như game phức tạp hơn vậy thì cần đề nghị đọc docs và tìm hiểu thêm từ những thành phầm đi trước tương đối nhiều nữa. Cảm ơn các bạn đã để ý đến bàì viết, rất vui và hẹn gặp mặt lại ở những nội dung bài viết tiếp theo.

Nếu chúng ta có hứng thú với trò chơi socket rất có thể tham khảo game mà lại mình và chúng ta trong team sẽ làm. Nó tất cả tích hợp sử dụng cả websocket để nghịch và blockchain để lưu tác dụng nên, tuy hơi sơ sử dụng nhưng chắn chắn là sẽ giúp được ai đó nếu cần. Và đặc biệt là thằng này không hỗ chợ SocketIO nếu muốn tích hợp sẽ tương đối khó khăn theo như docs của nó gồm nói vậy, đề xuất mình đành ngậm ngùi áp dụng Websocket. Đây là liên kết game và cần phải có ví metamask new chơi được nha:https://github.com/ngovannghia1997kma/HeadBall2