The Illusion of Life 2.0 — Class Final Project

Published in

RE: Write

10 min readMay 5, 2020

This is a run down of the steps I took to create my final project.
For my final project in our critical making class this semester, I wanted to explore more of the animation capabilities of Unity as well as finding myself really enjoying creating assets for Unity projects, especially in programs like Blender. I wanted some kind of project where I could combine those two things, and decided to attempt to make a short looping animation where one character would go through a walk cycle, only to switch between two different forms; a 3D model form and a 2D model form.

The sketch above illustrates the concept I was going for, where my character would just keep walking to the left and hit something, perhaps a portal or a door, that would transform them into a different model. They would just keep walking as if nothing ever happened and the background assets behind them would also change form. This meant I would need to create two versions of each object, which I was excited to do.

For this, I decided to stick with the character I had somewhat developed last semester, a little bat named Sommi which I had created a prototype puppet of last fall.

This little bat was blue in color and had extendable wings, both of which I wanted to keep in his design when I animated him.

Due to the current high popularity of the game Animal Crossing, I decided to use the game’s aesthetic choices in my animation and base all my models after models in the game.

From here, I created this little reference sheet, planning out just what assets I wanted to create and roughly what they were going to look like. The digital character sheet in the corner was designed by PixelatedCrown on Tumblr, which I used as reference when designing my character.

As you can see in my concept sketch, my bat was originally going to have a pair of wings as well, though this idea was scrapped when I began making the models, as I was afraid it would be too hard to animate in the time I had available. So he wound up with just little arms instead.

Creating the 3D assets:

I wanted to start with the 3D model first, so that I could get a clearer idea of what the character would look like, in order to make the 2D model look as close to the 3D one as possible. I then began in Blender, shaping the very basic model. A problem I had faced with my previous models was I was unable to put two pieces of digital clay together, and had to instead pull one piece of clay to its limits. I figured out how to bring in multiple pieces and merging them, eliminating the problem of stretching one shape to distorted proportions.

Once I had the basic shape of the model in a T-pose, I attempted to rig it using a few different methods. Rigging is the process in which a model is given a skeleton with bones and joints, that can be moved and manipulated to get the model to move into different poses. I soon found out that I wasn’t going to be able to rig my model as it currently was. I attempted to put the model into the program Maximo which was supposed to place the rig inside the model for me, however, it was having trouble finding the correct shape of the character.

I tried this a few times, even altering the model to better fit the rigger though it still would not work. Upon doing some more research, I found that actual models from the Animal Crossing games were hollow shapes. I wasn’t sure if this had anything to do with why my model, which was made of solid shapes, wasn’t rigging correctly. I pulled the model below off of the site models-resources.com of an actual in-game character named Ganon who is a boar. I thought that perhaps the shape of the boar would be close enough to the bat shape I was aiming for, that I could alter this hollow model instead.

However, when I tried working with this hollow model, everything I placed on it was a solid piece which clipped weirdly through the body and I wasn’t sure how to fix this. I also unintentionally would grab at pieces of the body and pull them in weird ways, causing random holes in the model.

It was at this point that I decided to scrap the 3D model idea altogether. I just did not have the skill yet to create working 3D assets. However, I was very excited for the 2D assets, and changed my overall plan to accommodate those more.

Creating the 2D assets:

Since my 3D models were not working out, I decided to shift gears and come up with a new end goal for the project, instead coming up with the idea of an AR app that could be used on a mobile device, in which a child could interact with a storybook like world and characters.

This rough sketch shows my concept, where there would be the digital characters and scene in the foreground, allowing space in the background for the child to be in frame or maybe hold up an action figure or toy to be with the digital characters.

I then started on the 2D models, drawing everything on paper first before using Adobe Illustrator to create the puppet and models. In order to get the exact look of the Animal Crossing games, I pulled in the model of a character and traced its basic shape, drawing my own details on top to insure everything was proportional.

From there, I threw it into Adobe Illustrator on my computer and got to work making the vector image of my bat, with each body part that was intending to move as its own separate layer. Every body part was its own piece, able to move freely from the other pieces.

I then did the same process for the other assets I wanted in the scene; a tree, a little house, and some hills with rocks and flowers.

Moving these assets into Unity was an interesting process, as each piece of something had to be saved just so, in order for it to work correctly in the Unity program. I had to save multiple versions and file types of the same thing, to see which one responded correctly in Unity.

Finally though, I was able to get all the pieces into the scene and begin working with them. The first step was to rig up the bat puppet, which was a relatively easy process. I used this tutorial to make sure I had all the steps correct.

First was to place bones into the puppet, essentially the skeleton of the character and where the joints would be.

The bones could then be moved. However, I did have to go into each bone’s setting and tell it which body part to move. Otherwise I wound up with a blob like the gif below, where the bones would pull on everything around them.

Once the bones were in place, I had to fix the mesh, or the skin, around the model, making sure that it registered the edges of the character.

From there, he was ready to move. I spent some time working on creating a walk cycle for my little bat using key frames, where each key frame would have a certain pose, and the program would fill in the movement in-between these poses. It took me several tries and a lot of working with the legs and body to make it look right. Also at this point, I had to recreate the model another time, due to the legs being on the wrong layers and not moving correctly in tandem with each other.

I finally got smart and found this reference image online of the key poses of a human’s walk cycle and used it to create a more natural movement in the legs.

Once I was happy with the bat’s walk cycle, I turned my attention to the background. I decided to put everything in the background on one layer, just to simplify things and make sure everything was moving together.

Using the same method with the key frames, I moved the background little by little until I had a cycle of it moving past the walking bat.

That worked okay for this prototype but wasn’t the cleanest, and I wouldn’t have it for a more professional end product. But I worked with it, worked with the rates at which the bat moved and the background moved, in order to get them to look like they were moving at the same speed.

You can see in the gif above an attempt where both animations were running at too fast of a speed and for some reason the background was glitching around. I went back into my key frames to fix this, spreading them further out so that the animations wouldn’t run so fast.

The End Result:

After working a while with the speed and key frames of the over all animation, this was the final result. I am extremely happy with it, as I have never used Unity before this class and I’d love to continue building with it.

Now, all that dark blue in the background past the hills and trees is intended to be the area where the AR would take place. All that space would be the device’s camera, where users could put themselves behind the digital action. This quick mock up illustrates the idea I mean:

Though I wasn’t able to test this scene on a mobile device due to complications with the connection between my computer and my tablet, I believe everything in the layout is where it should be to attempt this capability.

BONUS, HE JUMPS:

The above is what I ended up showing for my final presentation, however after the presentation, I returned to the project and attempted to add more to the scene, even adding a user input which would trigger an action. In other words, I added the ability for you to tell him to jump!

If you’d like to read more on that, this post shows the steps I took to make that ability possible. Link.

Here was the end result, showing not just a user input on a computer but also a user input on a mobile device.