Harry Le's Devlog

Design Challenge

Design a 2D game that will help teenagers with autism to showcase their hidden talents. As of the moment, teenagers with autism have a really hard time believing in what they can achieve and are easily discouraged by a lack of self-confidence.

The target group is a mix of teenagers that are at school as well as some others that decided to stop. The feeling regarding school and studying is negative.

The game’s main goal is to help them believe in their achievements or yet to inspire them to follow their dreams.

Phases & Process (This will link to the relevant devlogs)

Analysis

Design

Realization

Validation

Reflection

Challenge: How can I make a premade chat in a showcase room in order to prevent harmful sentences from users.

After having a sprint 3 demo with the client, we received feedback about the chat systems. We realized that if we let users type whatever they want, it might lead to some bad situations that will affect our target users (teenagers with autism). Because of that, I switched the chat to premade sentences so we can easily manage which kind of feedback that users can use.

How did I solve this?

I started this challenge by looking at which solutions can be a good choice to make a premade. I realized that Unity has a dropdown menu element, so I decided to use it. Then I looked at the Unity dropdown menu tutorial and documentation. I implemented it in Unity and showed it to my teammates.

DOT Framework methods used:

RESOURCES:

Unity UI Dropdown Tutorial:

https://www.youtube.com/watch?v=URS9A4V_yLc

Dropdown Unity documentation:

https://docs.unity3d.com/2018.4/Documentation/ScriptReference/UI.Dropdown.html

How to access contents in the dropdown?

https://answers.unity.com/questions/1167834/how-do-you-access-the-text-value-of-the-dropdown-u.html

PRODUCT:

Users can choose a sentence in a dropdown menu then click enter to send the message.

In the beginning, I want to let users click on a sentence and it will send to the chatbox, but it keeps spamming the chatbox so I decided not to use it. Because my teammate did the chat function, so I decided to use both his textbox and my dropdown, I fetched the dropdown's sentence to the textbox, and then the users can press enter to send it.

I get the sentence using its value.

Quality of the results:

This is not lead to the "spamming" message error, the players now can chat using the premade sentences. But it also has some bugs, if a user press enter button right after choosing a sentence, the dropdown will toggle open and close, and keeps sending the message! I will try to fix it in the future.

NEXT:

How did I solve this?

This is a little bit difficult challenge, I needed to do some researches to find the solutions. I created some rawImage elements in Unity, then use C# to fetch the images in the local folder to the existed rawImage. For the edit function, I just add a script that loads the Canvas scene when the players click on each painting.

DOT Framework methods used:

RESOURCES:

Unity forum:

https://forum.unity.com/threads/how-can-i-create-image-from-image-file-on-the-hard-disk-and-display-the-image-in-image-ui.1044334/

https://forum.unity.com/threads/read-image-from-disk.117866/

PRODUCT:

The image is loaded to the array sequentially.

I make the file name of the paintings similar every time so it will overwrite the existed paintings.

The script to load the canvas scene:

Quality of the results:

This result is not the best solution. If the player has more paintings than the array created, then it won't show the paintings. We are still working to find a better solution.

NEXT:

Challenge: How can I implement the save function in our game in order to let players can save their paintings?

The players in GLOW can draw and express their ideas, and they can save their progress in order to show it in the showcase room or edit them in the future.

How did I solve this?

I looked for tutorials about saving the image file in Unity, and I found one tutorial about taking a snapshot using a Unity camera.

DOT Framework methods used:

RESOURCES:

How to make a snapshot using a Unity camera:

https://www.youtube.com/watch?v=d-56p770t0U

PRODUCT:

When users finish their drawing, they can click the "Save" button...

... a painting then saved in the local folder!

About the technique, I added one more camera and called it "Snapshot Camera" beside the main camera. A snapshot camera just renders the "painting" while the main camera renders the entire canvas (UI, buttons, color picker, etc.)

The SnapshotCamera.cs:

Encoding the file format, set file location,...:

Quality of the results:

The save function worked perfectly!

NEXT:

Challenge: How can I implement and modify the 2D model from the asset store in order to make it suitable with GLOW?

Due to the time limit, I take the 2D model which Peter found and implement it in our game.

How did I solve this?

I read the 2D model's script and change some line of code to make the character suitable for our game (delete Jumping function)

DOT Framework methods used:

RESOURCES:

2D model Character:

https://assetstore.unity.com/packages/2d/characters/prototype-hero-demo-pixel-art-186233

PRODUCT:

I commented the jump function in the movement script:

Quality of the results:

The character works smoothly in the game. In the next iteration, we can create a new character.

NEXT:

Challenge: How can I implement the pen brush and eraser in Unity in order to draw on a canvas?

The player in our game can freely draw to express themselves. But in this early stage of a game, I just implement the basic brush and eraser while my group will take a look at other functions.

How did I solve this?

I looked for drawing in unity on google and found an asset called "Free draw" - which created for study purposes. Then I downloaded it and start playing with the scripts.

DOT Framework methods used:

RESOURCES:

Free draw asset:

https://www.youtube.com/watch?v=40ylWWrCpkA

Instruction:

PRODUCT:

For this users can change between 3 color, adjust the pen width and using an eraser

Quality of the results:

This is the basic part of a pen and eraser, they still need to be improved for more brush type and more engagement UI.

NEXT:

How did I solve this?

I participated in writing the user stories and making the personas based on our game design document. For the user stories, we split our game functionality into smaller parts to match with related user stories. We also decided the priority and acceptance criteria for each part.

DOT Framework methods used:

RESOURCES:

Game Design Document:

1 page GDD

10 page GDD

PRODUCT:

Personas:

Customer Journey:

User Requirements:

Affinity Map:

USER STORIES DOCUMENT click Here

NEXT:

Challenge: How can I create a prototype in Figma to show the client our game's main functions?

The goal of this challenge is to create a prototype using Procreate and Figma to showcase the main functions of GLOW.

How did I solve this?

After receiving the client's debriefing document and research results, I and my group discussed some ideas for showing the main functions and gameplay of GLOW. In this part, I participated in the drawing of game UI on Procreate and the creation of Figma prototype with my group-mates.

DOT Framework methods used:

RESOURCES:

Debriefing Document

Theme/Topic research for the Drawings

Drawing Tools research

Showcase room research

Coach mode Research

PRODUCT:

UI design created by me using Procreate.

Final Figma prototype: Click Here

NEXT:

Challenge: How can I get to know more about some drawing tools - In this research is about Procreate?

The goal of this challenge is to find more details about Procreate - a drawing app for iPad.

How did I solve this?

Do research about Procreate on Google.

Looking for its features.

Looking for other drawing apps.

DOT Framework methods used:

RESOURCES:

Procreate on Wiki:

Procreate (software) - Wikipedia

Procreate Official website:

Procreate® - Made for Artists

PRODUCT:

Quality of the results:

At the end of the research, I can decide what functions can be used in our game - GLOW.

NEXT:

How did I solve this?

We did some research on some drawings game and use them as inspirations for our game. I brainstormed with my teammates about which functions should be in our game that can help players with autism show their talent in drawing.

DOT Framework methods used:

RESOURCES:

Inspiration:

HUE - video game wiki:

https://en.wikipedia.org/wiki/Hue_(video_game)

PRODUCT:

You can find our group game design documents here:

1 page GDD

10 page GDD

NEXT:

The goal is I can have more information about the client - Garage2020.

How did I solve this?

Looking for information about a company on the Internet.

DOT Frameworks Used:

RESOURCES:

Garage2020 Official Website:

https://www.garage2020.nl/

Garage2020's Linkedin:

Garage2020: Overview | LinkedIn

PRODUCT:

Our group made a google doc which has many aspects, my part for this analysis is about the company:

NEXT:

Problem: How can I implement sounds for coins and other pickup items in Spacenture in order to make the game more interesting?

The goal when solving this problem is can apply the knowledge from the sound design assignments and from the internet to play a sound when pickup items in Unity.

How did I solve this?

I take a look on the internet to see how can I implement sounds for pickups

Use Audacity to add reverb to the source sounds (to make it more "space" vibe)

Implemented all stuff in Unity prototype and then showed it to my peer!

DOT Framework Used:

RESOURCES:

Coin Pickups Sound:

How to make Audio louder?

How do i make the audio louder? - Unity Answers

Reverb - Audacity Manual:

Reverb - Audacity Manual (audacityteam.org)

PRODUCT:

Adding reverb effect:

Before:

After:

Pickups sound: (I just can upload only 1 video due to Tumblr limitation)

Link to our game on itch.io:

Spacenture by Fontys Game Design & Technology, Peterlajos, leecamm (itch.io)

Quality of the result:

The first time, the sounds were too small even I set them to maximum volume. So I looked for solutions in the Unity forum and applied that into the game:

These adjustments for the camera made the sound nearer the camera so it made the sound louder.

NEXT:

Problem: How can I change the camera orthographic size when the player uses the speed star?

I decide to make this in order to let players "feel" that the speed is increased and they can see more stuff on the map because now they can run faster.

How did I solve this?

Brainstorm and play around with the cinemachine camera.

Looking for a tutorial on how to change camera orthographic size using C# script.

Implemented the functionality in the Unity prototype.

DOT Frameworks Used:

RESOURCES:

Cinemachine tutorial:

Unity Document:

Unity - Scripting API: Camera.orthographicSize (unity3d.com)

Unity forum:

How to programmatically change virtual cam's orthographic size? - Unity Forum

PRODUCT:

When a player uses the speed star, the speed increases, and the camera will zoom out, after 15s, the speed star effect expired and the camera view back to normal with the speed reset.

Quality of the result:

The implement works pretty well, I added few lines of code in the speed star script to trigger the camera view in PlayerMovement.cs:

And do the same thing when the time out in the TimerForStars.cs:

NEXT: