Overview

User Interface in Immersive Media (UI-IM) is a course offered during my time studying at Drexel University. This 10 week long elective gave me the opportunity to further develop my skills as a designer within the field. My aim was to learn the basics of game design and programming using Unity as a base. This project is to highlight the skills I have learned in the class and to showcase what I have learned.

Context & Challenge

This 10 week long course was offered as an elective and it gave me the opportunity to further develop my skills as a designer within the field. The goals of the class was to create the foundations of UI designing and developing within Unity. As this aligned with my own goals, it helped motivate me to do well in the class. By the end of the class, I would create a simple experience with three interactable objects within the world that would enhance the user experience.

Once this experience is completed, it will prove to me, my peers, and future employers that I have the skills to make interactable UI within Unity. As the project will be hosted on my own domain, it will be easy to distribute to viewers as needed.

Process and Insight

As this project is to highlight the skills I have learned in the class, it is intended to be used as a portfolio piece. The project will be presented within a webpage using WebGL to allow easier ways to distribute the project as well as to allow users to interact with the world themselves on their own PC.

For the general design, I have chosen a city environment from Unity Asset Store to be able to focus on creating the interaction based on a predetermined space. To me, using a city environment will allow me to create meaningful interactions within the space that is familiar to most users who will interact with the space. From here I selected three objects to create user interactions from: ATM, Vending Machine, and Bus Stop. Based on these objects I came up with three potential interactions.

• • • Menu on top of the vending machine.
      • • When interacting with a vending machine, a pop up will show up. This will allow a user to select from a few options of "drinks" that are accompanied by a sound effect.
    • Text status update on sign.
      • • The bus stop signs when interacted with will change the lighting within the environment. Some text will show up on the sign to indicate there was a status update..
    • Menu on top of the ATM.
      • • When interacting with an ATM, a UI will show up in front of the ATM to increase and decrease a number.

From here I set out to customize the environment to fit the class requirements. I blocked off areas of the map to ensure the users can't stray too far away from the interactable objects or fall off the map. I also removed some built in objects with readable text so as to not distract the player from the core goal of the project making it easier to highlight what I want to within the environment.

Prototype

Once the environment was made ready I started to create the base interactions of the scene. I started with the vending machine as I thought it was the simplest as it was only to play SFX upon hitting buttons, it doesnt change the world directly or have a need to save any information. If I was able to create this basic interaction with the vending machine without any errors, it can show at the minimum that I was able to create an interactable object with an interactable menu.

Code/Dev

I also added a piece of code to the project that was not a requirement of the class, a built-in way to reset the game experience without having the user refresh their browser. Using this method, it allows the user to start from the beginning without having to reload the whole entire scene again especially if the user doesn't have a great internet connection. As for the keybind, I went with using the “R” key as it represents “restart”, “reset”, etc. It is an easy to remember representation of what the function will do.

void Update()
{
    if (Input.GetKeyDown(KeyCode.R))
    {
        // re-loads current scene if "R" key is pressed
        SceneManager.LoadScene(SceneManager.GetActiveScene().name);
    }
}

Solution

The following link is to the finished product and a description of the various interaction within the environment.

• • • Player Movement
      • • WASD or arrow keys to move
        • Right-click and drag to rotate camera
    • Bus Stop
      • • Select one of three choices to change time of day.
        • Lighting changes based on time of day selected
        • Different music plays based on choice
    • Vending Machine
      • • Interacting with the vending machine plays various SFX
        • Cash inserting, items dropping, and coin change.
    • ATM
      • • Interact with the ATM to adjust the account balance.
        • SFX plays when pressing different buttons on the UI
        • Balance value is saved throughout the experience until the page is refreshed or "R" is used.

Results

Overall I am happy with the work I did for this UI-IM class. I learned a general flow of how to set up a UI within Unity within an existing 3D environment. In the future, if I had more time to work on this project, I would add more effects, a volume control, and other aspects that would help enhance the user experience when being within the world. I believe I have met my initial goals for the class and am proud of what I was able to accomplish.