Professional Documents
Culture Documents
Báo Cáo Môn Học Đồ Họa Máy Tính
Báo Cáo Môn Học Đồ Họa Máy Tính
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
Đà Nẵng, 05/2021
MỤC LỤC
DANH MỤC HÌNH VẼ............................................................................................................................................ii
1. CƠ SỞ LÝ THUYẾT.....................................................................................................................................1
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
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
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 3: Game BWO được lập trình từ package Flame dành cho Flutter................................................................2
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 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 18: Event onTapDown kèm với event nhảy trong game..................................................................................9
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 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
- Lớp Engine của Flutter được xây dựng bằng ngôn ngữ C/C++ 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.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.
- 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
2
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.
3
1.2.1. Phần Update:
- Xử lý các chuyển động của đối tượng như nhân vật, kẻ thù, chướng ngại vật,
bản đồ và các phần khác như bộ điếm giờ.
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
- Hầu hết các sự kiện được xảy ra ở đây, ví dụ như là xử lý sự kiện, tính toán
nếu như kẻ thù bị trúng đạn hoặc là nhân vật chạm vào kẻ thù.
1.2.2. Phần Render:
- Là phần sẽ vẽ ra toàn bộ đối tượng có trong màn hình, đây là quá trình riêng
biệt khi mọi thứ được đồng bộ theo đúng dữ liệu, đầu vào.
4
Hình 6: Các đối tượng được thêm vào màn hình chơi
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 đó
5
- 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áo
tùy vào game, phần update của game loop sẽ thực hiện một loại sự kiện
tươ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 theo
trụ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 để đối
tượ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ực
hiện hạ dần độ cao khi nhảy dựa vào GRAVITY, vị trí Y hiện tại của đối
tượng thực hiện sẽ được cộng mới từ thuộc tính speedY, đối tượng sẽ nhảy
lê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
6
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
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
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
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
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
- Khi người chơi thực hiện chạm vào màn hình, sự kiện onTapDown trong
game sẽ được kích hoạt, sự kiện được gắn kèm với sự kiện nhảy.
9
Hình 18: Event onTapDown kèm với event nhảy 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 player
nhảy từ tập tin hỗ trợ hình ảnh, xếp lại với nhau tạo ảnh động
- Khi nhân vật tiếp đất isOnGround có giá trị bằng bục nhảy thì loạt hoạt ảnh
của nhân vật thay đổi từ trạng thái jump sang trạng thái running.
- Khi khoảng cách từ viền của enemy tới tâm player dưới 45, dựa vào mình
cài đặt, thì loạt sự kiện xảy ra: Hub heart sẽ bị trừ hết mạng, game engine
thự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.
10
11
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
- 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.
12
2.3.2. Import thư viện hỗ trợ
- Thư viện hỗ trợ cho Flutter có đường dẫn: https://pub.dev/
- 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ữ
13
- 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.
14
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
15
3.2. Giao diện chính của trò chơi
16
3.4. Nhận xét đánh giá
- Game chạy tốt trên hầu hết Android, ít hiện tượng bị drop FPS, giật lag. Đảm
bảo các enemy xuất hiện đúng theo sắp xếp, cài đặt của người lập trình.
17
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 : https://anonyviet.com/lap-trinh-game-bai-2-trong-
luc-be-mat-di-chuyen-va-nhay/
18
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_Run
import 'dart:ui';
import 'package:flame/components/parallax_component.dart';
import 'package:flame/components/text_component.dart';
import 'package:flame/game/game.dart';
import 'package:flame/game/base_game.dart';
import 'package:flame/gestures.dart';
import 'package:flame/position.dart';
import 'package:flame/text_config.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:ninja/utils/enemy_manager.dart';
import 'package:ninja/utils/enemy.dart';
import '../utils/player.dart';
const double groundHeight = 32;
AnimalRun animalRun = AnimalRun();
class AnimalRun extends BaseGame with TapDetector, HasWidgetsOverlay {
//player
Player _player;
ParallaxComponent _parallaxComponent;
19
TextComponent _scoreText;
int score;
Size _size;
EnemyManager _enemyManager;
AnimalRun() {
//init constructor
_parallaxComponent = ParallaxComponent(
[
ParallaxImage('layer1.png'),
ParallaxImage('layer2.png'),
ParallaxImage('layer3.png'),
ParallaxImage('layer4.png'),
ParallaxImage('layer5.png'),
ParallaxImage('layer6.png', fill: LayerFill.none),
],
baseSpeed: Offset(100, 0),
layerDelta: Offset(20, 0),
);
_player = Player();
_enemyManager = EnemyManager();
//Score
score = 0;
_scoreText = TextComponent(
score.toString(),
config: TextConfig(
fontFamily: 'Arcade',
20
fontSize: 30,
color: Colors.white,
),
);
//Hub pause
addWidgetOverlay('Pause', _buildUI());
//add to screen
add(_parallaxComponent);
add(_player);
add(_enemyManager);
add(_scoreText);
}
@override
void onTapDown(TapDownDetails details) {
super.onTapDown(details);
_player.jump();
}
@override
void onTapUp(TapUpDetails details) {
super.onTapUp(details);
}
@override
void resize(Size size) {
super.resize(size);
21
this._size = size;
_scoreText.setByPosition(Position(
(size.width / 2) - (_scoreText.width / 2.1), size.height * 0.05));
}
@override
void update(double t) {
super.update(t);
score += (60 * t).toInt();
_scoreText.text = score.toString();
components.whereType<Enemy>().forEach((element) {
if (_player.distance(element) < 45) {
_player.hit();
}
});
if (_player.heart.value <= 0) gameOver();
}
@override
void lifecycleStateChange(AppLifecycleState state) {
switch (state) {
case AppLifecycleState.resumed:
break;
case AppLifecycleState.inactive:
this.pauseGame();
break;
22
case AppLifecycleState.paused:
this.pauseGame();
break;
case AppLifecycleState.detached:
this.pauseGame();
break;
}
}
Widget _buildUI() {
return Material(
type: MaterialType.transparency,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(
Icons.pause,
color: Colors.white,
),
onPressed: () {
pauseGame();
},
),
ValueListenableBuilder(
valueListenable: _player.heart,
builder: (BuildContext context, value, Widget child) {
23
final life = List<Widget>();
int i = 1;
life.add(
Icon(
(value >= i) ? Icons.favorite : Icons.favorite_border,
color: Colors.red,
),
);
return Row(children: life);
},
),
],
),
);
}
void pauseGame() {
pauseEngine();
addWidgetOverlay('HubPause', _pauseMenu());
}
Widget _pauseMenu() {
return Center(
child: Material(
color: Color(0x00000000),
child: Column(
children: [
24
SizedBox(
height: _size.height * 0.8 / 2,
),
Text(
'Pause',
style: TextStyle(
fontFamily: 'Arcade',
fontSize: 30,
color: Colors.white,
),
),
IconButton(
alignment: Alignment.center,
icon: Icon(
Icons.play_arrow_rounded,
size: 30,
color: Colors.white,
),
onPressed: () {
resumeGame();
},
),
],
),
),
);
}
25
void resumeGame() {
removeWidgetOverlay('HubPause');
resumeEngine();
}
void gameOver() {
pauseEngine();
addWidgetOverlay('GameOverHub', _gameOverHub());
}
Widget _gameOverHub() {
return Center(
child: Material(
color: Color(0x00000000),
child: Column(
children: [
SizedBox(
height: _size.height * 0.8 / 2,
),
Text(
'Game Over',
style: TextStyle(
fontFamily: 'Arcade',
fontSize: 50,
color: Colors.white,
),
26
),
Text(
'Your score is $score',
style: TextStyle(
fontFamily: 'Arcade',
fontSize: 30,
color: Colors.white,
),
),
IconButton(
alignment: Alignment.center,
icon: Icon(
Icons.replay,
size: 30,
color: Colors.white,
),
onPressed: () {
replay();
resumeGame();
removeWidgetOverlay('GameOverHub');
},
),
],
),
),
);
}
27
void replay() {
this.score = 0;
_player.heart.value = 1;
_enemyManager.reset();
components.whereType<Enemy>().forEach((element) {
this.markToRemove(element);
});
}
}
28