FMP - weeks 22/23/24- dragon customization

Anouk Dutrée
24 apr 2023
7 minuten om te lezen

I decided to write a post for these three weeks together instead of my usual two week recaps as it’s all tied together, and I thought it made more sense to write it in one go! Here’s a summary of what I did:

Finished the design for customization
Implemented the customization scene in Unity
Hooked the customization up to the rest of the game
Small bug fixes
Created wooden signposts for the resource gathering scene
Created a dragon altar for transition between day and night
Worked on a general fire VFX
Added camera shakes
Made the dragon to human transformation effect take on the colour of the customized dragon

As you can tell, the majority was related to the customization section. Since this section was one of the core pillars in fulfilling our player fantasy, I really wanted to pay proper attention to it. So in this post I will primarily discuss my work for the customization section.

Customization section

Design

Last week I ended the blog post with my first design draft. Hanni and Rob went over the designs and left a bunch of comments in Figma for areas to improve.

Figure 1: Figma screenshot of first design iteration for customization UI.

The comment that struck me the most was Rob’s where he noted:

“I think you have designed to what you are making [for the vertical slice] and not what is possible [in the long run]. There is no option to pick the original dragon shape for example.”

This was completely true, I made the design with all the technical and scope limitations in the back of my head. This was the reason why my design felt so limited and why it wasn’t feeling “done”. This comment from Rob really turned my perspective around and I did a whole new version of the design with this in mind. I designed for what I would want to put in, not for what I can put in right now. This led to a design v2.

Since I obviously won’t have time to put everything of the design into Unity properly before the deadline, Rob and I decided I’ll just put some locks over the content I won’t be able to make in time. This way it’s in the design and it shows what we are aiming for, but it won’t matter that I won’t have time to implement it fully.

I put the second design in front of Rob again and we were both quite happy with it, but it needed some tweaking to make sure it’s consistent with the rest of the UI of the game. I finally ended up with a design v3 that we deemed good enough to implement in Unity.

Figure 2: Figma screenshot of final design for customization UI.

Implementation in Unity

Great! Design done and approved, time to get it into Unity. I got started with the level design. Essentially the level would only be used as a backdrop, and it simply needed to look like a cave. This was a quick thing, I created a Unity terrain with some rock textures, and added a bunch of rocks to make it look like it was a closed environment like a cave. I created a little plateau to put the dragon on and highlighted the dragon with a spotlight to make sure it was well lit.

Figure 3: Screenshot of scene set up for customization scene in Unity.

With the backdrop out of the way, I got started with pulling all the UI building blocks from Figma into Unity. Once everything was in the project, I started building the canvas in sections. I made sure to create hierarchies that allowed me to turn on and off specific sections easily without too much extra code. I started with the sidebar which is essentially a bunch of buttons. Each button I set up to activate the parent game object that contained the appropriate right hand dialog. Nothing too difficult.

ree — Figure 4: GameObject hierarchy for customization UI in Unity

After that I started building each dialog for each body part. Since I had everything mapped out in Figma this was a 15-minute job which was great! But this also meant that now the hard part came where I needed to start hooking up the logic to the UI and dragon model.

I decided to start with the dragon materials that required simple colour changes, which were the breastplates and the wing webbing. These body parts are controlled by a standard Unity material that simply has a colour property. I found a lovely free asset in the asset store that contained all the logic of turning HSV values into a Unity supported colour format, Flexible Color Picker (FCP) (Dehairs, 2022). I used that asset for handling the logic while I simply modified the looks of it. I created a small script that changed the colour of the webbing and breastplate materials in line with the colours picked by the user with the FCP sliders.

With the standard colours done, I decided to continue with the more advanced material changes. For the dragon body and eyes, I had made a custom shader that allowed me to adjust the saturation and hue of the material, while still being able to use albedo textures and normal maps etc. I needed sliders that looked like the FCP ones that would control the Hue and Saturation values of the dragon body and dragon eye materials. To achieve this, I created a script that would control the slider values and map it to the custom material I made:

ree — Figure 6: ShaderCustomization script

I hooked up the apply hue and saturation functions to the OnValueChange event of the slider. This means that the function is only called when the user actually changes the values. This way I won’t have to check in very frame if the user changed anything, which would add a lot of unnecessary compute overhead. To make this work I had to use the System.Single datatype. With regular floats it wouldn’t be possible to propagate the values using the OnValueChange event (benio33, 2020).

Colour changes are now done, but for the eyes I also have some possible base texture changes. The user should be able to change the pupil type of the dragon. I made three different base textures that a user can pick from which need to be set in the custom shader material I made. This worked the same as changing the hue or saturation properties of the material, I could just set the texture based on which icon the user clicked. I expected a lot of hassle but luckily, it’s possible to set a texture directly without any additional processing. You can see the logic in the “ChangeTexture” function.

That’s all for all the material changes, only thing that’s left is the mesh modification options for the horns and for the tail spike. These are controlled with BlendShapes on the model. Unity luckily has quite straightforward documentation on altering BlendShapes through code so I was able to write a script that would transfer slider values to blend shape values (Unity Technologies, 2021). I hooked up the script to the slider OnValueChange events in the same way as I did for the colour sliders and it worked without any hurdles.

Propagating customization values throughout the game

Every change a user makes to the dragon needed to be propagated throughout the game. Since all the material related changes all change the materials directly instead of making local copies, any changes are automatically propagated through the game. That means that I don’t have to save any of those values in the Game Manager.

Even though everything was propagated properly, I quickly ran into issues where the dragon wouldn’t be looking right upon starting the game. My test runs had altered the base materials and therefore I had to continuously reset the values. This was of course rather frustrating, so I wrote code that makes sure the game manager sets the dragon values correctly on game start for the first time.

Then I realized that it’s also necessary for a user to be able to cancel their changes and revert back to the previous state. This meant that I did need to keep track of the starting state of the dragon upon scene startup. I added logic for this to the start function of my customization manager script and added a cancel function that makes sure everything gets reset properly on cancel.

While all the material changes were working now, the blend shape changes got lost upon scene switching. I added some code to send the blend shape values to the game manager with the save button, and I made sure that upon every scene start the dragon object would get the right values from the game manager.

And that means we now have a fully functioning customization feature!! It was really fun to play around with this and to go through the game with different dragons.

Transition between day and night loop: dragon shrine

When we put the game in front of a few early stage playtesters, they all mentioned that they wanted more control over when they transform. In the playtest you just transformed when your daytime was up so there was no agency over this process.

To provide a player with more autonomy while still being consistent with the overarching narrative we decided that players would now be able to transform if they pray to a dragon statue. I created a dragon shrine in the village that the player can pray to. I added some Latin on the shrine as a wink to typical young adult fiction tropes like the heavy usage of Latin in Harry Potter (Nilsen & Nilsen, 2011), let’s see if anyone will pay enough attention to notice that though!

I think the post is already long enough as it is so I will leave it at this for today!

List of References

benio33. (2020). How can I use a slider’s UnityEvent “On Value Changed” to send the slider’s current value to a script? . Unity Answers. https://answers.unity.com/questions/1369959/how-can-i-use-a-sliders-unityevent-on-value-change.html

Dehairs, W. (2022). Flexible Color Picker (2.5.1). Unity Asset Store. https://assetstore.unity.com/packages/tools/gui/flexible-color-picker-150497

Nilsen, A. P., & Nilsen, D. L. F. (2011). Latin Revived: Source-Based Vocabulary Lessons Courtesy of Harry Potter. Journal of Adolescent & Adult Literacy, 50(2), 128–134. https://doi.org/10.1598/JAAL.50.2.5

Unity Technologies. (2021). Working with blend shapes. Unity Manual. https://docs.unity3d.com/Manual/BlendShapes.html