INNOVATIVE TEACHINGTHROUGH AUGMENTEDREALITY (AR):A PROGRESSIVETRAINING MODULEFirst Edition
INNOVATIVE TEACHING THROUGHAUGMENTED REALITY (AR):First EditionAA PPRROOGGRREESSSSIIVVEE TTRRAAIINNIINNGG MMOODDUULLEE
Nur Dalila Binti AbdullahDepartment of Information Technology & CommunicationPolytechnic of Muadzam ShahMuadzam Shah, Pahang2025Nurul ‘Afifah Binti RazaliMuhammad Shukran Iman Bin ShafieeAUTHORS
COPYRIGHTAll rights reserved. No part of this publication may bereproduced, distributed, or transmitted in any form or by anymeans, including photocopying, recording, or other electronicor mechanical methods, without the prior written permission ofthe Department of Information Technology andCommunication, Politeknik Muadzam Shah, except in the caseof brief quotations embodied in critical reviews and certainother noncommercial uses permitted by copyright law.First EditionAuthors:Nur Dalila binti AbdullahNurul ‘Afifah binti RazaliMuhammad Shukran Iman bin ShafieePublished ByPoliteknik Muadzam Shah, 26700 Muadzam Shah, Pahang
SYNOPSISThis module focuses on the development of a step-by-step Augmented Reality (AR)training module using Unity aimed at guiding users in creating AR applications andexporting them as APK files. The module provides structured instructions coveringUnity installation, AR SDK integration, object placement, and build configuration.Designed for learners with minimal coding experience, it emphasizes hands-on tasksto reinforce understanding. The AR module serves as a practical tool to enhancedigital competencies, especially in technical and vocational education settings. Itsimplementation supports self-directed learning and fosters essential skills relevantto industry demands in AR development and immersive content creation.INNOVATIVE TEACHING THROUGH AUGMENTED REALITY (AR):A PROGRESSIVE TRAINING MODULE
TABLEOFCONTENTSUNITY INSTALLATION 0409121517262729UNITY EDITORMAIN PAGE UI SCENEFONT STYLECREATE PROJECTANDROID ENVIRONMENTDEVICE SIMULATORLAUNCH BUTTON UIAUTHORS IIIIII01SYNOPSISCOPYRIGHTINTRODUCTIONTABLE OF CONTENTS IV123456789
TABLEOFCONTENTS36373842444548AR PAGE UI SCENEVUFORIA DEVELOPERVUFORIA DATABASEANDROID PROVIDERVUFORIA ENGINEVUFORIA CONFIGURATIONIMPORT DATABASE1011121314151650576264687579CLOSE BUTTON UIPANELANDROID PACKAGE KIT3D OBJECT IMAGE TARGETTEXT 3D OBJECTVIDEO IMAGE TARGETEXERCISE17181920212223
1INTRODUCTIONAugmented Reality (AR) in education is a new effort that seeks to change howstudents connect with the curriculum. It brings together the physical world and detaileddigital content to create interactive and engaging learning experiences.Figure 1: AR elementsAnatomy Infrared ExplorerAssist medical students tolearn about human anatomyDesign for ScienceLaboratoriesExample of AR ApplicationPAGE 1Pesantren ARDesign for Islamic religiouseducation
Unity is one of the most popular game engines anddevelopment platforms in the world, widely used not onlyfor games but also for interactive simulations, virtualreality (VR), augmented reality (AR), and other real-time3D applications. It provides developers, educators, anddesigners with an easy-to-use environment to create 2D, 3D, VR, and AR experiences thatcan run on multiple devices and operating systems.Vuforia is one of the most widely used AugmentedReality (AR) platforms designed for building ARapplications, particularly in Unity. It enables developersto overlay digital content such as 3D models,animations, text, or videos on top of real-world objectsthat are detected through a device’s camera. Vuforia is especially popular in education,training, retail, gaming, and industrial applications because of its ease of integration androbust tracking features.Why use Vuforia?Cross-Platform Support: Works on Android, iOS, and AR glasses like HoloLens.Beginner-Friendly: Easy setup in Unity with prefab components.Wide Application: Useful in AR learning modules, AR business cards, AR productvisualization, and AR educational apps.Proven Technology: Backed by PTC (Parametric Technology Corporation), widely usedby industries and academic researchers.AR Development Tool: Unity & VuforiaWhy use Unity?Beginner-Friendly: Simple to learn with lots of tutorials, community support, and readymade assets.Versatility: Can be used for games, educational apps, AR/VR experiences, architecturalvisualization, and simulations.Real-Time Rendering: Offers high-quality graphics with real-time lighting and physicssimulation.Industry Standard: Used by professionals worldwide in gaming, film, education,engineering, and healthcare.PAGE 2
Scan to Download ARTraining MaterialsLET’S GET STARTEDPAGE 3
2UNITY INSTALLATION2. Click Download for Windows button.1. Open Google Chrome browser (or any browser), type in download unity hub.3. Locate the installer in Download Folder and Launch the UnityHub installer.4. Click I Agree button.PAGE 4
5. Click Install button.6. Wait until the installer is done and click on Finish button.7. If you already have account, click Sign In and follow the steps to sign in.If you are new to Unity, click Create Account button.PAGE 5
9. Click on Agree button.10. Go to Install tab and click on Install Editor button.8. Upon successful login or sign up, click on skip installation.PAGE 6
12. Click on Continue button and make sure the following components are checked:11. Click on Install button for latest version. In this case, Unity 6.2 (6000.2.2f1).This step might be different, depending on new version released by unity.a) Microsoft Visual Studio Community 2022b) Android Build Supportc) OpenJDKd) Android SDK & NDK Toolse) iOS Build SupportPAGE 7
14. Wait until the process is done. It takes some time to complete.16. You will have the Unity Editor inside the Unity Hub. Make sure Android, iOS and13. Check the checkbox and click Install button.15. Once installation is complete, it will shows the installed status. Cilck on closebutton.Windows module are installed.PAGE 8
3CREATE PROJECT2. Click on New Project button.1. In Unity Hub, click on Projects tab.3. Make sure the Editor Version match the editor that you had installed earlier.Then, choose 3D Mobile template.PAGE 9
4. Click on Download Template button. (one time only)5. Change the project name and location (if necessary). Then, click on Create projectbutton.6. Checkbox and click on Accept and Continue button. Then, wait until the green barprocess is done.PAGE 10
7. Unity Editor will be launched.Summary of Workflow in Unity EditorDesign and arrange your scene in the Scene view.Organize all game objects using the Hierarchy panel.Import and manage assets/scripts in the Project panel.Fine-tune settings for objects/assets in the Inspector panel.Use the Game view to preview and test your project as it will appear to users.For more detailed guidance on using the Unity Editor and its features, please refer toChapter 4 of this guide.PAGE 11
4UNITY EDITOR1. Scene View (Center-Left)Purpose: The Scene view is the main workspace where you design, position, andmanipulate objects in your game or AR/VR environment. You can move, scale, androtate game objects visually.Features Visible:2D mode is enabled (for 2D game or AR development).Transform tools (Move, Rotate, Scale).Grid lines help with alignment.The white rectangle represents the camera’s visible area.PAGE 12
2. Game View (Bottom-Left)Purpose: The Game view shows what the player will see when the game is running. Ituses the active camera’s perspective and allows you to test how your scene looks andbehaves during play mode.Features Visible:Display selector and aspect ratio control.Play Focused option and simulation tools.3. Hierarchy Panel (Top-Center-Right)Purpose: Lists all objects in the current scene in a tree structure. You use this toorganize, select, and group objects like cameras, lights, and other assets.Features Visible:\"SampleScene\" is the current open scene.Main Camera and Global Light 2D are present.PAGE 13
4. Project Panel (Bottom-Center-Right)Purpose: This is your file manager in Unity. Itdisplays all assets, scripts, prefabs, and packagesavailable in your project.Features Visible:Folders for Assets, Editor, Scenes, Settings,etc.5. Inspector Panel (Far-Right)Purpose: Shows detailed settings for thecurrently selected object or asset. Here, youcan adjust properties, scripts, and componentsattached to GameObjects or assets.Features Visible:The Universal Mobile 2D Template readmeis selected, giving information and quicklinks for support, bugs, and feedback.Option to remove the readme assets.7. Toolbar (Top)Purpose: Provides quick access to frequently used functions like Play, Pause, and Stepfor running your game, as well as tools for layout and account settings.6. Navigation Tools (Left of Scene View)Purpose: Quick tools for navigation (hand tool, move, rotate, scale, rect tool)to manipulate objects in the scene.PAGE 14
3. Choose Android and click Switch Platform button.5ANDROID ENVIRONMENT4.1. Noticed on top of the Unity editor, it states Windows, Mac, Linux.It will show that Android environment is already active.2. To change from Windows PC platform to Android. Click on File > Build Profiles.5. Once done click on to close the Build Profiles. Noticed that on top of theUnity editor, it will change to Android.PAGE 15
6. To switch from 3D to 2D mobile template, go to Edit > Project Settings > Editor.7. Go to Window > Package Management > Package Manager. Go to UnityRegistry and locate 2D, then click Install button.8. Go to File > New Scene and choose Basic 2D (Built-in). Then, click Create button.9. On scene panel, click to change from 3D to 2D.PAGE 16
6MAIN PAGE UI SCENE1. On the top right side, change layouts to 2 by 3.2. On the Project panel, right click on the Assets folder and click Create > Folder.Rename the folder to Image.5. Drag and drop all images given in Main Page Folder (bahan kursus) to Imagefolder created just now to make a UI Main page.PAGE 17
6. Go to File > Save As (Ctrl + Shift + S). Double click on Scene folder and savethe scene as mainpage.7. Go to Game panel, click on Free Aspect and choose 16:9 Portrait. In ScenePanel, the box will be in portrait position.This step is to make theposition of our apps whenwe convert it to a mobileapplication.PAGE 18
8. On Hierarchy panel, click on + button to add canvas. Go to UI > Canvas.9. Select on the in Hierarchy panel.10. On the Inspector panel, go to Canvas component and set the following settings:a. Render Mode: Screen Space - Camerab. Render Camera: Drag and drop Main Camera on Hierarchy panel to here.Canvas11. On the Inspector panel, go to Canvas Scaler and set the following settings:a. UI Scale Mode: Scale With Screen Sizeb. Reference Resolution: X - 1080, Y -1920c. Screen Match Mode: Match Width or Heightd. Match: 0.5PAGE 19
12. Right click on the Canvas , go to UI > Image.14. Right click on the Image and choose Rename. Rename it to background.13. The Image UI element will be in the hierarchy.15. Click on the background image. Locate Inspector panel > Image component. Dragand drop the background.png in the Image folder to the Source Image and click onSet Native Size button.PAGE 20
18. On Scene Panel, find this gizmo icon and click on the arrow16. In the Scene Panel, the canvas will show as below.17. Noticed that in the middle of canvas, it shows the overlapping icons. We can hide it,so that we can clearly designed our main page.a. Click on icon beside InputSystemUIInputModulePAGE 21
19. On Hierarchy Panel, hover the mouse to Main Camera and Global Light 2D. Then,the eye icon will be visible. Click the eye for both to hide the icon.20. The main page shown as below.21. Noticed icon is on the middle center position. This icon called anchor.In Unity, anchors determinehow a UI element behaveswhen the screen size oraspect ratio changes,helping to create responsiveuser interfaces.Anchor in Unity FunctionPAGE 22
22. On Scene Panel, go to Navigation Tool and click Rect Tool.23. Go to Canvas, drag the 4 corner of anchor to match the background box size.How Anchor Work?Each UI element has anchorpoints that can be set anywherewithin the parent rectangle. Byadjusting these anchors, you canmake your UI element \"stick\" to acorner, edge, center, or stretchwith the parent.If you anchor a button to thebottom right corner, it will stay inthat corner even if the screensize changes.Example:Only move anchor,once finalize theposition of UI elementYou only can drag theanchor once youchanged to Rect Tool24. We try to add second UI element, TextMeshPro. Right click on the Canvas , go to UI >Text - TextMeshPro.PAGE 23
27. On Scene Panel, click the arrowa. Click on icon beside26. Noticed that in the Canvas, it shows the T Gizmo in the middle. We can hide it,so thateasier to see the text.25. TMP Importer box will appear, click on Import TMP Essentials button. Wait until it isdone and click on button.TextMeshProUGUIPAGE 24
dont forget to set theanchor once finalize theposition of UI Text.28. On canvas, it will show like this.29. On Hierarchy Panel, make sure to select Text (TMP). Then, on Inspector Panel,go to TextMesh Pro - Text (UI) component and set the following settings:30. Go to Canvas, make sure you select Rect Tool on Navigation Tool. Click the blue dotaround the text. Resize to your appropriate size you want.b.c.d.e.90a. Text: Experience Augmented Reality LerningAlignment:Font Size :31. To move the text, choose the Move Tool in Navigation Toolbar. Then you can moveup, down, left and right by using the green and red arrow.Text Wrapping Mode:Overflow:No WrapScroll RectPAGE 25
7DEVICE SIMULATOR1. Go to Window > Package Management > Package Manager.2. Click Unity Registry and type in Device. Click on Install button.3. In Game panel, click on the Game drop down menu, then it will list Simulator.Tick on the Simulator. You can choose any simulator you like to try.PAGE 26
8FONT STYLE1. Open Google Chrome browser, type in dafont.com and you can download anyfont that you like. Once you have chosen, click the download button.2. Find the downloaded file in Downloads folder and extract the ZIP file.3. In Unity Editor, on Project panel, create font folder by right click on Assets > Create >Folder. Rename the folder to font.PAGE 27
on Inspector panel, locate Main Settings. Drag and drop theinto Font Asset.5. Right click on the font, go to Create > TextMeshPro > FontAssets > SDF andwill created. This is the font that can be used to change font.4. Open the downloaded font folder, drag and drop the font into the font folder.6. On Hierarchy Panel, click Text (TMP) and then go to TextMeshPro - (Text UI)7. Your font will look like this.PAGE 28
9LAUNCH BUTTON UI1. Right click on the Canvas, go to UI > Button - TextMeshPro.2. Click on the Button and locate Inspector panel > Image component. Drag and drop thebutton.png in the Image folder to the Source Image and click on Set Native Size.3. Expand the drop down on the button, and select Text (TMP). Press Delete on thekeyboard.PAGE 29
dont forget to set theanchor once finalize theposition of UI Button.5. Once anchor had been moved, the interface will look like this.4. To move the button, choose the Move Tool in Navigation Toolbar. Then you can moveup, down, left and right by using the green and red arrow.6. This is the finalized Main Page interface.PAGE 30
7. Click on button and choose Create Empty.8. GameObject will be in the lists. Rename it to menu.9. On the Project panel, right click on the Assets folder > Create > Folder. Rename thefolder to script. All your script (coding) will be stored in here.10. Open Script folder given in Bahan Kursus, drag and drop menu C# Script into scriptfolder in Unity.PAGE 31
11. On the Unity Editor, drag and drop the menu C# Script into the menu. Noticed thatMenu (Script) component will be listed on the Inspector panel.12. If you having problem drag and drop the menu C# Script into the menu GameObject.You must click on the menu GameObject first, then on Inspector Panel, click AddComponent button. Type menu and choose Menu C# Script and press Enter on yourkeyboard.Still cant find it?Check if you choose 2DMobile template.13. Select Button on Hierarchy panel. On the Inspector panel,click on the Buttoncomponent.PAGE 32
14. Automatically below screenshot will be generated.15. Drag and drop menu GameObject to the None (Object) box.16. Click on No Function > menu > GoToAR( ).PAGE 33
17. Click on the Play button icon to test the Launch AR button.18. Click on the Launch AR button in the Game Panel.20. Every time you test the app, make sure to exit the testing environment by clicking on19. You will notice that there is error message at the bottom. It is because, the ARpagescene does not exist yet and sometimes the ARpage scene is not in the Build Profiles> Scene List.Stop button.21. Go to File > Build Profiles. Click on Open Scene List button to add mainpage sceneinto the Scene List.PAGE 34
23. Click on Close button and then go to File > Save (Ctrl + S). If you have not save the22. Click on Add Open Scenes button. Then mainpage will be included here. Click onScenes/SampleScene then press delete button on your keyboard..Make sure the first page isset to 0. It will launch thepage upon starting the appscene, it will have * beside the scene. It will disappear once you have save it.PAGE 35
10ANDROID PROVIDER1. Once you exit the testing environment, you will noticed that at the bottom of the page,2. Go to Edit > Project Settings. Then checked on Android Provider box.there is another message there regarding Adaptive Performance.4. Do the same for Samsung Android Provider.3. Wait until the process is done. Then click on Enable button.PAGE 36
1. Go to File > New Scene (Ctrl + N) > Basic 2D (Built-in) and then click Create button.11AR PAGE UI SCENE2. Go to File > SaveAs (Ctrl + Shift + S). Double click on Scenes folder and save thescene as ARpage. Click on Save button.PAGE 37
1. On Hierarchy Panel, select Main Camera and press Delete on your keyboard.2. Go to My Asset Store > Asset Store Web. Write Vuforia Engine and click Search.3. Click on the Vuforia Engine SDK.12VUFORIA ENGINE4. Click on Add to My Asset button. Wait for a while and click Open in Unity button.PAGE 38
7. Click on the Update button.If you do not update, youwont have AR package inUnity.5. Click Import 11.3.4 to project then click on Import and next, click on Install/Upgrade6. Click Next and then b button.button.PAGE 39
9. Click Vuforia Engine > AR Camera.10. Click on Accept button.8. Click on the button on Hierarchy panel and noticed there is Vuforia Engine here.11. On Hierarchy Panel, AR Camera will be added here.PAGE 40
12. Click on the13. Click on to change from perspective from 2D to 3D.14. Double click on the Image Target.on Hierarchy panel. Click Vuforia Engine > Image Target.PAGE 41
13VUFORIA DEVELOPER2. Click on Register link.3. Fill out the details and follow the step by step instructions in order to complete theregistration process.1. Open any browser (etc. Google Chrome / Firefox / InternetExplorer) and type in VuforiaEngine in the Google search. Click on the Home | Engine Developer Portal.4. Activate your registration and once done, you need to login into your Vuforia Account.PAGE 42
6. Click on Plan & Licenses tab and click on Generate Basic License Link.5. You will be landed on the Account page.7. Enter the following details and once done, click on Confirm button:a. License Name : AR_testing (Any name you like)b. Tick check on the Vuforia Developer AgreementPAGE 43