CS3284 Final Report FaceDestroyer

wattlexanaduΛογισμικό & κατασκευή λογ/κού

31 Οκτ 2013 (πριν από 3 χρόνια και 9 μήνες)

95 εμφανίσεις

1


CS3284 Final Report


FaceDestroyer




Feng Zhong Hui






A0072073M

Do Anh Minh







U087229L

Lai Yit Hann







U
0807062
U

Zhou Wan Yi







U096822X














2


Contents

1. Requirement
Documentation

................................
................................
................................

4

1.2. User Requirements

................................
................................
................................
......

4

1.3. Functional System Requirements
................................
................................
.....................

5

1.4. Non
-
functional System Requirements
................................
................................
................

5

2. Design Documentation

................................
................................
................................
.......

6

2.1. Main Design Concept

................................
................................
................................
...

6

2.2. System Architect

................................
................................
................................
.........

7

2.3. Components and GUI

................................
................................
................................
...

9

2.3.1. ChoiceScreen

................................
................................
................................
.......

9

2.3.2. ImageChoiceScreen

................................
................................
...............................

9

2.3.3. AccessoryScreen
................................
................................
................................
..

10

2.3.5. GameLevel2
................................
................................
................................
........

12

2.3.6. Gam
eLevel3
................................
................................
................................
........

12

2.3.7. WinScreen

................................
................................
................................
..........

12

2.3.8. LoseScreen

................................
................................
................................
........

12

3. Implementation Report

................................
................................
................................
......

13

3.1.

Engine

................................
................................
................................
....................

13

3.2. Software Quality

................................
................................
................................
........

15

4. Test Report

................................
................................
................................
....................

15

5. USER GUIDE

................................
................................
................................
.................

18

5.1. Software Requirements
................................
................................
................................

18

5.
2. Game Description
................................
................................
................................
.......

18

5.2.1. Ready...Fight

................................
................................
................................
.......

18

5.2.2. Win
................................
................................
................................
...................

19

5.2.3. Lose

................................
................................
................................
.................

19

3


5.2.4. Limited T
ime

................................
................................
................................
.......

19

5.2.5. Camera

................................
................................
................................
.............

19

5.3.Play The Game

................................
................................
................................
.............

20

5.
3.1. Start

................................
................................
................................
.................

20

5.3.1.1. Level 1
-
EASY
................................
................................
................................
....

21

5.3.1.
2. Level 2
-
NORMAL

................................
................................
................................
..

22

5.3.1.3. Level 3
-
HARD

................................
................................
................................
......

23

5.3.2. Capture Face
................................
................................
................................
..........

23

5.3.2.1.

Choose Photo

................................
................................
................................
...

23

5.3.3. Customize

................................
................................
................................
.............

24

3.3.1 Male/Female

................................
................................
................................
........

24

5.3.3.2 Hairstyles
................................
................................
................................
..........

24

5.4. User Control

................................
................................
................................
.............

24

5.4.1. Normal Attack

................................
................................
................................
......

24

5.4.2. K.O.

................................
................................
................................
..................

24

5.4.3.

................................
................................
................................
........................

25

Special Attack (FIRE)

................................
................................
................................
....

25

5.4.4. Hit

................................
................................
................................
.......................

25

5.4.5. Miss

................................
................................
................................
.....................

25

5.4.6. Block

................................
................................
................................
....................

25

5.4.7 Defense (AI)
................................
................................
................................
............

25

6. Group A
chievements

................................
................................
................................
........

26

7. Individual Achievements

................................
................................
................................
....

26

Feng Zhonghui (Main Programmer, Project Lead)

................................
................................
.....

26

Do Anh Minh (GUI Designer and Assistant Programmer, Test and Evaluation)

................................
..

27

Lai Yit Hann (Sound Designer)

................................
................................
............................

27

4


Zhou Wan Yi (Animator)

................................
................................
................................
....

28

8. Evaluation Report

................................
................................
................................
............

28


1.

Requirement Documentation


1.1.
Project Objective


3DFR (3D Face Reconstruction) is technology developed by A* I2R which takes in a 2D facial
image and converts it into a 3D polygonal model. The goal is to create a game on mobile
platform that could showcase the application of this technology in games. Our

task is to build a
game that is fun, engaging, and most importantly, showcases the usefulness of 3DFR
technology with the reconstructed 3D face model as the focus area. For the first half of the
project, we have decided upon a game concept which satisfies

the objectives, which is a first
person fighting game. At the end of the project, our objective is to implement a first person
fighting game on the iOS, that has the features of taking/choosing a photo and convert to 3D
model, system to configure the mode
l, as well as
3

levels of gameplay with increasing difficulty.


1.2.
User Requirements

An interesting game where user could take a photo of someone and use that person’s face as
3D model and fight against in the game.

For Client, the game must demonstrate

the use of the 3D face construction technology. Hence,
the face has to be displayed prominently, with differentiations with game using just a 2D photo.
Such as rotation of the face, or even deformation where it could not be done nicely with 2D
photo.

For
User, the game has to be engaging. To be engaging, it requires certain level of challenge.
For this, we would need at least
3

levels for the game with increasing difficulty.

5




1.3.
Functional System Requirements


1.

Taking of photo or choosing of photo.

2.

Sendi
ng the photo online to the server and transmit back as a 3D model.

3.

The game should take in the 3D model and use it in the gameplay.

4.

The whole process should not take too much time, ideally below 10 seconds.

5.

Screen/system for player to customize the looks f
or their opponent.

6.

Touch input system where player swipe to launch attacks.

7.

3

levels with increasing difficulty. First level as practice/tutorial level where player get
used to the input system.
2nd

level the enemy could attack back
, and 3rd

level enemy
could block.

8.

Some decorations to better show that it is a 3d model, such as shading bruises onto the
face.

Requirements not necessary but good to have would be facial deformation.

1.4.
Non
-
functional System Requirements


Art assets for graphic
s interface, music and sound effects for the game.










6





2.
Design Documentation

2.1
.

Main Design Concept

As the client’s top priority is on showcasing the generated facial model, it is a requirement that
the facial model occupy most part of the screen.


The original target audience of the game is mostly for players who wish to vent their frustration
making u
se of facial reconstruction on someone they might not like. Hence, there are some
design decision that caters towards this group of players. However, we also do not wish for a
game where the only gameplay element is spamming of buttons and gaining gratific
ation from
the corresponding visual feedback. We understand that the key element in making a game fun is
to let player enter a state of “the flow”, where the game is not hard to be frustrating, yet not too
easy to be boring. Pressing of buttons to attack t
he AI repeatedly lacks challenge and turns out
to be boring easily, hence we also have a few design decisions to give players more challenge in
the game.


An accessory choice screen allows player to customize the opponent avatar. Currently, hairstyle
and
gender could be chosen. This feature is mainly catered towards player who just wish to vent
their frustration. Through customizing the avatar, player could potentially land the avatar in some
humiliating situations
-

such as a male face in a female body wi
th a nasty looking hairstyle.


Since the target platform for the game is on mobile devices with touch input, we have decided to
replace the direct button input with swipe gesture input. By using a swipe gesture input, player
7


would not be able to attack in

multiple methods at the same time as in button input. Also, it
increases the skill level required, as the player would require certain level of hand
-
eye
coordination to swipe the attack they want.


In first level, the AI for the opponent
does not attacks

and only tries to dodge user’s attack
. It
acts as more or less a tutorial for the player to get used to the controls and the gameplay.
The AI
does dodget user’s attacks though, t
ogether with the swipe input,
there is a small element of

challenge to the pl
ayer as he would have to coordinate his attack with the opponent movement.
Time limit is also added to give the player a sense of tension and creates a situation where the
player could actually lose.

At the 2nd

level, the opponent could strike back at the

player,
and the player would need to block
the opponent’s attack.

At the 3rd

level the opponent could block player attacks, and to get through his defense, player
would need to parry or block the opponent’s attack, this further increases the challenge and

interactive element of the game.

Different backgrounds are used to differentiate between the levels
-

A boxing ring for level 1,
a
warehouse for level 2,
an
d a chinatown street for level 3
.
P
iece
s

of originally composed music
ar
e also used for the backgr
ound
music of each level. Sound effects such as groans, screams,
as well as impact of attack are added to further add a sense of immersion and feedback to the
player.



2.2.
System Architect
8


9


The game is in Unity3D engine. This is required for the purpose of future
multi
-
platform compatibility. However, as Unity3D engine do not have
functions for native iOS functionalities such as picking image and accessing
the phone’s camera, we have to creat
e the function in native objective C and
have the unity3D game call the objective
-
C code. As for the network system
responsible for interfacing with the Face Reconstruction server. Previously it
was using Unity3D’s connection function, but it proved to be
too slow, with
connection taking as long as 30
-
40 seconds. Using native Objective
-
C code
for the networking call on the iPhone, this overhead is reduced and
connection time is reduced to less than 1
-
2 seconds.

With the image sent to the face reconstructio
n server, a zip file with 3d obj file
and the textures are sent back. This zip file then be unzipped and stored in
the iPhone document folder, which could then be accessed by the game.

The following sections will describe the separate components in the Un
ity
Game Interface.

2.3.
Components and GUI

2.3.1.
ChoiceScreen


ChoiceScreen scene is basically the main menu for the game.
Player could
choose to choose a photo to upload, set the accessories for the photo, or start
the game.

In the ChoiceScreen,
MainMenu script object controls the buttons in the scene
and the respective feedback calls.


2.3.2.
ImageChoiceScreen

In ImageChoiceScreen, it handles the choice of photo and uploading of it to
the server.
Etcetcera plugin is used here for calling of nativ
e iOS photopicker
function when choosing photo button is pressed. Once player has chosen a
photo, a callback is returned and we load the photo onto the preview plane to
10


show the player.
After which,
UploadPhoto is called by the script, which
accesses a fun
ction plugin on the native iOS side that uploads the image to
the server. Unity3D server uploading code is not used as it is too slow. Once
the 3D data is reconstructed from the server, d
ata is then then extracted using
FolderZipper class which decompresse
s a zip file.


2.3.3.
AccessoryScreen


AccessoryScreen is the customization screen for player to choose hair and
body before they can proceed to the game. There is 1 body model for male
and 1 body for female and 6 hair options to choose. Once players confirm
their choice, they will start the ga
me with their selected hair and body. There
will be added more accessories in the future like hats and specs.

In AccessoryScreen scene, Face object contains OBJ and LoadAccessories
scripts. OBJ simply reads from the .obj face model file and loads the face

model into the scene. While LoadAccessories controls the buttons in the
scene and their callbacks. The front and back buttons allows player to cycle
the hairstyle of the model, while male and female buttons chooses the body
and gender. Models are all load
ed upon scene load. LoadAccessories
chooses the model to be displayed. Player clicking back will simply go back to
the main menu with nothing saved. While if player clicks on save
LoadAccessories will store the hairstyle and gender chosen into the Unity3D
PlayerPrefs table. This is a table that stores the data persistently and will not
be destroyed with scene transition. We will access this stored data in
the
game.



2.3.4.
GameLevel1


GameLevel1 scene is the first level of the game. OBJ script again loads
the
facial model from the obj file. InitializeHair and InitializeBody script displays
11


the corresponding hair and body depending on the hair and gender stored in
PlayerPref table.
InitializeBody will also set the face object as the child of the
neck bone no
de of the corresponding male or female model so that
animations would be smooth.

Slap script object is the main script that handles player interaction. It will
detect player’s gesture input if ran on iOS devices and call different actions
depending on the
swipe direction and speed. Swiping from left to right will be
a left punch, swiping from right to left a right punch. A certain swiping speed is
required for the action to be registered. On PC or Mac platforms, Q key
replaces left punch, P key replaces rig
ht punch. With each action that is
registered, different other scripts are triggered as well. Headspin script
handles the rotation of the head after being hit, while LoadBruises script runs
shaders that applies bruise textures to the face depending on dama
ge ta
ken.

AIBehavior script handles the opponent AI as well as it’s animations. For level
1, the enemy simply moves from left to right dodging the attack hence there is
really no AI. Therefore, AIBehavior in level 1 would simply handle the
animations

of th
e opponent
.

Additionally, GUI animation

such as the glove will be called by the
corresponding GUI_Glove script. GUI_KO handles the KO GUI image when
opponent’s health is 0, and GUI_KnockOut handles the KnockOut GUI image
when gun is activated against a KO
-
ed opponent. btn_gun is the button
activating Gun, which will activate a flamethrower. This button could only be
pressed when opponent is in KO state, where it’s HP is 0. L key replaces the
button when ran on PC or Mac.

StartUp object with InitializeLevel

script simply stores the current level in
PlayerPref, which is used by WinScreen and LoseScreen to go to correct
scenes. TimeLeft is the text that displays the time left for the scene. It also
contains script to reduce the number as time goes down.

12



Start
CountDown object and script is the text that is displayed when the fight
starts, and handles the transition of 3, 2, 1, fight.



2.3.5.
GameLevel2


GameLevel2 Scene is mostly similar to GameLevel1
, except for some
differences activated in Slap and AIBeha
vior script.

In AIBehavior script, opponent now will attack the player as well and the
player will need to block the attack from the side where the opponent is
attacking from by initiating a punch in that direction.

For Slap script, it now sends a message

to the AIBehavior script whenever
player punches in order for AIBehavior to know if player initiated a punch to
block the opponent.


2.3.6.
GameLevel3


For GameLevel3 Scene, again, mostly similar to GameLevel2, except that
opponent now will block player’
s attacks all the time until the player disarms
the opponent by waiting for and blocking opponent’s attack first. Changes to
combat mechanics in AIBehavior and Slap are made to accommodate
to this
change in mechanics.

2.3.7.
WinScreen


Simply brings player

to the next level or back to the main menu.

2.3.8.
LoseScreen


Simply brings player to the last level to try again or back to the main menu.


13



3.
Implementation Report


The game is implemented in Unity3D game engine for the iOS platform.
Part
of the
code is implemented in native iOS framework in objective
-
C either for
optimization purpose or for accessing native iOS functionalities.

3D
reconstruction code is performed at server side.


3.1.
Engine


Unity3D was chosen as the game engine to be used for i
mplementation of the
game.



The
main
reasons for the choice are:

1.

Cross platform compatibility. Unity3D could compile to multiple
platforms beyond iOS, such as Android, Windows, OS X etc. This
would allow the game to be relatively easily ported to another
mobile
device such as Android phones.

2.

What
-
you
-
see
-
is
-
what
-
you
-
get editor interface. With the editor interface
available, it
greatly
speeds up the workflo
w
.

3.

Ease of code reuse. Every class is it’s own script file, which could be
attached to objects,
making

it easy to reuse code.



However, there are also problems faced during implementation with regards
to the engine.
They are:

14


1.

Native functionalities such as imagepicker and camera codes will still
require native implementation on the specific device, which diminishes
the
effectiveness

of platform compatibility.

2.

Certain code on Unity3D has very bad performance, such as network
con
nection code.

3.

Rendering and loading is relatively slow when implemented in Unity3D
as well.


Throughout the project, we have also considered other alternatives, such as
Ogre3D and Cocos3D.


Ogre3D is a 3D rendering engine in C++ that could also build for i
OS. The
performance is much better than Unity3D. However, it is only a graphics
rendering engine and not a game engine. Hence, it is lacking in many game
engine functionalities, such as an

editing interface.


Cocos3D is an extension of Cocos2D, which is a
game engine based on
objective
-
C native to iOS. The benefit is that since it is in objective
-
C, no cross
platform coding is required to access the iOS specific functionalities. The
problem however is that it only has support for OpenGL ES 1.1, which does
n
ot have shader support required to render the bruises on the face for the
game.


Therefore, in the end, we stuck with Unity3D and worked around the
problems.

Optimization to the loading and rendering code reduced loading time to 1/5 of
the original loading

time.

15


Coding networking portion of the game on native objective
-
C greatly
increases performance of networking.


3.2.
Software Quality


Decisions are also made on software design.


Code is broken up into small script files to support easy reuse of code.


Naming of variables and methods are done to allow easy understanding of
what code is doing.


For different levels, script is reused, with changes for each level modified
within the script itself. This is such that when changes are made to one level,
it co
uld be easily reflected in all levels and no changes would need to be
made one by one.


4.
Test Report


As this a game that is heavily graphics based. It is infeasible for automatic
testing to be used for every aspect of the code.
Hence, extensive manual
testing with planned out test plan is used to test for problems instead.
Of
course, possible routes a player might take to completing the game would be
too many to be planned for,

making it impossible to entirely ensure that the
cod
e would be bug free.

However

the testing plan should cater to the main
16


play through routes of the game such that it minimizes the chances that a
player
would

en
counter a bug in a normal gameplay.



Next page attached is the test plan

excel sheet
, double
click to expand the
view.



17


18



5.
USER GUIDE

5.
1. Software Requirements

OS Device: iPhone, iPod Touch or iPad

5.
2. Game Description

A face punching game on iOS using 3D Face Reconstruction Technology
from 2D photo that makes the game

become unique.

5.
2.1. Ready...Fight

The game only starts after 3 seconds when player sees the word FIGHT
coming out.


19


5.
2.2. Win

Player must defeat an AI. Both Player and AI have a HP bar and whenever
beaten, the Health Points (HP) bar will drop. If the
HP bar is drop to 0 within a
limited time (depends on different level) player can finish the game by using
the special attack and exceed to the next level.

5.
2.3. Lose

Player cannot beat the AI within a limited time or player’s HP bar drops to 0
before AI
’s.


5.
2.4. Limited Time

The maximum given time that player can play in a game.

Level 1
-
120 seconds

Level 2
-
200 seconds

Level 3
-
300 seconds

5.
2.5. Camera

First person camera

20


5.
3.Play The Game

When player first enter Face Destroyer, a main menu screen
will appear. The
main menu of the game includes 3 options: Start, Capture Face and
Customize.

3.1. Start

Every game must have a start option and as a requirement Face Destroyer
also has a start option. When start option is selected, there are 3 options wit
h
3 different levels ranging from 1 to 3 with increasing difficulty. Player can
choose the level, which they want to play directly from the start, which is an
21


update from the old version that he/she needs to start from level 1 onwards.


5.
3.1.1. Level
1
-
EASY

The first level of Face Destroyer is easy; the AI does not attack against player.
Level 1 is just simply a tutorial mode that helps player to familiarize himself
22


with the control system and gameplay of the game. In this mode the AI can
move from lef
t to right or vice versa. Therefore player’s attack can be missed
if player attacks the opposite direction. Time limit is 120 seconds.

5.
3.1.2. Level 2
-
NORMAL

In this level player can feel more challenges because AI can move forward
and backward. If the A
I is moving backward and out of the range attack,
player cannot attack AI. So, he/she has to wait for the AI to go forward again
and attack. However AI can attack against player in this mode.

There is a
new mechanism in level 3
-
name block. Player can bloc
k AI’s attack and vice
versa. Time limit increases to 200 seconds.

23


5.
3.1.3. Level 3
-
HARD

Level 3 is the highest level so far in the current version. The AI movement is
similar to level 3, however there is a new mechanism named defense, which
make the AI
is defensive all the times and player cannot attack. To hit the AI,
player must wait for the AI to change from defense to attack mode and attack
before it punches the player back. Time limit increases to 300 seconds.

5.
3.2. Capture Face

Capture Face option

lets player to choose a photo either from take photo or
choose from photos library.

5.
3.2.1. Choose Photo

After photo is chosen, it will be sent to the server from 10
-
15 seconds
depends on the network speed. Notice that the taken photo should be
captured
from the front to assure the 3D model is reconstructed correctly.

24


5.
3.3. Customize

Customization is one of the features that makes the game becomes more
interesting. Player is given freedom to select either the want to play with a
male or female body and a

few given hairstyles in the game library to play
with. In the

next version there will be more model or hairstyles and even some
accessories to play with.

3.3.1 Male/Female

Currently in the game library, there is given 1 female body and 1 male body to
choo
se from.

5.
3.3.2 Hairstyles

There are 6 hairstyles in the game library including both male and female’
styles.

5.
4. User Control

5.
4.1. Normal Attack

To punch left, player need to swipe the screen from left to right.

To punch right, player need to swipe
the screen from right to left.

Notice that the speed of swiping is not affects the attack. But timing of the
attack is important because it will decide who attack first.

5.
4.2. K.O.


When AI’s HP bar drops to 0, AI becomes paralyzed, all the movements are

disabling and player can activate a special attack to finish the game. The
background screen will change; there will a “Knock Out” floating.

25







5.
4.3.

Special Attack (FIRE)



When AI’s HP bar drops to 0, player has the chance to finish the game by
click the flash Fire Button to activate a special attack, which fires a
flamethrower to the AI.

5.
4.4. Hit

When AI is in the attack range, if player’s punch hit its face without any
attempt to stop the attack from AI. It will be hit and its HP bar drops.

5
.
4.5. Miss

When AI is not inside the attack range, all the player’s attacks will be missed.

5.
4.6. Block

When both AI and Player are attacking each other at the same time. If both
attacks are left or right, it is a block and nobody hit. If attacks are from

different side, who attack first will hit the other and vice versa.

5.
4.7 Defense (AI)

When AI is in defense mode, player cannot attack against AI. All the attacks
from player will be blocked and the AI will counter
-
attack after that. The only
way to atta
ck AI is to wait after AI change from defense mode to attack mode,
26


there will be a 2 second pause before the AI can attack player. And player
must attack during that 2 seconds to hit the AI and stop its attack.

6.
Group Achievements


1.

Creation of an
enjoyable game on mobile devices with iterative design
approach.

2.

Implementation over multiple platforms and languages. Languages
used: C, Objective
-
C, Javascript, C#. Interoperate between native iOS
mobile platform, Unity3D, as well as remote server applic
ation.

3.

3D modeling and animation of human body.

4.

Mobile device development which makes extensive use of touch based
interaction design, as well as extensive optimization to make game
playable on mobile devices.

7.
Individual Achievements

Feng Zhonghui

(Main

Programmer, Project Lead)


1.

Implementation of

all

game
coding in Unity3D and iOS
.

Except for
adding of GUI image in menus and accessory screen.

2.

Integration of iOS and Unity3D code.

3.

Networking code in iOS to connect to face reconstruction server.

4.

Optimization of networking and file loading/rendering code.

5.

Sourcing and usage of technologies and plugins.

6.

Experimenting with new engines such as

Ogre3D and Cocos3D.

7.

Setting up and management of online repository.

8.

Coding a
nd setting up of project website.

9.

Main liaison with product owner in A* Star I2R.

10.

Planning of meetings.

11.

Design of combat mechanics in the levels.

27


12.

Compilation of reports and writing for all
reports

not covered by Do Anh
Minh and Lai Yit Hann.


Do Anh Minh (GUI Designer and Assistant
Programmer, Test and Evaluation)


1.

GUI Design, blue glossy buttons design, added Background for level

2.

B
ackground for main menu, level selection and image picker.

3.

Implement touchcontrol.js script that helps to rotate the model in
accessories screen choice.

4.

Assist in level 2 and 3, AI moving forward/backward script.

5.

User Guide compiling.

6.

Testing of different components of the game: UI, game logic, code,
sound and graphics and conducting user evaluation, test report.



Lai Yit Hann (Sound Designer)


1.

Newly
comp
osed

and produced additional 2 songs in the game for:

1)

Main Menu and sub menu (Song title: Happy)

2)

New Level (Song title: Fighting)

2.

Various Sound effects

3.

Pop up animation image

4.

Background graphic

5.

Conducted User testing and survey to understand our product an
d
gather user point of views. With that data, it is able to provide
suggestion to strengthen our game and cut our flaws.



28


Zhou Wan Yi (Animator)


1.

Animations for male body.

2.

Animations for female body.



8. Evaluation Report


For the evaluation, we did a
playtesting session with a few users and asked
them some questions after they have finished playing the game.

The questions asked

and the results

are

attached
:



29


The questions asked are for us

to know if we have met our primary objectives,
which is to show case the 3D facial reconstruction technology, making a game
that accentuates this features, as well as making a fun game. As could be
seen, the responses are mostly positive, giving us a posi
tive
affirmation that
our goals are met.