1

COMP 4801 Final Year Project 2016-17 A cross-platform game to promote computer science

Name: Wong Sze Ho UID: 3035090054

Date of Submission: 16-4-2017

2

Summary Hong Kong is under a situation that the importance of computer science is greatly underestimated. Along with the popularity of artificial reality, we created an augmented reality game using Unity and Vuforia, combining with comics created with Pixton. We try to introduce Augmented Reality to the secondary students in Hong Kong in an interesting way and hope it could encourage them to join the computer science industry. The game consists of two main components, which are “Story Mode” and “Arena Mode”. The former allows players to finish different levels and follow an augmented reality-related storyline, while the latter creates multi-playing battle using magic spells. Using the runes system and spell channeling mechanism, it adds more decision-making and strategic game play into the project. Although augmented reality is a hot topic, there are still some areas with great potential waiting for further development. Also, this project could have some improvements in future to achieve a better effect of promoting computer science.

3

Acknowledgement I would like to express my deepest appreciation to all those who provided me the possibility to complete this project. A special gratitude I give to my final year project supervisor, Dr. Chim T W, whose contribution in encouraging me and giving advice, helped me to coordinate my project especially in writing this report.

Furthermore, I would also like to acknowledge with much appreciation the crucial role of my second supervisor, Dr. Choi Loretta, who has raised different questions about the difficult and technical parts of my progject.

4

Table of Contents 1 List of Figures------------------------------------------------------------------------------------- 5 2 Abbreviations-------------------------------------------------------------------------------------- 6 3 Introduction -------------------------------------------------------------------------------------- 7 4 Background---------------------------------------------------------------------------------------- 8 5 Objectives------------------------------------------------------------------------------------------ 9 6 Methodology -------------------------------------------------------------------------------------10 8 Technology--------------------------------------------------------------------------------------- 15 9 Future Works ------------------------------------------------------------------------------------17 10 References ----------------------------------------------------------------------------------------18

5

List of Figures Figure 1.1 runes setting Figure 1.2 runes UI Figure 2 comics example Figure 3.1 spell demonstration Figure 3.2 augmented object example

6

Abbreviations AI Artificial intelligence AR Augmented reality HKU The University of Hong Kong SDK Software development kit SLAM Simultaneous localization and mapping

7

Introduction In recent years, the development of computer science in Hong Kong falls behind than other aspects because of the atmosphere of the society. Students may prefer choosing the business, social science or medicine field nowadays. The importance of computer science is greatly underestimated. Meanwhile, artificial reality upsurges due to the popularity of Pokemon Go. Artifical Reality seems to be the mainstream technology in the next generation. We make use of the popularity of artificial reality to encourage Hong Kong’s secondary students to join computer science. This project aims to create a cross platform application, on the Android and iOS platform, to allow the secondary students to have a deeper knowledge in computer science aspect. To promote computer science, we focus on the technology being used in this project, which is Augmented Reality. During the process of playing the game, Students can know more about the technology behind Augmented Reality and to have greater interest in computer science field. The requirements of this projects includes three aspects: Augmented Reality technology, Multi-networking and Game Design. Augmented Reality technology is supported the Vuforia SDK, which is an open source and compatible with Unity 3D, the game engine used in this project. Unity 3D also provides the multi-networking framework, such as server configuration and maintain serve. The graphics and 3D model used in this project are mainly obtained from Unity asset store and online.

8

Background Computer Science in Hong Kong Although computer science affects every part of our life, the Hong Kong’s young generation prefers joining the industries of business, law and medicine instead of engineering. Its importance is under-estimated, hence, there is a need to promote computer science to the secondary school students and encourage them to join the engineering industry for maintaining the competitiveness of Hong Kong.

How to Promote Computer Science We combined a thriving and attractive technology called “Augmented Reality” (AR) into a game to achieve something more than entertainment. This project aims at building an augmented reality game, in which students will follow a designed storyline about AR and battle with different magic spells. When they follow the background story, they will learn AR technology gradually and unintentionally. Playing games is a good mean for students to experience AR. If children are interested in a game, they will want to have a deeper knowledge, including understanding the program running behind the game. For example, a ten-year-old boy, Sam, has set up his own Minecraft server because he loves Minecraft (Jill Scharr, 2013). Therefore, an AR game is easier to promote computer science.

What is Augmented Reality and Why Augmented reality is the combination of computer-generated objects and the real environment. Pokémon Go is a well-known example allowing people to glimpse the potential of AR. Game developers started to make use of virtual reality to create better user experience. AR also creates responsive interaction between virtual objects and the environment. For example, a virtual ball in the game will bounce back when it hits a real wall. It combines some advanced technologies including image recognition and simultaneous localization and mapping (SLAM), which can be supported by the high processing power of our smartphones nowadays. Augmented reality is a breakthrough technology and plays an important role in computer science. The application of AR varies from games and entertainment to education and military. Google, Facebook, Apple, Microsoft and other leading companies have invested billions in artificial reality. Artificial reality will bring a huge impact to gaming industry and will change the general impression of a game.

9

Objectives First, the main purpose of this project is promoting computer science. To achieve this, we chose a new and attractive topic in computer science: Augmented Reality. Students not only experience the beauty of the integration of virtual objects and the environment, but also learn the technology contributing to AR in this project. When the players enjoy a game, they are willing to devote more time and effort in it. Fan art, private server and modifying game files are typically examples which appear in famous games. These require certain extent of knowledge in computer science. Therefore, an attractive game is crucial to grab students’ interest. Then, they will gradually learn more about it, such as programming and graphic design. The second objective is promoting augmented reality. Augmented reality merged the game into our physical world, so players could experience a unique gameplay unlike other common mobile games on the market. Other artificial reality like virtual reality also has broad application and great potential in various aspects, I hope more people can experience this rising technology to boost the artificial reality development. To quantify the result, the target is to score over 4 stars with more than 10,000 downloads in the first month after uploading to the Google Play store.

10

Methodology Mechanics Game Mode There are two game modes in this application: “Story Mode” and “Arena Mode”. Story Mode contains 5 levels with different goals. When the players accomplish each goal, they can move to the next level following the storyline. Through the story, players can know more about Augmented Reality. Arena Mode allows players to connect with other players and have a one on one real-time combat. After players scanned a specific QR code, the combat field will be generated automatically in the game. Players will use different magic to beat their opponent. When one’s health drops to zero, he will lose.

Magic Spell In combat, players will cast different spells to attack enemies. The magic types are inspired by the ancient Chinese belief, Wu Xing. There are in total of five different types of magic spells, which are Fire, Wood, Water, Earth and Metal. Each of these has five different spells, therefore, there are 25 kinds of spells in total. Following are the details of all spells. Spell 1 Spell 2 Spell 3 Spell 4 Spell 5

Fire fireball fireblast fireball_big fireblast_big meteors

Wood waterball waterball_3 ice_shield water_pillars waterball_9

Water earthball earth_wall earth_circle earth_3ball_big earth_4wall_circle

Earth wood_ground wood_wall woodball_3 wood_circle wood_shield

Metal metal_arrow metal_sword metal_shield metal_sword_3 metal_arrowRain

Runes System For each type of magic, there are 5 corresponding runes, therefore, in total 25 different runes. Runes can only produce magic which belongs to its own type. For example, Fire runes can only produce fire spells, but not the other types. To cast a spell, players have to input a correct order of runes. Runes can only produce magic which belongs to its own type. For example, Fire runes can only produce fire spells, but not the other types. Before game starts, players can choose 7 runes from different types. All runes were assigned an ID starting from “a” to “y” for identification in the order of fire > wood > water > earth > metal.

11

Following are the details of the runes order of all spells. Spell 1 Spell 2 Spell 3 Spell 4 Spell 5

Fire aba bba acbca bdcadb aeacedb

Wood fgf fgg hfhgh ghfffi fggfigh

Water klk kll mmlkk lnmlkk klomokl

Earth ppq qpq rprqr qrsrsp rqtpsst

Metal uvv vuv wuvwu vxwxuv yuwvxuy

Player can edit their runes setting in the “MainMenu” Scene. After pressing “Save” button, the values of the runes are passed through the Player.Prefs class of Unity for later use.

Figure 1.1 runes setting Figure 1.2 runes UI Spell Channeling Bar The purpose of spell channeling bar is preventing players from spamming magic spells. It is represented by a blue rectangle bar on the screen. Once player pressed a rune, the spell channeling bar will start counting from 3. If the player hasn’t input a correct runes order during this period. The runes order will reset and the bar will resume. This mechanism enriches the strategy in the game play and allows player to have more decision making before casting any spells.

12

Background Story The main character is a male teenager named Dinh who is a student. Because of an accident, he was accidentally sucked by his computer and went to an alternate world, in which magic is real. He met another girl named Ru and tried to stop the evil’s plan. Following the 5 levels, they discovered the evil was planning to break into Alternate Reality. The missions of these levels are related to the augmented reality and computer science. For example, QR code used for image recognition will be interpreted as the portal for transporting monsters. Then, the players will be asked to destroy those points with QR code.

Level Name Mission Technology related

1 Invasion Destroy all enemies around the Portal QR code

2 Spatial Instability Protect the simultaneous localization

and mapping device

Simultaneous localization and

mapping

3 Sacred Terrain Defend in terrain for 30 seconds Smart Terrain of Vuforia

4 White Treasure Eliminate all enemies around the

Pensieve Pool

Vuforia Database

5 Last Fight Eliminate the final boss Scripting Artificial Intelligence

In details, QR code is used as a target for image recognition in our project. When the camera looks at the specific QR code which is stored in Vuforia’s database, it generates the virtual objects as being the child of “Image Target” in the Unity hierarchy. Simultaneous localization and mapping is an algorithm implemented for updating the environment captured by the camera while keeping tracking of the user’s location. Smart terrain is a Vuforia’s function, which can identify the surface and edges of objects in order to able to distinguish different objects. This is a powerful and advanced in augmented reality technology. With this, users can be able to do interaction between virtual objects and real objects. Vuforia allows us to use any image as the target for recognition. We can upload the images to the database of Vuforia and export as an package to Unity. Artifical Intelligence is another crucial aspect in computer science. Computer will be able lots of work in a much faster way than human and even can be human-like. However, this project will only cover a simple A.I. scripting as it is not our major topic.

13

Aesthetic Storytelling The storyline is expressed in comics-like style to help deliver the message in a clear and time-saving way. When players start a level, several pictures of comics are shown to deliver the plot message. There are in total of 5 chapters. The comics are created using the Pixton website. Following are one of the comics created.

Figure 2 comics example For all comics used in the game, please see the attached file comics_image.

14

Visual elements The models of spells are purchased on the Unity asset store created by NeatWolf at the price of $ 10 U.S. dollars. The rune images are edited from the website shuttershock using Photoshop. The spells models are resized and tailor-made to the one suitable for this project. They are grouped as a GameObject class in Unity.

Figure 3.1 spell demonstration Figure 3.2 augmented object example

15

Technology Spell Casting To increase the accuracy of spell casting by players, we used raycasting from screen to the objects where camera pointing at. If there is a hit, the position of the hit point will be used as the spawning point for spells which requires instantiating on the ground instead of flying as a projectile.

Scene Management There are 3 main scenes in this project: MainMenu, Story Scene and Arena Scene. MainMenu is for maintaining the player settings, including choosing between two game modes, editing runes setting, level selection. For Story Scene, it contains the core functionalites of Story Mode. Following are the game objects inside Story Scene.

Components Functionalities

ImageTarget Storing the image for recognition in Vuforia. Attaching game objects as a child in hierarchy allows corresponding virtual objects generation in the scene.

ARCamera The main camera in the game. Capture the view through the phone’s camera and recognize the target image.

Canvas Maintaining the basic UI interface, including the runes, player’s health and the spell channeling bar.

SpellCastMonitor Listening for the input from the runes and calls to spell channeling bar and player’s spell casting for further reaction.

GameManager Maintaining the game flow, checking the game objectives, loading players’ runes setting.

EnemySpawner Storing the prefab of enemies and spawning the enemies.

Player Storing the spawn positions of spells, casting spells

16

For Arena Scene, it is similar to the Story Scene, except the components related to multi-networking. Following are the components in Arena Mode.

Components Functionalities

NetworkManager Maintaining the network state of game.

NetworkManagerHUD An UI interface works with NetworkManager when game starts.

NetworkIdentity Adding an identity to components on the server, allowing the networking system aware of it.

NetworkTransform Synchronizing the movement of game objects online.

These are the Unity built-in components for multi-networking. Besides the above components, there are other important attributes in Unity for multi-networking used in this project as below.

Attribute Functionalities

Command Calling by the client and runs on serve, for example, the spawning of spell objects.

ClientRpc Calling from the server’s objects and executing on the clients.

SyncVar Synchronizing the variables across the network, for example, the health of players.

17

Future Works Discussion Forum Setting up a discuss forum is beneficial to our project as it provides an opportunity for players to communicate. On the discussion forum, players may exchange their thoughts to other players, as well as their opinion about this game. Players’ reflection is crucial to the improvement of a game as we could know which part do they care about. Players may also find some bugs under different circumstances. On the forum, we could suggest players to design their own maps, levels, or even augmented reality game. In this way, there would be more and more people know about the augmented reality technology and get involved in computer science. Insufficient Online Players. As the battle with other players is one of the major components of this game, there may not be enough active players. In future, we may consider using scripted AI to create a computer player to replace human players. However, according to the common situation is that A.I. player is normally considered “straight-forward” as they follow the algorithm implemented by programmers. To achieve a more human-like algorithms, the time and cost invested may not be worthy. therefore, scripting A.I players is still under discussion.

Enriching Game Mechanism At this stage, the game mechanism may seem too simple and doesn’t require much strategy. Therefore, in future, we may consider adding different systems into the game. For example, the level system of each individual player. If one player finishes more combat, he could gain more experience to reach a higher level. With a high level, the attacking power and defensing power also increase. We may also introduce more types of magic as well as more spells. For example, light and dark are popular elements appearing in games. Reward System In game design theory, rewarding system contributes a lot in a successful game. It affects the interest of players over the time. Implementing a rewarding system would be beneficial in long term. If players are interested in the game, they would be more likely to share with their friends. Then, the effect of promoting computer science would be greatly increased, especially among the young generation.

18

References Fireball – iStock. iStockphoto LP. Retrieved October 25, 2016, from http://www.istockphoto.com/hk/photos/fireball?sort=best&excludenudity=true&mediatype=photography&phrase=fireball KakuJomics: Red Harvest – Kakujomics. (2013, June 6). Retrieved January 22, 2017, from http://www.dorkly.com/post/52257/kakujomics-red-harvest Redbubble. (n.d.). Retrieved October 25, 2016, from http://www.redbubble.com/people/carlydraws/works/14992507-blue-pixel-fireball?p=pencil-skirt Scharr, J. (2013, October 11). This 10-Year-Old Made His Own 'Minecraft' Server. Tom's guide. Retrieved January 22, 2017, from http://www.tomsguide.com/us/meet-10-year-old-minecraft,review-1920.html Virtual & Augmented Reality: Understanding the race for the computing platform (Rep.). (2016). Retrieved December 5, 2016, from http://www.goldmansachs.com/our-thinking/pages/technology-driving-innovation-folder/virtual-and-augmented-reality/report.pdf Wu Xing - Wikipedia. (n.d.). Retrieved October 25, 2016, from https://en.wikipedia.org/wiki/Wu_Xing