Embed Size (px)
Citation preview
SOLAH GUIDE DURING ILLNESS (SGdI)
MOBILE APPLICATION
IN 3D ANIMATION
BASYIR BIN MOHAMAD AZHAR
BACHELOR OF INFORMATION TECHNOLOGY
(INFORMATIC MEDIA)
UNIVERSITI SULTAN ZAINAL ABIDIN
2019
BA
SY
IR M
OH
AM
AD
AZ
HA
R B
AC
HE
LO
R O
F IN
FO
RM
AT
ION
TE
CH
NO
LO
GY
2019
SOLAH GUIDE DURING ILLNESS (SGdI)
MOBILE APPLICATION
IN 3D ANIMATION
BASYIR BIN MOHAMAD AZHAR
BACHELOR OF INFORMATION TECHNOLOGY
(INFORMATIC MEDIA) WITH HONOURS
UNIVERSITI SULTAN ZAINAL ABIDIN
MAY 2019
i
DECLARATION
I hereby declare that this report is based on my own work except for quotations and
citations, which have been fully obtained with references. I also declare that it has not
yet previously submitted by any other degree at University Sultan Zainal Abidin or other
institutions.
_________________________________
Name: Basyir bin Mohamad Azhar
Date: 12 May 2019
ii
CONFIRMATION
This is to confirm that:
The research conducted and the writing of this report was under my supervision.
_________________________________
Name: Puan Norkhairani binti Abd. Rawi
Date: 12 May 2019
iii
DEDICATION
In the Name of Allah, the Most Gracious and the Most Merciful
Alhamdulillah, thank to Al-Mighty Allah S.W.T for his grace for giving me strength to
complete my first final year project, Solah Guide during Illness (SGdI) in 3D animation.
Although, with this opportunity I would like to express everyone who supported and
also thankful for their aspiring guidance, helpful criticism and friendly advice during
the project work. I am sincerely grateful to them for truthful illuminating views on a
number of issues related to the project.
Firstly, I express my thanks to Puan Norkhairani binti Abd. Rawi as my
supervisor for guidance, monitoring and constant encouragement throughout the course
of this final year project. I want to take this opportunity to thank my parent and also
special thanks to all lecturers of Faculty Informatics and Computing for their attention,
guidance and advice to help in the development of this project.
I would also like to thanks all my friends and classmates for their valuable
interpretations and suggestions on this project which gave me an inspiration to improve
this project. I thank all the people for their help directly and indirectly to complete this
project.
iv
ABSTRACT
Solah is the second pillar of Islam. Solah Guide during Illness (SGdI) is a mobile
application which has been developed to assist patients that has some difficulties to
perform their solah in a normal way. SGdI application employs six learning modules.
Four modules for solah and two modules for wudhu' and tayammum. We included an
animation as an approach to guide potential users effectively. Each activity done by the
animation represents certain movement of solah during illness. One module of
understanding is a Quiz that provided as a way to test user’s comprehension. This
application embedded with interactivity and user control concept that allow user to
freely explore the application at their own pace.
v
ABSTRAK
Solah adalah tunjang Islam yang kedua. Panduan Solah semasa Penyakit (SGdI) adalah
aplikasi mudah alih yang dibangunkan untuk membantu pesakit yang mempunyai
beberapa kesukaran untuk melakukan solah mereka secara normal. Aplikasi SGdI
menggunakan enam modul pembelajaran. Empat modul untuk solah dan dua modul
untuk wudhu 'dan tayammum. Bagi setiap modul disertaka bersama animasi 3D sebagai
pendekatan untuk membimbing pengguna yang berpotensi dengan berkesan. Setiap
aktiviti yang dilakukan oleh animasi mewakili pergerakan solah tertentu semasa sakit.
Satu modul pemahaman adalah Kuiz yang disediakan sebagai cara untuk menguji
pemahaman pengguna. Aplikasi ini mempunyai elemen interaktiviti dan konsep
kawalan pengguna yang membolehkan pengguna untuk meneroka aplikasi secara bebas
dengan pantas.
vi
CONTENTS
PAGE
DECLARATION i
CONFIRMATION ii
DEDICATION iii
ABSTRACT iv
ABSTRAK v
CONTENTS vi
LIST OF FIGURES x
LIST OF TABLES xiii
APPENDICES xiv
CHAPTER I INTRODUCTION
1.1 Introduction 1
1.2 Project Background 1
1.3 Problem Statement 3
1.4 Objective Study 3
1.5 Scope 4
1.6 Limitation of Work 4
1.7 Expected Result 5
CHAPTER II LITERATURE REVIEW
2.1 Introduction 6
2.2 Related Project and Application 7
2.2.1 Panduan Solat Ketika Sakit 7
2.2.2 3D Hajj and Umrah Guide 8
vii
2.2.3 Bio Terapi Solat: 3D Integration 9
in Solat Technique for Therapeutic Means
2.2.4 Step by Step Salah Daily prayers: 10
Namaz & Duas
2.2.5 SmartSolat Ustaz Don 11
2.3 Research Comparison 12
2.4 Chapter Summary 13
CHAPTER III METHODOLOGY
3.1 Introduction 14
3.2 ADDIE Model Methodology 15
3.2.1 Analysis Phase 15
3.2.2 Design Phase 17
3.2.3 Develop Phase 17
3.2.4 Implement Phase 18
3.2.5 Evaluate Phase 19
3.3 Hardware and Software Requirement 20
3.3.1 Hardware 20
3.3.2 Software 21
3.4 Project Framework 22
3.5 Application Design and Modelling 23
3.5.1 Storyboard application 23
3.5.2 3D Animation Production 25
3.6 Chapter Summary 30
viii
CHAPTER IV IMPLEMENTATION AND RESULT
4.1 Implementation 31
4.2 Mobile App Interface 32
4.2.1 Main Menu 32
4.2.2 Menu 32
4.2.3 Solat Menu 33
4.2.4 Cara Bersuci Menu 33
4.2.5 Doa Page 34
4.2.6 Quiz Page 34
4.2.7 Maklum Balas Menu 35
4.2.8 Tetapan Menu 35
4.2.9 Kredit Menu 35
4.2.10 Solat Ketika Duduk Page 36
4.2.11 Solat Ketika Baring Page 36
4.2.12 Solat Ketika Mengiring page 37
4.2.13 Solat Isyarat Mata Page 37
4.2.14 Cara Wudhu Page 38
4.2.15 Cara Tayammum Page 38
4.3 Chapter Summary 39
CHAPTER V CONCLUSION
5.1 Project Contribution 40
5.2 Project Constraints and Limitation 41
ix
5.3 Future Works 41
5.4 Overall Conclusion 42
REFERENCES 43
x
LIST OF FIGURES
FIGURES TITLE PAGE
2.1 Show the interface of Panduan Solat Ketika 7
Sakit Apps.
2.2 Show the interface of 3D Hajj and Umrah Guide. 8
2.3 Show the interface of Bio Terapi Solat: 3D 9
Integration in Solat Technique for Therapeutic Means
2.4 Show the interface of Step by Step Salah 10
Daily prayers: Namaz & Duas.
2.5 Show the interface of SmartSolat Ustaz Don 11
3.1 Describe the ADDIE Model. 15
3.2 Shows the navigation structure for SGdI Mobile App. 16
3.3 Shows the 3D Production Pipeline. 18
3.4 Describe the framework of this application. 22
3.5(i) Shows storyboard of Main Menu and Menu the application 23
3.5(ii) Shows storyboard of Feedback, Cara Bersuci Module 24
and Solat Module the application
3.5(iii) Shows storyboard of Doa Module and 25
Quiz Module the application
3.6 Main character of this 3D animation. 26
xi
3.7 3D Models that included chair, bed, table, 27
room, and wudhu tap.
3.8 Character with skin texture. 28
3.9 Character that has been rigged. 29
3.10 Character that has been animated. 30
4.1 Shows the main menu page 32
4.2 Shows the menu page 32
4.3 Shows the Solat ketika sakit navigation 33
button when the button is pressed.
4.4 Shows the Cara bersuci navigation menu 33
when the button is pressed.
4.5 Shows the Doa pilihan navigation menu 34
when the button is pressed
4.6 Shows the quiz page 34
4.7 Shows the Maklum balas navigation menu 35
when the button is pressed
4.8 Shows the Tetapan navigation menu when 35
the button is pressed
4.9 Shows the Kredit navigation menu when 35
the button is pressed
4.10 Shows the Solat posisi duduk page 36
4.11 Shows the Solat posisi baring page 36
4.12 Shows the Solat posisi mengiring page 37
4.13 Shows the Solat Isyarat Mata page 37
xii
4.14 Shows the Cara wudhu page 38
4.15 Shows the Cara Tayammum page 38
xiii
LIST OF TABLES
TABLE TITLE PAGE
2.5 Show the interface of SmartSolat Ustaz Don 12
xiv
APPENDICES
APPENDIX TITLE PAGE
I GANT CHART FYP 1 45
II GANT CHART FYP 2 46
1
CHAPTER I
INTRODUCTION
1.1 Introduction
In chapter 1, there are five subtopics that we will briefly discuss. They are included
introduction, background of study, objectives, problem statement, and scope.
Introduction discuss about basic information about this application while background
of study will explain about the area of research to set context for problem that which
really happened. Problem statement will be discussing about related issues in this
project. Objectives will define all the main goal of this application. Lastly, scope will
elaborate more about where this application will take part in the society.
1.2 Project Background
Solah is the second pillar of Islam. It is also a worship that every mukallaf
Muslim, healthy or even they’re sick have to perform as long as they have a sound
minded. Every Muslim should keep their prayers in time even it is hard for them to
perform it. However, Islam has given the flexibility and ability to perform according to
the existing conditions and capabilities. Furthermore, the only thing that make it
different are the steps during solah. It’s not the same with those who has physical illness
and those who are healthy.
2
In that case, I create this application for user that has problem with solah in a
normal way. The common application that provide guideline solah during illness is to
measly which is one in the million. As known the application I will develop is Solah
Guide during Illness (SGdI) is a mobile application which has been developed to assist
patients that has some difficulties to perform their solah in a normal way. SGdI
application employs six learning modules. Four modules for solah and two modules for
wudhu' and tayammum. We included an animation as an approach to guide potential
users effectively. Each activity done by the animation represents certain movement of
solah during illness. One module of understanding is a Quiz that provided as a way to
test user’s comprehension. This application embedded with interactivity and user
control concept that allow user to freely explore the application at their own pace.
Hence, this apps will deliver the content in 3D animation. The 3D character will
show the way of the solah during illness. 3D animation refers to the work of creating
moving pictures in a digital environment that is three-dimensional. 3D describes an
image that provides the view in depth. When 3D animation is presented, the user eyes
will be believed and involved with the scene. Nowadays, 3D has worldwide used in the
film industry and cartoon production and now its growing in the field of education,
game, and also in advertisement.
3
1.3 Problem Statement
Knowing the techniques and methods of performing the proper prayers is an
obligation that every Muslim community should know. Because, when a person faces a
problem to pray normally, they still must pray according to their ability. According to
the researcher from Universiti Sultan Zainal Abidin there are eighty presents of patients
in Hospital Nur Zahirah Terengganu did not solah. The most reason of the patients
cannot fulfill their prayers is because of they do not know how to solah in a proper way.
Although, lack of learning applications that briefly teaches techniques and guideline
about solah during illness, Oral learning and textbooks have been considered outdated
and boring. Otherwise, the existing application don’t reach the expectation of effective
learning. Therefore, it is important for them to know how to pray during illness. In that
case, the failure to find out the source will drive to the failure for the patient to perform
the prayer.
1.4 Objective Study
• To analyses the need of solah during illness application.
• To design an application that provides a proper knowledge and means to
perform solah during illness that can help user to understand the topic.
• To develop an application that can be used on mobile platforms such as Android.
4
1.5 Scope
• User – Patient and medical practitioner
• Users can choose whether to learn solah in all kinds of category during
illness.
• Users can learn the topic about guideline solah during illness by playing
the 3D animation.
• User can send a feedback to the administrator for any suggestion and
comment about this apps.
• User can play an activity after learning the topic by clicking the activity
button to make sure they understand the learning.
• Admin
• Manage all the information (add new information, updates, delete) about
any current change.
• System
• The application is developed in Android platform.
1.6 Limitation of Work
The limitation of this application is it only focus on how to solah during illness
in particular method and only covers in Mazhab Shafi’e thought. Furthermore, this
system is developed based on android so that it only can be open using an android
device.
5
1.7 Expected Result
The expected result for this manufacture of the proposed project are the user can
learn about solah during illness in interactive way of understanding the course. The 3D
animation that also provided in this application will help user to experience the real
environment of the learning process.
6
CHAPTER II
LITERATURE REVIEW
In this chapter, we will discuss about survey, evaluating and summarizing the existing
works and previous journal of a complete research that done by a researcher. It can be
a guideline to design a new application so that the new application can exaggerated the
better experience compare to the existing application. In this chapter, it includes all
techniques and method used in developing the application. Moreover, the comparative
research between the current system and developed system is to be done to overcome
the weakness of the current application.
2.1 Introduction
In this era of technology, there are numerous approaches to get information. We
can fundamentally discover it by reading a book, find someone to discuss in a specific
course and by simple search in internet. Although, there are also many application and
research that provide information needed. In that case, it is important to find the
favorable circumstances and inconveniences of every application before creating our
own application. In this section we also give correlation form for the previous
application to see similitudes and contrasts between the applications.
7
2.2 Related Project and Application
2.2.1 Panduan Solat Ketika Sakit
Application of Patient Prayer Guide is a lightweight app that features some
prayer guide picture illustrations for sick people. [MFK BestApps, 2017]
Figure 2.1: Show the interface of Panduan Solat Ketika Sakit Apps.
8
2.2.2 3D Hajj and Umrah Guide
This is another application that is connected 3D Hajj is the most wonderful and
interactive Hajj guide app that you will find on any mobile device. This app offers the
complete 3D model and easy-to-follow step by step instructions of all the places and
actions that are required for the completion of both Hajj and Umrah. This ultimate Hajj
guide has been created in accordance with the Quran and Sunnah. This app will amaze
you. [Pakistan Data Management Services, 2013]
Figure 2.2: Show the interface of 3D Hajj and Umrah Guide.
9
2.2.3 Bio Terapi Solat: 3D Integration in Solat Technique for Therapeutic Means
This research focuses on solat guidance in three dimensional (3D) ways. The
purpose of this research is to show the complete solat techniques as a therapy to the
human body and health using 3D model. This application is developed using 3D
Autodesk Maya software that includes the human model, movement (rigging) and other
multimedia elements that can create interactivity in this application. The application
shows a guideline of learning a perfect Solat Technique and the benefit of solat in the
therapeutic means. Usability test is performed to observe the usability and learnability
aspects of the application. [AF Rosmani, NA Zainuddin, SZ Ahmad, SZ Ramli, 2015].
Figure 2.3: Show the interface of Bio Terapi Solat: 3D Integration in Solat Technique
for Therapeutic Means.
10
2.2.4 Step by Step Salah Daily prayers: Namaz & Duas
Islamic Smartphone application for teaching Muslims everywhere throughout
the world about how to offer Salah (Namaz) with all the required information. It is a
complete guide for believers to get themselves comfortable with every aspect of daily
prayers. This app helps Muslims to complete one of the most important pillar (Salah)
of Islam. Suitable for kids, adults and everyone. Step by step app is classified in five
sections.1. Daily prayers 2. Occasional prayers 3. Arrangement 4. Making up 5.
Timings. [TAKBIR, 2018]
Figure 2.4: Show the interface of Step by Step Salah Daily prayers: Namaz & Duas.
11
2.2.5 SmartSolat Ustaz Don
Manual to Perform Solat (Muslim Daily Prayer) performed by al-Ustaz Don
Daniyal. SmartSolat contains the step-by-step animated guide to perform Solat (the
Muslim daily prayer). The Solat are performed five times a day including Subh (before
sunrise), Zuhr (noon), Asr (afternoon before dusk), Maghrib (dusk) and Isha' (at night).
Before each Solat, Muslim will cleanse themselves by performing Wudhu’. [
FSTM.kuis.edu.my,2016]
Figure 2.5: Show the interface of SmartSolat Ustaz Don
12
2.3 Research Comparison
Table 2.1 shows the comparison information for the existing application that required
the differences features
Applications Method Platform Function
Panduan Solat
Ketika Sakit
-Picture
-Description
-Android -Provide detail
information.
-Enable user to navigate
in the application.
3D Hajj and Umrah
Guide
-3D Simulation
-Animation
-Audio
-Android
-IOS
-Provide detail
information with 3D
animation.
-System provide
feedback.
Bio Terapi Solat:
3D Integration in
Solat Technique for
Therapeutic Means
-3D Simulation
-Animation
-Audio
-PC platform -Provide detail
information with 3D
animation.
-User can select the
desired options.
Step by Step Salah
Daily prayers:
Namaz & Duas
-2D picture
-Description
-Android
-Provide step by step
instruction
-It has a filter of what
kind of Islamic thought,
gender and etc.
-Using 2D image
SmartSolat Ustaz
Don
-2D Animation
-Audio
-Android
-IOS
-Using 2D animation
-Audio instruction
13
2.4 Chapter Summary
This chapter gives the information about the examination on the past research,
recent application, articles and project. The study is more on centering to execute
advancement and guide for the better application, to turn out with the new application
that advantage to all users
14
CHAPTER III
METHODOLOGY
The methodology is one of the most important chapters in this entire project. It outlines
why you chose a particular methodology in order to solve the problem and secondly
explaining the plan to collect and analyses data. Moreover, methodology should aim to
provide the project with the information to allow it come to some conclusions.
3.1 Introduction
This chapter, discusses the methodology which is used in developing the
application project. The ADDIE Model is used in development of this project of Solah
Guide during Illness (SGdI) in 3D Animation. The chapter explains the detail about
every phase that involve on the project development. In order to ensure the effective of
the SGdI, good planning is required before the development process can be started. All
the method and processes undertaken in ADDIE Model are visible. Hence, the particular
activities of all phases are briefly explained as below.
15
3.2 ADDIE Model Methodology
In ADDIE model, there are five phase approach to building the effective
learning solution. The phase in ADDIE Model is Analysis Phase, Design Phase,
Development Phase, Implementation Phase and Evaluation Phase. All the method and
processes undertaken in ADDIE Model are visible. Hence, the particular activities of
all phases are briefly explained as below.
Figure 3.1: Describe the ADDIE Model.
3.2.1 Analysis Phase
The Analysis phase was the process of defining what need to be develop in 3D
mobile animation learning application. This phase is most consequential phase of
developing this project. The phase may include specific research techniques such as
needs analysis, job analysis and task analysis [4]. Specific research techniques are
which the I already observe from the previous chapter.
16
Comparison the project and simplify determine the most possible solutions.
Furthermore, it is essential thing to make a broad view of the instructional design. The
navigation structure for SGdI in 3D Animation app is shows in figure 3.2.1. The result
of this analysis drives me to make an application that use the 3D animation as the
environment of making the learning process become more interesting, effective, and
updated.
Figure 3.2: Shows the navigation structure for SGdI Mobile App.
17
3.2.2 Design Phase
In this phase, I recognize the design of the application and created framework
dependent on the functionalities that will be develop. In this stage I also creates the
strategy for the project objectives, assessment approach, activities, content, and how the
process is required. Sometimes, a prototype or multiple prototypes are created to
provide the users with options and demonstrate certain aspects of how the application
will look and feel before the full project is proceed or authorize for development.
3.2.3 Develop Phase
This is the process of creating and assembly of the material such as developing
function of each button. Therefore, all the materials will be used during instruction and
any kind of support. The storyboard made will be utilized as a guide to create the button
and the interface. The button is important role to enable users to explore in this
application. Each element in the application must match the application interface. Font
and color with appropriate style is made to attract users to use this application.
Meanwhile, the content of 3D animation is developed by using 3D production pipelines.
18
Figure 3.3: Shows the 3D Production Pipeline.
3.2.4 Implement Phase
Encompasses review and testing to ensure that the reference material,
equipment, tools, and software are ready for testing. This is followed by users
participating in the instruction. It is important part of this project to evaluate the
usability of this project. Moreover, the implementation process is used to detect errors
and problem in this application. There two parts in this implementation phase which is
testing run project and user testing run project.
1) Testing Run Project
• I will test run the project. While testing this project I have to make sure that the
project is successfully run correspondingly.
19
2) User Testing Run Project
• After testing the project, I have to test it to the user. User will give their feedback
before the final product can be launch to the bigger users. The Criticisms and suggestion
is taken and will be implemented later on.
3.2.5 Evaluate Phase
Assessment of this project intended to ensure the application and content
achieved the project objectives. The evaluation phase exists of two parts: formative and
summative. Formative evaluation is method for assessing an effectiveness of the project
while the project is in progress, while summative evaluation is a method for assessing
a project at the completion of the project. In formative part I make a debug which
required identifying the errors of this project and next I will find the solution of those
errors and problems.
1) Identifying Errors
• When the project is done for the testing phase, an error that appears should be
identified, what problem that occur during the implementation. Example a bug and
accuracy should be taken wisely for the developer to ensure the project efficiency.
2) Find the Solution
• After done identifying the problems the developer has to find the solution to
improve the project.
20
3.3 Hardware and Software Requirement
In the software development process, the requirement such as software and
hardware are the most important requirement to ensure that all system development
work perfectly without any problems. There are several requirements were used to
complete this project which is:
3.3.1 Hardware
Minimum requirement needed in the development of this system are:
i) Computer
Use to develop the application which required assembly those important
material for this project and store another document related to this project. Although it
is used to Modeling 3D character and others.
• Processor: Intel Core i5
• Memory: 4GB
• Hard disk: 370GB
• Operating System: Windows 10
• Graphic: NVIDIA GeForce 820
ii) Android Phone
Use to test and run the project.
• Memory: 3GB
• Storage: 36GB
iii) Hard drive
Used to backup file and material that related to this application project.
• Storage: 250GB
21
3.3.2 Software
Software requirement for this project are:
i) Unity 3D
• Used to create the 3D animation app and overall project.
ii) Autodesk Maya
• Used to develop a 3D character model.
iii) Photoshop CS6 and Illustrator CS6
• Used to design interface, logo and button for the application and texture of 3D
model.
iv) Firebase Google
• Used to store feedback from user.
v) Microsoft Office 2016
• Used to write proposal and report.
22
3.4 Project Framework
The framework is one of the important parts of application structure. This refer
to the specified the level of complexity that I will using unity as my general requirement
of this project. This 3D Unity software can be used to develop this apps in 3D animation
environment and also it also involves C# (pronounced C Sharp) which is the language
of this software.
For users, they learn the module given in this application as well as doing some
activities such as quiz. Their mobile phone screen will show content which are 3D
animation element such as solah in sitting position and many more.
Next, admin of this application is able to do all the activities by the users and
more importantly, admin can update the content of the mobile application including
information and 3D Animation.
Figure 3.4: Describe the framework of this application.
23
3.5 Application Design and Modelling
A storyboard is also a part of multimedia design process. The storyboard shows
the look and feel of the application that will be developed. Some of the storyboard can
be seen in interface prototype. For the application, developer need to create a storyboard
design including modelling the 3D model. This can otherwise help developer to shape
the best vision of the application.
3.5.1 Storyboard application
Main Manu
Button:
-Exit
-Back
-Sound
Description:
Click on the screen to
continue
Menu
Button:
-Maklum Balas -Exit
-Tetapan
-Back
Description:
Click any button to continue
Figure 3.5(i): Shows storyboard of Main Menu and Menu the application
24
Feedback
Button:
-Smile Face
-Exit
-Fill the form
-Send
-Back
Description:
Click any button to continue
Cara Bersuci Module
Button:
-Play/Pause
-Exit
-Stop
-Scroll button
-Back
Description:
User will learn the topic by
playing the animation
Solat Module
Button:
-Play/Pause
-Exit
-Stop
-Scroll button
-Back
Description:
User will learn the topic by
playing the animation
Figure 3.5(ii): Shows storyboard of Feedback, Cara Bersuci Module and Solat Module
the application
25
Doa Module
Button:
-Maklum Balas
-Exit
-Tetapan
-Back
Description:
Click any button to
continue
Quiz Module
Button:
-Maklum Balas
-Exit
-Tetapan
-Back
Description:
Click any button to
continue
Figure 3.5(iii): Shows storyboard of Doa Module and Quiz Module the application
3.5.2 3D Animation Production
In its simplest form, 3D animation is the process of creating three-dimensional
moving images in a digital environment. 3D models within a 3D software are carefully
manipulated to make them look like real moving objects. Just like traditional animation,
the goal of 3D animation is to make it appear on screen as if the images are actually
moving when in fact, they are simply a series of consecutive images which are shown
on a very fast sequence. The same principle is used in 2D or stop animation. The only
difference between 2D and 3D animation is that in 2D, images are hand-drawn while
the pictures are computer-generated in 3D.
26
Now, there are there general phases involved in the making of 3D animation,
modelling, texturing, rigging, animation and rendering. In this case I use Autodesk
Maya as may platform of modelling the 3d model. For Animation, I will first convert
all the 3D maya files to Filmbox(fbx) format file which Unity can read it.
i) Modelling
Creating a 3D character is a greater undertaking than people often realize.
Making 3d Model first you have to come up with the 3D model sheet. 3D model sheet
is a single painting or picture of character in a various angle of pose such as front, side
and top/bottom as a reference for your model. Depends on what you want to use as me
I’m using picture as my 3D model sheet.
We can start from a cube and next crafted polygon-by-polygon per the provided
reference pictures. If the character or object is symmetrical, we can use mirroring tools
to create a perfectly symmetrical model. The result shows as below.
Figure 3.6: Main character of this 3D animation.
27
Along with character we have to also create the others supporting model for
making the enviroment more realistic. The result show as below.
Figure 3.7: 3D Models that included chair, bed, table, room, and wudhu tap.
28
ii)Texturing
In order to give a character features like skin, clothing and hair color, texture
maps are essential. But before these maps can be created and applied, the modeler needs
to unwrap the UVs of the model. UV, or UVW, represent the different axes where the
3D model exists. UVW represent the XYZ axes respectively. [Autodesk, 2016]
We will choose edges on the model, mark them as seams and have the program
place the cut-out shapes onto a UV layout. The UV layout can be exported from the
program into a painting program like Photoshop and a 2D artist can paint the textures
there. The finished textures will be brought back to the 3D program and applied to the
character model. The result show as below.
Figure 3.8: Character with skin texture.
29
iii)Rigging
3D model by itself is a static mesh which cannot be animated by itself without
rigging it first. Therefore, creating a system for moving its limbs is essential. The task
of creating a system for moving a character by creating bones and joints is referred to
as a rigging while the structure itself can be referred to as a rig, armature or skeleton.
[Slick 3, 2016]
The first step to creating an internal digital skeleton, you must first create a
relationship between the mesh and the skeleton (known as skinning, enveloping or
binding). You can use the following methods to animate a skeleton: forward kinematics
(FK), inverse kinematics (IK), or IK/FK blending. Next adding a set of controls that the
animator can use to push and pull the character around.
Figure 3.9: Character that has been rigged.
30
iv)3D Animation
Animation is an optical illusion produced when a rapid succession of images
enters the eye. The brain processes them as though it is seeing movement. Twelve
principles of animation were devised in 1981 to assist in creating believable movement.
So starting by exporting the character that have been created in maya save it as file (fbx,
cd3, etc.). Next import it into the folder in Unity project.
After that setting up rig by right click the character and choose humanoid. Add
the animator controller and start making an animation. The result shows as below.
Figure 3.10: Character that has been animated.
3.6 Chapter Summary
This chapter explained the important use of methodology to complete this
project. The ADDIE method unable developer to perform appropriate system
development step by step. Besides that, by using this method developer will increases
the possibilities of achieved the objective. Moreover, this chapter also discussed the
hardware and software requirement for this application project
31
CHAPTER IV
IMPLEMENTATION AND RESULT
In this chapter, we will discuss about the implementation of the methodology discussed
in previous chapter and testing to obtain the result of each implementation.
Implementation is executed to ensure the system is developed according to the main
objectives of the system and fulfill the user requirement. Testing will be executed so
that the developer will recognize the defects as soon as possible and repair it
immediately
4.1 Implementation
The results of the project or study implementation are described in detail. Each
interface of the application be labeled and discussed in detail as if it were a user manual.
32
4.2 Mobile App Interface
4.2.1 Main Menu
Figure 4.1: Shows the main menu page
The main menu is the first view of this app. Figure 4.1.2 shows the main menu
featuring seven optional buttons that user can pressed.
4.2.2 Menu
Figure 4.2: Shows the main menu page
When the “Menu button” button on the main menu is pressed this view will be
removed. Figure 4.2.2 is a display for users to choose. The user can also return to the
main menu view by selecting the arrow at the right side of this interface
Menu Button
Menu Volume
Exit Button
Button Next
Page
33
4.2.3 Solat Menu
Figure 4.3: Shows the solat ketika sakit navigation button when the button is pressed.
4.2.4 Cara Bersuci Menu
Figure 4.4: Shows the cara bersuci navigation menu when the button is pressed.
34
4.2.5 Doa Page
Figure 4.5: Shows the doa pilihan navigation menu when the button is pressed
4.2.6 Quiz Page
Figure 4.6: Shows the main menu page
When the “Quiz” button on the main menu is pressed this view will be removed.
Figure 4.2.6 is a display to the users. The users have to complete the question by
answering the quiz. After done answering the quiz the score will appear and user can
go back to the main menu option page.
Play and Pause
button
Stop button
Next button Previous button
35
4.2.7 Maklum Balas Menu
Figure 4.7: Shows the maklum balas navigation menu when the button is pressed
4.2.8 Tetapan Menu
Figure 4.8: Shows the tetapan navigation menu when the button is pressed
4.2.9 Kredit Menu
Figure 4.9: Shows the kredit navigation menu when the button is pressed
Back button
Send button
36
4.2.10 Solat Ketika Duduk Page
Figure 4.10: Shows the solat posisi duduk page
When the “Solat Posisi Duduk” button on the “Solat ketika Sakit” on press this
paper is removed. Figure 4.2.10 is the user's main view in Solat posisi duduk page.
Users can easily start the learning proses by pressing the button on the bottom side of
this interface. When the user pressed the button, example pressing button “RUKUK”
the user will hear the audio playing explaining the topic together with the animation.
The same result goes to all pages shows on 4.2.11, 4.2.12, 4.2.13, 4.2. 14 and 4.2.15.
4.2.11 Solat Ketika Baring Page
Figure 4.11: Shows the Solat posisi baring page
“RUKUK”
button
Replay
button
Have no
function yet
37
4.2.12 Solat Ketika Mengiring Page
Figure 4.12: Shows the Solat posisi mengiring page
4.2.13 Solat Isyarat Mata Page
Figure 4.1.13: Shows the Solat Isyarat Mata page
38
4.2.14 Cara Wudhu Page
Figure 4.14: Shows the Cara wudhu Page
4.2.15 Cara Wudhu Page
Figure 4.15: Shows the Cara Tayammum Page
39
4.3 Chapter Summary
In a nut shell for this chapter, part implementation in this chapter have been
describing and show all the user interfaces in the android application. It can act as a
guide for a new user to use this application. Maintenance should be carried out if there
are any bugs detected. The project will repeatedly be tested to minimize the error.
40
CHAPTER V
CONCLUSION
In this section concludes the documentation of this project in the aspect of analysis,
design, develop, implement and evaluation.
5.1 Project Contribution
Solah Guide during Illness (SGdI) in 3D Animation developed based on ADDIE
method mainly aims to assist patients that has some difficulties to perform their solah
in a normal way in a new interactive environment. Furthermore, the other aim is users
also can learn about the 3d animation production in their life. By using this application,
users have opportunities in learning or teaching as an approach to guide potential users
effectively due to the interactive and new technology way.
In that case, it is very convenience since it is an android application and can be
accessed by user everywhere where never they want because it did not use internet
connection. This application has multiple function such as access to not just learning
solah but provided an activity and chosen doa for user to read and explore more about
solah during illness.
41
5.2 Project Constraints and Limitation
The learning environment will really help user to understand without any
ambiguities of understanding the animation content. Somehow there are some problem
in this the project development where the animation is not playing well as expected.
This has caused due to lacking of knowledge in this field also make the project
development quite harder and not works well. There is also some button such as info
button that I want to put a function on it but can’t done it because of limited time taken
to make this application.
5.3 Future Works
Solah Guide during Illness (SGdI) in 3D Animation still has a lot of room to be
improved. 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 animation of details
on each movement of solah and provide some user interaction which user can rotate
their view of the model. Then, this application also adds two languages such as English
and Arabic. Besides that, this application can be installed in IOS so the IOS user also
can installed it in their smartphone. I hope this application might be a sell in the market
so that we can share our knowledge.
42
5.4 Overall Conclusion
As a conclusion, Solah Guide during Illness (SGdI) in 3D Animation is the application
focuses on aimed to assist patients that has some difficulties to perform their solah in a
normal way. ADDIE model has been used in this application to analysis, design,
development, implementation and evaluation of the suitable category or type of mobile
devices for user’s daily life. The storyboard interface design that included in this report
can also act as a guideline for a user.
43
REFERENCES
1. Al-Azhari, P.M.D.B.I.H., & Abdullah, D. B., (2011) SAKIT Bukan Alasan Untuk
Meninggalkan SOLAT. Batu Caves, Selangor: AL-HIDAYAH HOUSE OF
PUBLISHERS Sdn. Bhd.
2. Yongguang, L., Mingquan, Z., (2011) Using depth image in 3D model retrieval
system. Adv.Mater. Res. (Comput. Mater. Sci.) 268–270, 981–987
3. Baran, I., Popovi, J., (2007) Automatic rigging and animation of 3D characters.
ACM Trans.Graph. 26(3), 72
4. Steven J. McGriff (09/2000) Instructional Systems, College of Education, Penn
State University. Retrieved from
https://www.lib.purdue.edu/sites/default/files/directory/butler38/ADDIE.pdf.
5. Muruganantham, G. (2015). Developing of E-content package by using ADDIE
model, International Journal of Applied Research,1(3), 52-54. Retrieved from
http://www.allresearchjournal.com/archives/2015/vol1issue3/PartB/67.1.pdf
6. MFK BestApps. (2017). Google Play. Retrieved from Panduan Solat Ketika Sakit:
https://play.google.com/store/apps/details?id=com.andromo.dev638744.app620859&h
l=en
7. Alex Safavinia, 2019). 3D Animation Production: Learn the Steps. Retrieved from
https://www.kasradesign.com/3d-animation-production-learn-about-the-basics-2-2/.
Accessed on 5 May 2019.
8. Autodesk. (2016, 15. November). UVW Map Modifier. Read: 23.3.2017. Retrieved
from
44
https://knowledge.autodesk.com/support/3ds-max/learn-
explore/caas/CloudHelp/cloudhelp/2017/ENU/3DSMax/files/GUID-78327298-4741-
470C-848D-4C3618B18FCA-htm.html
9. Slick, J. 3 (2016, 2. November). What is Rigging? Read 9.5.2017. Retrieved from
Lifewire. Link address: https://www.lifewire.com/what-is-rigging-2095
45
APPPENDIX
APPENDIX (GANT CHART FYP 1)
ACTIVITYS WEEKS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Topic Discussion
and Determination
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 a draft of the report to supervisor
Seminar Presentation
Correction Report
Final Report Submission
46
APPENDIX (GANT CHART FYP2)
ACTIVITYS WEEKS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Project Meeting with Supervisor
Project Development
Proposal Progress Presentation & Evaluation
Project Development
Project Testing
Submit Draft Report and Documentation of the project
Seminar Presentation
Discussion & Correction Report
Final Thesis Submission
