QUẢN Lý d6cntt epu dai

MỤC LỤC

DANH MỤC HÌNH VẼ


DANH MỤC CÁC TỪ VIẾT TẮT VÀ THUẬT NGỮ
Chữ viết tắt

Viết đầy đủ

PTGD

Phần tử giao diện

PTGD đơn
PTGD
trúc
GD
IDE

có

Các thành phần góp phần cấu thành nên giao diện
trong game. Có thể phân loại phần tử giao diện
trong game thành 2 nhóm như sau:
 Nhóm 1: Các phần tử giao diện đơn thuần chỉ
thể hiện thông tin. Các phần tử trong nhóm
này có thể kể đến là: Label, Image,Sprite,
Texture, Animation. Để biết định nghĩa về mỗi
loại PTGD trên, xem bên dưới.
 Nhóm 2: Các phần tử giao diện có thể nhận sự

kiện đầu vào. Các phần tử trong nhóm này là:
Button,
Scroll
Pane,
Window,ImageTextButton,
TextButton,
TextField, TextArea, Dialog
Phần tử giao diện Những PTGD không phụ thuộc vào bất kì 1
đơn
PTGD nào khác
cấu Phần tử giao diện có Những PTGD có thể chứa các PTGD khác trong
cấu trúc
nó.
Game developer
Nhà phát triển trò chơi

VN

Integrated
Development
Environment
Việt Nam

TBDĐ

Thiết bị di động

SWT

The

Standard
Widget Toolkit

TPP

The textual
programming
paradigm
The visual
programming
paradigm
Lập trình viên

VPP

LTV

Ý nghĩa

Mô thức lập trình văn bản

Mô thức lập trình trực quan


LỜI MỞ ĐẦU
Trong lĩnh vực phát triển game cho thiết bị di động, công việc thiết kế giao diện là
công việc rất quan trọng. Thành công của 1 game cũng 1 phần được quyết định bởi giao diện
game. Tuy nhiên,khi lập trình giao diện game bằng mô thức lập trình văn bản, màn hình của
GD hiển thị khác với màn hình trên thiết bị đầu cuối của người dùng, GD không mường
tượng được hết giao diện được tạo ra từ những dòng văn bản mà mình đang tạo. Do vậy, công

đoạn lập trình giao diện cho game bằng các xâu kí tự và các API mà ngôn ngữ lập trình và thư
viện sử dụng gây ra khá nhiều khó khăn cho GD. Trong mô thức lập trình trực quan, màn hình
hiển thị trên thiết bị đầu cuối của người dùng trùng khớp với màn hình hiển thị của GD. Để
giảm thiểu khó khăn trong việc lập trình giao diện cho mobile game, bài toán đặt ra là: Làm
thế nào để chuyển đổi các đối tượng đồ họa hiển thị trên thiết bị đầu cuối của người dùng
sang thành các đối tượng đồ họa hiển thị trên màn hình của GD.
Đề tài này nhằm xây dựng 1 plugin cho eclipse hỗ trợ người dùng thiết kế giao diện
2D cho các trò chơi trên thiết bị di động, sử dụng thư viện Libgdx.
Cấu trúc của đồ án gồm 4 chương với nội dung chính như sau:
 Chương 1 trình bày tổng quan về thị trường game mobile trên thiết bị di động, một số
mô thức lập trình, và các vấn đề mà Game Developer gặp phải khi thiết kế giao diện
game từ đó đề xuất giải pháp khắc phục.
 Chương 2 tìm hiểu về các công nghệ sử dụng : eclipse platform, SWT, thư viện
Libgdx.
 Chương 3 trình bày phần phân tích, thiết kế giải pháp, bao gồm các biểu đồ Usecases,
kịch bản usecases, thiết kế chức năng, thiết kế dữ liệu, thiết kế giao diện cho plugin sẽ
xây dựng.
 Chương 4 trình bày kịch bản khi sử dụng plugin và kết quả sau khi thực hiện xong
kịch bản, nêu lên đánh giá về kết quả khi sử dụng plugin.


4

CHƯƠNG 1: TỔNG QUAN VỀ THỊ TRƯỜNG GAME TRÊN THIẾT BỊ
DI ĐỘNG
Theo báo cáo chi tiết của InfoQ VN về tình hình sử dụng game mobile thực hiện vào
tháng 2/2013, Việt Nam hiện đang có khoảng 165 triệu thuê bao di động, trung bình mỗi
người dân sở hữu hơn 1,5 thuê bao, tỷ lệ tăng trưởng lên đến 183%. Với số lượng người sử
dụng điện thoại di động còn nhiều hơn cả số lượng người sử dụng internet cộng với việc dân
số trẻ, thì thị trường các nội dung số dành cho thiết bị di động là một thị trường cực kỳ tiềm

năng.
Về tình hình sử dụng game mobile:
-

Độ tuổi: Phần lớn người chơi game mobile là những người trẻ, trong độ tuổi từ 18
– 35. Trong đó 70% từ 18 – 25 và 27% từ 26 – 35.

-

Thời gian chơi game trung bình/ ngày:Thời gian chơi game trung bình phổ biến
nhất là dưới 1h/ngày: 47.5%. Tuy nhiên lượng người chơi từ 1h đến 2h/ngày và từ
2h đến 3h/ngày cũng khá lớn, chiếm 47.3 %.

-

Mục đích chơi game: Mục đích chơi game mobile chủ yếu là thư giãn: chiếm 87%,
những mục đích khác là rất ít.

-

Tiêu chí lựa chọn game: Trong danh sách được liệt kê, các tiêu chí như đồ họa đẹp,
dễ thao tác, nội dung hấp dẫn được đánh giá cao nhất. Và trong đó nội dung hấp
dẫn là tiêu chí ưu tiên hàng đầu với 26%.

Qua các thông số trên, có thể thấy thị trường game mobile Việt Nam hiện là
1 mảnh đất cực kỳ màu mỡ, hứa hẹn sẽ có thể qua mặt thị trường web game đang
có xu hướng bão hòa. Chỉ cần có 1 smartphone, người dùng hoàn toàn có thể trải
nghiệm thế giới game mobile.
1.1. Tổng quan về game 2D
1.1.1. Định nghĩa game 2D

Game 2D được xây dựng trên hệ thống đồ hoạ máy tính 2 chiều (2
Dimensional), cũng như hệ toạ độ 2 chiều của trục toạ độ, nó phản ánh một phong
cách đồ hoạ phẳng. Đồ hoạ 2 chiều không có sự tham gia hoặc có nhưng rất ít của các
hiệu ứng 3 chiều đặc trưng như hiệu ứng chiếu sáng, phản chiếu, đổ bóng..
Đặc trưng dễ nhận dạng nhất của game 2D là không thể xoay góc quay được,
tất nhiên yếu tố này không thể giúp ta khẳng định chắc chắn là game 2D, có những
game 3D vẫn hạn chế không cho xoay màn hình. Đặc trưng kế tiếp là không có ấn
tượng 3 chiều rõ rệt, game sẽ cuộn bản đồ theo 2 chiều là chiều thẳng và chiều ngang
khác với 3D không mang hình thức cuộn bản đồ mà dựa vào không gian khối của bản
đồ. Đặc trưng tiếp theo là mọi thứ đều hoàn toàn bằng 2D từ hậu cảnh, vật thể đến tiền
cảnh tạo nên một cái hình giống như phim hoạt hình cắt giấy, mọi thứ đều từ hình vẽ
trên giấy.
1.2.2. So sánh game 2D và game 3D

Các thiết bị di động so với PC thì có 1 số điểm khác biệt sau đây:


5
-

Cấu hình thấp: Đa số các thiết bị đều có cấu hình thấp hơn so với PC. Hiện nay, bộ
nhớ của mobile thường ít, chỉ khoảng 16 – 128GB, trong khi RAM chỉ khoảng 1 –
2 GB. game 3D nặng nên yêu cầu bộ nhớ khá lớn, tốc độ xử lý nhanh. Do vậy việc
sử dụng game 3D trên mobile có hạn chế là game chạy thường không được mượt.
Ngược lại, đối với game 2D, cấu hình máy không đòi hỏi cao.

-

Kích thước màn hình hạn chế: Đây là đặc điểm khác biệt dễ nhận rõ nhất của

mobile so với PC. Màn hình của mobile thường có kích thước nhỏ, chỉ bằng 1/10
kích thước màn hình của PC.

-

Tương tác với giao diện: Do mobile giờ đây thường không có nút bấm, vì vậy,
tương tác chính của người dùng với mobile chỉ là tương tác chạm với màn hình.Vì
kích thước màn hình nhỏ nên khi tương tác khi chơi game có nhiều nút trên màn
hình là khá khó khăn.

Hiện nay, trên GooglePlay, số lượng game 2D vượt trội so với số lượng game
3D. Điều này chứng tỏ game 2D vẫn có sức hút rất lớn đối với người sử dụng TBDĐ.
Dù game 3D có thể có giao diện đẹp hơn, thật hơn so với game 2D nhưng do các đặc
thù trên của TBDĐ, game 2D vẫn là thu hút người sử dụng TBDĐ. Mặt khác, game
2D so với game 3D thì dễ làm hơn so với game 3D. Thời gian tạo 1 game 3D thường
kéo dài hơn nhiều so với game 2D do vấn đề thiết kế giao diện của game 3D phức tạp.
Vì vậy, số lượng các nhà phát triển game 2D cho TBDĐ lớn hơn rất nhiều so với số
lượng các nhà phát triển game 3D cho TBDĐ.
1.2. Mô thức lập trình văn bản (The textual programming paradigm)

Mô thức lập trình văn bản là mô thức lập trình cơ sở. LTV sử dụng các xâu kí
tự và các API được ngôn ngữ và các thư viện sử dụng cung cấp để viết nên chương
trình theo quy chuẩn mà ngôn ngữ lập trình sử dụng yêu cầu. Khi sử dụng mô thức lập
trình văn bản, LTV sẽ nắm được rõ ràng luồng dữ liệu, luồng xử lý của chương trình
mình viết. Các giảng viên thường sử dụng mô thức này để truyền tải cho sinh viên.
Vấn đề thường gặp khi lập trình giao diện game 2D bằng mô thức lập trình văn
bản:
Hiện nay, khi sử dụng các thư viện hỗ trợ lập trình game 2D trên TBDĐ bằng
ngôn ngữ Java (Libgdx, Dwarf FW, AndEngine, …), GD thường phải tự mình lập
trình giao diện cho game 2D bằng cách gọi các hàm API mà thư viện hỗ trợ. Xét 1

kịch bản sau: Hiển thị 1 Label có nội dung là “Đồ án tốt nghiệp” lên trên màn hình
tại vị trí góc trên bên trái màn hình, cách mép trái màn hình 1 khoảng hợp lý.
Thông thường, GD sẽ phải làm theo các bước sau:
-

Bước 1: Khai báo 1 biến thuộc kiểu Label là label.

-

Bước 2: Khởi tạo label với nội dung là “Đồ án tốt nghiệp”.

-

Bước 3: Đặt vị trí của label là x, y.

-

Bước 4: Chạy thử chương trình.

-

Bước 5: Xem kết quả hiển thị, nếu hiển thị không đúng như mong đợi thị quay lại


6

bước 3.
Trong quá trình lập trình giao diện cho game 2D, GD không thể tưởng tượng
hết được những gì mình lập trình ra sẽ hiển thị như thế nào. Vì vậy, vòng lặp từ bước 3
đến bước 5 thường bị lặp đi lặp lại nhiều lần, có thể gây ra nhầm lẫn và tốn thời gian

cho GD.Vì vậy, đối với GD, việc lập trình giao diện cho game 2D bằng mô thức lập
trình văn bản thường là việc gây tâm lý ức chế. Để giải quyết vấn đề này, 1 công cụ
hay plugin có thể giúp GD thiết kế giao diện cho game 2D 1 cách trực quan. GD thay
vì phải ngồi tưởng tượng màn hình sẽ xuất hiện như thế nào với những dòng lệnh mà
mình lập trình mà có thể tự mình thiết kế trực quan kéo thả, chỉnh sửa các đối tượng
đồ họa trên chính màn hình của mình mà luôn chắc chắn màn hình trên các thiết bị đầu
cuối của người dùng sẽ hiển thị như trên màn hình hiển thị của mình. Bài toán được
đặt ra là: Làm thế nào để chuyển đổi các đối tượng đồ họa hiển thị trên thiết bị đầu
cuối của người dùng sang thành các đối tượng đồ họa hiển thị trên màn hình của
GD.
Do vậy, em đề xuất đề tài: Trực quan hóa thiết kế giao diện 2D cho các trò
chơi trên TBDĐ với giải pháp là: Xây dựng 1 plugin cho IDE eclipse hỗ trợ việc
thiết kế giao diện 2D cho các trò chơi trên thiết bị di động 1 cách trực quan, sử
dụng thư viện Libgdx.
1.3. Mô thức lập trình trực quan (The visual programming paradigm)

Khi sử dụng mô thức lập trình trực quan, thay vì phải sử dụng các xâu kí tự và
API mà ngôn ngữ lập trình và thư viện được sử dụng cung cấp, LTV có thể thiết kế
chương trình 1 cách trực quan hơn. VPP cho phép lập trình với các biểu thức trực qua,
sắp đặt không gian của các văn bản và các biểu tượng đồ họa, được sử dụng như các
phần tử của cú pháp hoặc ký hiệu phụ.
Các lợi ích của VPP:
-

Khái niệm lập trình ít hơn

-

Tính cụ thể

-

Mô tả rõ ràng các mối quan hệ

-

Ngay lập tức phản hồi trực quan

-

Loại bỏ một bước trung gian trong quá trình của việc tạo ra một chương trình


7

CHƯƠNG 2: TÌM HIỂU VỀ ECLIPSE PLATFORM, SWT, THƯ VIỆN
LIBGDX
2.1. Eclipse platform

Eclipse là 1 platform được thiết kế từ điểm bắt đầu là xây dựng tích hợp các
công cụ phát triển web và ứng dụng.Eclipse cung cấp 1 model giao diện người dùng
thường gặp để làm việc với các công cụ. Nó được thiết kế để chạy trên nhiều hệ điều
hành khác nhau trong khi cung cấp trình tích hợp mạnh mẽ với mỗi hệ điều hành.
Eclipse cho phép nhà phát triển phát triển plugin mới và gắn vào các IDE để mở rộng
hệ thống.
Cấu trúc của Eclipse platform:

Hình 1.1: Cấu trúc của Eclipse platform.

Platform

runtime core

Nhân của platform runtime (Platform SDK roadmap) thực thi
runtime engine bắt đầu các platform base, tự động phát hiện và chạy
plugin. Một plug-in là một thành phần cấu trúc mô tả chính nó vào
hệ thống sử dụng một file OSGi manifest (MANIFEST.MF) và một
file plug-in manifest (plugin.xml). Các nền tảng duy trì một registry
của plug-in đã được cài đặt và các chức năng mà chúng cung cấp.


8

Resouce
management

Việc plugin quản lý nguồn tài nguyên xác định một mô hình tài
nguyên chung để quản lý các artifact của công cụ plug-ins. Plug-in
có thể tạo và sửa đổi các dự án, thư mục, và các tập tin để tổ chức và
lưu trữ artifact phát triển trên ổ cứng.

Workbench
UI

Giao diện workbench plug-in thực hiện các giao diện workbench và
xác định một số điểm mở rộng cho phép plug-in khác để góp phần
menu và thanh toolbar actions, kéo và thả các operations, dialogs,
wizards, và tùy chỉnh views và editor.

SWT

Standard Widget Toolkit (SWT) là một mức độ thấp, hệ điều hành
độc lập với bộ công cụ , hỗ trợ tích hợp platform và API di động.

Jfaces

Framework Jface cung cấp các cấu trúc ứng dụng cấp cao hơn cho
các dialogs, wizards, actions, preferences, và quản lý widget.

Team support

Các plug-in cho phép nhóm các plug-in khác xác định và đăng ký
triển khai cho nhóm lập trình, truy cập nguồn lưu trữ, và phiên bản.
Eclipse SDK bao gồm một plug-in CVS sử dụng sự hỗ trợ nhóm để
cung cấp hỗ trợ CVS khách hàng trong SDK.

Debug support Plugin debug cho phép các plugin khác thực thi ngôn ngữ chương
trình cụ thể và gỡ lỗi.
Help system

Plugin help thực thi 1 platform tối ưu help web server. Các web
server tài liệu bao gồm tiện ích đặc biệt để cho phép plug-in để tham
chiếu tới các tập tin.

JDT

JDT plugin mở rộng platform workbench bằng cách cung cấp các
tính năng cụ thể cho việc chỉnh sửa, xem, biên dịch, gỡ lỗi và chạy
code Java.

PDE

PDE plugin cung cấp các công cụ để tự động tạo, điều khiển, gỡ lỗi
và triển khai plugin.

2.2. SWT (The standard widget toolkit)
SWT là 1 bộ công cụ tiện ích mã nguồn mở cho Java, được thiết kế để cung cấp khả
năng truy cập hiệu quả, di động đến giao diện của các thiết bị của hệ điều hành mà nó được
thực thi. SWT được đánh giá là bộ công cụ đơn giản hơn Swing do có ít hơn các tính năng
không liên quan cho các nhà phát triển thông thường. Mặc dù SWT không thực thi theo kiến
trúc MVC phổ biến được sử dụng trong Swing và nhiều bộ công cụ GUI cấp cao khác nhưng
thư viện Jface (được phát triển như 1 phần trong dự án Eclipse) vẫn cung cấp 1 nền tảng độc
lập, theo mô hình trừu tượng MVC cấp cao dựa trên SWT. Nhà phát triển có thể chọn sử dụng
Jface dựng các mô hình dữ liệu linh hoạt và trừu tượng hơn cho các SWT control phức tạp.


9
SWT không được có sẵn trên tất cả các nền tảng Java.Tuy nhiên, SWT đã cung cấp hỗ
trợ nhiều nền tảng khác nhau. Đến tháng 3/2012, SWT đã hỗ trợ cho các nền tảng sau:
-

Windows XP, Windows Vista, Windows 7:
 Win32
 WPF
Unix-like: AIX, FreeBSD, Linux, HP-UX, Solaris:
 GTK+
 Motif
OS X:
 Cocoa
Pocket PC

2.3. Thư viện Libgdx và sự hỗ trợ thiết kế giao diện 2D cho mobile game của thư viện
Libgdx
2.3.1. Thư viện Libgdx
Libgdx là 1 framework phát triển game được viết bằng ngôn ngữ Java với 1 số thành
phần viết bằng ngôn ngữ C và C++ để tăng hiệu năng cho mã. Libgdx cho phép phát triển trò
chơi cho cả thiết bị di động và PC mà chỉ sử dụng 1 mã nguồn cơ bản. Libgdx là crossplatform, hỗ trợ nhiều nền tảng khác nhau. Hiện nay, Libgdx đã hỗ trợ các nền tảng
Windows, Linux, Mac OSX, Android, iOS và Web với WebGL hỗ trợ.
Libgdx cho phép nhà phát triển viết, kiểm thử, sửa lỗi ứng dụng ngay trên PC của họ và sử
dụng mã nguồn tương tự trên Android. Libgdx trừu tượng hóa những khác biệt giữa 1 ứng
dụng Windows/Linux và 1 ứng dụng Android. Vòng đời phát triển bình thường bao gồm phát
triển dự án ở trên PC càng nhiều càng tốt mà vẫn chắc chắn rằng dự án đó vẫn hoạt động trên
Android. Mục đích chính của Libgdx là cung cấp khả năng tương thích giữa PC và các thiết
bị di động, với sự khác biệt là tốc độ và xử lý điện năng.
Libgdx sử dụng 1 số thư viện thành phần thứ 3 để cung cấp chức năng cho nó, bao
gồm: Lightweight Java Game Library, OpenGL, FreeType, mpg123, Vorbis, SoundTouch
Audio Processing Library, Box2D, OpenAL, and Kiss FFT.
2.3.2. Sự hỗ trợ thiết kế giao diện 2D cho mobile game
Libgdx cung cấp khái niệm Scene2d. Scene2d là đồ thị 2D để xây dựng các ứng dụng
và giao diện sử dụng một thống phân cấp của các actors. Nó cung cấp các tính năng sau:
- Xoay (Rotation) và vẽ theo tỉ lệ (Scale) 1 nhóm sẽ được áp dụng cho tất cả các actors nằm
trong nhóm đó. Những actors đó luôn luôn làm việc trong 1 hệ thống điều phối của chúng,
sự biến đổi của nhóm chứa các actors đó (được gọi là parent) được áp dụng rõ ràng.
- Đơn giản hóa bản vẽ 2D bằng SpriteBatch. Mỗi actor vẽ ra trong hệ thống không xoay và
chưa định tỷ lệ của chúng, nơi điểm (0,0) là góc dưới bên trái của actor.
- Phát hiện các actor đã xoay và đã thu nhỏ lại.
- Định tuyến các đầu vào (input) và các sự kiện khác tới actor thích hợp. Hệ thống sự kiện
rất linh hoạt, cho phép các actors cha xử lý sự kiện trước hoặc sau các actors con của
chúng.
- Hệ thống action dễ thao tác của các actor theo thời gian. Actions có thể được xâu chuỗi và
được kết hợp lại thành các hiệu ứng phức tạp.

Scene2d được trang bị tốt cho việc bố trí (laying out), vẽ (Drawing), và xử lý các đầu
vào của game menu, HUD overlays, công cụ (tools) và các giao diện khác. Gói scene2d.ui
cung cấp nhiều đối tượng đồ họa và các tiện ích khác dành riêng cho việc xây dựng UI.


10

CHƯƠNG 3: TRỰC QUAN HÓA THIẾT KẾ GIAO DIỆN GAME 2D
TRÊN THIÊT BỊ DI ĐỘNG
3.1. Phân tích giải pháp
3.1.1. Usecases
3.1.1.1. Tác nhân
Game developer (GD)
GD là những nhà làm game, những người có kiến thức về lập trình game 2D trên
mobile.
3.1.1.2. Danh sách các usecase
a)
b)
c)
d)
e)
f)
g)
h)
i)
j)

Tạo 1 project mới
Tạo 1 file thiết kế giao diện
Tạo 1 PTGD mới

Chọn 1 PTGD
Chỉnh sửa thuộc tính cho 1 PTGD
Xóa 1 PTGD
Xem mã nguồn file giao diện
Lưu 1 file giao diện
Mở 1 file giao diện
Sinh mã

3.1.1.3. Biểu đồ Usecases

Hình 3.1: Biểu đồ các Usecases các chức năng của plugin
Hình 2 mô tả biểu đồ Usecase phân tích các chức năng của plugin. Hệ thống có 1 tác
nhân là GD. GD có thể thực hiện các chức năng: Tạo 1 project mới có tích hợp thư viện
Libgdx, tạo 1 file thiết kế giao diện mới, tạo 1 phần tử giao diện mới, chọn 1 hoặc 1 nhóm
các phần tử giao diện, chỉnh sửa thông số 1 phần tử giao diện, xóa 1 hoặc 1 nhóm các
phần tử giao diện, xem mã nguồn, lưu 1 file thiết kế giao diện, mở 1 file thiết kế giao diện.


11
3.1.2. Kịch bản Usecases
3.1.2.1. GD – Tạo 1 project mới

Tên usecase:

ID:

Độ ưu tiên:

Tạo 1 project mới

UC1.1

Cao

Tác nhân: GD
Mô tả tóm tắt:
Usecase này mô tả quá trình tạo ra các project mới có tích hợp thư viện libgdx. Từ đó,
GD có thể thực hiện thiết kế giao diện trực quan và lập trình logic cho game.
Mục tiêu: Tạo được 3 project theo cấu trúc có tích hợp thư viện libgdx là:
-

Core-project: chứa tất cả các file mã nguồn chính của game, bao gồm các file thiết
kế giao diện, các file xử lý logic cho game.

-

Android-project: có chứa tất cả các resource của game. Khi chạy tạo file apk để có
thể chạy được trên các máy hệ điều hành Android.

-

Desktop-project (tùy chọn): Project có thể chạy trên desktop của GD.

Thước đo thành công:
-

Tạo được 2 project theo mẫu

-

Các project được import vào eclipse và xuất hiện trên khung Package explore.

-

GD có thể trực tiếp chạy được Desktop-project mà không bị lỗi.

Điều kiện tiên quyết: IDE eclipse đã được bật lên.
Mối quan hệ:
-

Include: Eclipse system – Tạo project mới

-

Extend: Ko

-

Generalization: Ko

Kịch bản sử dụng:
-

GD chọn chức năng tạo project mới của eclipse bằng 2 cách sau (đều đã được hỗ
trợ bởi eclipse).
o Chọn File  New  Project.
o Ấn Alt + Shift + N  Project.

-

Eclipse hiển thị hộp thoại chọn kiểu project.

-

GD chọn dòng “Libgdx Project” trong category “Libgdx development”

-

Eclipse hiển thị 1 hộp thoại, trên đó hiển thị form thông tin mà GD cần nhập gồm
các thông tin sau:
o Project name: xâu kí tự
o Project main package: xâu kí tự


12
o Project main class: xâu kí tự
o Project destination folder: xâu kí tự
o Create desktop project: đánh dấu vào ô checkbox để lựa chọn, mang giá trị

true-false
-

GD nhập thông tin của project vào trong form.
o Project name: Nhập từ bàn phím
o Project main package: Nhập từ bàn phím
o Project main class: Nhập từ bàn phím
o Project destination folder: 2 phương thức nhập


Nhập từ bàn phím



Chọn nút “Browse”  chọn folder từ hôp thoại hiện ra

-

GD ấn Finish.

-

Hệ thống nhận thông tin

-

Hệ thống tạo các project theo thông tin đã nhập.
Nếu trường Create Desktop Project được chọn thì hệ thống sẽ tạo ra 3 project:
Core-project, Android-Project và Desktop Project. Còn trường Create Desktop
Project không được chọn thì hệ thống chỉ tạo 2 project là Core-Project và
Android-Project.

-

Hệ thống import các project đã được tạo vào workspace hiện tại của eclipse.

Giả thiết:
-

Nếu GD không nhập đầy đủ thông tin thì hệ thống thông báo lỗi và yêu cầu GD
nhập đầy đủ thông tin vào form.

-

Các lỗi của thông tin Project Name:
o Project name là xâu kí tự rỗng  hệ thống hiển thị lỗi: “Project name can’t

be null!”
o Project name chứa 1 trong các kí tự “'.,:?;”  hệ thống hiển thị lỗi: “Project

name can’t contain 1 of this characters: .,:?;”
-

Các lỗi của thông tin Project Main Package:
o Project Main Package là xâu kí tự rỗng  hệ thống hiển thị lỗi: “Project

main package can’t be null!”
o Project Main Package chứa 1 trong các kí tự “.,:?;” hệ thống hiển thị lỗi:

“Project main package can’t contain 1 of this chacracters: ,:?;”
o Project Main Package chứa kí tự cuối là ‘.’  hệ thống hiển thị lỗi: “Project

main package can’t end by ‘.’”
-

Các lỗi của thông tin Project Main Class:


13
o Project Main Class là xâu kí tự rỗng  hệ thống hiển thị lỗi: “Project main

class can’t be null!”
o Project Main Class chứa 1 trong các kí tự “.,:?;” hệ thống hiển thị lỗi:

“Project main class can’t contain 1 of this chacracters: ,:?;”
o Project Main Class bắt đầu bằng kí tự chữ thường hoặc chữ số hệ thống

hiển thị lỗi: “Project main class can’t begin by lower character or number.”
-

Các lỗi của thông tin Project Destination Folder:
o Project Destination Folder là xâu kí tự rỗng  hệ thống hiển thị lỗi:

“Project Destination Folder can’t be null”
o Project Destination Folder không tồn tại  hệ thống hiển thị lỗi: “Project

destination folder is not existed.”
3.1.2.2. GD – Tạo 1 file thiết kế giao diện

Tên usecase:

ID:

Tạo 1 file thiết kế giao diện UC2.1

Độ ưu tiên:
Cao

Tác nhân: GD
Mô tả tóm tắt:
Usecase này mô tả quá trình tạo ra 1 file thiết kế giao diện mới.

Mục tiêu: Tạo ra được 1 file thiết kế giao diện có phần mở rộng là gdx.
Thước đo thành công:
-

Tạo được 3 file là FILE_NAME.gdx, FILE_NAME.java và FILE_NAME.xml.

Điều kiện tiên quyết:
-

GD đã tạo ra các project có tích hợp thư viện libgdx.

-

Các project được tạo ra đã được import vào trong workspace hiện tại của eclipse.

Mối quan hệ:
-

Include: Eclipse system – Tạo 1 file mới

-

Extend: Ko

-

Generalization: Ko

Kịch bản sử dụng:
-

GD chọn chức năng tạo 1 file mới của eclipse bằng 2 cách sau: (đều đã được hỗ
trợ bởi eclipse)
o Chọn File  New  File
o Ấn Alt + Shift + N  File

-

Eclipse hiển thi hộp thoại tạo file mới.


14
-

GD nhập từ bàn phím FILE_NAME.gdx, trong đó FILE_NAME là tên file mà GD
muốn tạo.

-

GD ấn Finish.

-

Hệ thống tạo ra 2 file FILE_NAME.mpe và FILE_NAME.java

Giả thiết: Ko.
3.1.2.3. GD – Tạo 1 PTGD mới

Tên usecase:

ID:

Độ ưu tiên:

Tạo 1 PTGD mới

UC03

Cao

Tác nhân: GD
Mô tả tóm tắt:
Usecase này mô tả quá trình tạo ra 1 PTGD nói chung hiển thị được trong vùng
DRAG_DROP của eclipse.
Mục tiêu:
-

PTGD hiển thị trên vùng DRAG_DROP của eclipse.

Thước đo thành công:
-

PTGD hiển thị được trên vùng DRAG_DROP của editor.

Điều kiện tiên quyết:
-

File thiết kế giao diện mpe đã được mở.

Mối quan hệ:

-

Include: Eclipse system – Hiển thị Property View

-

Extend: Ko

-

Generalization: Ko

Kịch bản sử dụng:
-

GD dùng chuột click, giữ vào 1 trong các PTGD ở trong vùng PALETTE.

-

GD giữ chuột rê ra vùng DRAG_DROP của editor.

-

GD thôi giữ chuột.

-

Hệ thống kiểm tra tại vị trí GD vừa thả chuột đã tồn tại 1 PTGD nào khác chưa.
Nếu chưa tồn tại  Tạo 1 PTGD mới tại vị trí đó.
Nếu đã tồn tại  Kiểm tra PTGD cuối cùng có vùng bao phủ chứa vị trí đó,

tạm gọi là PTGD x.
•

Nếu PTGD x là 1 thể hiện của Widget Group  Hệ thống thực hiện tạo mới
và sắp xếp PTGD mới tạo theo đúng quy tắc của mỗi loại Widget Group.

•

Nếu PTGD x không phải là 1 thẻ hiện của Widget Group  Hệ thống tạo 1


15

PTGD mới tại vị trí vừa thả chuột.
-

Hệ thống hiển thị đường viền xung quanh của PTGD mới được tạo.

-

Property View hiển thị form thông số mặc định của PTGD mới tạo. Form thông số
mặc định tương ứng với mỗi loại PTGD có ở trong phần phụ lục.

Giả thiết: Ko
3.1.2.4. GD – Chọn 1 PTGD

Tên usecase:

ID:

Độ ưu tiên:

Chọn 1 PTGD

UC3.1

Bình thường

Tác nhân: GD
Mô tả tóm tắt:
Usecase này mổ tả các thao tác mà GD cần sử dụng để chọn 1 PTGD có xuất hiện
trong vùng editor của file thiết kế giao diện và các phản hồi của hệ thống đối với thao
tác của GD. Từ đó GD sẽ có các thao tác tiếp theo với riêng PTGD đã được chọn.
Mục tiêu: Chọn được 1 PTGD.
Thước đo thành công:
-

PTGD được chọn phải có khung nổi bật xung quanh để phân biết được với các
PTGD khác.

Điều kiện tiên quyết:
-

PTGD phải nằm trong vùng DRAG_DROP của editor.

Mối quan hệ:
-

Include: Eclipse system – Hiển thị Property View

-

Extend: Ko

-

Generalization: Ko

Kịch bản sử dụng:
-

GD sử dụng chuột để click lên PTGD.

-

Hệ thống xác định PTGD cuối cùng có vùng bao phủ với vị trí con trỏ chuột.

-

Hệ thống hiển thị khung bao quanh PTGD được chọn.

-

Hệ thống hiển thị form thông số của PTGD trên khung Property View của eclipse.

Giả thiết:
-

Nếu vị trí con trỏ chuột không trùng với bất kì PTGD nào thì hệ thống không xử lý
gì.

16
3.1.2.5. GD – Chọn 1 nhóm PTGD

Tên usecase:

ID:

Độ ưu tiên:

Chọn 1 nhóm PTGD

UC3.1

Bình thường

Tác nhân: GD
Mô tả tóm tắt:
Usecase này mổ tả các thao tác mà GD cần sử dụng để chọn 1 nhóm PTGD có xuất
hiện trong vùng editor của file thiết kế giao diện và các phản hồi của hệ thống đối với
thao tác của GD. Từ đó GD sẽ có các thao tác tiếp theo với riêng PTGD đã được chọn.
Mục tiêu: Chọn được 1 PTGD.
Thước đo thành công:
-

Các PTGD được chọn phải có khung nổi bật xung quanh để phân biết được với các
PTGD khác.

Điều kiện tiên quyết:

-

PTGD phải nằm trong vùng DRAG_DROP của editor.

Mối quan hệ:
-

Include: Eclipse system – Hiển thị Property View

-

Extend: Ko

-

Generalization: Ko

Kịch bản sử dụng:
-

GD click giữ chuột trái, di 1 vùng hình chữ nhật lên vùng DRAG_DROP của
editor.

-

Hệ thống xác định các PTGD có vùng bao phủ nằm trong vùng hình chữ nhật do
chuột tạo ra.

-

Hệ thống hiển thị khung xung quanh PTGD được chọn.

-

Hệ thống làm rỗng khung Property View.

Giả thiết:
-

Nếu vị trí con trỏ chuột không trùng với bất kì PTGD nào thì hệ thống không xử lý
gì.

3.1.2.6. GD – Chỉnh sửa thuộc tính 1 PTGD
Tên usecase:

ID:

Độ ưu tiên:

Kéo 1 PTGD

UC05

Bình thường

Tác nhân: GD
Mô tả tóm tắt:


17

Usecase này mô tả các thao tác mà GD sử dụng để thực hiện chỉnh sửa thông số vị trí
(x, y) và kích thước (width, height) của 1 PTGD nói chung.
Mục tiêu: Kéo được PTGD.
Thước đo thành công:
-

Nếu PTGD không thuộc 1 Widget group nào cả thì PTGD hiển thị đúng theo thông
số vừa chỉnh sửa.

-

Nếu PTGD thuộc 1 Widget group thì PTGD hiển thị đúng theo quy tắc của mỗi
loại Group và thông số vừa chỉnh sửa.

Điều kiện tiên quyết:
-

GD đã thực hiện chọn 1 PTGD.

Mối quan hệ:
-

Include: GD – Chọn 1 PTGD

-

Extend: Ko

-

Generalization: Ko

Kịch bản sử dụng:
-

GD thực hiện thay đổi thông số vị trí (x,y ) và kích thước (width, height) của
PTGD bằng 2 cách sau đây:
o Chỉnh sửa trực tiêp tại trường x, y, width, height tại form thông số của

PTGD ở Property View, trong đó x, y, width, height nhận giá trị là số
nguyên.
o Sử dụng chuột, giữ và kéo trên màn hình để thay đổi 2 thông số trên.
-

Hệ thống thực hiện thay đổi vị trí và kích thước của PTGD:
o Nếu PTGD không thuộc 1 Widget group nào thì PTGD hiển thị đúng theo

thông số vừa được chỉnh sửa.
o Nếu PTGD thuộc 1 Widget group thì PTGD hiển thị đúng theo quy tắc của

mỗi loại Group và thông số được chỉnh sửa.
Giả thiết:
-

Nếu thông số x, y không phải là số nguyên  hệ thống hiển thị lỗi: “Position x, y
must be integer number. ”.

-

Nếu thông số width, height không phải số nguyên  hệ thống hiển thị lỗi: “Size
width, height must be integer number.”

3.1.2.7. GD – Xóa 1 PTGD

Tên usecase:

ID:

Độ ưu tiên:

Xóa 1 PTGD

UC06

Bình thường


18

Tác nhân: GD
Mô tả tóm tắt:
Usecase này mô tả quá trình xóa 1 PTGD hiển thị trên vùng hiển thị của editor.
Mục tiêu: Xóa PTGD được chọn và tất cả các PTGD con nằm trong nó.
Thước đo thành công:
-

PTGD và tất cả các PTGD con nằm trong nó không hiển thị trên editor nữa.

Điều kiện tiên quyết:

-

GD đã thực hiện chọn PTGD.

Mối quan hệ:
-

Include: GD - Chọn 1 PTGD.

-

Extend: Ko

-

Generalization: Ko

Kịch bản sử dụng:
-

GD ấn phím Delete.

-

Hệ thống nhận lệnh xóa và PTGD đã được chọn.

-

Hệ thống làm rỗng khung Property View.

-

Hệ thống thực hiện xóa đệ quy:
o Xóa các PTGD con nằm trong PTGD được chọn
o Xóa PTGD được chọn.

Giả thiết: Ko.
3.1.2.8. GD – Lưu 1 file thiết kế giao diện

Tên usecase:

ID:

Lưu 1 file thiết kế giao UC07
diện

Độ ưu tiên:
Bình thường

Tác nhân: GD
Mô tả tóm tắt:
Usecase này mô tả các thao tác mà GD thực hiện để lưu 1 file thiết kế giao diện và các
hoạt động tuần tự của hệ thống khi lưu file thiết kế giao diện.
Mục tiêu: Lưu 1 file thiết kế giao diện.
Thước đo thành công:
-

File FILE_NAME.java được thay đổi nội dung theo quy tắc ánh xạ (ở phần dưới)

-

2 file FILE_NAME.gdx và FILE_NAME.java được lưu.


19

Điều kiện tiên quyết:
-

Eclipse editor đang hiển thị file FILE_NAME.mpe

Mối quan hệ:
-

Include: Sinh mã, Eclipse system – Lưu 1 file

-

Extend: Ko

-

Generalization: Ko

Kịch bản sử dụng:
-

GD chọn chức năng lưu file của eclipse bằng 2 cách sau: (đều đã được hỗ trợ bởi
eclipse):
o Ấn Ctrl + S

o Chọn File  Save

-

Hệ thống thực hiện chức năng Generate code theo đúng quy tắc ánh xạ (ở phần
dưới).

-

Hệ thống lưu code vừa được sinh ra vào trong file FILE_NAME.java.

-

Hệ thống lưu file FILE_NAME.gdx.

Giả thiết: Ko.
3.1.2.9. GD – Xem mã nguồn file thiết kế giao diện

Tên usecase:

ID:

Xem mã nguồn 1 file thiết UC08
kế giao diện

Độ ưu tiên:
Bình thường

Tác nhân: GD
Mô tả tóm tắt:

Usecase này mô tả các thao tác mà GD thực hiện để xem mã nguồn của file thiết kế
giao diện đang được mở trên eclipse editor và các hành động tuần tự của hệ thống để
tạo ra file mã nguồn đó.
Mục tiêu: Lưu 1 file thiết kế giao diện.
Thước đo thành công:
-

Nội dung mã nguồn được hiển thị trên editor.

Điều kiện tiên quyết:
-

Eclipse editor đang hiển thị file FILE_NAME.mpe

Mối quan hệ:
-

Include: GD – Chọn 1 PTGD.

-

Extend: Ko


20
-

Generalization: Ko

Kịch bản sử dụng:

-

GD chọn tab Soure code bằng cách click chuột và tab Source code.

-

Hệ thống thực hiện chức năng Generate code theo đúng quy tắc ánh xạ (ở phần
dưới).

-

Hệ thống hiển thị code vừa được sinh ra trên editor.

Giả thiết: Ko.
3.1.2.10. GD – Chỉnh sửa thông số 1 PTGD

Tên usecase:

ID:

Chỉnh sửa thông số của 1 UC13
PTGD

Độ ưu tiên:
Bình thường

Tác nhân: GD
Mô tả tóm tắt:
Usecase này mô tả các thao tác mà GD thực hiện để chỉnh sửa thông số PTGD.
Mục tiêu: Chỉnh sửa các thông số của PTGD.

Thước đo thành công:
-

PTGD được hiển thị đúng ra màn hình.

Điều kiện tiên quyết:
-

GD đã chọn PTGD.

-

Property View hiển thị form thông số của PTGD.

Mối quan hệ:
-

Include: Ko

-

Extend: GD – Tạo 1 Action mới, GD – Chỉnh sửa thông số 1 Action.

-

Generalization: Ko.

Kịch bản sử dụng:
-

Đối với mỗi loại PTGD có 1 kiểu kịch bản riêng. Xem them các usecase bên dưới
để biết thêm chi tiết.

Giả thiết: Ko.
3.1.2.11. GD – Mở 1 file thiết kế giao diện

Tên usecase:

ID:

Mở 1 file thiết kế giao diện UC11

Độ ưu tiên:
Bình thường


21

Tác nhân: GD
Mô tả tóm tắt:
Usecase này mô tả các thao tác mà GD thực hiện để mở file thiết kế giao diện và các
bước mà hệ thống thực hiện để xây dựng lại file giao diện.
Mục tiêu:
Thước đo thành công:
-

File thiết kế giao diện được hiển thị thành công.

Điều kiện tiên quyết:
-

Eclipse package explore đã được hiển thị.

Mối quan hệ:
-

Include: Ko

-

Extend: Ko

-

Generalization: Ko

Kịch bản sử dụng:
-

GD click chuột vào file có phần mở rộng là gdx.

-

Hệ thống nhận tên file là FILE_NAME.gdx, đọc thông tin file FILE_NAME.xml.

-

Hệ thống đọc thông tin của các PTGD từ file FILE_NAME.xml.

-

Hệ thống xây dựng lại danh sách các PTGD dựa trên thông tin vừa đọc được.

-

Hệ thống hiển thị các PTGD trên màn hình.

Giả thiết: Ko.
3.1.2.11. Sinh mã

Tên usecase:

ID:

Độ ưu tiên:

Sinh mã

UC12

Bình thường

Tác nhân: Ko
Mô tả tóm tắt:
Usecase này mô tả các bước mà hệ thống thực hiện để sinh mã.
Mục tiêu:
-

Sinh ra 2 file FILE_NAME.java và FILE_NAME.xml

Thước đo thành công:
-

Nội dung 2 file FILE_NAME.java vàFILE_NAME.xml được xây dựng theo cấu
trúc (định nghĩa ở phần dưới).

Điều kiện tiên quyết:


22
-

GD thực hiện thao tác lưu file thiết kế giao diện.

Mối quan hệ:
-

Include: Ko

-

Extend: Ko

-

Generalization: Ko

Kịch bản sử dụng:
-

Hệ thống tạo file FILE_NAME.java và FILE_NAME.xml trong cùng thư mục
của file thiết kế giao diện đang làm.

-

Hệ thống đọc thông tin của mỗi phần tử giao diện.

-

Thêm thông tin của mỗi phần tử giao diện đó vào file FILE_NAME.java theo luật
( định nghĩa ở phần dưới).

-

Thêm thông tin của mỗi phần tử giao diện đó vào file FILE_NAME.xml theo luật
( định nghĩa ở phần dưới).

Giả thiết: Ko.
3.2. Thiết kế giải pháp
3.2.1. Thiết kế chức năng
3.2.1.1. Chức năng tạo 1 project mới

Hình 2.2: Biểu đồ tuần tự cho chức năng tạo 1 project mới.


23
3.2.1.2. Chức năng tạo 1 PTGD mới

Hình 3.3 : Biểu đồ tuần tự cho chức năng tạo 1 PTGD mới.
3.2.1.3. Chức năng chọn 1 hoặc 1 nhóm PTGD

Hình 3.4 : Biểu đồ tuần tự cho chức năng tạo 1 hoặc 1 nhóm PTGD.
3.2.1.4. Chức năng xóa 1 hoặc 1 nhóm các PTGD

Hình 3.5 : Biểu đồ tuần tự cho chức năng xóa 1 hoặc 1 nhóm PTGD.


24
3.2.1.5. Chức năng lưu 1 file thiết kế giao diện

Hình 3.6 : Biểu đồ tuần tự cho chức năng lưu 1 file thiết kế giao diện.
3.2.1.6 . Chức năng chỉnh sửa thông số vị trí x, y của PTGD

Hình 3.7: Biểu đồ tuần tự cho chức năng chỉnh sửa thông số vị trí x, y của 1 PTGD.


25
3.2.1.7. Chức năng chỉnh sửa thông số kích thước width, height của PTGD

Hình 3.8: Biểu đồ tuần tự cho chức năng chỉnh sửa thông số kích thước width, height của 1
PTGD.
3.2.1.8. Chức năng chỉnh sửa các thông số của 1 PTGD bằng chuột trên Property View.

Hình 3.9: Biểu đồ tuần tự cho chức năng chỉnh sửa các thông số của 1 PTGD bằng chuột
trên Property View.