COCOS2DX LÀ GÌ

     
Giới Thiệu

Thực tế thì tôi cũng chả phải là một trong lập trình viên chuyên game tuyệt gì cả, chỉ nên lần này mình có được trao làm một project game ngắn hạ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 bắt buộc muốn chia sẻ cho mọi bạn về engine này

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

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

Bạn đang xem: Cocos2dx là gì


*

*

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

Hiện tại thì nó vẫn được những các bạn láng giếng cải cách và phát triển khá là dũng mạnh và không xong xuôi hoàn thiện để biến đổi Unity phiên bản free, nhưng chặng đường chắc vẫn còn khá dài.

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

Mình thì không say đắm dài loại mà mình thấy các cực tốt để học một cái gì là cứ bỏ vào làm luôn luôn nó mới nhanh tan vỡ ra được, chứ cứ lý thuyết suông thì rất cực nhọc hình dung.


*

Đây là trang chủ để sở hữu cocos creator : https://www.cocos.com/en/creator

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


*

Giờ bọn họ sẽ đi luôn luôn vào làm cho game trước tiên như vào docs của cocos phía dẫn. Dưới đó là nguồn assets làm game và game sẽ hoàn thành

Assets

Sau khi sở hữu Assets lúc đầu về chúng ta sẽ import nó vào creator, rất đối kháng giản chỉ cần kéo thả vào thôi


*

Scene

Sau khi đã tất cả Assets ta sẽ tạo các Scene. Scene là một bạn dạng bồ 2d và hoàn toàn có thể mở cơ chế 3D, giúp ta kéo tả, biến đổi tạo ra UI. Mỗi Scene đã là một màn hình kiểu như thể trên web chúng ta sẽ có trang home, trang detail, trang about thì scene đó là các view đó. Ta hoàn toàn có thể tạo những scene và thay đổi giữa bọn chúng trong game.


Ở trên đây ta rất có thể tùy kéo kéo chỉnh, thay đổi vị trí của những thực thể làm thế nào cho mình thấy ổn nhất. Gồm nhiều chính sách kéo thả

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


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


Rsize size thực thể lựa chọn
và đổi khác kích thước


Ở bên trên scene ta chỉ việc nắm núm thôi là rất có thể kéo thả, biến đổi kích thước với dic chuyển khắp phiên bản đồ

Properties

Thì ngoài bài toán kéo thả ở scene họ cũng bao gồm thể chuyển đổi vị trí, chuyển đổi độ vào suốt, thêm các script, thêm animation và rất nhiều thức khác ở vị trí 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à loại phóng to lớn theo 2 chiều x hoặc yAnchor là để chuyển đổi vị trí của thực thể so với gốc tọa độ của chủ yếu nóSize bao gồm là thay đổi 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 khẳng định được đâu là thành phần thân phụ con của nhau hoặc thằng như thế nào ở lớp trên, thằng làm sao ở lớp dưới.


thằng nào càng sinh sống dưới tức là nó vẫn trên lớp cao nhất. Mẫu mã như sinh hoạt trong css gồm thuộc tính z-index khi ta thực hiện position vậy. Càng ở bên dưới thì z-index càng tốt và hoàn toàn có thể che lớp thằng kia. Giống 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 đơn giảm chị cần biến hóa góc nghiêng hay chuyển đổi vị trí của thực thể. Đây là ví dụ như về 1 animation nhảy


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

Bây giờ sau khoản thời gian đã đọc hết các phần và công dụng của nó họ sẽ lấn sân vào làm game đầu tiên nha

Đầu tiên bọn họ cần kéo những thành phần của game vào để có một chiếc UI tổng quát

Sau khi áp dụng hết những kiến thức sinh hoạt trên nhằm kéo thả ra một UI như trong hình, thì bây giờ công việc cần làm cho là add thêm những script để bắt sự khiếu nại trong game. Sản xuất 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 đã thấy một size js có 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 // // khổng lồ a node for the first time // type: cc.SpriteFrame, // optional, mặc định 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 những properties // Player.js //... Properties: // main character"s jump height jumpHeight: 0, // main character"s jump duration jumpDuration: 0, // maximal movement tốc độ maxMoveSpeed: 0, // acceleration accel: 0, , //...Tiếp mang đến ta sẽ gắn js này mang lại thằng thực thể PurpleMonster nhằm lát nữa sẽ cách xử trí sự kiện trong tệp tin js này. Tảo về màn hình hiển thị vào phần Node Tree nãy tôi đã nói, lựa chọn thực thể PurpleMonster sau đó để ý sang phần properties của nó. Ta sẽ xuống button địa chỉ cửa hàng Component chọn Custom component và lựa chọn Player

Sau lúc đã showroom được js vào trong nó đã hiện ra những thuộc tính ta vừa tư tưởng trong tệp tin Player sống trên cùng ta đang điền các thông số kỹ thuật vào đây.


Bây giờ đồng hồ ta đang viết một cái hàm nhảy đến 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 khi đã bao gồm hàm nhảy rồi ta sẽ set hàm kia vào onLoad(). Điều này có tác dụng là nó đang chạy ngay sau thời điểm 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 chạy thử xem chạy ko nha. Lựa chọn vào nút

Đã tạo nên hàm nhảy, tiếp đến bọn họ sẽ sản xuất hành động di chuyển sang trái, sang buộc phải cho nhân vật.

Xem thêm: Cách Nấu Sữa Đậu Nành Lá Dứa Thơm Béo, Đơn Giản Tại Nhà, Cách Nấu Sữa Đậu Nành Lá Dứa Tại Nhà Ngon Bổ Rẻ

// 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à khi ta nhấm phím, cònonKeyUp là khi ta nhả phím ra. Sẽ có 1 switch sinh hoạt trong để bình chọn xem ta bấm phím như thế nào ở keydown với nhả phím nào ở keyup. Tiếp đến set hướng mang đến nó sinh sống keydown mang lại hướng đấy thành true với khi nhả phím thì phối lại thành false chỉ đơn giản và dễ dàng vậy thôi.

Nhưng bận ước ao game nhận thấy ác tín lệnh đó của bản thân thì bạn cần khởi tạo nên 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 input đầ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 đầu vào 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 ra lắng nghe bàn phím khi load và hủy lắng nghe khi thực thể đó bị phá hủy

Cuối cùng là phần cập nhật vị trí của nhân thứ khi ta bấm nút

// Player.js update: function (dt) // update tốc độ 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 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 lớn the current tốc độ this.node.x += this.xSpeed * dt; ,Mình đã thử demo thì thấy thằng update() này cứ 0,01 giây nó sẽ điện thoại tư vấn 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 soát xem người tiêu dùng đang bắt nhân đồ gia dụng chạy về phía nào. Tiếp nối sẽ biến hóa vị trí nhân vật theo hướng đó bằng phương pháp trừ tuyệt công tọa đọ X với một tốc độ tăng theo thời gian. Dẫu vậy để phòng trường thích hợp tăng vận tốc quá cấp tốc thì một trong những phần giới hạn tốc độ được thiết lập ở tức thì 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 à mix vị trí mang đến nhân vật

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

Tạo Hình với Bắt Sự Kiện đến Ngôi Sao

Sau khi đang thực hiện hoàn thành cho nhân trang bị tiếp đến chúng ta sẽ tiến hành cho ngôi sao. Do ngôi sao sáng sẽ xuất hiện thêm và mất đi lúc nhân vật chạm với nó. Tức là nó sẽ được tạo ra và hủy diệt đi liên lục vày vậy ở chỗ này ta đang động đụng đến một quan niệm Prefab. Prefab là đa số node phần nhiều thực thể ta đã tạo thành nhưng cần áp dụng đi áp dụng lại các lần, nó giống hệt như khái niệm component ở trong số framework React xuất xắc Vue vậy.

Thì hiện thời ta sẽ khởi tạo ra những Prefab như vậy bằng phương pháp kéo ngôi sao sáng vào Scene và tạo thành một file script rồi showroom vào cho nó.


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

Rồi sau khi đã add script đến 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 lại là chế tạo ra sự kiện nhằm set vị trí cho ngôi sao khi nó xuất hiện. Tạo ra một file 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ờ add script này mang đến thằng Canvas kéo lên phần Node Tree --> lựa chọn Canvas --> rồi Properties chọn địa chỉ cửa hàng Component và lựa chọn file script Game

Rồi giờ mang lại phần Generate sao bằng cách random vị trí

// Game.js onLoad: function () // obtain the anchor point of ground màn chơi 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 to the position of the ground level and 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 khổng lồ 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 to the anchor point of the star return cc.v2(randX, randY); ,Test nào


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

// Game.js spawnNewStar: function() // ... // Staging a reference of game object on a star component newStar.getComponent("Star").game = this; ,// Star.js getPlayerDistance: function () // judge the distance according khổng lồ the position of the player node var playerPos = this.game.player.getPosition(); // calculate the distance between two nodes according to lớn 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 lớn 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 & 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 khi trò đùa bắt đầu. 1 điểm sẽ được thêm lúc một sao được thu thập. Để hiển thị điểm số, trước tiên bọn họ nên tạo nên một node Label. Lựa chọn Canvas vào Node Tree , nhấn vào 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 dưới node Canvas. Tiếp theo, shop chúng tôi sẽ sử dụng các bước sau để tùy chỉnh cấu hình node label này:

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

Thêm logic ăn được điểm vào script Game

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

// Game.js onLoad: function () // ... // initialize scoring this.score = 0; ,Sau kia thêm một cách tiến hành mới được lấy 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ò nghịch trong Star

// Star.js onPicked: function() // when the stars are being collected, invoke the interface in the trò chơi script 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 xúc tích game

Chọn Canvas quan sát sang Properties và chú ý phần Game sẽ có được các trường nhu sau


Đây đó là các properties ta đã có mang trong file Game.js. Tiếp theo sau ta đề xuất kéo những thành phần cần thiết vào đây.


Sau khi sẽ 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 vẫn generate các star bởi Prefab đề nghị thằng node này đang không cần thiết nữa. Còn nếu như không xóa đi nó sẽ ảnh hưởng hiện tượng thời điểm nào cũng đều có 2 ngôi sao sáng và một ngôi sao sáng không lúc nào biến mất như vậy này. À tiện thể demo xem hiệu quả luôn nhá


Kết quả đang ok

Game Over

Ta sẽ thiết lập cấu hình thời gian lộ diện của ngôi sao để triển khai sao từ bỏ khi ngôi sao 5 cánh được xuất hiện mà 60s sau chẳng hạn, cơ mà nó ko được tích lũy thì đã game over. Vây thứ nhất cần thêm biến đổi đế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 thời điểm cuối spawnNewStar phương thức, trong các số đó this.minStarDuration với this.maxStarDuration là các thuộc tính của trò chơi được khai báo sinh sống đầu. Bọn 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 gian và phán đoán vượt quá 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 ngắn gọn xúc tích of trò chơi failure if (this.timer > this.starDuration) this.gameOver(); return; this.timer += dt; ,Cuối cùng, thêm thủ tục gameOver

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

// Star.js update: function() // ... // update the transparency of the star according khổng lồ the timer in the trò chơi 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 music cho Player

Game mà yên lặng thì khôn cùng khô khan, hiện nay chúng ta sẽ thêm vào cho nó hiệu ứng âm nhạc khi nó thực hiện các hành động.

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

// Player.js properties: // ... // jumping sound effect resource jumpAudio: default: null, type: cc.AudioClip , ,Sau kia viết lại phương thức setJumpAction chèn cuộc call lại nhằm phát hiệu ứng âm thanh và vạc âm thanh bằng cách thêm thủ tục 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 to invoke other defined methods after the kích hoạt is finished var callback = cc.callFunc(this.playJumpSound, this); // repeat unceasingly, and invoke callback lớn play sound after landing each time return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback)); , playJumpSound: function () // invoke sound engine to play the sound cc.audioEngine.playEffect(this.jumpAudio, false); ,

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

Thêm nằm trong tính âm thanh ăn được đ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 mang lại làm tương tự như như kéo cá thành phần, giờ đồng hồ ta đã kéo các file audio vào ô thuộc tính tương ứng.

Xem thêm: Từ Điển Việt Anh " Đóng Dấu Tiếng Anh Là Gì ? Đóng Dấu Tiếng Anh Là Gì


Đã hoàn tất giờ bọn họ thử trả nghiệm thôi

Build với Deploy

Build

Phần Build của chính nó rất đối chọi giản. Lựa chọn Project -> lựa chọn Build


Vậy là vẫn build hoàn thành giờ có thể test hiệu quả build bằng phương pháp chọn Play

Deploy

Để đơn giản và dễ dàng hóa việc deploy họ sẽ thực hiện surge: https://surge.sh/


insttall rất đối chọi giản

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

Và phía trên là hiệu quả :http://gamestar.surge.sh/

Tổng kết

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

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