LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and...

46
LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD ALIFF DANIAL BIN AHMAD AFFANDI BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS MEDIA) WITH HONOURS FACULTY OF INFORMATICS AND COMPUTING SULTAN ZAINAL ABIDIN UNIVERSITY, TERENGGANU, MALAYSIA 2020

Transcript of LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and...

Page 1: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

LETS KNOW MALAYSIAN TRADITIONAL GAMES

( AR )

AHMAD ALIFF DANIAL BIN AHMAD AFFANDI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOURS FACULTY

OF INFORMATICS AND COMPUTING SULTAN

ZAINAL ABIDIN UNIVERSITY, TERENGGANU,

MALAYSIA

2020

Page 2: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR )

AHMAD ALIFF DANIAL BIN AHMAD AFFANDI

BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS MEDIA)

WITH HONOURS

Universiti Sultan Zainal Abidin, Terengganu, Malaysia

JANUARY 2020

Page 3: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

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 : 26 DIS 2019

Page 4: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

ii

CONFIRMATION

This is to confirm that Lets Know Malaysian Traditional Games ( 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 : MADAM IRMA SHAYANA BINTI SAMADEN

DATE : 26 DIS 2019

Page 5: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

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, Madam Irma Shayana Binti

Samaden 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.

Page 6: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

iv

ABSTRACT

The application “ Lets Know Malaysian Traditional Games (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 / Establish Requirements 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.

.

Page 7: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

v

ABSTRAK

Applikasi "Mari Mengenali Permainan Tradisional Malaysia (AR)" 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 / penetapan keperluan, (semula) fasa reka

bentuk, fasa prototaip dan fasa penilaian. Penggunaan kaedah Model Hayat

Cakera Reka Bentuk Interaksi memastikan bahawa pembangunan sistem berjalan

lancar dan mengikut perancangan.

Page 8: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

vi

CONTENTS

PAGE

DECLARATION i

CONFIRMATION ii

DEDICATION iii

ABSTRACT iv

ABSTRAK v

CONTENTS vi

LIST OF TABLE viii

LIST OF FIGURES ix

LIST OF ABBREVIATION x

LIST OF APPENDICES xi

CHAPTER I INTRODUCTION

1.1 Introduction 1

1.2 Background 1

1.3 Problement Statement 2

1.4 Objectives 3

1.5 Scopes 3

1.6 Limitation of work 4

1.7 Expected Result 4

1.8 Activities, Milestones (Gantt Chart) 5

1.9 Conclusion 6

CHAPTER II LITERATURE REVIEW

2.1 Introduction 7

2.2 Related techniques 8

2.2.1 Marked Based 8

2.2.2 Marker less 9

2.3 Related Product 11

2.3.1 Traditional Games Learning Books 11

2.3.2 AR Learning Application ( MyGanuAR ) 12

2.3.3 Lets Know Traditional Games , Web 13

2.4 Comparison table of existing product 14

Page 9: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

vii

2.5 Comparison table of the existing product with

5 element of multimedia

15

2.6 Conclusion 16

CHAPTER III

METHODOLOGY

3.1 Introduction 17

3.2 Methodology Model 17

3.2.1 Identify needs p0hase 18

3.2.2 Design phase 19

3.2.3 Prototype phase 27

3.2.4 Evaluation phase 28

3.3 Framework Design 29

3.4 Hardware and Software Requirement 30

3.4.1 Hardware requirement 30

3.4.2 Software requirement 31

3.5 Conclusion 32

REFERENCES 33

Page 10: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

viii

LIST OF TABLES

TABLE TITTLE

PAGE

1.1 Gantt Chart 5

2.1 Comparision table of existing product 14

2.2 Comparison table of the existing products with 5 element

of multimedia

15

Page 11: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

ix

LIST OF FIGURES

FIGURE TITLE PAGE

2.1 Marker based 8

2.2 Markerless 9

2.3 Traditional Games Learning Books 11

2.4 AR Learning Application ( MyGanuAR ) 12

2.5 Lets Know Traditional Games , Web 13

3.1 Interaction Design Lifecycle Model 19

3.2 Storyboard appllication 21

3.3 Creater Marker 21

3.4 Modeling 3D 22

3.5 Texturing 3D 23

3.6 Rendering 24

3.7 Create marker use Vuforia 25

3.8 Building environment AR use 3D Unity 26

3.9 Framework Design 39

Page 12: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

x

LIST OF ABBREVIATIONS/TERMS/SYMBOLS

AR Augmented Reality

3D Three dimensional

FYP Final year project

Page 13: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

xi

LIST OF APPENDICES

APPENDIX TITTLE PAGE

A Appendix -

B Appendix -

C Appendix -

D Appendix -

Page 14: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

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

Page 15: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

2

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-

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

display on top of real images and surroundings.

“Lets Know Malaysian Traditional Games (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.

Page 16: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

3

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.

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

Page 17: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

4

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.

1.6 Limitation of Works

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

Lets Know Malaysian Traditional Games 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

Know Malaysian Traditional Games 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

Page 18: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

5

1.8 Activities, Milestones (Gantt Chart)

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

Table 1.1 Gantt Chart

Page 19: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

6

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.

Page 20: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

7

CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

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

application Lets Know Malaysian Traditional Games (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 Know Malaysian

Traditional Games (AR) and also the technology of augmented reality. This literature

is made for identifying the weakness or lacking to related literature review sources.

Page 21: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

8

2.2 Related techniques

Related techniques refer techniques of Augmented Reality already existing and

used until now. This is example of techniques:

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

Page 22: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

9

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

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.

Page 23: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

10

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

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.

Page 24: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

11

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

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

primary school students as the reference for learning.

Figure 2.3 Traditional Games Books

Page 25: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

12

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

Page 26: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

13

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

Page 27: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

14

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 2.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.

Page 28: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

15

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.

Page 29: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

16

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.

Page 30: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

17

CHAPTER 3

METHODOLOGY

3.1 Introduction

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

to develop the application Lets Know Malaysian Traditional Games ( 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

Page 31: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

18

development process of the application. The development model for this

application is Interaction Design Lifecycle Model.

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

Page 32: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

19

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.

Page 33: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

20

Tutorial Page

- Will show to the user how to use

the app

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.

Page 34: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

21

Quit Menu

- Quit menu will ask the user if they

want to quit or not.

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

Figure 3.2 Storyboard application

Page 35: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

22

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

phone screen.

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.

Page 36: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

23

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.

Page 37: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

24

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.

Page 38: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

25

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.

Page 39: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

26

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

Page 40: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

27

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.

Page 41: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

28

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.

Page 42: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

29

3.3 Framework Design

Figure 3.9 above shows the framework design of Type Of Hand Tool.

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 3DUnity 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.

Page 43: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

30

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 Athlon 200ge 3.2Ghz 2 Cores 4 Threads

• OS : Windows 10 Pro 64 bit

• Memory : 8GB RAM DDR4 Dual Channel

• GPU : AMD Radeon R9 270 OC Powercolor

• Storage : Adata Spectrix SSD RGB 250GB

ii. Printer HP Deskjet 2135

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

Page 44: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

31

iii. Android Mobile Phone: Sony Xperia z3+

• Used to run and testing the application

3.4.2 Software requirement

The software used during the Lets Know Traditional Games Augmented

Reality 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.

iii. Vuforia

• To create database of AR Marker

• Acquire the license key in the Vuforia

Page 45: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

32

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.

Page 46: LETS KNOW MALAYSIAN TRADITIONAL GAMES ( AR ) AHMAD … · augmented reality (AR) technologies and will be using smartphones. This app may be able to help student from primary school

33

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