Swift Runner Outfits

I worked with the university’s Creative Innovation Hub to develop the avatar and unlockable clothes the player can earn to customise their character. They researched and provided tools for creating and rigging the character and outfits, so that I could focus on modelling the outfits and the unlocking and equipping systems within Unity.

At first I was unsure how to make outfits that would fit the character, but I found that I could use relevant parts of the character mesh. However, making the outfits this way led to clipping with the body mesh. To fix this I moved the vertices outward along their normals by using the fatten tool.

I made some of the outfits such as the 2024 VMA outfit by editing existing clothes from Fuse as they would not fit the body mesh. When I tried to import directly from Fuse, the body and clothes were merged into one mesh so I couldn’t use the individual meshes. I found that I could import into Unity, then export from there into blender to split them into separate meshes. As this was a more complex outfit, I combined parts of multiple meshes together, using a clothing mesh for the dress and body mesh for the part under the leg slit. 

When I imported this into Unity, the inner side of the dress was invisible as the inside of the mesh wasn’t shaded. To fix this, I found how to make a basic 2-sided shader.

Wrapping text to the body mesh didn’t work as it became very distorted from following the breast curve. To fix this I used the clothes mesh to create these outfits as they had a smoother topology, and moved the positions of text to prevent distortion. I used this on all the outfits with text including the Red shirts, Travis Kelce’s jersey, and the 2019 AMA shirt.

I rigged the outfits through trial and error as I wasn’t sure how to rig them so that they kept the shape of the avatar, and eventually found a way that worked by combining two methods I found online. When the player buys a random outfit, that outfit is displayed to the player, removed from the remaining outfits list, and added to the unlocked list.

In the wardrobe, there is a scrolling menu that shows icons for each type of outfit. When the player selects one, it opens the display for outfits of that type. When an outfit is unlocked, it is moved to the front of the scroll view so all the unlocked outfits are displayed first. For the outfits types that are optional such as gloves, there is an additional button to remove them. When switching between a full body outfit and an upper and lower combo, both upper and lower parts are swapped together so the avatar remains fully clothed.

When a player equips an outfit, the ID of the button is used to find the correct item in the unlocked list to enable. I tried enabling and disabling the gameobject of the outfit but this desynced the outfit and avatar animations, so I changed this to enable the renderer component of the object.

I added a button to reset the clothes to the default option to make it easy for players to remove their currently equipped clothes without having to go through each item individually. This disables the renderers of all the outfits, and then enables the ones stored in the default outfit list.

Set outfits

I added a section of the shop that displays 3 specific outfits, giving the player more choice of how they spend their gems. I had already done this with the song cards so I used the same code as a base and then adapted it to work with the outfits. With the song cards, the cards displayed in the shop could be directly given to the player. However, the actual outfits had to be given to the player, as well as the cards to accurately display the outfits remaining. 

This required using the outfit cards to display, but then finding the corresponding physical outfit to give the player when they bought one. I also had to change the code to remove the starting clothes from the pool of available outfits.

Sometimes the outfits were mismatched so that the outfit card shown, the intended outfit and the actual outfit given were all different. After repeatedly buying outfits to test what was happening, I found that two separate issues were occurring to create these mismatches. When I looked at the list positions of the outfits in the full list and remaining list, I realised that the outfit cards were being chosen from the full list instead of the remaining list. Changing this to choose from the remaining list fixed the outfit card mismatch.

When making the specific song cards, I had the mismatch between what was supposed to be given and what was actually given. To fix this, I shifted the index of the song given by 1 if the target song name didn’t match the song name it was going to give. This worked as the mismatch was always off by 1 and in the same direction every time.

However, the outfit mismatch could be off by 1 or 2, and in either direction. I spent some time trying to find if there was a consistent way to know the mismatch so I could apply the offset, but I struggled with this. I then realised that I could prevent the mismatch from occurring instead of trying to fix it after it happens. I changed the check that triggers the offset to use the name of the target card and use that to find the card index instead of using the index saved from the button.

When reloading the game, the outfit cards displayed outfits that had already been bought. This was because the function to choose the outfits in the shop ran before the remaining outfits loaded. I fixed this by adding a function that updates the outfit list of the cards when the player opens the shop.

I adjusted the width of the outfit names so that none of them overlapped, and changed some of the names to make them shorter to fit. For example, the Reputation bodysuits were renamed to “Rep” bodysuits, which is a well known abbreviation among Swifties, so it is still recognisable.

I used screenshots of the outfits to make the outfit equip buttons. I considered using the unrigged versions of outfits, but they looked strange so I decided to use the rigged outfits as they looked better in the pose of the avatar. I used the song card template for the outfits and used a different background colour for each outfit so it is clear which type of clothing it is. I chose not to include the outfit names on the cards and instead display text underneath them as the cards are quite small and it would be hard to read.

For the outfit cards I used the rigged versions of outfits as they looked more natural. I decided to try using them for the unlock display as well, but changing them created issue with the lists as the rigged outfits use a skinned mesh renderer whereas the non-rigged use a regular mesh renderer, so I chose to leave the unlock displays using the unrigged versions.

I added a display to the wardrobe that shows how many outfits of each type the player has unlocked. When the player selects an outfit type, this shows how many items of that type the player has and the total of that type. 

When I did this, I noticed the shoe counter was at 3 even though only the custom shoes were unlocked. I realised that the custom shoe was being added to the unlocked outfits list multiple times. I couldn’t find why this was happening, so I created a function to remove custom shoe objects from the list if there was more than 1 item in the list with the custom shoe name.