Lập trình game di động sử dụng thư viện đồ họa

BÁO CÁO MÔN HỌC ĐỒ HỌA MÁY TÍNH TÊN ĐỀ TÀI LẬP TRÌNH GAME DI ĐỘNG SỬ DỤNG THƯ VIỆN ĐỒ HỌA Người hướng dẫn: PGS. TS Nguyễn Tấn Khôi NHÓM: 1 Đà Nẵng, 052021 MỤC LỤC DANH MỤC HÌNH VẼ ii 1. CƠ SỞ LÝ THUYẾT 1 1.1. Công cụ phát triển : Framework Flutter và package game Flame 1 1.1.1. Framework Flutter 1 1.1.2. Package hỗ trợ Flame Engine 2 1.2. Cơ sở lý thuyết : Game Loop (Vòng lặp game) 3 1.2.1. Phần Update: 4 1.2.2. Phần Render: 4 1.3. Nhảy trong thể loại game đi cảnh (Platformer Game) 5 2. THIẾT KẾ XÂY DỰNG CHƯƠNG TRÌNH : GAME ANIMAL RUN 7 2.1. Phát biểu bài toán 7 2.1.1. Mô tả đầu vào 7 2.2. Cấu trúc dữ liệu, hoạt động, cấu trúc game 8 2.2.1. Cấu trúc dữ liệu 8 2.2.2. Cấu trúc game 8 2.2.3. Xử lí hoạt động, sự kiện trong game 9 2.3. Tổ chức chương trình 12 2.3.1. Cấu trúc tập tin chương trình và mô tả về những thư mục, tập tin chính. 12 2.3.2. Import thư viện hỗ trợ 13 2.3.3. Tổ chức các tập tin hỗ trợ (hình ảnh, font,…) 13 2.3.4. Tổ chức các tập tin code chính 14 3. KẾT QUẢ THỰC THI 15 3.1. Xuất chương trình ra file apk cho thiết bị Android và cài đặt vào máy 15 3.2. Giao diện chính của trò chơi 16 3.3. Giao diện khi game over và pause game 16 3.4. Nhận xét đánh giá 17 4. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 17 4.1. Kết luận 17 4.2. Hướng phát triển 17 TÀI LIỆU THAM KHẢO 18 PHỤ LỤC …………………………………………………………………………………………………...19 DANH MỤC HÌNH VẼ Hình 1: Tổng quan về kiến trúc của tầng UI và Engine của Flutter 1 Hình 2: Package Flame 2 Hình 3: Game BWO được lập trình từ package Flame dành cho Flutter 2 Hình 4: Mô tả về một vòng lặp game mobile cơ bản 3 Hình 5: Ví dụ minh họa về Phần Update về cấp độ xuất hiện kẻ thù dựa vào số điểm của người chơi 4 Hình 6: Các đối tượng được thêm vào màn hình chơi 4 Hình 7: Các đối tượng được thêm vào sẽ được thêm vào một tập hợp các đối tượng theo thứ tự 5 Hình 8: Thực hiện vẽ các đối tượng, phần render sẽ thực hiện vẽ từng đối tượng từ tập hợp đó 5 Hình 9: Minh họa về thuật toán nhảy, xử lý tính toán 5 Hình 10: Tiến hành cài đặt nhảy vào trong game 6 Hình 11: Tập hình ảnh về nhân vật chính player gồm tập hợp các thứ tự theo hành động: đứng yên, chạy, nhảy, bị đau cho việc tạo hình động 7 Hình 12: Tập hình ảnh về các kẻ thù enemy theo sheet, dùng để tạo hình động trong trò chơi 7 Hình 13: Tập hình ảnh layer dùng để xây dựng ảnh parallax 8 Hình 14: Minh họa về các xếp ảnh parallax gồm các layer 8 Hình 15: Font hỗ trợ Press Start 2P dùng cho font chữ của HUB 8 Hình 16: Cấu trúc dữ liệu OrderedSet kiểu Componet cho việc render componet 8 Hình 17: Cấu trúc của game 9 Hình 18: Event onTapDown kèm với event nhảy trong game 9 Hình 19: Hiệu ứng nhảy của nhân vật player 10 Hình 20: Xử lí sự kiện khi nhân vật tiếp đất 10 Hình 21: Loạt hiệu ứng khi player chạm vào enemy, p1: Xử lí khoảng cách chạm, p2: Sự kiện khi nhân vật bị chạm, p3: Loạt hoạt ảnh của nhân vật khi chạm, p4: Giao diện hub GameOver 11 Hình 22: Cấu trúc tập tin của chương trình 12 Hình 23: Khai báo các thư viện hỗ trợ 13 Hình 24: Thư mục assets dùng để chứa các tập tin hỗ trợ về hình ảnh, font chữ 13 Hình 25: Thư mục lib chứa source code chính của trò chơi 14 Hình 26: Thực hiện câu lệnh flutter build apk để release game ra file apk để cài đặt vào máy 15 Hình 27: Game được cài vào thiết bị Android (Xiaomi Mi 9) 15 Hình 28: Giao diện chính của game 16 Hình 29: Giao diện khi gameover và pause game 16 1. CƠ SỞ LÝ THUYẾT 1.1. Công cụ phát triển : Framework Flutter và package game Flame 1.1.1. Framework Flutter Là framework crossplatform dùng để xây dựng ứng dụng trên thiết bị di động, web, windows với hiệu suất cao, chất lượng tốt cho đa nền tảng do Google phát triển, viết bằng ngôn ngữ Dart, vừa có Ahead of Time của static type language, complier xong mới chạy, vừa có Just In Time như các dynamic type language. Khi lập trình, vừa sử dụng Just In Time để load lại các thay đổi, khi build sản phẩm thì dùng Ahead of Time để tối ưu hiệu năng như việc sử dụng code native. Chính vì điều đó khiến Dart cho một hiệu năng vượt trội. Hình 1: Tổng quan về kiến trúc của tầng UI và Engine của Flutter Lớp Engine của Flutter được xây dựng bằng ngôn ngữ CC++ nên nó cho khả năng tối ưu, tốc độ xử lý đem lại hiệu suất cao chính vì vậy Flutter ngoài phát triển các ứng dụng đa nền tảng còn có thể sử dụng để làm game di động vì sức mạnh từ lớp Engine của nó.  Có thể dùng Flutter để làm game. 1.1.2. Package hỗ trợ Flame Engine Flame là một module game engine Flutter cung cấp giải pháp lập trình game bằng Framework Flutter. Tận dụng lợi thế về mặt cấu trúc, sức mạnh hạ tầng cung cấp bởi Flutter nhưng đơn giản hóa câu lệnh cần để xây dựng dự án. Hình 2: Package Flame Cung cấp các thành phần cơ bản cần thiết cho lập trình game như hình ảnh, sprites, sprites sheet, animation và hệ thống gồm component khác nhau. Hình 3: Game BWO được lập trình từ package Flame dành cho Flutter 1.2. Cơ sở lý thuyết : Game Loop (Vòng lặp game) Vòng lặp (Game loop) là một trong yếu tố cực kỳ quan trọng của một trò chơi. Là một tập hợp các câu lệnh để thiết bị chạy đi lặp đi lặp lại Các tựa game thường có một thông số gọi là Khung hình trên giây (FPS), nghĩa ra nếu tựa game của ta chạy ở 60 khung hình trên 1 giây thì thiết bị đang chơi game đó đang thực hiện vòng lặp game 60 lần trên 1 giây.  Hiểu đơn giản: 1 khung hình = 1 lần chạy vòng lặp game. Một vòng lặp game dành cho thiết bị di động gồm 2 phần: update và render, ngoài ra đối với game dành cho cả web, desktop gồm 3 phần: resize (cho việc thay đổi kích thước cửa sổ web, desktop), update và render. Trong bài báo cáo này, ta xem xét vòng lặp cho thiết bị di động.

TRƯỜNG ĐẠI HỌC BÁCH KHOA

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO MÔN HỌC ĐỒ HỌA MÁY TÍNH

TÊN ĐỀ TÀI

LẬP TRÌNH GAME DI ĐỘNG SỬ DỤNG

THƯ VIỆN ĐỒ HỌA

Người hướng dẫn: PGS TS Nguyễn Tấn Khôi NHÓM: 1

Đà Nẵng, 05/2021

MỤC LỤC

DANH MỤC HÌNH VẼ

năng vượt trội.

Hình 1: Tổng quan về kiến trúc của tầng UI và Engine của Flutter

- Lớp Engine của Flutter được xây dựng bằng ngôn ngữ C/C++ nên nó chokhả năng tối ưu, tốc độ xử lý đem lại hiệu suất cao chính vì vậy Flutterngoài phát triển các ứng dụng đa nền tảng còn có thể sử dụng để làm game

di động vì sức mạnh từ lớp Engine của nó

 Có thể dùng Flutter để làm game

1.1.2 Package hỗ trợ Flame Engine

- Flame là một module game engine Flutter cung cấp giải pháp lập trình gamebằng Framework Flutter Tận dụng lợi thế về mặt cấu trúc, sức mạnh hạ tầngcung cấp bởi Flutter nhưng đơn giản hóa câu lệnh cần để xây dựng dự án

Hình 2: Package Flame

- Cung cấp các thành phần cơ bản cần thiết cho lập trình game như hình ảnh, sprites, sprites sheet, animation và hệ thống gồm component khác nhau

1.2 Cơ sở lý thuyết : Game Loop (Vòng lặp game)

- Vòng lặp (Game loop) là một trong yếu tố cực kỳ quan trọng của một tròchơi Là một tập hợp các câu lệnh để thiết bị chạy đi lặp đi lặp lại

- Các tựa game thường có một thông số gọi là Khung hình trên giây (FPS),nghĩa ra nếu tựa game của ta chạy ở 60 khung hình trên 1 giây thì thiết bịđang chơi game đó đang thực hiện vòng lặp game 60 lần trên 1 giây

 Hiểu đơn giản: 1 khung hình = 1 lần chạy vòng lặp game

- Một vòng lặp game dành cho thiết bị di động gồm 2 phần: update và

render, ngoài ra đối với game dành cho cả web, desktop gồm 3 phần: resize

(cho việc thay đổi kích thước cửa sổ web, desktop), update và render.

Trong bài báo cáo này, ta xem xét vòng lặp cho thiết bị di động

Hình 4: Mô tả về một vòng lặp game mobile cơ bản

Hình 7: Các đối tượng được thêm vào sẽ được thêm vào một tập hợp các đối tượng theo thứ

tự

Hình 8: Thực hiện vẽ các đối tượng, phần render sẽ thực hiện vẽ từng đối tượng từ tập hợp đó

1.3 Nhảy trong thể loại game đi cảnh (Platformer Game)

- Đối với những thể loại game đi cảnh nói chung, nhảy là một trong những sựkiện không thể thiếu, áp dụng phương trình cùng một số biến vật lí cơ bản

và tính toàn trên phần update của game loop

Hình 9: Minh họa về thuật toán nhảy, xử lý tính toán

- Ban đầu chúng ta cần xác định vị trí gốc, vận tốc và trọng lực được khai báotùy vào game, phần update của game loop sẽ thực hiện một loại sự kiệntương tự như (tiếp nhận sự kiện chạm vào screen hay joystick, phát hiện

chạm vào đối tượng…) Báo cáo nói về game này chỉ thực hiện nhảy theotrục y.

- Trong khoảng thời điểm game được update liên tục từ game loop, nếu nhảyđược kích hoạt, thuộc tính speedY trừ cho một lượng size màn hình để đốitượng có thể di chuyển theo trục Y để nhảy lên, sau một thời gian thì sẽđược cộng một lượng GRAVITY kèm thời gian update đó, dùng để thựchiện hạ dần độ cao khi nhảy dựa vào GRAVITY, vị trí Y hiện tại của đốitượng thực hiện sẽ được cộng mới từ thuộc tính speedY, đối tượng sẽ nhảylên và hạ dần tới khi tiếp đất (isOnGround) thì vị trị Y sẽ quay về vị trí banđầu khi tiếp đất

Hình 10: Tiến hành cài đặt nhảy vào trong game

2 THIẾT KẾ XÂY DỰNG CHƯƠNG TRÌNH : GAME ANIMAL RUN

2.1 Phát biểu bài toán

2.1.1 Mô tả đầu vào

2.1.1.1 Tập hình ảnh về nhân vật chính

Hình 11: Tập hình ảnh về nhân vật chính player gồm tập hợp các thứ tự theo hành động:

đứng yên, chạy, nhảy, bị đau cho việc tạo hình động

2.1.1.2 Tập hình ảnh về kẻ thù enemy

Hình 12: Tập hình ảnh về các kẻ thù enemy theo sheet, dùng để tạo hình động trong trò chơi

2.1.1.3 Tập tin về đối tượng hỗ trợ

Hình 13: Tập hình ảnh layer dùng để xây dựng ảnh parallax

Hình 14: Minh họa về các xếp ảnh parallax gồm các layer

Hình 15: Font hỗ trợ Press Start 2P dùng cho font chữ của HUB

2.2 Cấu trúc dữ liệu, hoạt động, cấu trúc game

Hình 17: Cấu trúc của game

2.2.3 Xử lí hoạt động, sự kiện trong game

- Khi sự kiện kích hoạt thì loại hiệu ứng đồng thời xảy ra, như loại ảnh playernhảy từ tập tin hỗ trợ hình ảnh, xếp lại với nhau tạo ảnh động

Hình 19: Hiệu ứng nhảy của nhân vật player

2.2.3.2 Xử lí sự kiện khi player tiếp đất sau nhảy

- Khi nhân vật tiếp đất isOnGround có giá trị bằng bục nhảy thì loạt hoạt ảnhcủa nhân vật thay đổi từ trạng thái jump sang trạng thái running

Hình 20: Xử lí sự kiện khi nhân vật tiếp đất

2.2.3.3 Xử lí sự kiện khi player chạm vào enemy

- Khi khoảng cách từ viền của enemy tới tâm player dưới 45, dựa vào mìnhcài đặt, thì loạt sự kiện xảy ra: Hub heart sẽ bị trừ hết mạng, game enginethực hiện stop game, Hub game over hiện lên, hoạt ảnh của nhân vật player

từ running sang hiting hoặc là jumping sang hitting

Hình 21: Loạt hiệu ứng khi player chạm vào enemy, p1: Xử lí khoảng cách chạm, p2: Sự kiện khi nhân vật bị chạm, p3: Loạt hoạt ảnh của nhân vật khi chạm, p4: Giao diện hub GameOver

2.3 Tổ chức chương trình

2.3.1 Cấu trúc tập tin chương trình và mô tả về những thư mục, tập tin chính.

Hình 22: Cấu trúc tập tin của chương trình

- android: Thư mục cho Native Code (Kotlin) của hệ điều hành Android.

- ios: Thư mục dành cho Native Code (Swift) của hệ điều hành iOS, iPadOS.

- assets: Thư mục dùng để chứa các tập tin hỗ trợ như hình ảnh, font, nhạc,…

- lib: Thư mục dùng để chứa source code chính của chương trình:

- web: Thư mục dành chứa các tập tin hỗ trợ cho việc chạy trên nền tảng web,

do Flutter hỗ trợ web

- pubspec.yaml: Tập tin dành cho việc khai báo các thư viện, thông số phiên

bản, các tập tin hỗ trợ dành cho project

2.3.2 Import thư viện hỗ trợ

- Thư viện hỗ trợ cho Flutter có đường dẫn: https://pub.dev/

Hình 23: Khai báo các thư viện hỗ trợ

- cupertino_icons: Hỗ trợ về mặt giao diện cho các thiết bị chạy iOS, iPadOS.

- flame: Game Engine dành cho Flutter.

- flutter_launcher_name: Setting tên cho game khi cài đặt vào thiết bị.

- flutter_icons: Setting icon cho game khi cài đặt vào thiết bị.

2.3.3 Tổ chức các tập tin hỗ trợ (hình ảnh, font,…)

Hình 24: Thư mục assets dùng để chứa các tập tin hỗ trợ về hình ảnh, font chữ

- fonts: Dùng để chứa font chữ hỗ trợ cho Hub.

- images: Dùng để chứa hình ảnh của nhân vật player, background, nhân vật

enemy

- icon.png: Dùng để làm icon cho game.

2.3.4 Tổ chức các tập tin code chính

Hình 25: Thư mục lib chứa source code chính của trò chơi

- game_screens: Chức tập tin code liên quan tới screen của game

- model: Dùng để chức các tập tin code liên quan tới đối tượng sử dụng lặp đi lặp

lại như enemy

- utils: Dùng để chức các tập tin code liên quan tới các component, controller, file

hỗ trợ xuyên suốt của game như sprite: player, enemy Thông số: constant.

- main.dart: Setting kiểu màn hình, hướng xoay màn hình, chạy ứng dụng.

3 KẾT QUẢ THỰC THI

- Do game được lập trình trên nền tảng Windows nên kết quả của báo cáo lấy từchương trình được chạy trên thiết bị Android

3.1 Xuất chương trình ra file apk cho thiết bị Android và cài đặt vào máy

Hình 26: Thực hiện câu lệnh flutter build apk để release game ra file apk để cài đặt vào máy

Hình 27: Game được cài vào thiết bị Android (Xiaomi Mi 9)

3.2 Giao diện chính của trò chơi

Hình 28: Giao diện chính của game

3.3 Giao diện khi game over và pause game

TÀI LIỆU THAM KHẢO

1 Flame: https://flame-engine.org/docs/#/ , https://pub.dev/packages/flame

2 Flutter: https://flutter.dev/docs

3 Jump in Game Dev : luc-be-mat-di-chuyen-va-nhay/

https://anonyviet.com/lap-trinh-game-bai-2-trong-PHỤ LỤC

- Do tập dự án khá lớn, nên sẽ chỉ cập nhật phần play screen ở đây, còn lại được

up vào link github của sinh viên: https://github.com/dungngminh/Animal_Runimport 'dart:ui';

const double groundHeight = 32;

AnimalRun animalRun = AnimalRun();

class AnimalRun extends BaseGame with TapDetector, HasWidgetsOverlay { //player

Player _player;

ParallaxComponent _parallaxComponent;

final life = List<Widget>();