- 2015 NGHIÊN CỨU ENGINE COCOS2D-X VÀ ỦNG DỤNG LÀM GAME DI BẮT Niên khóa : 2011 VIỆN DẠI HỌC MỚ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN TẠ VÀN DẬU NGHIÊN CỨU ENGINE GAME COCOS2D-X LẬP TRÌNH GAME MOBILE ĐA NÈN TẢNG ÚNG DỤNG XÂY DỤNG GAME ĐUÓI BẮT Chuyên ngành: Công nghệ thông tin ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Hà Nội-Năm 2014 VIỆN ĐẠI HỌC MỜ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN TẠ VĂN DẬU NGHIÊN CỨU ENGINE GAME COCOS2D-X LẬP TRÌNH GAME MOBILE ĐA NÈN TẢNG ÚNG DỤNG XÂY DựNG GAME ĐUÓI BÁT Chuyên ngành: Công nghệ thông tin Cán hướng dần: Ths Mai Thị Thúy Hà ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Hà Nội - Năm 2014 VIỆN ĐẠI HỌC MỚ HÀ NỘI CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tụ - Hạnh phúc KHOA CÔNG NGHỆ THÔNG TIN NHIỆM VỤ CỦA ĐÒ ÁN TỐT NGHIỆP Họ tên : Tạ Văn Dậu Giới tính : Nam Ngày, tháng, năm sinh : 02/02/1993 Nơi sinh : Vĩnh Phúc Chuyên ngành : Công nghệ thông tin Mã số : TÊN ĐÈ TÀI Nghiên cứu engine game cocos2d-x để lập trình game mobile đa tảng, ứng dụng vào làm game Đuổi bắt NHIỆM VỤ VÀ NỘI DƯNG Nhiệm vụ cụ thể cùa đồ án tốt nghiệp: - Tìm hiểu nghiên cứu engine game cocos2d-x - Phân tích xác định yêu cầu game mobile - Xây dựng game Đuối bắt - Triển khai đa tảng NGÀY GIAO NHIỆM VỤ: NGÀY HOÀN THÀNH NHIỆM VỤ: CÁN Bộ HƯỚNG DẲN: Ths Mai Thị Thúy Hà / / / / Nội dung đề cương Đồ án Hội đồng chuyên ngành thông qua Hà Nội, ngày CÁN Bộ HƯỚNG DẲN Mai Thị Thúy Hà thảng năm 2014 KHOA CÔNG NGHỆ THƠNG TIN LỜI NĨI ĐẦU Hiện thiết bị di động ngày phong phú chùng loại phần cứng chạy nhiều táng hệ điều hành khác Các hệ điều hành phổ biến có thề ÍOS (Apple), Android (Google), Window Phone (Microsoft), Vi nhu cầu ve phần mem nói chung game mobile nói riêng ngày lớn Hiện thơng thường lập trình viên chi phát triến game táng sau phát triền cho tảng khác, công việc tốn nhiều thời gian công sức cho nhà phát triển việc bảo tri, nâng cấp phần mem, game Vì việc lập trình game đa táng hướng mới, phải vận dụng kiến thức nhiều hệ điều hành, nhiều tảng Hiện có nhiều engine-game đời phục vụ cho việc lập trình game đa tảng như: Unity, Appcelcrator Titanium, Game Salad, Sprite Kit, Cocos2D, Cocos2d-X Vi em lựa chọn nghiên cứu loại engine-game đồ án tốt nghiệp đại học cùa Và đề tài tốt nghiệp em là: “Nghiên cứu engine game Cocos2d-X đê lập trinh game mobile đa tảng, ứng dụng làm làm game Đuổi bắt “ Em xin gửi lời cám ơn đến Thầy, Cô khoa Công nghệ Thông tin trường Viện Đại học Mớ Hà Nội tận tình dạy dồ, dìu dắt em suốt bốn năm đại học, thầy cho em kiến thức kinh nghiệm cần thiết đế có the thực đề tài Em xin gửi lời cám ơn chân thành tới Ths Mai Thị Thúy Hà, người hướng dẫn, giúp đỡ, động viên em hoàn thành đồ án Do thời gian có hạn, kiến thức kinh nghiệm bân thân hạn che, đồ án cịn nhiều thiết sót, em mong nhận ý kiến đóng góp q báu từ thầy bạn đồng nghiệp đe đồ án hoàn thiện Em xin chân thành cảm ơn ! MỤC LỤC Trang Chương TỐNG QUAN VÈ ĐÈ TÀI 1.1 Đặt vấn đề 1.2 Mục tiêu phạm vi đề tài 1.3 Đối tượng phương pháp nghiên cứu Chương CÔNG NGHỆ SỬ DỤNG PHỤC vụ ĐÈ TÀI 2.1 Ngơn ngừ lập trình C++ 2.1.1 Khái niệm lập trình hướng đối tượng 2.1.2 Phương pháp lập trình hướng đối tượng C++ 2.2 Tìm hicu engine game cocos2d-x 2.2.1 Khái niệm game engine 2.2.2 Game engine Cocos2d-X 2.3 Công cụ TileMap ứng dụng Cocos2d-X 27 2.3.1 TileMap 27 2.3.2 TilcMap lập trình Cocos2d-X 29 Chương 32 PHÂN TÍCH VÀ THIÉT KÉ HỆ THÓNG 32 3.1 Xây dựng ý tưởng 32 3.2 Kịch game 33 3.3 Phân tích hệ thống game 35 3.3.1 Qui trình xử lý 35 3.3.2 Mô hình tiến trình nghiệp vụ 36 3.3.3 3.4 Sơ đồ Activity Diagram .37 Thiết kế đồ họa 38 3.4.1 Thiết kế Map 38 3.4.2 Thiết kế nhân vật 42 Chương 47 TRIÉN KHAI ĐA NỀN TẢNG 47 4.1 Xây dựng trò chơi Win32 47 4.2 Xây dựng trò chơi Android 50 4.3 Xây dựng trị chơi ÍOS 55 KÉT LUẬN 59 TÀI LIỆU THAM KHẢO 60 TĨM TẲT ĐỊ ÁN - Họ tên: Tạ Văn Dậu - Chuyên ngành: Công nghệ thông tin - Cán hướng dẫn: Ths Mai Thị Thúy Hà - Tên đề tài: Nghiên cứu engine game cocos2d-x lập trình game mobile Khóa: 2011 - 2015 đa táng, ửng dụng vào làm game “Đuổi bắt” - Tóm tắt đề tài: Nghiên cứu engine game cocos2d-x phiên bán 2.2.3 với ngơn ngữ lập trình C++ Tìm hiểu ứng dụng công cụ tạo bán game - Tilemap lập trình game với cocos2d-x Xây dựng game đuồi bắt dựa đối tượng nghiên cứu engine game cocos2d-x Triển khai game tảng hệ điều hanh di động Android, iOS Window Phone DANH MỤC TÙ VIÉT TẢT STT Tên viết tắt Tên đầy đủ ADT Android Development Tools Dịch đầy đù tiếng Việt Bộ công cụ phát triến Andoroid Bộ công cụ phát triến NDK Native Development Kit SDK Software Development Kit OOP Object Oriented Programming PC Personal Computer RAM Random Memory Access Bộ công cụ phát triến phần mềm Lập trình hướng đối tượng Máy tính cá nhân Bộ nhớ truy cập ngẫu nhiên DANH MỤC HÌNH VẼ Hình 2.1 Cấu trúc chương trình cocos2d-x Hình 2.2 Code hàm applicationDidFinishLaunching Hình 2.3 Sơ đồ lớp CCNode 12 Hình 2.4 Hệ thống tọa độ cocos2d-x 13 Hình 2.5 Ví dụ thiết lập AnchorPoint cocos2d-x 14 Hình 2.6 Một Scene game đơn giàn 15 Hình 2.7 Sơ đồ cấu trúc Scene 16 Hình 2.8 Thuộc tính Zorder sprite 20 Hình 2.9 Thực animation cho sprite 20 Hình 2.10 Thực animation cho sprite 21 Hình 2.11 File png cúa font fnt 26 Hình 2.12 CCLabelBMFont(tren) CCLabelTTF(dưới) 27 Hình 2.13 Các thuộc tính Object TilcMap 28 Hình 2.14 Các đối tượng cần ý tilemap Editor 29 Hình 2.13 Các đối tượng ObjectGroup “object” 30 Hình 3.1 Quy trình xừ lý game 35 Hình 3.2 Mơ hình tiến trình nghiệp vụ 36 Hình 3.3 Sơ đồ Activity Diagram 37 Hình 3.4 Tạo tilemap 38 Hình 3.5 Add backgroudLayer 38 Hình 3.6 Tạo tileset 39 Hình 3.7 Thêm tileset 39 Hỉnh 3.8 Các tileset 40 Hình 3.9 Thêm tileset vào map 40 Hình 3.10 Tạo Object tilemap 41 Hình 3.11 Tạo layer xác định va chạm 41 Hình 3.12 Lưu map 42 Hình 3.13 Thiết kế trạng thái cúa chaien 42 Hình 3.14 Thiết kế trạng thái cúa nobita 43 Hình 3.15 Thiết kế vật cản 43 Hình 3.16 Giao diện Menu 44 Hình 3.17 Giao diện chơi 44 Hình 3.18 Giao diện chơi 45 Hình 3.19 Giao diện chơi 45 Hình 3.20 Màn hình kết game 46 Hình 3.21 Màn hình kết game 46 Hình 4.1 Thư mục cocos2d-x 47 Hình 4.2 Cấu trúc solution Cocos2d-X 48 Hình 4.3 Build solution Cocos2d-X 48 Hình 4.4 Debug 49 Hình 4.5 Khi build project thành công 49 Hình 4.6 Thêm biến mơi trường NDK 51 Hình 4.7 Thêm biến mơi trường Cygwin 51 Hình 4.8 Import project DuoiBat thư viện libcocos2dx vào eclipse 52 Hình 4.9 Import project hcllococos thành cơng vào eclipse 52 Hình 4.10 Android.mk 53 Hình 4.11 Build project thành công eclipse 53 Hình 4.12 Build file apk thành cơng 54 Hình 4.13 Mở project iOS 55 Hình 4.14 Cấu trúc thư mục project cocos2d-x - ÍOS 56 Hình 4.15 Thêm Resource 57 Hình 4.16 Chọn iPhone Simulator 57 Hình 4.17 Build thành cơng .58 46 Hình 3.20 Màn hình kết quà game Hình 3.21 Màn hình kết game 47 Chương TRIẾN KHAI ĐA NỀN TẢNG 4.1 Xây dựng trò choi Win32 Việc ta cần cài đặt IDE đe thuận lợi cho việc lập trình chạy thử ứng dụng, windows lựa chọn tốt visual studio, chọn Visual Studio 2010 Download cocos2d-x 2.2.3 trang web: http://www.cocos2d- x.org/download Sau download cocos2d-x 2.2.3 giải nén thư mục sau (Hình 4.1): extensions Date modified 1Q-Jul-14 9:33 PM Type File folder external 10-Jul-14 8:34 PM File folder 10-Oct-14 9:14 AM File folder 10-Jul-14 8:33 PM File folder plugin 12-Oct-14 1:22 PM File folder projects 18-Oct-14 11:34 AM File folder samples 10-Jul-14 8:33 PM File folder scripting 10-Jul-14 8:33 PM File folder template 10-Jul-14 8:33 PM File folder 10-Jul-14 8:33 PM File folder Q AUTHORS 10-Jul-14 8:06 PM NextCouup 18 KB build-nacl.sh 10-Jul-14 8:06 PM SH File 1^1 build-win32.bat 10-Jul-14 8:06 PM Windows Batch File □ CHANGELOG 10-Jul-14 8:25 PM NextCouup cocos2d-win32.vc2010.sdf 10-Oct-14 9:36 AM SQL Server Comp 82,196 KB 1 KB KB 77 KB cocos2d-win32.vc2010.sln 10-Jul-14 8:06 PM Microsoft Visual s 13 KB I 'I cocos2d-win32.vc2012.sln 10-Jul-14 8:06 PM Microsoft Visual s 13 KB I cocos2d-winrt.vc2012.sln 10-Jul-14 8:06 PM Microsoft Visual s 29 KB 73 cocos2d-winrt.vc2013.sln 10-Jul-14 8:06 PM Microsoft Visual s 12 KB S3 cocos2d-wp8.vc2012.sln 10-Jul-14 8:10 PM Microsoft Visual s 38 KB ** download-deps.py 10-Jul-14 8:06 PM Python File 11 KB I Emscripten.TODO 10-Jul-14 8:06 PM TODO File KB r ] install-deps-linux.sh 10-Jul-14 8:06 PM SH File KB I , make-all-linux-project.sh KB 10-Jul-14 8:06 PM SH File r , Makefile 10-Jul-14 8:06 PM NextCouup KB I Makefile.emscripten 10-Jul-14 8:06 PM EMSCRIPTEN File KB , README.mdown 10-Jul-14 8:06 PM MDOWN File KB Hinh 4.1 Thư mục cocos2d-x 48 Sau ta mở tập tin solution visual cocos2d-win32.vc2010.sln Neu visual studio 2012 2013 ta chi cần mớ file solution tương ứng đế chạy Sau mở visual studio ta thấy cấu trúc solution sau (Hình 4.2): Solution 'cocos2d-win32.vc2010’ (17 projects) > 71 AssetsManagerTest 71 CocosDragonJS 73 CrystalCraze HelloCpp t> HelloLua libBox2D 71 libchipmunk > 71 Iibcocos2d > 73 libCocosDenshion t> libExtensions libJSBinding t> I’blua > 73 MoonWarriors TestCpp [> TestJavascript l> TestLua WatermelonWithMe Hình 4.2 Cấu trúc solution Cocos2d-X Giờ ta kích chuột phải vào solution chọn build solution để visual studio biên dịch toàn thư viện cùa cocos2d-x project test: Solution 'cocos2d-win32.vc201( Build Solution Ctrl* Shift* B Rebuild Solution Batch Build Configuration Manager Calculate Code Metrics Project Dependencies HbCocosDenshion UbExtensions Project Build Order Add Set Startup Projects 73 TestCpp Add Solution to Source Control Rename 71 WatermelonWithMe LS Open Folder In Windows Explorer Properties Hình 4.3 Build solution Cocos2d-X g 49 Sau visual studio biên dịch xong toàn solution cocos2d-x ta chạy thứ project HeloCpp: Hình 4.4 Debug Sau build thành cơng (Hình 4.5): Hình 4.5 Khi build project thành công Đến ta chi chạy project có sần solution cocos2d-x Cocos2d-X có hỗ trợ script python giúp tạo project cocos2d-x 50 Đe chạy đoạn mã Python ta phái cài cài đặt Python (Nên dùng Python 2.7.6) Python download cài đặt tại: https://www.python.org/download/ 4.2 Xây dựng trò chơi Android Để build file apk chạy thiết bị Android cần tải nhũng công cụ sau: ADT kèm Eclipse: http://developer.android.com/tools/sdk/eclipse- adt.html N D K10: https://dcvclopcr.android.com/tools/sdk/ndk/indcx.litml JDK: http://www.oracle.com/technetwork/java/javase/downloads/ Cygwin: https://www.cygwin.com/ Sau tải ta cài đặt jdk giái nén ADT NDK Nên giải nén ADT NDK foder với cocos2d-x cho dễ quản lý Cygwin trình giả lập mơi trường Linux hệ điều hành Window Khi cài đặt Cygwin ta chì quan tâm đến gói GNU make Gói có tác dụng biên dịch mã C++ Tiếp theo cần thiết lập biến môi trường theo trinh tự sau: My Computer/ Properties/ Advance System Setting/ Environment Variables ta hình cho phép thiết lập biến mơi trường: 51 Hình 4.6 Thêm biến mơi trường NDK Environment Variables Hình 4.7 Thêm biến mơi trường Cygwin Tiếp theo ta mở Eclipse thư mục ADT import package cần thiết gồm project mà ta muốn build thư viện cocos2d-x đường dẫn: {RootFolder}\cocos2d-x-2.2.3\cocos2dx\platform\android\java 52 vào Eclipse tẵ Package Explorer % ' 1=1 □ t> DuoiBat: i> tậ FacebookSDK t> vậ FriendFacebook > Iibcocos2dx t> ýậ libFacebook > l> libPluginProtocol MyChart Hình 4.8 Import project DuoiBat thư viện Iibcocos2dx vào eclipse Neu thiết lập biến mơi trường thành cơng ta import nhận đường dẫn NDK compile file C++ thành file java ^Problems ©Javadoc Eè> Declaration Seartr @ Console s -egress 3D LogCat CDT Bu ild jCo n so I e [ Duoi B at] 12:16:06 *♦•* Build of configuration Default for project DuoiBat **** bash E:/cocos2d-x/cocos2d-x-2.2.3/projects/DuoiBat/proj.android/build_native.sh cygwin warning: MS-DOS style path detected: E:\cocos2d-x\cocos2d-x-2.2.3\projects\DuoiBat\proj.android Preferred POSIX equivalent is: /cygdrive/e/cocos2d-x/cocos2d-x-2.2.3/projects/DuoiBat/pro -j a CYGWIN environment variable option "nodosfilewarning" turns off this warning Consult the user’s guide for more details about POSIX paths: http://cygwin.com/cygwin-ug-net/using html#using-pathnames 'JDK-ROOT = F:\Cocos2d\android-ndk-rl0b :OCOS2DX_ROOT ■ /cygdrỉve/e/cocos2d-x/cocos2d-x-2 2.3/projects/DuoiBat/proj.android/ / / \PP_ROOT = /cygdrive/e/cocos2d-x/cocos2d-x-2 2.3/projects/DuoiBat/proj.android/ \PP_ANDROID_ROOT ■ /cygdrive/e/cocos2d-x/cocos2d-x-2 2.3/projects/DuoiBat/proj.android Jsing prebuiit externals make: Entering directory ’/cygdrive/e/cocos2d-x/cocos2d-x-2 2.3/projects/DuoiBat/proj.android' Android NDK: WARNING:/cygdrive/e/cocos2d-x/cocos2d-x-2.2.3/projects/DuoiBat/proj.android/ / [armeabi] Cygwin : Generating dependency file converter script [armeabi] Compile++ thumb: cocos2dcpp_shared