Step1: Hướng dẫn cài đặt Cocos2d-x trên Windows

P/s: Tài liệu này được mình viết bằng Japanese Version cách đây 6 tháng nên có 1 số hình ảnh có lẽ là chưa giống với hiện tại nhưng mà mình cũng ngại chụp ảnh lại nên các bạn cứ làm theo hướng dẫn nhé, hình ảnh chỉ mang tính minh họa thôi (cảm giác hơi giống lều báo )

1. Các bước thiết lập môi trường Cocos2dx

1.1. Lời tựa

Trong step này mình sẽ hướng dãn các bạn cách cài đặt game engine Cocos2d-x trên môi trường Windows. Hiện tại OS(Operating System)mình đang sử dụng là Windows 7 – 64bit, tuy nhiên thì Windows 8.1-64 bit cũng không có khác biệt trong quá trình cài đặt. Vì vậy mà bài hướng dẫn này các bạn có thể sử dụng cho cả hai.

1.2 Những thành phần cần thiết

1.21. Cocos2d-x

Link dows: http://www.cocos2d-x.org/download
Phiên bản mới nhất hiện nay(tính đến thời điểm ngày 18/08/2015) là V3.7.

Chú ý là tại trang chủ của Cocos2d-x thì có 2 loại Cocos2d-x và Cocos2d-JS, thì ở đây chúng mình sử dụng Cocos2d-x nên hãy download đúng loại nhé. (Phần mình khoanh đỏ trong hình )

alt text

1.2.2. Eclipse IDE

Nói qua 1 chút về cái này nhỉ 😀 Thực ra là do mình rất rất là lười sử dụng command prompt để build project ra file apk (file chạy ứng dụng của android ) nên mình dùng Eclipse để nó giúp mình làm cái việc đó. Ngoài ra thì khi phải xây dựng file JNI (Java Native Interface) thì mình dùng Eclipse để được nó hỗ trợ auto complete code. Đó là mục đích mình sử dụng Eclipse. Dùng Eclipse chỉ là thói quen cá nhân, hiện nay có nhiều bạn sử dụng Android Studio. Do mình ko làm việc với cái này nên mình cũng sẽ ko hướng dẫn được, nhưng mà mình sẽ cung cấp bài viết chi tiết với việc sử dụng Android Studio.

Lan man đủ rồi nhỉ, giờ mình quay lại với công việc chính nào.

Link down: http://www.eclipse.org/downloads/

Cái Eclipse này thì nó có quá là nhiều phiên bản khác nhau, mà đôi khi mình cũng chẳng hiểu sao mà sinh ra lắm thế. Vậy nên nếu ai thích dùng gì thì down phiên bản đó về mà dùng nhé. Cá nhân mình thì lúc bắt đầu làm quen với Cocos2d-x thì mình sử dụng 「Eclipse IDE for C/C++ Developers」 do Cocos2d-x được mình sử dụng C++ để viết mã nguồn nên mình nghĩ nó sẽ hỗ trợ tốt hơn 😀

1.2.3. Eclipse ADT Plugin (Android Development Tools)

Sau khi download và cài đặt xong Eclipse IDE thì bạn hãy bật nó lên. Sau đó bạn hãy làm theo những hướng dẫn sau đây của mình nhé: Chọn :

Help → Install New SoftWare

Bạn sẽ thấy 1 cửa sổ Popup hiện ra, tại khung Work with, bạn hãy điền vào đường dẫn sau:

Click vào khung chọn tất cả như trong hình nhé 😀

alt text

Bây giờ thì chỉ cần đợi down về thôi.

1.2.4. SDK (Software Development Kit)

Link : http://developer.android.com/sdk/installing/index.html

Download theo đường dẫn phía trên mình cung cấp. Sau đó bạn hãy vào Eclipse và thiết lập đường dẫn tới folder SDK mà bạn vừa down(đã giải nén). Và chú ý là tất cả các file cài đặt hoặc folder chứa file cài đặt nên được đặt chung tại 1 chỗ để dễ dàng cho việc thiết lập các biến môi trường sau này.
Trong Eclipse thì bạn sẽ lựa chọn theo hướng dẫn sau đây của mình:

Eclipse->Windows->Preferences->Androids->SDK Location

Tại đây thì hãy lựa chọn đường dẫn tới thư mục SDK mà bạn vừa down về.

alt text

1.2.5. NDK(Android Native Development Kit)

Phiên bản mới nhất hiện nay là Android NDK, Revision 10d
Link down: https://developer.android.com/ndk/downloads/index.html

1.2.6. JDK

Phiên bản mới nhất hiện nay là 8u51(tính đến thời điểm ngày 18/08/2015), tuy nhiên mình dùng JDK7u71 vẫn không có vấn đề gì cả. Bạn hãy lựa chọn phiên bản mới nhất mà dùng nhé , nhớ chú ý OS của mình là x86 hay x64 nhé 😀

Link : http://www.oracle.com/technetwork/java/javase/downloads/index.html

1.2.7. Python

Phiên bản mới nhất của Python là 3.x rồi nhưng mà hãy sử dụng phiên bản 2.x nhé. Mình khuyến khích bạn sử dụng Python V2.7.9

Link : https://www.python.org/downloads/

1.2.8. Apache ANT

Phiên bản mới nhất hiện nay là 1.9.6 (tính đến ngày 18/08/2015)

Link : http://ant.apache.org/bindownload.cgi 

P/s: Ảnh này mình dùng lúc ấy còn là bản 1.9.4 nên hơi cũ rồi 😀

alt text

1.2.9. Visual Studio IDE

Link down :http://www.visualstudio.com/downloads/download-visual-studio-vs

Như các bạn đã biết thì các sản phẩm của Microsoft thì đa phần đều phải trả phí, có 1 cái mình hơi ức chế đó là do mình dùng máy công ty nên không dám cài bản crack vào nên đành sử dụng Visual Studio Express. Có 2 phiên bản mình từng sử dụng là 2012 và 2013. Tuy nhiên mình khuyến khích các bạn nên dùng bản 2013 vì 2012 sẽ gây ra lỗi lúc build tiếng Nhật trên Win32 🙁 Lúc sử dụng bản free giành cho Developer thì nó sẽ bắt bạn đăng ký tài khoản của Microsoft nhưng không vấn đề gì đâu, cứ đăng ký nhìn cho nó lịch sự 😀

1.3. Thiết lập biến môi trường

Tiếp theo mình đến phần có lẽ sẽ là khó khăn nhất cho việc cài đặt Game Enginee này, đó là thiết lập biến môi trường làm việc với Cocos2d-x trên Windows.

Thì để thuận tiện cho việc thiết lập biến môi trường, mình khuyến khích các bạn nên đặt tất cả các file/folder cài đặt vào chung 1 thư mục. Ở đây mình đặt là “cocos2dx_setup “. Bạn có thể xem hình để thấy rõ hơn.

alt text

Ngoài ra thì mình có 1 mẹo nhỏ khác muốn khuyên những ai mới bắt đầu với Cocos2d-x đó là thư mục chứa source thư viện thì nên đặt 1 tên đơn giản( như mình thì mình đặt là Cocos2dx3 như trong ảnh ) chứ đừng down về giải nén và vứt nguyên cái tên có cả version vào nhé. Sau này update các version mới hơn sẽ mất công đổi lại biến môi trường. Mà để đơn giản thì các bạn cứ đặt như mình nhé 😀

  • Cocos2dx, ANT,SDK,NDK là những folder chỉ cần giải nén
  • JDK, Python thì cần cài đặt ,tuy nhiên chỉ cần click và next liên tục thôi 😀

alt text

OK ! Bây giờ mình bắt tay vào cài đặt thôi chứ nhỉ 😀 Đầu tiên làm thế nào để thiết lập biến môi trường cho nó nhỉ ? Bạn Click chuột phải vào Computer làm theo thứ tự sau đây nhé.

Computer → Properties → Advanced System Setting → Environment Variables

Bây giờ thì bạn chọn New và thêm tên cũng như đường dẫn sao cho phù hợp với máy tính của mình nhé . Ở đây mình sử dụng đường dẫn ở máy mình được đặt tại ổ C và nằm trong folder cocos2dx_setup .

Phần User

ANDROID_SDK_ROOT = C:\cocos2dx_setup\SDK
ANT_HOME = C:\cocos2dx_setup\ANT
ANT_ROOT = C:\cocos2dx_setup\ANT\bin
COCOS_CONSOLE_ROOT =C:\cocos2dx_setup\Cocos2dx3\tools\cocos2d-console\bin
Path = C:\cocos2dx_setup\Cocos2dx3\tools\cocos2d-console\bin

Phần System

ANT_HOME = C:\cocos2dx_setup\ANT
ANT_ROOT = C:\cocos2dx_setup\ANT\bin
NDK_ROOT = C:\cocos2dx_setup\NDK
JAVA_HOME = C:\Program Files\Java\jdk1.7.0_71(注意:これはjdkフォルーダのパス)
Path=C:\Python27;C:\Python27:\python.exe;C:\cocos2dx_setup\SDK\sdk\platform-tools;%path%;%ANT_HOME%\bin;%JAVA_HOME%\bin;

Hình ảnh minh họa

alt text

Sau khi đã thiết lập xong biến môi trường thì các bạn hãy test xem mình làm như thế đã ngon chưa, thì các bạn vào command prompt và gõ các lệnh sau đây. Nếu có 1 loạt thông số kết quả trả về là bạn thành công rồi đấy.

java
ant —v
adb
python

Tiếp theo mình sẽ chạy file setup của cocos2d-x bằng cách dùng command prompt để dẫn tới thư mục chứa mã nguồn Cocos2d-x. Tại đây chạy file setup.py (file python)

C>cd cocos2dx\cocos2dx_setup\cocos2dx3
C\cocos2dx\cocos2dx_setup\cocos2dx3>setup.py

Và kết quả thu được

alt text

2. Chương trình đầu tiên: HelloWorld

2.1. Tạo project

Sử dụng command prompt và tạo project mới bằng cách:

cocos new projectName -p jp.boi.projectName -l cpp –d C:\cocos2dx_souce

Mình giải thích một chút về ý nghĩa của lệnh trên

「projectName」 : Đây là tên project của các bạn
「p」: Định nghĩa Package Android
「com.vn.projectName」 là Android Package, tên do bạn tự định nghĩa
「-l」 : Định nghĩa ngôn ngữ bạn sử dụng để viết mã. Ở đây mình dùng cpp (là C++)
「-d」 : Định nghĩa Path Directory, hay chính là định nghĩa đường dẫn tới Project
「C: \cocos2dx_souce」 : Đường dẫn tới folder sẽ chứa project của bạn

Và bây giờ đợi project sinh ra, cấu trúc project sẽ như thế này

alt text

2.2. Run Project

2.2.1. Build và Run với Visual Studio

Bạn khởi động Visual Studio vừa cài đặt. Chọn mở project theo các bước sau:

Visual Studio -> File -> Open -> Project

Tại thư mục project vừa tạo, hãy chọn proj.win32. Sau đó bạn chọn file có dạng projectName.vs để import project. Đây là nơi bạn sẽ làm việc nếu sử dụng windows. Ngoài ra thì còn có các folder tương ứng cho Android , Mac hay Windows Phone.( Tuy nhiên mình chưa dùng nên mình cũng ko biết giải thích gì về nó)

alt text

Sau khi đã import project vào Visual Studio thì bạn chỉ việc Build và Run nó bằng các button trên thanh công cụ của Visual Studio. Ngoài ra bạn có thể dùng F7 để build và F5 để Run 😀

Lần đầu lúc nào cũng là khó khăn nên mất nhiều thời gian để load thư viện. Mất tầm 5 phút. Nhưng sau này thì mọi thứ sẽ ra vào 1 cách trơn tru hơn.

alt text

2.2.2. Rum bằng Command Prompt

Vào command prompt và thực hiện lệnh sau

cocos run –s C:\ocos2dx_souce\projectName –p win32

2.2.3. Kết quả

Đây là chương trình đầu tiên: HelloWorld

alt text

3. Lời kết

Do phải dịch lại từ bản tiếng Nhật mình viết nên thứ tự mình cũng ngại thay đổi. Có gì sai sót mong các bạn thông cảm và góp ý kiến. Và mình cũng sẽ cố gắng dịch hết 18 Step mình viết để những ai muốn làm quen với Cocos2d-x có thể dễ dàng tiếp cận hơn.