Cocos2d-x - Cài đặt và thiết lập môi trường trên MAC OS

Cài đặt Cocos2d-x và các công cụ liên quan

• Cocos2d-x là một cross-platform dùng để phát triển Game đa nền tảng dành cho iOS, Mac OS, Android, Window Phone, Window Desktop.
• Chúng ta sẽ tìm hiểu các bước cài đặt và cấu hình Cocos2d-x trên máy MAC để phát triển game cho 2 nền tảng Mobile thông dụng là iOS và Android.
• Trước hết chúng ta cần download Cocos2d-x và các công cụ hỗ trợ cần thiết liên quan:

 

Cocos2d-x

• Hiện tại là phiên bản 3.2: http://www.cocos2d-x.org/download
• Sau khi download, giải nén ở thư mục làm việc
• Lưu ý là chúng ta không được phép đặt tên có ký tự trắng trong đường dẫn đến các thư mục làm việc này

Python

• Để run các script tạo dự án, build, run trong Cocos2d-x chúng ta cần cài đặt Python. Tuy nhiên, rất may là MAC đã có sẵn
• Lưu ý, Cocos2d-x 3.2 chỉ hỗ trợ với Python 2.7.x

Môi trường phát triển iOS

• Vì đã làm việc trên máy MAC nên công việc cần thiết cho việc phát triển iOS đó là cài đặt Xcode
• Hiện tại là phiên bản 6.0.1: https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12
• Bản Cocos2d-x 3.2 hỗ trợ iOS từ phiên bản 5.0

Môi trường phát triển Android

•  Tất nhiên để phát triển Android, trước hết chúng ta cần cài đặt Java
• Cài đặt ADT là bộ công cụ phát triển Android: eclipse, sdk. Download tại: http://developer.android.com/sdk/index.html
• Cài đặt NDK (Native Development Kit), lưu ý Cocos2d-x 3.2 làm việc tốt với NDK phiên bản r9d. Download tại: https://dl.google.com/android/ndk/android-ndk-r9d-darwin-x86_64.tar.bz2
• Cài đặt Ant, phiên bản hiện tại là 1.9.4. Download tại http://ant.apache.org/bindownload.cgi
• Sau khi tải và giải nén hoặc cài đặt vào vùng làm việc, chúng ta tạm có các thư mục như sau

Thiết lập Cocos2d-x

• Phần này chủ yếu là thiết lập các biến môi trường cho việc build các project trên nền tảng Andriod
• Mở cửa số Terminal và chuyển đến thư mục Cocos2d-x-3.2

cd <path>/cocos2d-x-3.2

• Sau khi đã chuyển đến thư mục cocos2d-x-3.2, thực hiện đoạn script setup bằng python

./setup.py

            mucdongs-Mac:~ mucdong$ cd /Volumes/DATA/DevTools/cocos2d-x-3.2

            mucdongs-Mac:cocos2d-x-3.2 mucdong$ ./setup.py

• Khi đó bạn sẽ được hỏi lần lượt các đường dẫn cần thiết, hãy thiết lập giá trị cho chúng

o   NDK_ROOT: <path>/android-ndk-r9d

o   ANDROID_SDK_ROOT: <path>/adt-bundle-mac-x86_64/sdk

o   ANT_ROOT: <path>/apache-ant-1.9.4/bin

• Các biến môi trường này sẽ được add vào file .bash_profile
• Sau đó chúng ta cần “refresh” để các biến môi trường này có hiệu lực

source <path>/.bash_profile

mucdongs-Mac:cocos2d-x-3.2 mucdong$ source /Users/mucdong/.bash_profile

• Nếu muốn edit hoặc xem lại bạn có thể gõ

open –e <path>/.bash_profile

• Lưu ý: tất cả các đường dẫn đến các thư mục sẽ không có ký tự trắng

Khởi tạo mới một dự án Cocos2d-x

• Để tạo dự án Cocos2d-x mới chúng ta sẽ sử dụng CommandLine để thực hiện
• Giả sử chúng ta sẽ tạo một dự án game có tên là AirHockey
• Mở Terminal và gõ vào nội dung
• cocos new AirHockey -p com.cannshine.airhockey -l cpp -d /Volumes/DATA/Projects/cocos2dx-workspace
• Trong đó

o   AirHockey: là tên của dự án, đồng thời cũng là tên thư mục chính chứa dự án

o   –p với tham số đằng sau là package name hoặc bundle id

o   –l cpp chỉ ra ngôn ngữ lập trình sẽ là C++, chúng ta có thể lựa chọn là js hoặc lua

o   –d là đường dẫn chứa thư mục dự án

mucdongs-Mac:cocos2d-x-3.2 mucdong$ cocos new AirHockey -p com.cannshine.airhockey -l cpp -d /Volumes/DATA/Projects/cocos2dx-workspace

Running command: new

> Copy template into /Volumes/DATA/Projects/cocos2dx-workspace/AirHockey

> Copying cocos2d-x files...

> Rename project name from 'HelloCpp' to 'AirHockey'

> Replace the project name from 'HelloCpp' to 'AirHockey'

> Replace the project package name from 'org.cocos2dx.hellocpp' to 'com.cannshine.airhockey'

mucdongs-Mac:cocos2d-x-3.2 mucdong$

-       Vào thư mục AirHockey để xem cấu trúc dự án vừa tạo

-       Trong đó

o   Classes: chứa tất cả mã nguồn cross-platform mà chúng ta sẽ xây dựng cho dự án

o   cocos2d: chứa thư viện của Cocos2d-x

o   proj.android: chứa các file dự án liên quan của nền tảng Android

o   proj.ios_mac: chứa các file dự án liên quan của nền tảng iOS-MAC

o   proj.linux: thư mục này gần như trống, hiện tại Cocos2d-x chưa hỗ trợ Linux

o   proj.win32: chứa các file dự án liên quan của nền tảng Window

o   proj.wp8-xaml: chứa các file dự án liên quan của nền tảng Window Phone 8

o   Resources: chứa tất cả các tài nguyên của dự án

-       Như vậy, chúng ta sẽ viết mã nguồn trong Classes, thay đổi các tài nguyên trong Resource, sau đó sẽ mở các dự án theo từng nền tảng (Eclipse cho Android, Xcode cho iOS, Visual Studio cho Win 32), sau đó build theo mỗi nền tảng đó.

Bulid và Run dự án trên nền tảng iOS và Android

Nền tảng iOS

• Vào thư mục proj.ios_mac, mở file dự án với Xcode
• Giao diện trong Xcode như sau

 

 

-       Chúng ta chọn Build và Run thử dự án trên Simulator

Nền tảng Android

-       Trên giao diện Terminal, chúng ta chuyển thư mục làm việc đến proj.android của dự án AirHockey vừa tạo

mucdongs-Mac:cocos2d-x-3.2 mucdong$ cd /Volumes/DATA/Projects/cocos2dx-workspace/AirHockey/proj.android

-       Sau đó chúng ta run script build_native để build dự án cho Android

./build_native.py

mucdongs-Mac:proj.android mucdong$ ./build_native.py

-       Và tiếp theo là ngồi đợi, nhâm nhi tách café :)

 

 

• Đến đây là kết thúc quá trình Build dự án. Thỉnh thoảng (như mình thì đã mất nguyên 1 ngày) quá trình build này bị lỗi, chỉ mới chạy được chưa đến 10 giây là Leaving directory với các lỗi là no file input, blad blad, với lỗi này sau khi research tan nát Google, mình quyết định là tải lại NDK (vẫn bản r9d) và cả ADT (có thể hơi bị cũ), vâng kết quả ngoài mong đợi, đã có thể uống được ly café :)
• Tiếp đến, chúng ta sẽ Import dự án này vào Eclipse để test việc build và run trên Android

 

•  Lưu ý ta sẽ trỏ đến thư mục AirHockey, chứ không trỏ đến thư mục proj.android
• Sau đó sẽ hiện ta 1 list các project có thể import, ở giai đoạn đầu tìm hiểu, chúng ta bỏ chọn hết tất cả, sau đó chọn 2 mục: libcocos2dx và AirHockey của chúng ta

 

-       Giao diện sau khi Import vào Eclipse

              
      Có một điều là không hiểu sao Eclipse không nhận ra được đường dẫn NDK_ROOT

 

-       Do vậy chúng ta cần thiết lập lại biến này cho Eclipse để có thể build cho dự án.

o   Chọn dự án, Propertise

o   Ở mục C/C++ Build, chọn Enviroment

-       Build ứng dụng và chuẩn bị Run

-       Trước hết chúng ta cần tạo một AVD để có thể run dự án trên giả lập thiết bị Android. Từ công cụ AVD Manager, chúng ta tạo mới một AVD, thiết lập các thông số.

-       Lưu ý Cocos2d-x 3.2 cần hỗ trợ OpenGL 2.0 do đó bạn cần check Use Host GPU

-       Sau đó chọn Project và chọn Run As \ Android Application và đợi….

-       Sau khi Emulator chạy và có thể chúng ta sẽ nhận được một thông báo rất thảm hại sau

-       Trong trường hợp này khả năng rất lớn nằm ở vấn đề hỗ trợ OpenGL của Emulator, bạn phải đảm bảo chắc chắn là đã check Use Host GPU

-       Sau đó có thể thêm một thao tác để đảm bảo hơn nữa, trong phần Run Configurations… thêm tham số -gpu on trong mục Addtinational Emulator Command Line Options

-       Tắt Emulator đang chạy và thực hiện Run lại dự án

-       Kết quả mong đợi

 Hy vọng qua bài viết này sẽ giúp các bạn giảm thiểu được phần nào thời gian mày mò cài tới cài lui, xóa đi, tải lại mà mình đã trải qua :)