Lets Learn Malaysian Traditional Games via Augmented Reality

( AR )

AHMAD ALIFF DANIAL BIN AHMAD AFFANDI

BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS MEDIA) WITH

HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITY SULTAN ZAINAL ABIDIN

2020

LETS LEARN MALAYSIAN TRADITIONAL GAMES

VIA AUGMENTED REALITY ( AR )

AHMAD ALIFF DANIAL BIN AHMAD AFFANDI

BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS MEDIA)

WITH HONOURS

Universiti Sultan Zainal Abidin, Terengganu, Malaysia

JANUARY 2020

i

DECLARATION

I hereby declare that the project paper is the result of my personal research.

This dissertation is submitted to the Faculty of Informatics and Computing,

Sultan Zainal Abidin University as partial fulfilment of the requirement for the

Degree of Bachelor of Information Technology (Informatics Media) With

Honours. All stated information which has been obtained from other sources

is fully referenced.

SIGNATURE : _________________________

NAME : AHMAD ALIFF DANIAL BIN AHMAD AFFANDI

MATRIC NO : BTDL17047962

DATE :

ii

CONFIRMATION

This is to confirm that Lets Learn Malaysian Traditional Games via Augmented Reality

( AR ) project paper was prepared and submitted by Ahmad Aliff Danial Bin Ahmad

Affandi ( Matric No : BTDL17047962 ) and have been found satisfactory in terms of

scope, quality and presentation as part of fulfilment of the requirement for Bachelor of

Information Technology (Informatics Media) With Honours in Sultan Zainal Abidin

University. The research conducted and writing of this report was under my supervision.

SIGNATURE : ________________________

NAME : DR ISMAHAFEZI BIN ISMAIL

DATE :

iii

DEDICATION

In the Name of Allah, the Most Gracious and the Most Merciful.

Alhamdulillah, thank God for His grace and grace, I can prepare and complete

this report successfully.

First of all, I would like to thank my supervisor, Dr Ismahafezi Bin Ismail

because with the guidance, advice and the thoughtful ideas given me the opportunity to

prepare this report successfully.

In addition, my gratitude is also to my colleagues who share ideas, opinions,

knowledge and reminders. They helped me answer every question that was important

to me in completing this report.

Thanks also to my beloved mother and father always support and motivated me

to prepare for this report for Final Year Project.

I would like to take the opportunity to thank all lecturers of the Informatics and

Computing Faculty for their attention, guidance, and advice in helping and sharing ideas

and opinions in making this report successful.

May Allah SWT bless to all the efforts that have been given in completing this

report.

Thank you.

iv

ABSTRACT

The application “ Lets Learn Malaysian Traditional Games via Augmented Reality

(AR) “ was developed for primary student age from 7 to 12 years old to learn about

Malaysian traditional games more efficiently in school. The learning methods will be

teach through technique of the augmented reality (AR) technologies and will be using

smartphones. This app may be able to help student from primary school to learn the

type Malaysian traditional game more fun and interactive way through the augmented

reality and also to preserve the traditional games for future generation. An addition, this

application will uses interactive 3-dimensional(3D) objects, sound, video on how to

play it and display info so that students are interested in using this application. The

Interaction Design Lifecycle Model method is divided into four main sections, namely

the beginning of the Identify Needs phase, (Re) Design phases, Prototype phases and

Evaluation phases. The use of the Interaction Design Lifecycle Model method ensures

that the development of the system runs smoothly and according to planning.

.

v

ABSTRAK

Applikasi " Lets Learn Malaysian Traditional Games via Augmented Reality (AR)"

ini telah dibangunkan untuk pelajar sekolah rendah yang berusia 7 hingga 12 tahun

untuk belajar tentang permainan tradisional Malaysia dengan lebih cekap di

sekolah. Kaedah pembelajaran akan diajar melalui teknik teknologi realiti (AR)

yang ditambah dan akan menggunakan telefon pintar. Aplikasi ini boleh membantu

pelajar dari sekolah rendah mempelajari jenis permainan tradisional Malaysia

dengan lebih menyeronokkan dan interaktif melalui realiti yang ditambah dan juga

untuk mengekalkan permainan tradisional untuk generasi akan datang. Selain itu,

aplikasi ini akan menggunakan objek 3-dimensi (3D) interaktif, bunyi, video tentang

cara memainkannya dan memaparkan maklumat supaya pelajar berminat

menggunakan aplikasi ini. Kaedah yang digunakkan ialah Model Hayat Reka

Bentuk Interaksi dan dibahagikan kepada empat bahagian utama, iaitu fasa

permulaan mengenalpasti keperluan , fasa reka bentuk (semula) , fasa prototaip

dan fasa penilaian. Penggunaan kaedah Model Hayat Cakera Reka Bentuk

Interaksi memastikan bahawa pembangunan sistem berjalan lancar dan mengikut

perancangan.

vi

CONTENTS

PAGE

DECLARATION i

CONFIRMATION ii

DEDICATION iii

ABSTRACT iv

ABSTRAK v

CONTENTS vi

LIST OF TABLE ix

LIST OF FIGURES x

LIST OF ABBREVIATION / TERMS / SYMBOLS xii

LIST OF APPENDICES xiii

CHAPTER I

INTRODUCTION

1.1 Introduction 1

1.2 Background 1

1.3 Problement Statement 2

1.4 Objectives 2

1.5 Scopes 3

1.6 Limitation of work 4

1.7 Expected Result 4

1.8 Conclusion 5

CHAPTER II

LITERATURE REVIEW

2.1 Introduction 6

2.2 Related techniques 6

2.2.1 Marked Based 7

2.2.2 Marker less 8

2.3 Related Product 9

2.3.1 Traditional Games Learning Books 9

2.3.2 AR Learning Application ( MyGanuAR ) 10

2.3.3 Lets Know Traditional Games , Web 11

2.4 Comparison table of existing product 12

vii

2.5 Comparison table of the existing product with

5 element of multimedia

13

2.6 Conclusion 14

CHAPTER III

METHODOLOGY

3.1 Introduction 15

3.2 Methodology Model 15

3.2.1 Identify / Establish Requirements Phase 16

3.2.2 Re / Design phase 17

3.2.3 Prototype phase 25

3.2.4 Evaluation phase 26

3.3 Framework Design 27

3.4 Hardware and Software Requirement 28

3.4.1 Hardware requirement 28

3.4.2 Software requirement 29

3.5 Conclusion 30

CHAPTER IV

IMPLEMENT AND RESULT

4.1 Introduction 31

4.2 Implementation 31

4.2.1 Main Menu Page 32

4.2.2 AR Scan Page 33

4.2.3 How To Use Page 34

4.2.4 Info Page 34

4.2.5 AR Marker 35

4.2.6 3D Model 35

4.2.7 Platform AR using Unity3D 36

4.2.8 Script Process 37

4.3 Testing 37

4.3.1 Usability Testing 38

4.4 Conclusion 39

viii

CHAPTER V

CONCLUSION

5.1 Introduction 40

5.2 Project Achievement and Contribution 40

5.3 Problem and Limitation 40

5.4 Future Work 41

5.5 Conclusion 41

REFERENCES 42

ix

LIST OF TABLES

TABLE TITTLE PAGE

2.1 Comparision table of existing product 14

2.2 Comparison table of the existing products with 5 element

of multimedia.

15

x

LIST OF FIGURES

FIGURE TITLE PAGE

2.1 Marker based 7

2.2 Markerless 8

2.3 Traditional Games Learning Books 9

2.4 AR Learning Application ( MyGanuAR ) 10

2.5 Lets Know Traditional Games , Web 11

3.1 Interaction Design Lifecycle Model 16

3.2 Storyboard appllication 17

3.3 Creater Marker 19

3.4 Modeling 3D 20

3.5 Texturing 3D 21

3.6 Rendering 22

3.7 Create marker use Vuforia 23

3.8 Building environment AR use 3D Unity 24

3.9 Framework Design 27

4.1 Main Menu Page 32

4.2 AR Scan Button 32

4.3 How To Use Button 32

4.4 Info Button 32

4.5 Exit Button 32

4.6 AR Scan Page ( Model ) 33

4.7 AR Scan Page ( Video ) 33

4.8 Sound Button 34

4.9 Home / Back Button 34

4.10 How To Use page 34

4.11 Info Page 34

xi

4.12 Modeling 3D and key frame 36

4.13

4.14

Unity3D software

Line Graph

36

39

xii

LIST OF ABBREVIATIONS/TERMS/SYMBOLS

AR Augmented Reality

3D Three Dimensional

2D Two Dimensional

FYP Final year project

IDLM Interaction Design Lifecycle Model

PC Personal Computer

AMD Advance Micro Devices

xiii

LIST OF APPENDICES

APPENDIX TITLE PAGE

I Gantt Chart FYP I 43

II

III

Gantt Chart FYP II

Questionaires Lets Learn Malaysian Traditional

Games via AR

44

45

IV AR Marker And Features 46

V Script Codes 52

VI Poster Lets Learn Malaysian Traditional Games via

Augmented Reality (AR)

59

1

CHAPTER I

INTRODUCTION

1.1 Introduction

This section is the introduction to the report for developed system. It will provide

a basic overview of the whole system. This chapter presents about the project

background, problem statement objectives, scope and project planning. Background of

the system discuss about basic information about this system. Problem statements

discuss about related issues of the system. Objectives state all main goal of this system.

The scope shows who are using the system and what the user can do.

1.2 Background

Augmented Reality (AR) is an example of the revolution that occur in

technology that continuously expand around the world now. AR is a new kind of

interactive technology that give us new way to interact in direct view of an existing

environment. Augmented reality combines real and computer-based scenes and images

to deliver a unified but enhanced view of the world. It allows us to create or put 3D

object directly onto physical things or fused together in real-time. Augmented reality

has many different implementation models and applications, but its primary objective

is to provide a rich audiovisual experience. AR works by employing computerized

simulation and techniques such as image and speech recognition, animation, head-

2

mounted and hand-held devices and powered display environments to add a virtual

display on top of real images and surroundings.

“Lets Learn Malaysian Traditional Games via Augmented Reality (AR)” is an

application that will help children to learn AR in interactive way. This application with

Augmented Reality will focus to the user about the Malaysian traditional games. User

can know the model of the games by scanning the picture of the model , learn the

information of the games and also learn how to play it through video via the Augmented

Reality. So, this kind of learning through Augmented Reality is an interactive way to

learn as today mostly learning through AR is very common.

1.3 Problem Statement

Students nowadays are currently did not get a right teaching about the traditional

games in classes. Students also didn’t not have any knowledge about the traditional

games because the learning technique still in old fashion way less attractive and too

much spend time with the technology such as ipad, smartphone and playstation . Besides

that, Student less understand about something that they have to learn and know.

Unfortunately, out traditional game slowly extinct from our todays culture and

generation.

1.4 Objectives

There are several objectives in this project:

1. Help student to learn, know and gain knowledge about the traditional game

through the augmented reality.

3

2. To preserve well and uplifting our traditional game from extinct from our

cultures

3. To persuade the school to teach this topic through Augmented Reality learning

technique.

4. To apply the knowledge of Malaysian traditional games at younger ages

1.5 Scopes

The scope will be explained about the actor who will involve in this system and what

function involved in this system. The main scopes of the system:

i. Application

The application will shows the object and its information of the traditional

games. Besides that, when the smartphone pointed to the flashcard, the object

will appear in 3 dimensional (3D) with information then, the environment of

the application is Android platform.

ii. User (Student)

This user for this AR mobile apps can find out the all types of Malaysian

traditional games using this application. User can point their smartphones and

get information type of Malaysian traditional games in this Augmented Reality

application. The students can use this flashcard AR Technology to learn about

such as explore the model, watch the video and read the information of model

with an interesting way. They also can experience to see virtual object appear

in 3D real-world with the animation and sound that will include in the

application.

4

1.6 Limitation of Works

There are several limitation and constraints throughout the development and usage of

Lets Learn Malaysian Traditional Games via Augmented Reality (AR) using marker-

based and marker-less target on flashcards and a board with A5 size.

1. This app will be focus on Malaysia traditional games only

2. Marker based technique using AR

3. Limit to mobile based only

4. This AR application will only available on Android OS smartphone only

1.7 Expected Result

At the end of this project, the result that are expected following the development of

Lets Learn Malaysian Traditional Games via Augmented Reality (AR) :

1. User can gain info and knowledge of Malaysian traditional game from

this app

2. Give the user the augmented reality experience while learning.

3. A smooth and simple interface UI

4. Uplifting the Malaysian traditional games for future generation

5

1.9 Conclusion

With the existing of this application and the help of technology increasingly fast-

growing, it is hoped that this project will help student to learn and to get gain

knowledge.I hope that this mobile application can help student to gain some knowledge

about the information of Malaysian traditional games and also uplifting the Malaysian

traditional games for the future generation.

6

CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

This chapter will explain about literature review that related to the AR mobile

application Lets Learn Malaysian Traditional Games via Augmented Reality (AR) that

will be develop. Explanation in this chapter is about the existing application such as

normal traditional book, mobile application, browser and others that related to the Lets

Learn Malaysian Traditional Games via Augmented Reality (AR) and also the

technology of augmented reality. This literature is made for identifying the weakness

or lacking to related literature review sources.

2.2 Related techniques

Related techniques refer techniques of Augmented Reality already existing and

used until now. This is example of techniques:

7

2.2.1 Marker based

Figure 2.1 Marker based

Image recognition is an imperative component of augmented reality systems. By

use of identifying visual markers already embedded within the system, physical world

objects are detected for superimposition of virtual elements. In order for an AR

application to estimate the orientation and position of a camera with respect to the real

world frame, most applications employ a tracking technique known as marker based

augmented reality. This form of tracking was introduced in AR approximately a decade

or so ago. The marker tracking allows the use of a digital image to identify optical

squares or markers and gauge their relative orientation to the camera itself. The optical

square marker usually consists of a black square within a white box of a predefined size.

It is the black square which is encoded with the ID of the marker. A variety of techniques

is used which decode the marker by cross-matching with it. Once you begin using the

marker-based augmented reality system with a digital device, the image of the physical

world captured by your camera is converted into a grayscale image to expedite the

image processing algorithm. The algorithm then uses the image of the camera as well

8

as the decoded marker ID to augment the virtual object onto the physical world model.

By focusing the camera of whichever digital device you are using to deploy the

augmented reality app on the specified markers, the app is able to retrieve the

information stored to display the three-dimensional virtual object accurately.

2.2.2 Marker less

Figure 2.2 Marker less

New advances in the mobile hardware and software technologies led to the

recent introduction of marker less augmented reality. This approach eliminated the need

for 3D object tracking systems, overcoming the interactivity limitations marker-based

augmented reality placed on the range of images encapsulated within the markers.

Marker less augmented reality technique allows the use of any and all parts of the

physical environment as the target or base for the placement of superimposed virtual

objects. Marker less AR depends on the natural features of a surrounding rather than

the fiducial identifying markers. What’s more, some marker less systems have the

9

ability to extract and store information and characteristics about the environments they

are used on for later usage. When used in smartphones and other digital devices, the

marker less AR system typically makes use of the GPS feature in-built in the device in

order to locate and interact with the available augmented reality resources. Completely

non-invasive, lighter and with a larger capacity for images, the marker less augmented

reality system is now much preferred method of image recognition as compared to the

marker-based counterpart.

2.3 Related Product

Related products refer a system already existing and used until now. This is

example of system:

2.3.1 Traditional Games Learning Books

This learning book contain good pictures with words to help child’s mind to

recognize objects and pronounce words appropriately. This book is published in

Indonesia and full of elements of multimedia such as texts images. The font type and

Figure 2.3 Traditional Games Books

10

size is use very balance. The book cover is also attractive. This books it suitable for

primary school students as the reference for learning.

2.3.2 AR Learning Mobile Application ( MyGanuAR )

This MyGanuAR app is a free mobile app AR application that is free

for children aged 3 years old and above to try out the function of the AR. In

this mobile application, kids can learn and know the use of a Augmented

Reality.

Figure 2.4 AR Learning Mobile Application

11

2.3.3 Lets Know Traditional Games , Web

This learning and info about the traditional games is available on their

website. User can browse, download and print worksheets designed for learning

and practising English words related to the theme. Its has simple interface UI

and easy to know the method on how to play it.

Link : https://sites.google.com/site/malaysiantraditionalgames123/type-of-

games

Figure 2.5 Lets Know Traditional

Games, Web

12

2.4 Comparison table of existing product

Product Platform Function Method Advantage Drawback

Traditional

Games

Learning

Books

• Printed

book

• Help learning

• None • Easily to

read

• Has good

picture

• Design not

interactive

• No sound

interaction

MyGanuAR

Mobile

Application

• Mobile

App

• Creative

learning with

Augmented

Reality

• None

• Easily to

use

• Unclear

sound

• Has good

model

• Its

contain

fluid

animation

Lets

Know

Traditional

Games

Webs

• Androi

d/ IOS

phone

• Computer

• Help build

vocabulary

• Display the info

about

traditional

games

• HTML

• JavaScript

• PHP

• Easy to

browse

• Its

contain

many

content

• Need to

print

worksheets

to learn

Table 1.1 Comparison table of existing product

The Table 2.1 describes about comparison of the existing product with

platform, function, method, advantage and disadvantages. This table we will know

comparison each of product.

13

2.5 Comparison table of the existing products with 5 Elements of multimedia

Product Text Image Video Audio Animation

Traditional

Games

Learning

Books

Yes Yes

MyGanuAR

Mobile

Application

Yes Yes Yes Yes

Lets

Know

Traditional

Games

Webs

Yes Yes Yes

Table 2.2 Comparison table of the existing products with 5 element of multimedia

The Table 2.2 describes about comparison of the existing product with 5

element of multimedia such as Text, Image, Video, Audio and Animation. This table

we will know comparison each of product.

14

2.6 Conclusion

In this whole chapter, this chapter discusses a product that uses a flashcard in

Augmented Reality.The comparison with the previous research is done so that the right

choice will be selected.In this chapter also is need to compare some of a similar project

or application that have develop by other.

15

CHAPTER 3

METHODOLOGY

3.1 Introduction

This chapter is an explanation about the methodology that will be used

to develop the application Lets Learn Malaysian Traditional Games via

Augmented Reality (AR) feature. In addition, there also have the explanation

of some software that will be used to build this project. The methodology can

be acts as guide for the progress go smoothly within the given time, seeing that

it is part of factor that pinpoint the work task performed by researchers during

the project’s timeline.

3.2 Methodology Model

Development process of an application is a detail process and needs to

be executed according to their phases. There are a lot of development model or

methodology that can be uses to develop an application or system and there also

have a specific development model that also can be apply on specific

application development process only. It also can a combination of elements

that from different development model that will be the guidance during the

development process of the application. The development model for this

application is Interaction Design Lifecycle Model ( IDLM ).

16

3.2.1 Identify needs / Establish Requirements phase

The Identify needs / Establish Requirements phase is the foundation for all other

phases of instructional design. During this phase, the creator must identify the problem,

identify the source of the problem and determine possible solutions. The outputs of this

phase often include the instructional goals, and a list of tasks to be instructed. These

outputs will be the inputs for the (Re)Design phase. In this phase, Identify needs /

Establish Requirements phase need to develop the mobile AR application. Its involves

some action such as requirement analysis, task analysis and instructional analysis. Then,

the activities involves are identifying the problem statement, the goals and objectives

of the mobile AR application. This is very important because to developed the users

need, existing knowledge and any other relevant characteristics and also the content of

mobile AR application. All the requirements must be establish and must be gathered

was used to develop goals and objective of developing mobile AR application.

Figure 3.1 Interaction Design Lifecycle Model

17

3.2.2 Re / Design phase

The ( Re ) Design phase deals with learning objectives, assessment instruments,

exercises, content, subject matter analysis, and lesson planning and media selection.

The design phase should be systematic and specific. Systematic means a logical, orderly

method of identifying, developing and evaluating a set of planned strategies targeted

for attaining the project’s goals. Specific means each element of the instructional design

plan needs to be executed with attention to details. The developer need make storyboard

book design and application for create a visual map of application. This can help the

developer shape the vision and flow of application.

i. Storyboard Application

Home Page

- Will consist of 4 subsection menu

such as AR button, Info, How to use

and Quit button.

Tutorial Page

- Will show to the user how to use

the app

18

Credit Page

- This section will summarize about

the app and also will show the

creator and the supervise of the

app.

AR Camera

-The user need to scan a flashcard

using a camera.

Quit Menu

- Quit menu will ask the user if they

want to quit or not.

Figure 3.2 Storyboard application

19

ii. Create Marker

Figure 3.3 Create Marker

This is the first step before start build 3d animation models. I must create

markers using Adobe Photoshop CS64. On the picture there are pictures of object and

also two languages such as Malay and English. So, the users are willing to scan images

or markers on the picture and the 3D animation models automatically pop out on the

phone screen.

20

iii. Modeling 3D

Figure 3.4 Modeling 3D

Figure 3.5 show the developer making the process of modeling 3D animation

models using Autodesk Maya software.

21

iv. Texturing 3D

Figure 3.5 Texturing 3D

Figure 3.6 shows the next process in animating 3d characters which is texturing.

Texturing is the next phase involved while creating 3d animation. It includes creating a

texture from the base, editing an existing texture for reuse. Shading intensity is to be

decided during the texturing phase and textures are developed like maps and then

assigned to a particular scene or model. After finish modeling the models, the developer

needs to find the right texture to wrap the models.

22

v. Rendering

Figure 3.6 Rendering

Figure 3.7 shows the next process in animating 3d characters which is rendering.

Rendering is the final step in the animating 3d character process. Rendering is the

process of creating an image or sequence of images from a scene.

During rendering, Maya generates a two-dimensional image, or series of images, from

a specific view of a three-dimensional scene, and saves it as an image file.

23

vi. Create marker use Vuforia

Figure 3.7 Create marker use Vuforia

The figure 3.8 show that Vuforia is able to recognize and track targets by

analyzing the contrast based features of the target that are visible to camera. The

developer can improve the performance of a target by improving the visibility of these

features through adjustments to the target's design, its rendering and scale, and how it's

printed. The star rating of a target ranges between 1 and 5 stars; although targets with

low rating (1 or 2 stars) can usually detect and track well but for best results, the

developer should aim for targets with 4 or 5 stars.

24

vii. Building environment AR use 3D Unity

The Figure 3.9 shows the unity 3D software. The developer need to setup the

Unity 3D before start using it. This is the platform where to begin build AR experiences.

Next, developer need to create project and create the scenes which is Navigation,

Camera & Light, 3D Object, Physics, Material and Scripts.

Figure 3.8 Building environment AR use 3D Unity

25

3.2.3 Prototype phases

The prototype phase refers to the actual delivery of the instruction, whether it's

classroom-based, lab-based, or computer-based. The purpose of this phase is the

effective and efficient delivery of instruction. This phase must promote the students

'understanding of material, support the students' mastery of objectives, and ensure the

students' transfer of knowledge from the instructional setting to the job. After making a

little bit of testing, if the user is not happy with the design or there is an error on the

interface design, the developer will go back to design phase for a redesign phase of the

application. If the user testing is happy with the prototype, it will advance to the

evaluation phase for debug testing.

i) Test Run Project

The developer test runs the project her/himself. This is to ensure that the

project can be used and is running accordingly.

ii) User Test Run

Developer give to the user to test the project and give the feedback before

the presenting the final product. Criticisms and constructive feedback is

taken to be implemented later on.

26

3.2.4 Evaluation phases

This evaluation phase measures the effectiveness and efficiency of the

instruction. Evaluation should actually occur throughout the entire instructional design

process- within phases, between phases, and after implementation. Evaluation phases

may be formative or summative. If there is some error during the evaluation phase, the

developer need to refer again to design phase for redesign the product and also refer to

the identifying need phase for gather the information more detail. If the evaluation phase

goes well, it will be going through to the final product to launch for a large audience.

i) Debug

a) Identify Errors

After done test run, errors that were found by the users should be

identified. Example, glitches and mistakes should be brought to light for

developer to improve the project while also implementing the feedback

by the alpha and beta testers.

b) Find solutions

If once errors have been identified, solutions the error must be done to

solve.

ii) Final product

a) Presentation

The system is ready to be presented and launched for a large audience to

use.

27

3.3 Framework Design

Figure 3.9 above shows the framework design of Lets Learn Malaysian Traditional

Games via Augmented Reality (AR).

User able to choose any button in this application.The users need scan any image

object for display 3D object and also press button for display language sound.For

Admin, Admin able to update the application for make new design.Admin also able

view the response feedback. The 3D Unity used to create the Virtual Reality application

and overall project and modelling 3D objects.The Vuforia use to create augmented

reality. The Vuforia detects and tracks the features that are naturally found in the image

itself by comparing these natural features against a known target resource database.

Once the Image Target is detected, Vuforia Engine will track the image as long as it is

at least partially in the camera’s field of view.For the best results,you should aim for

targets with 4 or 5 starts.

28

3.4 Hardware and Software Requirement

This section will show that the all hardware and software that involve in the

development process. All of these elements are important in the process of development

of the system. List of hardware and software are shown as below:

3.4.1 Hardware requirement

Hardware is another thing that important to have in order to make the application work.

Without hardware, the software cannot be use. The hardware that use are a high spec

personal computer ( PC ) because it need more power when it comes to work with 3D

and animation. Next one is, android phone, it is use to test the application whether it

work fine on the device or not. And also, the printer that will be use to print out flash

card or marker

i. Personal Computer ( PC )

• To create the sketches for the characters, background and create scripts and

also used for on the go coding and 3D modelling.

Specifications :

• Processor : AMD Ryzen 3 2300X 4.0Ghz 4 Cores 4 Threads

• OS : Windows 10 Pro 64 bit

• Memory : 8GB RAM DDR4 Dual Channel

• GPU : Asus Nvidia GTX 1050 2GB

• Storage : Adata Spectrix SSD RGB 250GB

29

ii. Printer Canon E410

• Used to print out the flash card and the report.

iii. Android Mobile Phone: RealMe 5i

• Used to run and test the application

3.4.2 Software requirement

The software used during the Lets Learn Malaysian Traditional Games

via Augmented Reality (AR) application development is Unity 3D – Game

Engine; this will be the main software that should gather and combine of the

element that will be have on the application. Autodesk Maya 2020 software is

uses to make 3D model of anything such as building model and more. Microsoft

Visual Code; this software is use for code the function in the application such

as to make the button functioning when user press the button. Vuforia; this is

the platform that allow this application to have the feature of Augmented

Reality on the devices.

1.Unity3D

• Used to create the Virtual Reality app and overall project and modelling 3D

object

ii. Autodesk Maya

• Used to create or modified 3D object.

• To texturing the model.

• To create augmented reality.

30

iii. Vuforia

• To create database of AR Marker

• Acquire the license key in the Vuforia

iv. Microsoft Visual Code

• Use for code the function in the application

3.5 Conclusion

Methodology is significant in application development to ensure the system runs

well. In this chapter, it showed that Interaction Design Lifecycle Model is suitable as

guide in building AR application. Aside that, this chapter also explained and enlists

hardware and software requirement for the AR application development to build the

system.

31

CHAPTER 4

IMPLEMENTATION AND RESULT

4.1 Introduction

Implementation and testing were used to ensuring that system will be developed

according to the user requirement. The process that carried out in this phase involved

building system interface so that the system can function completely and user-friendly

with the help of complete user manual. This phase is also a process of defining how the

information system can achieve main objectives of the system before it can be delivered

to the user.

Apart of it, in order to achieve the objective of the system, a few testing that need

to be approaches have been carried out which include integration testing, system testing

and unit testing.

4.2 Implementation

The implementation phase refers to the actual activity of the instruction. The

purpose of this phase is the effective delivery of instruction. This project is implemented

as an Android application by using Unity 3D software that were integrated with vuforia

augmented reality developer. Furthermore, this will help developer design, code, test,

debug and execute the main process of the project. This project also used C# language

for writing a script.

32

Figure 4.2: AR Scan Button

4.2.1 Main Menu Page

Figure 4.1 will show the home page for the user. There is a navigation such as

AR Scan, How To Use, Info and Exit. Figure 4.2 show AR Scan Camera button for user

to go to the AR Camera page. Figure 4.3 shows How To Use button for the user to go

to the instruction page. On Info button. Figure 4.4 shows the Info button to go to the

Credit page. Figure 4.5 shows the Exit button for the user to leave the application.

Figure 4.1: Main Menu Page

Figure 4.5: Exit Button

Figure 4.3: How To Use Button

Figure 4.4: Info Button

AR SCAN

INFO

How To Use

Quit

33

4.2.2 AR Scan Page

Figure 4.6 shows the AR camera page for the user to play and learn the AR used.

User needs to get a market which is flashcard of Malaysian traditional games. Next, the

user can scan the image using AR Camera and the 3D models will pop out automatically

on the mobile phone screen.AR camera page. In figure 4.8 and 4.9 are a sound and back

button. The button will detect the marker and produce the sound of the object name.

Figure 4.7 : AR Scan page ( Video )

Figure 4.6 : AR Scan page ( Model )

34

4.2.3 How To Use Page

Figure 4.10 shows the How To Use App page for the user. User can back to the

home page when press button back.

4.2.4 Info Page

Figure 4.11 shows the About page for the user. User can read a info. User can

back to the home page when press button Home.

Figure 4.8 : Sound Button

Figure 4.9 : Back Button

Figure 4.10 : How To Use page

35

4.2.5 AR marker

A marker or image target can be anything, as long as it has enough unique visual

points. Images with lots of concerns and edges work well. It designed with the colorful

element using Adobe Photoshop. The image of the object at the center, and the name of

the object so that users can play while spelling the name of the object correctly. Besides

that, Vuforia developer is a website that let the developer check if the image is a suitable

marker and every marker features. A feature is a sharp, spiked, chiseled detail in the

image, such as the ones present in textured objects. The image analyzer represents

features as small yellow crosses. Increase the number of these details in the image, and

verify that the details create a non-repeating pattern. There are 20 markers based as

shown in Appendix IV.

4.2.6 3D model

3D modelling is the process of developing a mathematical representation of any

surface of an object (either inanimate or living) in three dimensions via specialized

software. The product is called as a 3D model. It can be displayed as at two-dimensional

image through a process called 3D rendering or used in a computer simulation of

physical phenomena. This project created a 3D model using Autodesk Maya included

Figure 4.11 : Info Page

36

with the animation and texture as shown in figure 4.12. Furthermore, some models also

download from website page name Free 3D model. The 3D model was built with texture

and animation.

4.2.7 Platform AR using Unity3D

This module is an application development process of Lets Learn Malaysian

Traditional Games via Augmented Reality (AR) and it uses Unity3D software and it

uses C # language.

Figure 4.12 : Modeling 3D and key frame

Figure 4.13 : Unity3D software

37

4.2.8 Script Process

The next setting is some of the programs that play a role in this application.

Among of them are DefaultTrackableEventHandler, Ar Camera,Click Sound,Data

Target and Rotate Object which are all done in Microsoft Visual Studio 2017 software.

All the programs have been developed to set up the Lets Learn Malaysian Traditional

Games via Augmented Reality (AR) application process to make a decision in terms of

menu switching, the choice of markers that will display 3D objects. Because using the

Unity3D app as a platform in this development process, the program must be done using

Microsoft Visual Studio software before it will be enclosed in the work file that has

been created. Firstly, DefaultTrackableEventHandler is interfaced for handling

trackable state changes. Secondly,Ar camera script to load a scene to open a camera to

scan an image. Then,Click sound script is for mange sound button of application.

Besides that, DataTarget are enable display visual graphic button and add sound to each

button. Lastly, RotateObject are enabled object to rotate automatically when scanning

marked. The script process as shown in Appendix V.

4.3 Testing

Testing is one of an important phase in the development of the project. This

phase works to test the system or application whether it fully function or vice versa. In

this phase, there is three types of testing to test the application which is unit testing,

integrate testing and system testing. Unit testing is carried out to verify the functionality

of specific section code. Integration testing is to an exposed defect in the application

interfaces and interaction between module.

38

4.3.1 Usability Testing

Usability testing is a way to see how easy to use something is by testing it with

real users. Users are asked to complete tasks, typically while they are being observed

by a researcher, to see where they encounter problems and experience confusion. If

more people encounter similar problems, recommendations will be made to overcome

these usability issues. Therefore, usability testing is a method used to evaluate how easy

an application is to use. The tests take place with real users to measure how usable or

intuitive an application is and how easy it is for users to reach their goals. There are 5

questions for the user as shown example question in Appendix III. The following are

the results of the survey calculated as shown in Figure 4.14. Figure 4.14 shows the line

graph of the questionnaire that provided 5 responses from users. Question 1 to 5 is at

the average level. It can be seen the question 5 has the highest level, which application

can help a student to gain knowledge. Furthermore, the responses give good feedback

about the website but as we can see the lowest level is about question 3 which this

application gives beneficial to student. Overall, we can see a clear upward trend of the

new widely used technologies that can reflect the effectiveness of education for the

interactive learning concept children.

39

Figure 4.14: Line Graph

4.4 Conclusion

In this chapter of implementation and testing, it is been describe and show all

the user interfaces in the application. It can act as a guide for the new user about how

can they use the application. Testing also an important part to ensure that all the

functionality achieved and run smoothly. Maintenance should be carry from time to

time to check whether there are any bugs detected. This phase will repeat to ensure the

error can be minimized and the application will be optimized.

4.2

4 4

4.4

4.6

3.73.83.9

44.14.24.34.44.54.64.7

The interface in thisapplicationinteresting?

All button in thisapplication function?

This application givesbeneficial to

student?

This application canhelp student learnand know about

malaysian traditionalgames?

This application canhelp student gainmore knowledge?

Questionaire Lets Learn Malaysian Traditional Games via AR

40

CHAPTER 5

CONCLUSION

5.1 Introduction

In this chapter, the contribution Lets Learn Malaysian Traditional Games via

Augmented Reality (AR) , problem and the limitation during the project development

such as well as the future work in order to improve the application itself will be

discussed.

5.2 Project Achievement and Contribution

Lets Learn Malaysian Traditional Games via Augmented Reality (AR) is an

application for primary student to learn more traditional games . By using this

application, user having fun with scanning display interactive 3D model with animation

and learn how to play the game through the video via the Augmented Reality

.Furthermore, it is very convenient to use because the user only just needs to be

download on the play store and can use them without any internet connection.

5.3 Problem and Limitation

There are a few problems and limitations that occur during the development

process of this project. Firstly, this application can only scan one image only. It cannot

41

make two or more scanning and it will not be working. This application must need a

suitable light source when scanning the image. Furthermore, the user needs the latest

smartphone to play this application. Besides that, the limitation is this application only

available on the Android platform only. Other than Android platform such as IOS or

Huawei AppGallery, it cannot run.

5. 4 Future Work

Although the application operates in properly and follow the milestone properly,

Lets Learn Malaysian Traditional Games via Augmented Reality (AR) still need an

improvement or any upgrade in the future. There is some suggestion that can be made

in order to upgrade the application to be more efficient in the future. The suggestion is

adding more flashcard on type traditional game and other related topics. Besides that,

this application can only be installed on Android only so the user can play on their

smartphone anytime anywhere. I hope that this application may help student and teacher

to learn about our traditional games in Malaysia.

5.5 Conclusion

Lets Learn Malaysian Traditional Games via Augmented Reality (AR) is the

application that packed with AR features will mainly focuses on the information of

traditional games for the student. IDLM ( Interaction Design Lifecycle Model ) model

has been used in this application from identify requirements to re/design, prototype, and

evaluation of the suitable category or type of mobile devices for user’s daily life. The

storyboard interface design and framework that included in this report can also be act

as a guideline for a user to use the application and also for research in their work.

42

Reference

1. Serin, H. (2017). Augmented Technologies in the education: AR apps. Journal

of Educational Sciences & Psychology, 7(2).

2. Billinghurst, M. 2002. Augmented Reality in Education. Seattle WA: New

Horizons for Learning - Technology in Education.

3. Yoga Awalludin Nugraha, Eko Handoyo & Sri Sulistyorini. (2018). Traditional

Game on The Social Skill of Students in The Social Science Learning of

Elementary School. Journal of Primary Education (pp. 220-227). Universitas

Negeri Semarang, Indonesia.

4. Marco Paladini (2018). 3 Different Types of AR Explained: Marker-Based,

Markerless & Location.

5. http://mirlab.net/myganuar/

6. https://play.google.com/store/apps/details?id=com.MirLab.MyGanuARv1&hl

=en

7. https://sites.google.com/site/malaysiantraditionalgames123/type-of-games

8. http://www.jkkn.gov.my/en/traditional-games

43

APPENDIX

APPENDIX I

( GANTT CHART FYP 1 )

TASK NAME SEPTEMBER OCTOBER NOVEMBER DECEMBER

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Topic Discussion

Project Title

Proposal

Proposal Writing

Proposal Writing

Literature Review

Proposal Progress

Presentation &

Evaluation

Discussion

Correction Proposal

Proposed Solution

Methodology

Proof of Concept

Drafting Report of

The Proposal

Submit Draft of

Report to Supervisor

Seminar Presentation

Final Report

Submission

44

APPENDIX II

( GANTT CHART FYP 2 )

TASK NAME FEBRUARY MARCH JUNE JULY

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Project Meeting with

Supervisor

Project Development

Proposal Progress

Presentation & Panel

Evaluation

Project Development

Project Testing

Final Year Project

Format Writing

Workshop

Project Testing

(continued)

Submit Draft Report

and Documentation of

the project

Preparation for Final

Presentation

Final Presentation and

Panel's Evaluation

Final Thesis

Submission and

Supervisor's

Evaluation

45

APPENDIX III

( QUESTIONAIRE LETS LEARN MALAYSIAN

TRADITIONAL GAMES VIA AUGMENTED REALITY )

No Question Strongly

Disagree

Disagree Neither Agree

Nor Disagree

Agree Strongly

Agree

1 The interface in this

application

interesting?

1 2 3 4 5

2 All button in this

application function?

1 2 3 4 5

3 This application gives

beneficial to student?

1 2 3 4 5

4 This application can

help student learn and

know about malaysian

traditional games ?

1 2 3 4 5

5 This application can

help student gain more

knowledge?

1 2 3 4 5

46

APPENDIX IV

( AR MARKER & FEATURES )

47

48

49

50

51

52

APPENDIX V

( SCRIPT CODES )

1. Load Scene

53

2. Data Target And Sound

54

3. Rotate

55

4. Video Plane Controller

56

5. Lean Gesture

57

6. DefaultTrackableHandler

58

7. Quit Button

59

APPENDIX VI

( POSTER LETS LEARN MALAYSIAN TRADITIONAL GAMES

VIA AUGMENTED REALITY )