Đồ án game traffic warden

BỘ LAO ĐỘNG THƯƠNG BINH VÀ XÃ HỘI
TRƯỜNG CAO ĐẲNG NGHỀ ISPACE
-----o0o----KHOA: CÔNG NGHỆ THÔNG TIN
NGÀNH: LẬP TRÌNH MOBILE

ĐỒ ÁN TỐT NGHIỆP

GAME

TRAFFIC WARDEN

HỒ CHÍ MINH, năm 2015


BỘ LAO ĐỘNG THƯƠNG BINH VÀ XÃ HỘI
TRƯỜNG CAO ĐẲNG NGHỀ ISPACE
-----o0o----KHOA: CÔNG NGHỆ THÔNG TIN
NGÀNH: LẬP TRÌNH MOBILE

ĐỒ ÁN TỐT NGHIỆP

GAME

TRAFFIC WARDEN
GVHD : LÊ HỒNG KỲ
SVTH :
1. LÊ VĂN DŨNG
2. VÕ THỊ THÚY HUỲNH
3. TRẦN VĂN NAM

97510010002

97510010022
97510010016

HỒ CHÍ MINH, năm 2015


LỜI CẢM ƠN
Đầu tiên, em xin được gửi lời cảm ơn đến tất cả quý thầy cô đã tham gia
giảng dạy tại Trường Cao đẳng nghề CNTT iSpace vì đã truyền đạt những kiến thức
hữu ích làm cơ sở cho em thực hiện đồ án này.
Em cũng xin chân thành cảm ơn đến thầy Lê Hồng Kỳ, người đã tận tình
hướng dẫn, tạo mọi điều kiện thuận lợi để chúng em hoàn thành tốt đồ án.
Sau cùng em xin gửi lời biết ơn sâu sắc đến gia đình vì đã luôn tạo điều kiện
cho chúng em trong suốt quá trình học tập cũng như thực hiện đồ án.
Hồ Chí Minh, tháng 06 năm 2015
Trân trọng


TÓM TẮT ĐỒ ÁN

Traffic Warden là một game với giao diện và cách chơi khá đơn giản, từ trẻ
em đến người trung niên, người lớn tuổi đều thích hợp. Traffic Warden mang lại
cho người chơi những kiến thức bổ ích và rất cần thiết liên quan đến luật giao
thông. Biết đâu qua trò chơi mà người chơi sẽ không còn bị cảnh sát giao thông bắt
phạt nữa.
Đồ án này gồm 05 chương:
Chương 1: Tổng quan về tình hình game và Lập trình Game trên thiết bị di
động, giới thiệu về Game Traffic Warden.
Chương 2: Lập trình game với thư viện LibGDX
Chương 3: Thiết kế và xây dựng Game Traffic Warden

Chương 4: Phát triển Game Đa nền tảng
Chương 5: Tối ưu Game cho nền tảng di động
.


MỤC LỤC

5


DANH MỤC HÌNH

6


DANH MỤC BẢNG

7


MỞ ĐẦU
Kể từ khi máy tính xuất hiện, game đã trở thành một trong những ứng dụng
phổ biến nhất trên thị trường. Cùng với sự đa dạng và phong phú về thể loại game
có thể lựa chọn, chúng ta cần tập trung vào những yếu tố phù hợp nhất với nền tảng
di động (điện thoại di động, máy tính bảng,.. ), đặc biệt quan tâm đến những game
có thể phát triển bằng một nhóm ít người. Với tiềm năng to lớn của thị trường di
động, không ngạc nhiên khi có rất nhiều nghiên cứu và ý tưởng được đưa ra nhằm
mục đích tạo nên một game di động hấp dẫn nhiều người chơi. Cùng với việc
tiếp tục áp dụng những nguyên tắc thông thường khi thiết kế game trên máy tính, ta
cần quan tâm đến một số đặc điểm của game được thiết kế trên các thiết bị di động:

+ Không lãng phí thời gian của người chơi.
+ Cung cấp sự trợ giúp cần thiết cho người chơi.
+ Làm cho mục tiêu của trò chơi dễ hiểu hơn.
+ Hiển thị các trạng thái trong game một cách rõ ràng.
+ Người dùng di động thường chỉ chơi game trong một thời gian ngắn.
+ Người chơi có thể dễ dàng tạm dừng hay tiếp tục game khi cần thiết.
+ Người chơi có thể đạt được tiến bộ trong một thời gian ngắn.
+ Những hạn chế của thiết bị di động ảnh hưởng đến việc xây dựng game:
• Kích thước màn hình nhỏ, và đa dạng về kích thước màn hình, độ
phân giải.
• Có rất nhiều cách thức nhập dữ liệu từ người dùng: bàn phím, cảm
ứng, cảm biến gia tốc, cảm biến độ nghiên,…
• Hạn chế về sức mạnh tính toán và sức mạnh đồ họa.
• Hạn chế về pin.
Nhằm đáp ứng những đặc điểm trên, nhóm em đã xây dựng gameTraffic
Warden là một game quản lý thời gian (Time Management) đơn giản, không buộc
người chơi phải mất quá nhiều công sức tìm hiểu cách chơi. Không chỉ thế, người
chơi còn có thể góp thêm cho mình những kiến thức căn bản về luật khi tham gia
giao thông Việt Nam.

Trang 8


CHƯƠNG 1: GIỚI THIỆU VỀ GAME TRAFFIC WARDEN
1.1

GIỚI THIỆU VỀ GAME TRAFFIC WARDEN

Theo tìm hiểu của nhóm trên App Store (iPhone & iPad) và CH Play
(Android) những game liên quan đến giao thông, phần lớn chỉ là game điều khiển

xe chạy cho đúng làn đường (Traffic Warden – trên App Store và Traffic Control –
trên CH Play), hay game bật đèn tín hiệu cho xe dừng đúng làn đường để không gây
tai nạn (Traffic Control Emergency) chứ chưa có game nào đi sâu vào khai thác
công việc thật sự của Cảnh sát giao thông – bắt những xe quy phạm luật giao thông.
Hầu như các thể loại game về giao thông rất ít.
Chính vì thế, nhóm quyết định phát triển game Traffic Warden – Quản lý
giao thông, với ý tưởng không thể nói là hoàn toàn mới mẻ nhưng lại hoàn toàn mới
trong kho ứng dụng game. Với cách chơi đơn giản và đồ họa nhẹ nhàng, Traffic
Warden sẽ mang đến cho người chơi những giây phút giải trí thoải mái.
1.2

CỐT TRUYỆN GAME TRAFFIC WARDEN

Lấy ý tưởng từ một cậu bé có người cha bị qua đời vì tai nạn giao thông, từ
đó cậu bé quyết tâm học thật giỏi để trở thành Cảnh sát giao thông với mong ước
giúp tất cả mọi người xung quanh mình tuân thủ đúng luật giao thông, để không còn
xảy ra những tai nạn không mong muốn, sẽ không còn ai chịu cảnh mất người thân
như cậu.
Trong Traffic Warden người chơi vào vai người cảnh sát giao thông bắt
những xe vi phạm luật giao thông.

Trang 9


CHƯƠNG 2: LẬP TRÌNH GAME VỚI LIBGDX
Do nhu cầu không ngừng của người chơi game cũng như của những nhà phát
triển, ngày nay trên thị trường có rất nhiều framework hỗ trợ việc xây dựng và phát
triển game trên các thiết bị di động, đặc biệt là trên hệ điều hành Android. Tùy theo
yêu cầu và đặc điểm của từng game, mà lập trình viên lựa chọn cho
mình framework thích hợp để lập trình. Một số framework cơ bản có thể kể đến

như: LibGDX, AndEngine, Unity,…
Qua đồ án này, chúng em cũng muốn giới thiệu một Framework hỗ trợ lập
trình đa nền tảng là LibGDX.
2.1

GIỚI THIỆU VỀ LIBGDX

LibGDX là một framework phát triển ứng dụng game, được viết bằng ngôn
ngữ lập trình Java, một số các thành phần được viết bằng C và C++ để có hiệu năng
tốt hơn. Nó cho phép phát triển các ứng dụng desktop và mobile trên cùng một
codebase. LibGDX chạy được đa nền tảng, hỗ trợ Windows, Linux, Mac OS X,
Android, iOS, và trên web browsers với WebGL.
Một số ưu điểm của LibGDX:
-Đa nền tảng: chúng ta chỉ cần viết code 1 lần nhưng có thể chạy trên
được nhiều nền tảng khác nhau. Một ứng dụng của tính năng này đó là phát triển
các ứng dụng cho Android. Để phát triển một ứng dụng cho Android, khi chạy thử
ứng dụng, chúng ta cần chạy ứng dụng trên Emulator hoặc trên thiết bị thật. Việc
này rất mất thời gian do Emulator chạy rất chậm và quá trình cài đặt cũng như chạy
ứng dụng trên thiết bị thật tốn kém. Với LibGDX, chúng ta có thể chạy ứng dụng
trên PC, sau đó chỉ cần với vài dòng code, chúng ta có thể chạy ứng dụng này trên
Android với hiệu năng tương đương. Điều này giúp chúng ta kiểm thử và tìm lỗi
ứng dụng nhanh hơn và hiệu quả hơn.
-Hiệu năng: Hiệu năng của LibGDX thực sự rất ấn tượng do LibGDX có
các thành phần được viết bằng C và C++.
-Cộng đồng: cộng đồng sử dụng LibGDX rất tuyệt vời với số lượng
người dùng lớn. Các lập trình viên luôn đóng góp và giúp đỡ cho cộng đồng. Việc
sửa lỗi và nâng cấp thư viện cũng được cập nhật khá thường xuyên.

Trang 10

-Tài liệu và ví dụ: khá nhiều với Javadoc. LibGDX cũng cung cấp rất
nhiều các minh họa với đầy đủ các chức năng từ đơn giản đến phức tạp. Đặt biệt
được sự hỗ trợ từ Google, nhà phát triển Android.
-Mã nguồn: mã nguồn mở với thiết kế rất rõ ràng và phù hợp với việc
phát triển ứng dụng cho di động. LibGDX cho phép người lập trình khả năng sử
dụng các API từ các lớp thấp đến cao, tùy theo yêu cầu của người sử dụng.
-Tính năng: LibGDX có rất nhiều tính năng như dựng hình, xử lý đồ họa
2D, 3D, xử lý âm thanh, quản lý các thiết bị vào ra. Cùng với đó là các plugin đi
kèm như Box2D, Bullet,..
2.2

CÀI ĐẶT MÔI TRƯỜNG LÀM VIỆC

LibGDX sử dụng Grade để quản lý các dependencies, quá trình build, và hỗ
trợ tích hợp các IDE khác nhau. Nó cho phép bạn phát triển các ứng dụng với bất cứ
môi trường phát triển nào bạn thích. Điều tuyệt vời nhất: thành viên trong nhóm của
bạn có thể sử dụng những môi trường phát triển khác nhau trong khi làm việc trên
cùng một project. Chỉ cần bạn không đưa các tập tin cấu hình được tạo ra bởi riêng
IDE vào source code. Tập tin .gitignore chứa trong những projects LibGDX sẽ làm
nhiệm vụ đó nếu bạn sử dụng Git.
Để phát triển ứng dụng của bạn sử dụng Eclipse, bạn cần cài đặt những phần
mềm sau:
• Java

Development

Kit

6+

(JDK)

/>• Eclipse phiên bản "Eclipse IDE for Java Developers"

:
:

/>• Android SDK, chỉ cần SDK, không cần ADT bundle, trong đó bao gồm
cả Eclipse. Cài đặt những platforms ổn định nhất thông qua SDK
Manager: />• Android Development Tools for Eclipse - ADT Plugin.
/>2.3

TẠO PROJECT LIBGDX

Download phiên bản mới nhất của LibGDX tại trang chủ:
/>Trang 11

:


Sau khi tải xong LibGDX về, bạn giải nén và chạy file gdx-setup.jar trong
thư mục đã được giải nén.
Điền các thông tin như Name, Package, Game class của project, chọn tới thư
mục lưu project trong mục Destination, chọn tới thư mục cài đặt Android SDK như
hình (Hình 2.1).

Hình 2.1: Tạo project LibGDX

Vào Advanced  chọn Eclipse  Save (Hình 2.2)

Trang 12


Hình 2.2: Chọn Eclipse

Nhấn Generate để tạo project. Màn hình hiển thị sau khi tạo project thành công
(Hình 2.3):

Hình 2.3: Tạo project thành công
Sau khi tạo xong project, bạn sẽ có được source code với cấu trúc thư mục như sau:

Trang 13


Hình 2.4: Cấu trúc thư mục sau khi đã tạo thành công project
2.4

IMPORT PROJECT VÀO ECLIPSE

Mở Eclipse  File  Import General > Existing Projects into Workspace
 Chọn tới thư mục lưu project đã tạo  Chọn Copy projects into workspace
Nhấp Finish (Hình 2.5)

Trang 14


Hình 2.5: Import project vào eclipse
2.4.1 CHẠY THỬ TRÊN ANDROID

Trang 15


Hình 2.6: Chạy thử ứng dụng LibGDX trên Android
2.4.2 CHẠY THỬ TRÊN WEB

Hình 2.7: Chạy thử ứng dụng LibGDX trên Web
2.4.3 CHẠY THỬ TRÊN DESKTOP

Trang 16


Hình 2.8: Chạy thử ứng dụng LibGDX trên Desktop

Trang 17


CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG GAME TRAFFIC WARDEN
3.1

THIẾT KẾ
3.1.1 SƠ ĐỒ THIẾT KẾ GAME TRAFFIC WARDEN

Hình 3.1: Sơ đồ thiết kế game Traffic Warden
3.1.2 GIẢI THÍCH VIỆC CHIA THEO PACKAGE
-Do 1 nhóm có 3 thành viên nên việc phân chia Package sẽ ưu tiên
theo tên thành viên, sau đó sẽ chia theo công việc của Class đó.
-Package gốc trong Project là “com.doan.projecta”
-Cách phân chia Package và đặt các Class như hình (Hình 3.2)

Trang 18


-Do trong Project, công việc của Huỳnh làm riêng nên được chia 1 package
riêng “com.doan.projecta.huynh”. Các package khác do Dũng và Nam làm có liên
quan với nhau trong cùng 1 Class nên không tách ra được.
-Trong Package “com.doan.projecta.game” chứa các Class liên qua tới Class
Screen và Game
-Trong Package “com.doan.projecta.huynh” chứa Splash Screen và Menu
Screen, phần này Huỳnh làm.

Trang 19


-Package “com.doan.projecta.object” chứa các Class liên quan đối tượng Xe,
các ImageButton, các nhân vật NPC.
-Package “com.doan.projecta.util” có các Class để chứa Hằng số, các
phương thức dùng chung, Class Asset load hình, âm thanh.
-Trong Package “com.doan.projecta.world” là những Class liên quan tới điều
khiển và vẽ trong Game.
3.2

XÂY DỰNG GAME TRAFFIC WARDEN
3.2.1 Vẽ Map
3.2.1.1 Nguyên liệu cần thiết:

-Chương trình vẽ, ở đây dùng Tiled phiên bản 0.12.
-Hình Tileset gồm các ảnh nhỏ được gom lại thành 1 tập tin ảnh, các ảnh nhỏ
này sẽ được đặt theo một trình tự do người thiết kế tạo ra để có một Map hoàn
chỉnh.

3.2.1.2 Các bước để vẽ
-Bước 1: Tạo 1 Map mới trống trong chương trình Tiled. Chọn các thông số
như trong hình (Hình 3.3).

Hình 3.3: Tạo Map mới
+Mục “Orientation” chọn “Orthogonal”, đây là góc nhìn từ trên xuống
1 góc vuông với nền Map sẽ tạo.

Trang 20


+Mục “Tile layer format” chọn “Base64 (zlib compressed)” để tập tin
TMX xuất ra có dung lượng nhỏ. Sẽ có một số chương trình tạo Map khác
có thể đọc không hiểu dạng này.
+Mục “Map size” chọn số “cột” và “dòng”. Mỗi một ô (1 cột x 1
dòng) sẽ chỉ đặt được 1 Tileset.
+Mục “Tile size” chọn kích thước bằng pixel cho 1 ô. Mục này liên
quan tới mục “Map size” ở trên.
Như vậy Map của chúng ta có độ lớn là 200 x 137 Tileset, mỗi ô có
kích cỡ 16x16pixel. Toàn bộ Map sẽ có kích thước:
Ngang: 200 x 16 (pixel) = 3200 (pixel)
Dọc: 137 x 16 (pixel) = 2192 (pixel)
-Bước 2: Gắn Tileset vào Map:
+Trên menu Map của Tiled, chọn “New Tileset..”
+Hộp thoại “New Tileset” hiện ra như hình (Hình 3.4).

Hình 3.4: Gắn Tileset vào Map
+Trong ô “Source” nhập đường dẫn và tên tập tin Tileset.
+Mục “Tile width” và “Tile height” để nhập kích cỡ 1 Tileset tính
bằng pixel. Do lúc tạo Map ta chọn Tile sizelà 16px x 16px nên bây giờ

Trang 21


cũng chọn giống như vậy. Nếu chọn lớn hơn hoặc nhỏ hơn sẽ làm thiếu ảnh
hoặc tràn ảnh trong toàn bộ ô (Tile) trong Map.
-Bước 3: Tạo Layer để đặt các Tileset
+Mặc định Tiled sẽ đặt tên Tile Layer đầu tiên là “Tile Layer 1”,
chúng ta sẽ sửa lại thành “GrassRoad” . Tại Layer này sẽ vẽ đồng cỏ, đường,
khung cảnh hồ nước,..
+Tạo thêm Tile Layer khác đặt tên “TreesHouse”. Trong Layer này sẽ
đặt hình ảnh cây cối, nhà cửa. Phải tạo Layer riêng mà không gắn chung với
Layer “GrassRoad” vì khi nhân vật di chuyển sẽ không bị “đè” lên cây, sẽ có
hiệu ứng đi dưới cây, trông thực tế hơn.
+Tạo 1 Object Layer mới đặt tên “RoadPath”. Trong Layer này sẽ vẽ
các đường xe được phép chạy bằng các đường Polyline. Nguyên tắc vẽ
đường sẽ được trình bày chi tiết trong phần “Tìm đường cho xe” (Mục
3.2.6.3)
+Tạo 1 Object Layer mới đặt tên “NPCPath”. Layer này sẽ được vẽ
các đường Polyline - đường dành cho các nhân vật không cần điều khiển
(NonPlayCharacter) di chuyển. Các nhân vật này thêm vào để sinh động
thêm cho Game
-Bước 4: Vẽ trên từng Layer tương ứng trong Map cho hoàn chỉnh như hình
(Hình 3.5)

Trang 22


Hình 3.5: Map hoàn chỉnh
-Bước 5: Lưu và đặt tên thành “map.tmx”. Đây là Map ở mức chơi đầu tiên.

Sau này nếu có nâng cấp lên sẽ vẽ thêm vài Map nữa.
-Bước 6: Chạy thử và kiểm tra Map. Khi vào màn hình Game ở mức zoom
1.0 thì Map không vấn đề gì. Nhưng khi thay đổi mức độ zoom, Map gặp lỗi các
sọc đen trên màn hình như hình (Hình 3.6).

Trang 23


Hình 3.6: So sánh hình bị lỗi và hình bình thường
-Bước 7: Xử lý lỗi sọc đen dùng TileMapPacker:
+Tìm và chép các tập tin vào 1 thư mục như trong hình (Hình 3.7)

Hình 3.7: Các file cần để chạy TileMapPacker
+Chạy dòng lệnh tại thư mục đã chép các tập tin:
java -cp ".;*" com.badlogic.gdx.tiledmappacker.TiledMapPacker "input"
"output" "--strip-unused"
Trong đó input là thư mục lưu tập tin TMX bị lỗi, output là thư mục để
lưu tập tin TMX sẽ tạo. Các thông số “—strip-unused” sẽ bỏ những tileset không sử
dụng trong map. Sau khi có tập tin TMX mới, đưa vào Game để kiểm tra không còn
bị lỗi sọc đen nữa.
3.2.2 Class SplashGame
-Để phân chia tốt thời gian hoạt động, trước khi game sẵn sàng, sẽ có một
quá trình nạp dữ liệu, quá trình này có thể kéo dài đến vài giây. Trong thời gian đó,
tránh để người dùng phải nhìn vào một màn hình trống. Vì thế, hãy hiển thị một

Trang 24


màn hình chờ (splash screen). Nó cho người dùng biết game vẫn đang hoạt động
bình thường.

-Chúng

ta

tạo

Class

“SplashGame”

trong

package

“com.doan.projecta.huynh” , class này sẽ implements Screen của LibgGDX.
- Class này hiển thị màn hình chờ và sẽ xuất hiện đầu tiên khi vào game.
-Class dùng phương thức show() tải hình, render() để vẽ hình và hiển thị hình
lên màn hình, dispose() để giải phóng bộ nhớ. Ngoài ra còn có các phương thức
resize(), pause(), resume(), hide() tuy nhiên trong class này không cần thiết sử dụng
nên không đề cập đến.
+Đầu tiên ta cần phải khởi tạo các hình ảnh cần sử dụng trong class
Asset. Các hình ảnh này được lưu ở mục “asset/huynh”.
logoTrai = new
TextureRegion(newTexture(Gdx.files.internal("huynh/trai.png")));
logoPhai = new TextureRegion(new
Texture(Gdx.files.internal("huynh/phai.png")));
logoTren = new TextureRegion(new
Texture(Gdx.files.internal("huynh/tren.png")));
logoGiua = new TextureRegion(new
Texture(Gdx.files.internal("huynh/giua.png")));

+Phương thức show() ta khởi tạo đối tượng sprite để tham chiếu đến các
hình ảnh đã được khởi tạo ở Class Asset. Để hình được đặt ở giữa màn hình, ta lấy
tọa độ x, y:
x = (chiều_rộng_màn_hình – chiều_rộng_logo_giữa)/2
y

=

chiều_cao_màn_hình

–

chiều_cao_logo_trên

–

50

–

chiều_cao_logo_giữa.
+Phương thức render() ta bắt đầu vẽ các hình ảnh để hiển thị lên màn
hình.

Trang 25