Unity‐chan Costume Tutorial
In this tutorial, we will fit the Unity-Chan! Sunny Side Up model for use on female characters.
No experience with Blender or Unity is required before starting this tutorial.
By the end of the tutorial, this what we will have in-game as a Cobalt mod.
You will need to have these programs installed.
- Blender, for the 3D modeling portion.
- Robust Weight Transfer, a Blender plugin, for the 3D modeling portion.
- Unity, for the building portion.
- [something] for the Material editing portion.
- A text editor of your choice.
- An Engage female base body.
- The Unity Chan costume files.
- Mod bootstrap files
Open the Engage female base body file by double-clicking on it.
This is what it should look like right after it opens in Blender.
You can orbit the camera by clicking the middle mouse button and moving the mouse.
You can pan the camera by pressing the shift key and then clicking the middle mouse button, and moving the mouse.
You can zoom in and out by scrolling the mouse wheel.
In the upper right corner, you should see a few colored circles. This tool is called the Navigation Gizmo. Click on the colored circles with letters on them, to quickly change viewing angles and snap to side and top views.
Drag-and-drop the unity chan FBX you downloaded onto Blender.
You should see a dialog box that looks like this. Leave everything set at their defaults. Click Import FBX.
You will notice that Unity chan shows up right on top of the base body. Additionally, a few items are highlighted in the side panel in bright orange. These are the objects that we just imported.
This are a bit messy, so we will start by hiding the Engage base body. Move your mouse over the eye icon next to the base body in the side panel.
Shift-click the button to hide it and everything underneath it.
You will notice that only Unity chan is left in the viewport. If this is not the case, make sure you shift-clicked the eye next to uBody_Base0AF_c000, and not the camera.
Click on the little arrow next to Character1_Reference
You should see something like this in the side panel.
There are a lot of objects here, but we will be working with the Shirt first.
Shift-click on the eye for Character1_Reference to hide everything underneath it, then click the eye for just the Shirt to unhide it.
Now scroll down in the side panel to the bottom, and click the eye next to uBody_Base0AF_c000_Skin.
Your viewport should look like this now, with only uBody_Base0AF_c000_Skin and Shirt showing.
The Shirt isn't a great fit right now. It's a floating over the base body, and is a bit big.
Move your mouse over to the Navigation Gizmo the click the green circle until you're looking at the model straight on. It should show -Y.
Now, select the Shirt by left clicking on it in the viewport. Notice that is it highlighted in orange, and the object saying Shirt is also highlighted in the side panel.
In Blender, we can move objects by pressing the G key, and then moving the mouse. To remember this, we can think of G as standing for Grab.
Now, press the G key. Notice that the orange highlight is now white. Move your mouse down a bit, so the shirt on the body.
You might find that it's tricky to move things in a straight line, so press Z key while the object is still being moved. You will see a blue line like this.
If you move the mouse now, the movement will be locked to the Z axis (up and down). This is called Axis Locking. This allows us to move the shirt while keeping it centered. The same feature is available with the X and Y keys for the corresponding axes.
When you get the shirt fitting over her shoulders, click the mouse button to confirm the move. Notice that the highlight is orange again.
If you don't like where you put the shirt, you can use control Z to undo, or G to move it again.
The scene should look something like this now.
Let's check how well the costume is fitting now. Use the Navigation Gizmo and the middle mouse button to check out our work.
While the Shirt is in a better position, it is a bit too big right now.
In Blender, we can scale objects by pressing the S key, and then moving the mouse. To remember this, we can think of S as standing for Scale.
With the shirt still selected, press the S key and move your mouse.
You will notice that it is getting smaller, but is also moving around in a strange way. That is because the [origin point(https://docs.blender.org/manual/en/latest/scene_layout/object/origin.html) for this object is somewhere down near the ground. The scale command, by default, scales relative to this point.
If you zoom out a bit with the mouse wheel and keep the shirt selected, you will see an orange dot near the feet.
We can move the origin point to a more sensible place.
Making sure that the Shirt is selected, go to the Object menu, choose Set Origin, and then Origin to Geometry.
Notice that the orange dot is now near the center of the shirt.
Now try using the S key again, and scale the shirt to fit better. You can also reposition it with G if you need to.
The shirt should look something like this now. Don't worry if the shirt isn't perfectly covering her torso, because the hoodie we'll work on next covers the rest of the upper body.
We'll come back to finish adjustments to the shirt later.
Use the eye icon and hide the shirt. Then, show the Hoodie and the Zipper.
Note
We won't be using HoodieBack in this tutorial, so make sure not to select it.
The hoodie isn't a great fit right now. It's a floating over the base body.
Select the Hoodie the G key to move the costume into a better place, clicking to confirm.
However, notice that the Zipper didn't move along with the Hoodie, even though it ought to be attached to it. This is because they are two separate objects and not actually related.
Undo the move with control Z.
We can shift click the two objects to move them together at the same time.
Try this now by first clicking on the Zipper in the viewport, and then shift clicking on the Hoodie. They should both be highlighted in orange now.
Now, use the G key to move. The two objects now move together. Remember to use the G key, then the Z key, to keep the hoodie moving only up and down.
You should have something like this now:
Since we will be continuing to work with these two objects, we will join them so that they are one object.
To do that, we select the two items and then join them with control-J.
The order in which we select objects can change the results of certain operations, including join.
To see the difference, we will try joining two ways.
First select the Hoodie in the viewport, then shift click and select the Zipper in the viewport.
Having trouble selecting the zipper with shift-click?
You can also control click (not shift click) on the name of the object in the side panel to select multiple objects. The result will be the same either way.Notice the colors here:
In the viewport, the Hoodie has a darker orange outline, and the zipper has a bright orange outline.
In the sidepanel, the Hoodie is orange, has has a dark blue rectangle, and the Zipper is yellow and highlighted in a light blue color.
If you do not see the items open in the sidepanel, move your mouse over the sidepanel and press the period . key.
Now, go to the Object menu and choose Join.
The objects are joined and only the Zipper object remains.
Now undo the join with control-z.
This time, select the Zipper first, and then select the Hoodie. Notice the colors here, and how they are different from last time. In the viewport, the Zipper is darker orange, and the Hoodie is lighter orange. In the side panel, the Hoodie is the one with the lighter blue rectangle.
Join the objects again, and this time you will be left with the Hoodie.
This experiment shows that the last selected object is the one that's joined to.
We will proceed with this result, as the resulting object being Hoodie makes more sense.
You should end up with something like this.
The next few steps will involve familiarizing ourselves with tools used in mesh editing.
Switch to the front view by clicking on the Navigation Gizmo as we did before.
Notice that while the Hoodie is overall in a good place, the sides are a bit wide compared to the base body.
We will need to edit the shape of the hoodie to better match the base body.
In the upper left corner, there is a dropdown that looks like this and current says Object Mode in it.
This allows us to select different modes for Blender.
Object mode is used to manipulate objects as a whole. We've been using this mode so far.
Edit mode is used to edit the vertices that make up the object.
Make sure that the Hoodie is selected, and click on the mode dropdown, then select Edit mode.
The view will look like this now.
Notice that a grid and a bunch of vertices are now overlaid the hoodie. If it doesn't look like this, switch back to Object mode, double check that you are selecting the Hoodie body before switching to Edit mode.
Select a vertex like this by moving your mouse over it and clicking it. It doesn't need to be this precise one, any in the area will be OK for this part.
The same G key we used to move the hoodie as an object, can be used to move the vertices as well.
Press G to start moving. Try moving your mouse in various directions.
Notice that now the shape of the hoodie changes when you move your mouse.
If you left click, you will place the vertex there. With G, we can adjust the shape of a mesh.
However, there are many vertices and it would take a lot of time to move each one of the individually.
Undo to cancel this change for now.
In the same bar where the mode dropdown was, there is a tool called (Proportional Editing)[https://docs.blender.org/manual/en/latest/editors/3dview/controls/proportional_editing.html].
Click on it. It should turn blue, indicating it is active.
Now, select the a vertex by clicking on it, and move it again with G. Scroll your mouse wheel, and you will see a circle changing sizes. This is the sphere of influence for the proportional edit. Notice that now when you move the mouse, the selected point and its neighbors are moved. Try a few different circle sizes to get a feel for this tool.
Once you find a good placement, click to confirm it.
You may have something like this:
Although we fixed one side of the hoodie, the other side is still sticking out. While we could use the same method we did just above, again, there is a better way.
Undo any changes you've made so far with control-Z.
The Unity-chan costume was created in a way that is symmetrical. We can take advantage of that symmetry while editing.
In the upper right hand corner near the Navigation Gizmo, we can find the mesh symmetry editing options.
Turn on Enable mesh symmetry in the X axis.
Now, we can try to adjust the hoodie again. Click on one on the vertices with proportional editing on, and use the G key.
You will notice that the opposite side moves together now when editing.
We can continue adjusting the hoodie to fit the base body better.
To help maintain the proportions of the Hoodie, you can select multiple vertices at the same time to maintain their shape.
To see what vertex selection tools there are, left click and hold this button in the upper left corner.
Let's choose the Select Circle, and click around the side of the Hoodie to select some vertices in this area.
Now moving them with G, they will stay together and maintain their shape.
Try to get the sides of your hoodie looking something like this, and we will be ready for the next step.
Using the Navigation Gizmo, rotate the viewport so that we are looking at the back of the model.
Notice that the body is sticking out of the hoodie a bit at the bottom, but the body covers the hoodie so we don't see any of the vertices.
We can use the X-Ray mode to see all the vertices.
You can find it in your top bar here.
If you do not see it, hover your mouse and scroll the mouse wheel until the button comes into view.
Click it, and it should become blue to indicate it is activated.
Notice now that we can see all the vertices for the hoodie.
Try clicking on a vertex that is clipping into the body, such as this one.
You may find it hard to tell which vertex is actually selected. Reposition the camera so that you can get a better view.
With an angle such of this one, use the Select Circle and select a few of the vertices that are clipping out.
Making sure you have Proportional Editing turned on, use G to move the vertices. Constrain the movement to be along the Y axis by pressing the Y key while this is hapepning.
Now, move them out of the body.
Afterwards, you can turn off X-Ray.
The hoodie should no longer be clipping into the body. If you wish, you can move a few more vertices around smooth out our changes.
When you're ready to move on, continue to the next step.
Switch back to Object Mode.
Then, turn on the shirt again via the side panel.
Depending on how you fit your shirt and hoodie, you may notice that the shirt clips out of the hoodie in some places, or the shirt and the hoodie don't properly cover the skin.
In my case, we can see that from angles, there is some exposed skin from the shirt being incompletely modeled.
Using the techniques we went over above, get the shirt fitting something like this and to your liking.
If you want to edit the hoodie, you can switch back to the hoodie to edit that to your liking.
Remember to use Proportional Editing and the mirror editing option. When moving vertices with G, remember that you can use the X, Y, Z to constrain your movements so they are predictable.
If the hoodie is in your way, you can hide it with the eye button temporarily.
At the end, the shirt and the hoodie should look something like this.
In my case, I edited the hoodie to fit more tightly around her torso.
By the end of this section, we will be able to play an animation with our costume on the character to check how well it is fitting.
For this tutorial, we included some animations to test with in the base body project. For a tutorial on how to dump your own animations, see here (unfortunately this doesn't exist yet!).
To be able to play the animations, we first need to be able to select the bones for body. We previously hid them, so we'll need to unhide them.
First make sure you're in Object mode. Then click on uBody_Base0AF_c000 in the side panel, and click the eye icon.
You should see the bones now, which look like thin pyramids with a sphere on them.
Then, click the Data button (it looks like a little green person running). Then in the Pose section, choose Pose Position.
Now we need to open the Action Editor to play our animation.
Depending on the state of your UI, you will need to take different steps to open the editor.
First, check the bottom of your screen for a collapsed section that looks like this:
If you don't see a section down there, you can make one yourself by right clicking right above the help bar and choosing Horizontal Split.
- Right click here
- Choose "Horizontal Split"
- Choose a line to split it at, and you'll see something like this.
- You can put your mouse between the two windows to adjust its size, similar to where you put the mouse in step 1.
Click the button in the upper left corner of that window, Sheet, then switch to Action Editor.
You can expand the bottom section by putting your mouse between that section and the viewport and dragging up.
After this, click on this button in the corner, look under the Animation section, and choose Dope Sheet.
Then click Dope Sheet, and in this menu, choose Action Editor.
Finally click the button next to the + New button, and in this dropdown, choose the first item, labelled uAnim_Drg0AF-Sw1_c000_Attack1.
You should see the base body snap into position.
Now, by clicking and dragging the blue line in the Timeline in the action editor, we can see the base body moving.
However, notice that the costume is not moving with the body. It is just floating in place.
We need to do a few more things before the clothing pieces will move with the body.
Here's some explanation about how animations work. If you just want to get things working, you can skip ahead.
First, click on the uBody_Base0AF_c000_Skin object, and then the blue wrench.
This will show the modifiers currently applied to this object..
Notice that there is a modifier here, named Armature. It has an icon tha tlooks like a little person.
This modifier has an Object property, set to uBody_Base0AF_c000. This tells this skin object that it should react to the bones in that object when they move.
Now click on the green triangle with squares. If you don't see this icon, make sure you still have uBody_Base0AF_c000_Skin selected.
These are the vertex groups.
Notice that the if you flip open the bones, you will see the same names as list of names in the vertex group.
Let's visualize these vertex groups.
Making sure that base body uBody_Base0AF_c000_Skin is selected, switch to Weight Paint mode.
Now, make sure c_hip_jnt is selected in the Vertex Groups panel.
Notice how some areas light up in a gradient of colors. These are the vertices that will move with that bone.
Switch back to Object Mode, click on the Hoodie. On the Vertex Groups page, notice how none of these groups are named anything similar to what the the base body's names were. This is because these were created in reference to Unity-chan's bones, not Engage's bones.
In fact, if we go and check the modifiers for the Hoodie,
we'll find that it's not even using the right armature. Character1_Reference is Unity-chan's bones.
These two different pieces - the modifier pointing to the right armature, and the right vertex groups, are both required for our costume to move.
In Object mode, make sure the Hoodie is selected, and the modifier tab is open. There is an armature already, but right now, it's still assigned to the Unity-chan modifier. Click on Object and switch the Object to uBody_Base0AF_c000.
Then, go to the Data tab, and under Vertex Groups, choose Delete All Groups. These are the vertex groups for Unity-chan's original rig which are no longer needed.
Do the same for the shirt.
We now have the armatures set up, but we have no weight painting.
We will reuse the weights that the Engage base body has.
First, we need to set the Engage body back to Rest pose. To do so, click on the bones in Object mode, and in the Running Person tab, choose Rest Position.
Find the SENT tab and click it. If you can't see this side bar, first press the N key.
then open Robust Weight Transfer.
For the source, choose uBody_Base0AF_c000.
Then, select the Hoodie and click Transfer Weights. If this button is grayed out, make sure you are in Object mode, and not edit mode.
Notice that in the Vertex Groups section, the Hoodie now has bone names from Engage's skeleton.
Do the same for the shirt.
Now, select the bones again and choose pose mode.
The costume now moves with the body as you scrub through the timeline.
You can click this button and try out how other animations look. There may be some clipping but this is a good start.
With the Hoodie selected, go to weight paint mode, and notice that the hoodie now has weight painting with the Engage bones.
Before we move on to testing in game, let's get the costume in a decent shape by finishing off with the shorts.
Now, let's work on fitting the shorts.
Hide everything except the LowerBody for now.
To quickly hide everything, use the shortcut Shift-H.
Then, find the LowerBody object in the side panel, and select it. Then click its eye.
You should see something like this.
Make sure the LowerBody is selected, then switch to Edit mode.
Notice that the LowerBody itself has skin from the Unity-chan costume itself.
Orbit the camera around a bit. Conveniently for us, a ring of vertices that just so happens to define the boundary between the shorts and the thighs.
We will cut out the shorts for use in our costume. Since we have an Engage base skin already, we don't need the original Unity-chan leg skin parts.
Turn on X-Ray mode so we can get a better view of what's going on.
We will use the Select Loops feature.
Alt/option click on an edge which is the visual boundary between the shorts and the leg. This selects the ring that forms the leg shorts.
Ensure Proportional Scaling is off, and then use G to check that you've selected this correctly. Try moving it up a bit at an angle. If your selection doesn't move like this, make sure that you did not deselect the ring. Use the Esc key to cancel this move.
Notice that there's some "smearing"; we can see a bit of a blend of the shorts color and the skin color when moving. This is because the shorts are still connected to the thighs.
To separate the shorts from the thighs, we can use the Rip Vertices command.
With the ring around the leg still selected, go to Vertex -> Rip Vertices. Then, hit enter twice in a row.
Using G now, try moving the selected ring again. You'll notice that the shorts and the skin are no longer joined.
Even if we have mirror editing on, we still need to do this again to the other short leg. So, repeat the above process with the other leg.
With that done, we will now separate the shorts section into its own object, like how the Hoodie and Shirt were separate.
Press A twice quickly in a row to deselect everything.
Then, click on a vertex that's on the shorts, and go to Select -> Select Linked -> Linked. This triggers the Select Linked tool.
You should see the shorts vertices selected and nothing else. If you see the shorts and a leg or two selected, makes sure you've ripped the boundary between the shorts and the leg correctly.
Now we need to separate the selected parts out. To do so, with the Shorts still selected, go to Mesh -> Separate -> Selection, and choose it.
Notice that we now have LowerBody and LowerBody.001 objects in the outliner.
Switch to Object mode, and click on LowerBody.001. Double click on it and rename it to Shorts, then press Enter to confirm.
Hide the old LowerBody for now. Using the techniques we discussed above, we will modifiy the shorts so that they fit right.
Using the eye button, turn on the various parts of the costume that we previously hid, along with the Engage skin.
Change the bones back to Rest position.
Your window should look something like this now.
Notice that there is some clipping out of the Hoodie. Hide the hoodie and orbit the camera behind the model.
You'll notice that it doesn't quite fit right yet.
Turn on the Mirror editing X symmetry, and try to edit the shorts.
Notice that it isn't quite editing symmetrically.
This is because the shorts are just slightly off such that we can't use this tool. Luckily, the two sides are pretty close in shape, we can use the Symmetrize tool to help fix this.
Use the A key to select all of the vertices in the shorts, then choose Mesh -> Symmetrize
Now, when we edit, the edits will be applied to both sides.
Using the techniques we went over above, make the pants fit better.
You may find proportional editing and X-Ray helpful for this task. Make sure to show the Hoodie every now and then to make sure the shorts aren't clipping out. If necessary, you may adjust the Hoodie a bit so that the shorts don't clip out.
After you get the shorts in a decent shape, update its armature modifier, delete its existing vertex groups, and do a weight transfer as we did before.
Don't worry too much if the shorts look a little weird in the animations. It will be mostly covered by the hoodie anyway.
You should have something that looks like this with the shirt, hoodie, and pants.
While there are still parts of the costume we haven't fitted yet, this is enough for now and we should check how the costume looks in game.
We will be preparing our costume to try in the game in the next step.
Note: Consider doing this step first out of all of the steps since it can actually help with organization.
In Engage, the mesh pieces we have been working on belong under the meshGP object. We'll make change with a feature called Parenting Objects.
First, make sure you're in Object mode.
Click on the Hoodie in either the viewport or the side panel. Then, find the meshGP object in the side panel, and control click on it.
Then, go to Object -> Parent -> Object (you may need to scroll up in the menu to see this option).
Notice in the side panel that the Hoodie is now under meshGP. Note that the order in which you click the objects matters, so if you get something unexpected, double check what order you clicked them in.
Repeat the same for the Shirt and the Shorts.
At the end, you should have a hierarchy that looks like this.
Throughout the project, we've scaled, moved, and rotated objects to get them to fit.
Engage shading and physics work the best when things have default Transform values. We will need to Apply our tranformations.
Click on the Hoodie, and then twirl open this menu on the side of the viewport. Notice that the values for location are not all 0, and the scale is 0.010 for all the axes.
Now, go to Object -> Apply -> All Transforms.
Observe now that the location and rotation values are zeroed out, and the scale is all 1.000 across the board. It's expected that the Dimensions are not zero here.
Do the same for the Shirt and Shorts we have been working on.
Recall how we brought in the Unity-chan costume from the FBX file. Now we will be exporting an FBX file for use in Unity.
First, hide all the objects that aren't in the Body_Base0AF_c000 object. Double check that everything underneath it, including the bones, are visible. Also, set the bones back to Rest position.
You should see something like this now:
Then, go to File -> Export -> FBX
Under Include, choose Visible Objects.
For scale, type in 0.01.
Make sure animation is not checked.
Your settings should look like this:
Choose a place to save this file, then click export the FBX.
We are now ready for the Unity steps.
If you haven't already, set up Unity using the guide described here.
Introduction to the Divine Dragon Build tool. Talk about the setup needed to build a model bundle, assigning materials, addressables
First, we need to define an accessory Item that is associated with this costume.
Open Item.xml, and use the Find feature to search for the text Name="アクセサリ" (アクセサリ is accessory in English.)
This will take you the section where the accessories are defined. You should see a lot of AIDs being defined. Scroll to the bottom.
Scroll down until you find its section. In a vanilla game Item.xml file, AID_まもりのせいそう should be the last item.
Now, copy and paste this line and paste it as the last entry.
<Param Out="" Aid="AID_UnityChanSunnySideUp" Name="MAID_UnityChanSunnySideUp" Help="MAID_H_UnityChanSunnySideUp" NameM="" HelpM="" NameF="" HelpF="" First="true" Amiibo="false" Asset="" CondtionCid="" CondtionSkills="" CondtionGender="2" Gid="" Price="69" Iron="0" Steel="0" Silver="0" Mask="1" />
This defines an item with AID AID_UnityChanSunnySideUp, for females (CondtionGender="2"), with two associated strings (MAID_UnityChanSunnySideUp, MAID_H_UnityChanSunnySideUp) which will be defined later.
Now, we need to make this costume associated with the bundle we built.
Open AssetTable.xml. For the AssetTable, the order in which we add entries matters.
Search for the string <Param Out="" PresetName="" Mode="2" Conditions="PID_ウマ;".
Then underneath it, add the following two lines:
This defines the zoomed-in costume model.
And this defines the battle map model.
The Conditions here dictate when this costume will be used. Notice how we have set AID_UnityChanSunnySideUp and 女装;.
Now, go to your mod's patches folder, and create a new folder called msbt, then create a folder called message.
Then, create a folder called us, and then a folder called usen inside of that.
Finally, using your text editor, create a new file in that folder called accessories.txt.
Inside of it, put the following:
[MAID_UnityChanSunnySideUp]
Unity Chan Sunny Side Up
[MAID_H_UnityChanSunnySideUp]
A tutorial costume.
Notice how the names of these entries are the same as what we defined in the Item.xml.
Copy the spring bones from Merrin's tail.
Possibly out of scope, and should be already created for the user. A separate "how to guide" may be more appropriate for multi-creation.