Professional Documents
Culture Documents
App Solat Ketika Sakit
App Solat Ketika Sakit
MOBILE APPLICATION
IN 3D ANIMATION
2019
BASYIR MOHAMAD AZHAR BACHELOR OF INFORMATION TECHNOLOGY 2019
SOLAH GUIDE DURING ILLNESS (SGdI)
MOBILE APPLICATION
IN 3D ANIMATION
MAY 2019
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.
_________________________________
i
CONFIRMATION
The research conducted and the writing of this report was under my supervision.
_________________________________
ii
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
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,
I would also like to thanks all my friends and classmates for their valuable
this project. I thank all the people for their help directly and indirectly to complete this
project.
iii
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
application embedded with interactivity and user control concept that allow user to
iv
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
aktiviti yang dilakukan oleh animasi mewakili pergerakan solah tertentu semasa sakit.
Satu modul pemahaman adalah Kuiz yang disediakan sebagai cara untuk menguji
kawalan pengguna yang membolehkan pengguna untuk meneroka aplikasi secara bebas
dengan pantas.
v
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.5 Scope 4
2.1 Introduction 6
vi
2.2.3 Bio Terapi Solat: 3D Integration 9
3.1 Introduction 14
3.3.1 Hardware 20
3.3.2 Software 21
vii
CHAPTER IV IMPLEMENTATION AND RESULT
4.1 Implementation 31
4.2.2 Menu 32
CHAPTER V CONCLUSION
viii
5.3 Future Works 41
REFERENCES 43
ix
LIST OF FIGURES
Sakit Apps.
xi
4.14 Shows the Cara wudhu page 38
xii
LIST OF TABLES
xiii
APPENDICES
xiv
CHAPTER I
INTRODUCTION
1.1 Introduction
In chapter 1, there are five subtopics that we will briefly discuss. They are included
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.
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
1
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
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
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,
2
1.3 Problem Statement
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.
perform solah during illness that can help user to understand the topic.
3
1.5 Scope
• 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
• User can play an activity after learning the topic by clicking the activity
• Admin
• Manage all the information (add new information, updates, delete) about
• System
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.
4
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
5
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
2.1 Introduction
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
own application. In this section we also give correlation form for the previous
6
2.2 Related Project and Application
prayer guide picture illustrations for sick people. [MFK BestApps, 2017]
Figure 2.1: Show the interface of Panduan Solat Ketika Sakit Apps.
7
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
8
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
Figure 2.3: Show the interface of Bio Terapi Solat: 3D Integration in Solat Technique
9
2.2.4 Step by Step Salah Daily prayers: Namaz & Duas
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
Figure 2.4: Show the interface of Step by Step Salah Daily prayers: Namaz & Duas.
10
2.2.5 SmartSolat 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).
FSTM.kuis.edu.my,2016]
11
2.3 Research Comparison
Table 2.1 shows the comparison information for the existing application that required
the differences features
-System provide
feedback.
12
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
13
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
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
14
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
The Analysis phase was the process of defining what need to be develop in 3D
developing this project. The phase may include specific research techniques such as
needs analysis, job analysis and task analysis [4]. Specific research techniques are
15
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.
16
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
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.
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.
17
Figure 3.3: Shows the 3D Production Pipeline.
equipment, tools, and software are ready for testing. This is followed by users
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
• I will test run the project. While testing this project I have to make sure that the
18
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
achieved the project objectives. The evaluation phase exists of two parts: formative and
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
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.
• After done identifying the problems the developer has to find the solution to
19
3.3 Hardware and Software Requirement
hardware are the most important requirement to ensure that all system development
work perfectly without any problems. There are several requirements were used to
3.3.1 Hardware
i) Computer
material for this project and store another document related to this project. Although it
• Memory: 4GB
• Memory: 3GB
• Storage: 36GB
Used to backup file and material that related to this application project.
• Storage: 250GB
20
3.3.2 Software
Software requirement for this project are:
i) Unity 3D
• Used to design interface, logo and button for the application and texture of 3D
model.
21
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
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
22
3.5 Application Design and Modelling
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
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
23
Feedback
Button:
-Smile Face
-Exit
-Fill the form
-Send
-Back
Description:
Click any button to continue
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
24
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
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
25
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
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
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
26
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.
27
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
28
iii)Rigging
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
29
iv)3D Animation
enters the eye. The brain processes them as though it is seeing movement. Twelve
So starting by exporting the character that have been created in maya save it as file (fbx,
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.
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
30
CHAPTER IV
In this chapter, we will discuss about the implementation of the methodology discussed
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.
31
4.2 Mobile App Interface
Button Next
Page
Menu Volume
The main menu is the first view of this app. Figure 4.1.2 shows the main menu
4.2.2 Menu
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
32
4.2.3 Solat Menu
Figure 4.3: Shows the solat ketika sakit navigation button when the button is pressed.
Figure 4.4: Shows the cara bersuci navigation menu when the button is pressed.
33
4.2.5 Doa Page
Stop button
Play and Pause
button
Figure 4.5: Shows the doa pilihan navigation menu when the button is pressed
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
34
4.2.7 Maklum Balas Menu
Back button
Send button
Figure 4.7: Shows the maklum balas navigation menu when the button is pressed
Figure 4.8: Shows the tetapan navigation menu when the button is pressed
Figure 4.9: Shows the kredit navigation menu when the button is pressed
35
4.2.10 Solat Ketika Duduk Page
Replay
button
Have no
“RUKUK” function yet
button
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.
36
4.2.12 Solat Ketika Mengiring Page
37
4.2.14 Cara Wudhu Page
38
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.
39
CHAPTER V
CONCLUSION
In this section concludes the documentation of this project in the aspect of analysis,
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,
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
40
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
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
41
5.4 Overall Conclusion
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,
devices for user’s daily life. The storyboard interface design that included in this report
42
REFERENCES
1. Al-Azhari, P.M.D.B.I.H., & Abdullah, D. B., (2011) SAKIT Bukan Alasan Untuk
2. Yongguang, L., Mingquan, Z., (2011) Using depth image in 3D model retrieval
3. Baran, I., Popovi, J., (2007) Automatic rigging and animation of 3D characters.
https://www.lib.purdue.edu/sites/default/files/directory/butler38/ADDIE.pdf.
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/.
8. Autodesk. (2016, 15. November). UVW Map Modifier. Read: 23.3.2017. Retrieved
from
43
https://knowledge.autodesk.com/support/3ds-max/learn-
explore/caas/CloudHelp/cloudhelp/2017/ENU/3DSMax/files/GUID-78327298-4741-
470C-848D-4C3618B18FCA-htm.html
44
APPPENDIX
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
45
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
46