Hi mọi người!Vậy là chúng ta đã cùng nhau làm xong 2 Game đơn giản ở những bài trước. Trong bài này mình sẽ hướng dẫn các bạn làm 1 game khó hơn, giống như là Candy Crush, và Bejewer nhé.
À tiện đây mình cũng muốn nói đôi lời. Những ai đang có ý định kiếm mấy game người khác đã chia sẻ code hoặc hướng dẫn làm trên mạng rồi Clone lại, chỉnh sửa tí chút sau đó add quảng cáo rồi tung lên Store để kiếm tiền thì mình có lời như này: XIN ĐỪNG LÀM RÁC các kho ứng dụng theo cách như vậy.
Hãy học làm game một cách chuyên nghiệp, suy nghĩ và sáng tạo ra sản phẩm của riêng mình, mới lạ độc đáo thì sẽ được người dùng đón nhận thôi chứ đừng Clone, nhái, ăn theo => RÁC lắm. Nếu có nhái, ăn theo, thì hãy làm cho nó mới hơn, hay hơn thì hãy làm. Còn không thì tự suy nghĩ và sáng tạo ra 1 game của riêng mình ấy, dù có dở cũng không ai chửi bạn. Chứ đã nhái lại mà còn dở thì..... ăn GẠCH nhá.
Chúng ta bắt đầu bài học thôi.
Để chuẩn bị cho bài học, các bạn cần ôn lại 1 chút kiến thức C++ về mảng 1-2 chiều, con trỏ cấp 1 (*pointer) và con trỏ cấp 2(**pointer), Mối quan hệ giữa con trỏ và mảng nhé, khá quan trọng đó
Trong bài này, chúng ta cần làm các công việc sau đây:
+ Xây dựng Class Sushi, => tạo ra các miếng sushi ở vị trí hàng cột ( thuộc ma trận )
+ Xây dựng màn chơi bằng cách tạo 1 ma trận ( mảng 2 chiều ) chứa các Sushi.
+ Tạo và làm rơi Sushi xuống khi khởi đầu màn chơi
Nhiệm vụ chỉ có vậy thôi. Chúng ta Go nhé
>cocos new sushi -p com.vn.sushi -l cpp -d f:android/project
B1 - Xây dựng Class Sushi
Mở Class của Project Sushi vừa tạo, mở file AppDelegate.cpp sửa và thêm 1 số lệnh sau
+ Phần include thay HelloWorldScene.h = PlayLayer.h, đơn giản chỉ là ko dùng tên HelloWorld nữa, nghe Amatuer làm sao
+ Thêm đoạn code sau vào trước lệnh director->setDisplayStats(true);
// Thiết lập độ phân giải
glview->setDesignResolutionSize(320, 480, ResolutionPolicy::FIXED_WIDTH);
// Thiết lập đường dẫn tới thư mục w640 trong Resource khi biên dịch
std::vector<std::string> searchPath;
searchPath.push_back("w640");
CCFileUtils::getInstance()->setSearchPaths(searchPath);
director->setContentScaleFactor(640 / 320);
+ Sửa lệnh auto scene = HelloWorldScene::createScene(); thành auto scene = PlayLayer::createScene();
Bạn xóa 2 file HelloWorldScene.h và .cpp đi nhé vì bài này chúng ta ko dùng đến nữa, mà tạo hẳn file mới và các lớp mới.
+ Bạn tạo 4 file sau ( file rỗng)
- PlayLayer.h, .cpp
- SushiSprite.h, .cpp
+ Đồng thời mở file sushi.vcxproj ( trong thư mục proj.win32) và add vào 4 file trên nhé. Cách add bạn search HelloWorldScene là biết cách. ( Và phải xóa HelloWorldScene ở trong này luôn nhé ).
Dựng Class Sushi
Mở file SushiSprite.h, chèn vào đoạn lệnh sau
#ifndef __SushiSprite_H__
#define __SushiSprite_H__
#include "cocos2d.h"
USING_NS_CC;
class SushiSprite:public Sprite // Kế thừa từ lớp Sprite nhé
{
public:
static SushiSprite* create(int row, int col); // Tạo 1 Sushi tại vị trí hàng, cột thuộc Ma trận
static float getContentWidth(); // Lấy chiều rộng của sprite sushi, cần thiết cho việc tính toán về sau
CC_SYNTHESIZE(int,m_row,Row); // Vị trí hàng của Sushi trong Ma trận
CC_SYNTHESIZE(int,m_col,Col); // Vị trí hàng của Sushi trong Ma trận
CC_SYNTHESIZE(int,m_imgIndex,ImgIndex); // Loại Sushi
};
#endif
CC_SYNTHESIZE thì ở các bài trước mình đã giải thích rồi nhé, ko quá khó để hiểu đâu. Hãy dùng ô Search của Blog và search "CC_SYNTHESIZE_READONLY" nhé ra ngay bài 12
File Sushi.cpp, thêm vào
#include "SushiSprite.h"
USING_NS_CC;
#define TOTAL_SUSHI 6 // Tổng số loại Sushi
// Tạo 1 mảng con trỏ, mỗi con trỏ trỏ tới 1 chuỗi, sushiNormal[i] lưu địa chỉ chuỗi i
static const char *sushiNormal[TOTAL_SUSHI] = {
"sushi_1n.png",
"sushi_2n.png",
"sushi_3n.png",
"sushi_4n.png",
"sushi_5n.png",
"sushi_6n.png"
};
// Lấy chiều rộng của đối tượng
float SushiSprite::getContentWidth()
{
static float itemWidth = 0;
if (itemWidth==0) {
// Tạo ra 1 sushi từ mảng trên
auto sprite = Sprite::createWithSpriteFrameName(sushiNormal[0]);
itemWidth = sprite->getContentSize().width;
}
return itemWidth;
}
// Tạo mới 1 Sushi có vị trí row, col, trả về 1 con trỏ kiếu SushiSprite*
SushiSprite *SushiSprite::create(int row, int col)
{
// Tạo mới
SushiSprite *sushi = new SushiSprite();
// Gắn hàng, cột, index
sushi->m_row = row;
sushi->m_col = col;
sushi->m_imgIndex = rand() % TOTAL_SUSHI; // random loại Sushi từ 0-5 (= index của mảng)
// Tạo hình ảnh từ chuỗi của mảng trên
sushi->initWithSpriteFrameName(sushiNormal[sushi->m_imgIndex]);
sushi->autorelease(); // Tự động hủy khi cần
return sushi;
}
B2 - Xây dựng Màn chơi, tạo hiệu ứng rơi Sushi
+ Mở file PlayLayer.h ( đang trống) Code file như sau
#ifndef __PlayLayer_H__
#define __PlayLayer_H__
#include "cocos2d.h"
USING_NS_CC;
class SushiSprite; // Chỗ này bạn có thể cho lên #include
class PlayLayer : public Layer
{
public:
PlayLayer();
~PlayLayer();
static Scene* createScene(); // Tạo màn chơi
CREATE_FUNC(PlayLayer);
// Khởi tạo
virtual bool init() override;
private:
// Sprite Sheet để lưu các loạt ảnh tạo animation, học ở bài 19
SpriteBatchNode *spriteSheet;
// Ma trận 2 chiều dùng con trỏ cấp 2 để lưu SushiSprite* ( Hãy đọc lại phần con trỏ và mảng 2 chiều)
SushiSprite **m_matrix;
// Kích thước Ma trận, hàng, cột
int m_width;
int m_height;
// Vị trí căn chỉnh trên màn hình ( Tọa độ Left Bottom)
float m_matrixLeftBottomX;
float m_matrixLeftBottomY;
// Hàm tạo ma trận
void initMatrix();
// Tạo Sushi và cho rơi xuống ở vị trí hàng cột bất kỳ
void createAndDropSushi(int row, int col);
// Trả lại vị trí tọa độ Point của Sushi tại vị trí hàng + cột trong ma trận
Point positionOfItem(int row, int col);
};
#endif /* defined(__PlayLayer_H__) */
+ Mở file PlayLayer.cpp để xây dựng các hàm, Code file như sau ( Thực sự là hơi dài nếu tính cả Comment của mình ). Cũng đành copy vậy
#include "PlayLayer.h"
#include "SushiSprite.h"
// Định nghĩa kích thước ma trận 6x8
#define MATRIX_WIDTH (6)
#define MATRIX_HEIGHT (8)
// Khoảng cách giữa cách ảnh Sushi = 1
#define SUSHI_GAP (1)
// Hàm tạo Contructor, tất cả con trỏ = NULL, giá trị =0
PlayLayer::PlayLayer()
: spriteSheet(NULL) //chỗ này là dấu 2 chấm, đằng sau dấu phẩy hết nha
, m_matrix(NULL)
, m_width(0)
, m_height(0)
, m_matrixLeftBottomX(0)
, m_matrixLeftBottomY(0)
{
}
// Hàm hủy thì giải phóng con trỏ
PlayLayer::~PlayLayer()
{
if (m_matrix) {
free(m_matrix);
}
}
// Hàm tạo Scene, đơn giản quá
Scene *PlayLayer::createScene()
{
auto scene = Scene::create();
auto layer = PlayLayer::create();
scene->addChild(layer);
return scene;
}
// Hàm khởi tạo init()
bool PlayLayer::init()
{
if (!Layer::init()) {
return false;
}
//Tạo ảnh nền
Size winSize = Director::getInstance()->getWinSize();
auto background = Sprite::create("background.png");
// Điểm neo, điểm này sẽ ảnh hưởng tới việc đặt setPosition của sprite, nếu ko đặt điểm neo thì khi setPosition sẽ mặc định lấy điểm trung tâm của Sprite đặt lên màn hình
background->setAnchorPoint(Point(0, 1));
background->setPosition(Point(0, winSize.height)); // Điểm neo như trên dễ đặt Position hơn nhỉ
this->addChild(background);
// Khởi tạo bộ đệm Sprite Frame
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("sushi.plist");
spriteSheet = SpriteBatchNode::create("sushi.pvr.ccz"); // Chú ý hàm này, "pvr.ccz" tập tin đã nén và hõa hóa = TexturePacker, chứa hình ảnh, bạn có thể xem chúng bằng phần mềm TexturePacker, tool PVR View
addChild(spriteSheet); // Thêm SpriteSheet vào Layer
// Kích thước ma trận,
m_width = MATRIX_WIDTH; // =6
m_height = MATRIX_HEIGHT; //=8
// Đặt vị trí ma trận, tính toán 1 chút là ra ấy mà, lấy tổng kích thước màn hình, trừ đi các khoảng cách sẽ ra 2 khoảng bên trái và phải của Ma trận
m_matrixLeftBottomX = (winSize.width - SushiSprite::getContentWidth() * m_width - (m_width - 1) * SUSHI_GAP) / 2;
m_matrixLeftBottomY = (winSize.height - SushiSprite::getContentWidth() * m_height - (m_height - 1) * SUSHI_GAP) / 2;
// Khởi tạo 1 mảng
// Kích thước bộ nhớ arraySize = sizeof (kiểu) x kích thước mảng
int arraySize = sizeof(SushiSprite *) * m_width * m_height;
// Cấp phát bộ nhớ bằng hàm malloc, ( xem lại cách sử dụng hàm này ), ép kiểu về kiểu của biến SushiSprite **, rồi cấp phát với kích thước arraySize
m_matrix = (SushiSprite **)malloc(arraySize);
memset((void*)m_matrix, 0, arraySize); // Đặt tất cả giá trị của mảng là 0, bắt buộc ép kiểu void* của mọi loại mảng
initMatrix(); // Khởi tạo ma trận Sushi
return true;
}
void PlayLayer::initMatrix()
{
// Duyệt các phần tử ma trận 2 chiều
for (int row = 0; row < m_height; row++) {
for (int col = 0; col < m_width; col++) {
createAndDropSushi(row, col); // Tạo và làm rơi Sushi xuống vị trí hàng + cột
}
}
}
void PlayLayer::createAndDropSushi(int row, int col)
{
Size size = Director::getInstance()->getWinSize();
SushiSprite *sushi = SushiSprite::create(row, col); // Gọi đến hàm tạo ra Sushi của lớp SushiSprite
// Tạo animation, or Action?
Point endPosition = positionOfItem(row, col); // Lấy tọa độ Point từ row, col truyền vào
Point startPosition = Point(endPosition.x, endPosition.y + size.height / 2); // (y) Điểm đầu = Điểm Cuối + 1 khoảng nửa màn hình
sushi->setPosition(startPosition);
float speed = startPosition.y / (2 * size.height); // tốc độ
sushi->runAction(MoveTo::create(speed, endPosition)); // Di chuyển rơi xuống
// Thêm vào Spritesheet
spriteSheet->addChild(sushi);
// Thêm sushi vào mảng, chỗ này là cách quy mảng 2 chiều về mảng 1 chiều nhé, a[i][j] = a[i*COL + j]
m_matrix[row * m_width + col] = sushi;
}
// Tọa độ Point từ vị trí row, col
Point PlayLayer::positionOfItem(int row, int col)
{
float x = m_matrixLeftBottomX + (SushiSprite::getContentWidth() + SUSHI_GAP) * col + SushiSprite::getContentWidth() / 2;
float y = m_matrixLeftBottomY + (SushiSprite::getContentWidth() + SUSHI_GAP) * row + SushiSprite::getContentWidth() / 2;
return Point(x, y);
}
Xong phần Code, hãy build và chạy thử xem thế nào?
Ngon rồi
Tổng kết lại ở bài này chúng ta học được :
+ Tạo Class mới ( Sushi ) đơn giản bằng C++
+ Ôn lại kiến thức về mảng, ma trận cấp 2, con trỏ đơn, con trỏ 2 cấp
+ Tạo ma trận Sushi
+ Tính toán 1 chút về cách đặt ma trận trên màn hình
+ Tạo Action rơi các sushi xuống ở màn chơi
* Lưu ý 1 chút:
1/ Bạn thấy rằng hình như các sushu + background có vẻ tràn ra màn hình, kích thước không được hợp lý lắm. Thì phải thôi, nguyên nhân khiến bị như thế này là
+ Trong file AppDelegate.cpp, ta chỉ setting chỉnh kích thước trên mobile thôi, chứ ko phải cho window
Các bạn thử chạy trên máy thật hoặc máy ảo xem như nào. ĐT mình mới chêt nguồn rồi. và máy ảo thì nặng quá, và thường là chạy không đúng, hay force stop.
2/ Có vẻ hàm rand() không hiệu quả ( trên win) thì phải, chạy đi chạy lại, thì loại Sushi vẫn thế. Không biết trên máy ĐT thế nào?
Mình kết thúc bài này ở đây nhé.
Download:
+ Class
+ Resource
+ Texture, mở bằng TexturePacker ( hướng dẫn )
Chào và hẹn gặp lại các bạn trong những bài sau
Bài 21: Học làm game thứ 3: Sushi Crush - Like Candy Crush or Bejewer ( Part 2 )
#include "PlayLayer.h"
#include "SushiSprite.h"
// Định nghĩa kích thước ma trận 6x8
#define MATRIX_WIDTH (6)
#define MATRIX_HEIGHT (8)
// Khoảng cách giữa cách ảnh Sushi = 1
#define SUSHI_GAP (1)
// Hàm tạo Contructor, tất cả con trỏ = NULL, giá trị =0
PlayLayer::PlayLayer()
: spriteSheet(NULL) //chỗ này là dấu 2 chấm, đằng sau dấu phẩy hết nha
, m_matrix(NULL)
, m_width(0)
, m_height(0)
, m_matrixLeftBottomX(0)
, m_matrixLeftBottomY(0)
{
}
// Hàm hủy thì giải phóng con trỏ
PlayLayer::~PlayLayer()
{
if (m_matrix) {
free(m_matrix);
}
}
// Hàm tạo Scene, đơn giản quá
Scene *PlayLayer::createScene()
{
auto scene = Scene::create();
auto layer = PlayLayer::create();
scene->addChild(layer);
return scene;
}
// Hàm khởi tạo init()
bool PlayLayer::init()
{
if (!Layer::init()) {
return false;
}
//Tạo ảnh nền
Size winSize = Director::getInstance()->getWinSize();
auto background = Sprite::create("background.png");
// Điểm neo, điểm này sẽ ảnh hưởng tới việc đặt setPosition của sprite, nếu ko đặt điểm neo thì khi setPosition sẽ mặc định lấy điểm trung tâm của Sprite đặt lên màn hình
background->setAnchorPoint(Point(0, 1));
background->setPosition(Point(0, winSize.height)); // Điểm neo như trên dễ đặt Position hơn nhỉ
this->addChild(background);
// Khởi tạo bộ đệm Sprite Frame
SpriteFrameCache::getInstance()->addSpriteFramesWithFile("sushi.plist");
spriteSheet = SpriteBatchNode::create("sushi.pvr.ccz"); // Chú ý hàm này, "pvr.ccz" tập tin đã nén và hõa hóa = TexturePacker, chứa hình ảnh, bạn có thể xem chúng bằng phần mềm TexturePacker, tool PVR View
addChild(spriteSheet); // Thêm SpriteSheet vào Layer
// Kích thước ma trận,
m_width = MATRIX_WIDTH; // =6
m_height = MATRIX_HEIGHT; //=8
// Đặt vị trí ma trận, tính toán 1 chút là ra ấy mà, lấy tổng kích thước màn hình, trừ đi các khoảng cách sẽ ra 2 khoảng bên trái và phải của Ma trận
m_matrixLeftBottomX = (winSize.width - SushiSprite::getContentWidth() * m_width - (m_width - 1) * SUSHI_GAP) / 2;
m_matrixLeftBottomY = (winSize.height - SushiSprite::getContentWidth() * m_height - (m_height - 1) * SUSHI_GAP) / 2;
// Khởi tạo 1 mảng
// Kích thước bộ nhớ arraySize = sizeof (kiểu) x kích thước mảng
int arraySize = sizeof(SushiSprite *) * m_width * m_height;
// Cấp phát bộ nhớ bằng hàm malloc, ( xem lại cách sử dụng hàm này ), ép kiểu về kiểu của biến SushiSprite **, rồi cấp phát với kích thước arraySize
m_matrix = (SushiSprite **)malloc(arraySize);
memset((void*)m_matrix, 0, arraySize); // Đặt tất cả giá trị của mảng là 0, bắt buộc ép kiểu void* của mọi loại mảng
initMatrix(); // Khởi tạo ma trận Sushi
return true;
}
void PlayLayer::initMatrix()
{
// Duyệt các phần tử ma trận 2 chiều
for (int row = 0; row < m_height; row++) {
for (int col = 0; col < m_width; col++) {
createAndDropSushi(row, col); // Tạo và làm rơi Sushi xuống vị trí hàng + cột
}
}
}
void PlayLayer::createAndDropSushi(int row, int col)
{
Size size = Director::getInstance()->getWinSize();
SushiSprite *sushi = SushiSprite::create(row, col); // Gọi đến hàm tạo ra Sushi của lớp SushiSprite
// Tạo animation, or Action?
Point endPosition = positionOfItem(row, col); // Lấy tọa độ Point từ row, col truyền vào
Point startPosition = Point(endPosition.x, endPosition.y + size.height / 2); // (y) Điểm đầu = Điểm Cuối + 1 khoảng nửa màn hình
sushi->setPosition(startPosition);
float speed = startPosition.y / (2 * size.height); // tốc độ
sushi->runAction(MoveTo::create(speed, endPosition)); // Di chuyển rơi xuống
// Thêm vào Spritesheet
spriteSheet->addChild(sushi);
// Thêm sushi vào mảng, chỗ này là cách quy mảng 2 chiều về mảng 1 chiều nhé, a[i][j] = a[i*COL + j]
m_matrix[row * m_width + col] = sushi;
}
// Tọa độ Point từ vị trí row, col
Point PlayLayer::positionOfItem(int row, int col)
{
float x = m_matrixLeftBottomX + (SushiSprite::getContentWidth() + SUSHI_GAP) * col + SushiSprite::getContentWidth() / 2;
float y = m_matrixLeftBottomY + (SushiSprite::getContentWidth() + SUSHI_GAP) * row + SushiSprite::getContentWidth() / 2;
return Point(x, y);
}
Xong phần Code, hãy build và chạy thử xem thế nào?
Ngon rồi
Tổng kết lại ở bài này chúng ta học được :
+ Tạo Class mới ( Sushi ) đơn giản bằng C++
+ Ôn lại kiến thức về mảng, ma trận cấp 2, con trỏ đơn, con trỏ 2 cấp
+ Tạo ma trận Sushi
+ Tính toán 1 chút về cách đặt ma trận trên màn hình
+ Tạo Action rơi các sushi xuống ở màn chơi
* Lưu ý 1 chút:
1/ Bạn thấy rằng hình như các sushu + background có vẻ tràn ra màn hình, kích thước không được hợp lý lắm. Thì phải thôi, nguyên nhân khiến bị như thế này là
+ Trong file AppDelegate.cpp, ta chỉ setting chỉnh kích thước trên mobile thôi, chứ ko phải cho window
Các bạn thử chạy trên máy thật hoặc máy ảo xem như nào. ĐT mình mới chêt nguồn rồi. và máy ảo thì nặng quá, và thường là chạy không đúng, hay force stop.
2/ Có vẻ hàm rand() không hiệu quả ( trên win) thì phải, chạy đi chạy lại, thì loại Sushi vẫn thế. Không biết trên máy ĐT thế nào?
Mình kết thúc bài này ở đây nhé.
Download:
+ Class
+ Resource
+ Texture, mở bằng TexturePacker ( hướng dẫn )
Chào và hẹn gặp lại các bạn trong những bài sau
Bài 21: Học làm game thứ 3: Sushi Crush - Like Candy Crush or Bejewer ( Part 2 )
