Experiential Design / Task 3

 

Experiential Design - Task 3 : Project MVP PROTOTYPE

WEEK 10: Functional Prototype

On the tenth week,  I set out to do the task 3 of Experiential Design, which is to test the key functionality of the project that I proposed. The prototype doesn't need to be really finished, so the goal of this task was just to get the main function done.

Prototyping

Main Functions

Since I'll just be focusing on the main functions of my application, the main functions that I will make sure to be functioning in this prototype are, 

1. Placing Props onto the scene with ARCamera background
   Allow users to click and spawn objects onto the current scene in the project. This function would also allow users to drag, rotate, and scale the props on the scene according to their liking. 
   
   
2. Adding Scenes and Moving between them 
   The StageAR app allows user to create scenes inside their project, allowing them to organize and move between scenes they have already set up. For example, a user would set up a blocking of a Dinner Scene in one scene, then they can click on the [Next Scene] button to go to the next scene and make a scene that takes place in the forest.
   
   
3. Taking Pictures of the Current Scene.
   The StageAR app will allow users to take a screenshot of their current scene with a camera button in the project menu.
   
   
4. Quiz on Theatre/Stage Production
   Users of this app can test their knowledge on Stage Production with the quiz function available on the StageAR app. They would be able to choose from the four options. The user would get a score in the end of the quiz.
   
   
5. Script Writing Functions
   A function for the app that would allow the users to write their own stageplay scripts on the app.
   
   
   

SCREEN DESIGN VISUAL PROTOTYPE 

Canva Designs of Menu 

• ORIGINAL Main Menu Visual Design
  
  
  The Menus below were the original visual design of the main menu of the app, but throughout the app's production, I fail to realize that it would require for me to code in a function to have to transition from portrait to landscape, therefore I would rather have the entire app only function in landscape due to the main feature of the app requiring the users phone to be in landscape.
  
   

  

  
  
  
  
• CURRENT Menu visual Design
  
  
• Asset Components for Visual Design
  
  Most of the UI components were designed using "Canva" and importing PNGs from open-source websites.
  
  
  
  
  

  
  
  

  

  
  
  

  
  
  
  
  
• Main Menu Visual Design
  
  The Main Menu will ideally have five buttons, each leading to the different scenes and function of the application itself. The buttons that are included will be;
  
  

  1. The [New Project] button, that leads users to the main function of the app, the [Scripts] button, to lead users to the script writing and reading function of the app

  2.  The [Scripts] button, to lead users to the script writing and reading function of the app

  3. The [Load Projects] button, to lead users to their created/saved projects and to start from where they left it previously.

  4. The [Quiz] button, to lead users to a quiz function that will test the users on their stage managing skills and theatre production knowledge.

  5. And lastly, the [About] button, that leads users to the explanation of the app.

  There will be borders on the top-left and bottom-right of the screen and the Tragedy Mask on the bottom-left and the Comedy Mask on the top-right to fill up the empty space in the menu. Below is the visual mockup of the Main Menu,

  
  
  
  
• New Project/Main Function Visual Design

• Start of Project
  
  

  Every start of a new project will start on an empty scene with the only buttons being the [Back Button] and the [New Scene] button. The [New Scene] button will initiate the start of the New Project, allowing the users to place models and make new scenes.

   
  

  

  
  
  
• After Clicking [New Scene]
  
  

  After clicking the [New Scene] button, user will be greeted with three new buttons,
  The [Scenes] button will prop up a menu on the top of the screen and lets users to create new scenes and traverse through each of the scenes they've made.
   
  The [Models] button will also prop up a menu on the same position as the previous button, but instead will show users available 3D models to prop onto the scene.
  
  The [Camera] button will take a screenshot of the current scene, the screenshot will only take pictures of the available 3D models in the scene and not include the UI elements.
  
  

  
  
  
• After Clicking [Models]
  
  After clicking the [Models] button, user will be greeted with a menu on top of their screen. This menu shows the available 3D Models for users to use. On the top-right, there are also 2 more buttons available now, which are the [Human] models button and the [Props] models button. The default models that will be shown are from the [Props]. 
  
  After clicking [Models] or when [Props] is clicked,
  
  

  
  
  

  After clicking [Humans],

  
  

  

  
  
  

  
  
  
• After Clicking [Scenes]
  
  When a user click the [Scenes] button, the user will be greeted with a menu on top of their screen. This Menu will show the scenes that the user currently have. Users will be able to add scenes by pressing the "+" button. There will also be an indicator of which scene they are in on the top right and also an [Add act] button that will let the user to add different acts as a way to organize scenes in. 
  
  

  

  
  
  
• Scripts Menu Visual Design
  
  The Scripts Menu will have an indicator on the top middle to let users know that they are in the Scripts menu, buttons to indicate all created scripts and blank buttons that will allow users to create and write the scripts. Below is the visualization of the Script Menu.
  
  
  
  
  
  
• The Script Editor
  
  The Scripts Editor will come out once a user presses an empty or already existing script. It will have a [Save] button on the Top-Right to let users manually save their progress and the text editor will also let users input the name of their script right beside the [<</back] Button. Users will be able to type their scripts inside the text editor.
  
  
  
  
  
  
  
• Quiz Visual Design
  
  The Quiz button on the main menu, once pressed, will lead users straight into the Quiz. Users will instantly be faced with questions and able to choose from four options which are notified in the black boxes. The users will also know which question they are on based on the number on the top-right of the screen.
  
  
  
  
  
  
• Load Project Menu Visual Design
  
  The Projects Menu will be similar visually to the Scripts Menu, with the same [+] buttons and blank boxes to signify empty projects. The borders and background components from the Main Menu are brought onto here to fill out the empty spaces.
  
  
  
  
  
  
• About Page Visual Design
  
  The About Page will just be filled with texts explanation of the functionality and purpose of the app and words of appreciations. It will also include credits of the creator of the application. The about page will have the same UI background elements as the main menu.
  
  

  

  
  
  

MVP TESTING 

Designing/Importing the UI for the prototype

• MENU UI

First thing I will do is to create a mock prototype UI for navigation throughout the application. I say mock prototype UI, but I will settle with how it looks as how I envisioned the UI for the final product. Since I've created the prototype UI elements on Canva before, I will be importing them onto my unity project. 

Don't forget to change the image [Texture Type] to "Sprite (2D and UI)". 

I set the following image as my [Source Image] for the Menu background UI.

I added the remaining UI elements that aren't buttons for the menu scenes. 

Added all the buttons that are in the menu, they are still not functional.

• [NEW PROJECT] UI

I imported all the assets again from Canva that will be used as the UI of the Project scene, where all the AR functions will happen. 

The scene below is what shows after you click [new project] on the home menu. Click the [New Scene] button to start your project. 

After you click on [NEW SCENE], the [MODELS], [SCENES], and [CAMERA] button will appear. 

When a user clicks on the [MODELS] button, a menu featuring the different types of models that can be spawned will appear. The only models so far that

• MENU UI OVERHAUL 

I realized that the portrait menu would be too annoying to deal with when it changes to the landscape resolution of the actual application itself, so I overhauled the menu UI to make it fit a landscape and added more buttons for the other features that I've added to the application too.

• SCRIPT UI

This is a new function that I've thought about to add into the application. This would let the users to read already existing scripts, usually of famous theatre plays, such as Shakespeare's Macbeth and Romeo & Juliet, and use them as reference for their own stage plays. This function will also allow the users to write or import their own scripts into the application itself.

• LOAD PROJECTS UI

I just copied the UI from the Script UI as it does the job.

• QUIZ UI

The UI for the quiz function is pretty similar to all the other functions of the application, but of course the differences for this function is that there are 4 answer buttons to answer the question displayed.

Coding Scripts for Individual Functions

• Coding Transitions of Scenes

In this section, I'll be documenting the coding of the transition of scenes in the application. To explain it more, I mean when you press the buttons that you'd expect will bring you to that scene and the back buttons to return to the menu.

• Coding Transitions of Scenes
  I created a new C# Script and coded the following onto the Script
  
  
  
  
  

                    

• 
  

                 

• Coding the Quiz Function

This is the part where I code in the functions for the Quiz, so users can actually engage with the function and play the Quiz itself. The quiz will also include the final scores of the users in the end. 

• Variables 
  We have to declare an array for the GameObject Levels to go through each level.
  The Text scoreText is to reference to the UI text for the final score.
  GameObject scorePanel to reference the Final Score Panel.
  And int variable to declare and track the currentLevelIndex and the current Score.
  

 

                

                The functions below are to make sure that the quiz always starts at the first level and to hide                    the score panel.

                

                    The method below is to call for the next level, when there are no other levels left to call, the                     method will call for the Final Score.

                    The method below is to show the final score of the quiz. It will tell you how many correct                        answers you've gotten. 

                    REFLECTION & IMPROVEMENTS IN THE FUTURE:
                    The quiz function works as expected, I would ideally want the quiz to give the answer                            straight after answering it and explain it why, but I will implement this feature when I have                     the time. 

• Coding the StageAR function
  
  
  I will be documenting the coding of the main function of the application in this part. To remind you, the main function of the application is to create scenes to use as reference for blocking in a theatrical play or any stage event by dragging 3D Models onto the plane and saving it and creating another scene until satisfaction.
  
  
• Coding the drop-down menu for Models
  
  
• Menu Visibility
  
  The method below is to toggle the visibility of certain menus in the application.
  
  
  
  
  This is when the script is attached to an existing GameObject -- I attached the script to the Canvas-- .
  
  
  
  
  
  

• Coding Objects
  
  
• Importing 3D Models
  
  
  I had to import some 3D Models from the unity asset store. I only imported the free ones of course. I first had trouble with the texture, where it would appear purple, but with some deep-diving in forums, I found out that I had to select the affected purple textures and go to Edit>Rendering>Materials>Convert Selected Built-In Materials to UHP. I've only imported a chair so far, and use a default cube from Unity too.
  
  
  

  

  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
• Object Spawning in-front of camera
  
  
  Below is the code to give the user the ability to spawn objects right in-front of them, though with this code, it is still imperfect, due to how the user can't move the objects around after it spawns right in-front of them.
  
  
  
  
  
  
  I had to tweak the code a little bit again to make sure that all of the 3D Models will spawn in the same exact position
  
  
  
  
• Coding to Move and Rotate Objects with Touch and Gesture
  
  

  With the following code, my AR application will be able to let users to move the objects by touching it and use gestures such as pinching the object to scale it or using two fingers to rotate it.
  
  

  

  
  
  
• Coding to let users delete objects
  
  

  It would be logical to let the users to be able to delete objects they don't want or accidentally put onto the scene. Below is the code to let users delete objects, the user would be able to delete objects by double clicking on it. The code is a tweaked version of the SpawnProps script.
  
  

  

  
  
  

  
  
• REFLECTION & IMPROVEMENTS IN THE FUTURE:
  
  I will try to tweak the code to let the scaling, rotating, and dragging to be less scuffed. I will also import more objects.
  
  
  
• Coding Object permanence in a scene and being able to move between scenes.
  
  
• Moving to the next scene without Erasing the Prev. Scenes Objects.
  
  
  Unity as a program, doesn't let users to leave an instantiated object permanently there when moving to another scene, the previous scene is destroyed in its entirety when loading a new one. So, I decided to implement the Unity feature of "Additive Scenes", where one scene can be loaded onto a current existing scene without destroying the previous scene. 
  
  

  

  
  There were multiple problems at the start due to how ignorant I was to this newly found knowledge of Additive scenes. One of the problems were that the base scene cannot have two event systems and two ARCameras. Therefore I had to tweak on the look of how a [New Project] starts like. If there is a way to fix this then I will do it.
  
  

  

  
  
  
  
  
  
  
  
  
  
  
  
  I had to borrow a code made by GitHub user kurtdekker, called "CallAfterDelay" to delay the code enough so it would let "NextScene" to properly set it as an Active Scene. The reason for the error that would happen without this code snippit is because I put loading the next scene and setting it up as an active scene under each other in one method, which would mean that the scene cannot be activated and loaded up at the same time. The delay function allows the delay of the setActive() method, thus making it possible to load and set the scene active at the same time.
  
  

  

  
  

  I had to also take account that when I load a new scene and set it active, the elements from the previous scene won't be hidden, so I had to code a method to hide previous scene elements when another scene is loaded. With this, I can hide the UI elements and the props from the previous scene. 
  
  

  

  
  
  Before thinking up of this method, the spawning of props would be spawned without any Parent game object, therefore I had to tweak the SpawnProps() method so it would give Parent for where the props would spawn in. With this, hiding the spawned objects would be much easier.
  
  

  
  
  

  

  
  

  
  
  
  
  
• Moving to the Previous Scene
  
  Moving to the previous scene is just a matter of setting the previous scene as the Active scene, so you could still move and spawn the objects there.
  
  

  

  
  
  
  
  
  
  
  I had a bit of trouble with unhiding the objects from the previous scene, I know it was just a matter of an "if-statement", but I didn't know the specific command to do it. I had to scour through forums and such to find it, and alas I did. 
  
  

  

  
  
  
• REFLECTION & IMPROVEMENTS IN THE FUTURE
  
  The functionality for this should work as intended, I've only attached this script to three additive scenes so far. I will work on the rest of the additive scenes during the final weeks of the semester  and work on an indicator of what scene is which. 

• Coding The In-app Screenshot Button

•  Coding the Screenshot function
  
  Coding in a function to take screenshot was pretty easy to be honest. I recommend watching a video on youtube made by "Xienna Studio" to learn how to code in an in-app screenshot function. Below is the code I typed upon learning it from the video.
  
  
  
  
  I had to scour through some forums though to find a way so the image produced from the screenshot will save directly into the phone's gallery. I found a code/asset that will do exactly just that on the Unity Asset Store. The asset is free and is called "Native Gallery for Android/IOS, you can import it to your unity for free. Below is the single line of code that will help with my function to save screenshots straight to the gallery.
  
  
  
  
  
  
  
  
• REFLECTION & IMPROVEMENTS IN THE FUTURE:
  
  The screenshot function was one of the easiest to implement and is perfect so far without any errors. If there are for some reason any errors encountered, I will do my best to fix it during the final weeks. 
  
  
  
  
  
  
• Coding the Script Reading/Writing Function.
  
  
  I will be documenting the coding of the script reading and writing function of the application in this part. As said before, in this part, you will be able to read on already existing scripts or create your own scripts.

• Setting Up a TEXT EDITOR Panel
  
  To set up a text editor to read and write the script off, first we have to create a panel that will be used for all of the code methods related to script reading/writing. The panel includes a TextMeshPro, ScrollView (To let users scroll down the text), InputField (To let users type whatever they want), a Save Button, and a back button. 
  
  
  
  
  
  
• Code Variables and Start()
  
  Below are all the variables that have to be set up during the start of the function, the first four will need to be assigned in the inspector of the gameObject it is assigned to. The others are explained on the image below.
  
  
  
  
  
  

• LoadScript()
  
  To load scripts that are already given from the application itself, assign this method to a button to load it straight from the Name.
  
  
  
  
  
  
• OpenBlankEditor() and UpdateScriptNameFromFirstLine()
  
  OpenBlankEditor() is self explanatory, it will unhide the textEditor and let the users create their own scripts. The other method mention will automatically name the script from the first line of the text file. The code for the second method is still a bit broken, but I will fix that in the future.
  
  

  

  
  
  
• CloseTextEditor() and  OnScriptButtonClicked()
  
  CloseTextEditor() is used to hide the TextEditor, while OnScriptButtonClicked() is the actual method that will be assigned to all the buttons that will implement and call most of the functions in this class (OpenBlankEditor(), LoadScript(), etc.) 
  
  

  

  
  

  
  
• SaveScript() and others
  
  The most important code below (not to say the others aren't important) is the SaveScript() method, which allows user to save their script so they can revisit them later.
  
  

  

  
  
  
• REFLECTION AND IMPROVEMENTS IN THE FUTURE:
  
  First thing I would like to do is to actually input the script of Macbeth and the other two already existing scripts that are given from the app. Next, I would like to improve and fix on certain elements of the UI in the future before the Final Version of this app is submitted, such as changing the "+" buttons into just numbers and also fixing some of the logic errors in the code. 
  
  

  

  
  

  
  

  
  

PRESENTATION:

TASK 3 Experiential Design by zaky aulia


VIDEO PRESENTATION AND APP WALKTHROUGH:

App Walkthrough Video:

Reflections

The process of working and making this application was a very tiring and frustrating one to do. I had to do even more coding than even what is usually done in my Computer Science modules, which is weird. Most of what we were taught in the practical/tutorials were pretty basic compared to the features my app had to include. Even with all of my complains and what-not, I find this task to be very fun, I actually learned a lot from spelunking into forums and such during times where I encounter an error or brick wall to my prototype. I've learned many other Unity features throughout the process of this assignment, therefore, I conclude this was worth it. However, I still need to improve on a lot of things in my application.