The Evolution of Danton Dangereux: From sketch to screen
As the title suggests there were lessons I learned during the development of Dangerous Diver that caused me to rethink how Danton, my main character, was designed and animated. This blog will serve to show how Danton evolved over the two years of development and the reasons why. It may also hopefully help anyone else avoid these pitfalls and speed up the development process!
The Big Bang…
First there was nothing… then BANG, something… but what?
You don’t really know at first, ideas are blurry at best but something is forming. A circle here, a circle there, a splash of colour, what is this thing that forms in my mind’s eye…
Wait! It’s not a what but a who…
Who is this?! A bouffant hairdo is taking shape, I can see tight swimming togs (dear God I wish I could unsee that), a belly jiggles freely in the wind as this character soars through the sky, he doesn’t look to be in peak physical condition but man he is graceful! I must sketch!!!
I have a vision…
A vision of a horse that once galloped through my childhood, a horse that still lives somewhere in the vaults of my mind. It begins to trot toward me through clouds of childhood memories. That’s it! Now I remember! It came from a classic Bugs Bunny cartoon, “What’s Opera, Doc?” You know the one, Bugs is doing his usual cross-dressing thing, Viking style helmet and blonde ponytail as he rides in on the back of this majestic beast! A glorious portly horsey with pink locks and a flowery necklace gallops toward a swooning Elmer Fudd.
This horse, given its extreme girth, should be pounding the path, each hoof shaking the ground beneath but somehow it doesn’t… it seems to almost float down the mountain, each step light and airy, clip clop, clip clop… it’s hypnotic!
Why though… How?!
When you take a closer look at the animation you will see that it glides. Every few frames just before a full cycle of images the horse actually glides. It gives the horse such a weightless feel. If the horse were to actually move as if it were really that weight its steps would be much closer, it wouldn’t clear ground the way it does. These are considerations I could take into account when animating my character to give him that effortless feel as he dives from great heights.
This horse though, even in the still image above feels light, why?! For me the secret lies in the physical weight of pencil used in the line art of the character. The outline of the horse is very fine and never thickens; it feels like the whole thing was drawn in one stroke. It’s even in the horse’s expression, it just looks easy, like galloping is a breeze to this beast.
That’s it, that’s what I want, Danton must be like the horse.
The Monkey Mind (or lack thereof):
I used to draw years before all of this but at the time when I had the idea for Dangerous Diver and the character, I was waaaay out of practice. Truth be told I was never that good but hey, cartoons work when you believe the character and I felt I could bring Danton to life. Armed with primitive tools, by that I a pencil not a computer, I sketched out Danton keeping the idea of that glorious horse in mind, fine lines, large in the gut yes, but graceful, light…
I took a step back and yes, I was happy. This was him, it felt right, he made me chuckle but also looked determined and I believed that determination. I believed that he could dive from great heights and soar through the air with grace. So with crude sketch in hand and phone in other, I took a quick snap and emailed it to myself. I headed out to the studio (a bedroom at the time), logged onto my pc, downloaded the image and fired it into illustrator.
I retraced the character and coloured him, to keep the lining as light as possible I outlined him in almost the exact same colour that I had used as his fill colour, just slightly darker. That was it, Danton was created and that was enough for me to get going on the game. Normally for me I nit-pick at everything, I get caught up on all the little things, but not this time, I just thought he was right and I didn’t question anything. Of course, this blasé attitude that would normally be completely alien to me lead to something I didn’t pick up on at the time…
What is instantly apparent from the image above is how difficult it is to make out the details in character at this size. Did I spot this at the time? Nope! Dangerous Diver is a game that would come to mobile. Imagine shrinking this image even more to fit on a mobile screen, it would look something like this…
You see, as I was working on my pc with a 21” screen and everything zoomed I did not catch this issue at all. I simply went with a style that I had in mind and never took the size he would need to be on mobile into account, big mistake. It wasn’t until much further down the road the issue of Danton’s size and definition would put the brakes on development.
LESSON LEARNED: Always think about how you character will display on the device your game will be published on. Style is important but not to the detriment of the game.
The Hunter Gatherer:
After lots of online research, watching vids, reading articles I had gathered enough info to make what I thought was an informed decision on how I would bring Danton through animation… and boy was I wrong.
I had done some animating in the past and had familiarized myself with After Effects. AE(After Effects) is actually a great tool for animation and using the DUik plugin from http://duduf.com I knew I could create a bone system that would easily allow me to control my character.
For those who don’t know a bone system allows you to take a collection character drawings, e.g hand, forearm, arm and give them “bones.” This ties the images together allowing you to reuse them while animating the bones rather than physically redrawing each image.
With all my hunting and gathering of knowledge on the internet I never looked at whether I could import from AE into Unity, I don’t know why, I was so busy trying to get the animations right that it must have slipped my mind. I had spent so long creating dive animations etc. before ever actually checking to see if I could have them work in Unity. Now the only way I could bring them into Unity was by exporting each frame as a png making each animation hundreds of images long!
LESSON LEARNED: Test, Test, TEST! Every move you make artistically must be tested with the engine you are using. Always check that the tools you are using can work together easily and harmoniously.
The Caveman. Oops… I mean Cave”person”:
At this point Unity was actually handling the images rather well. There was no visible signs of any chugging from having to process the images so I thought pffft, let’s keep going this way what could possibly go wrong?
It was this type of “club you over the head and drag you to the cave” thinking that would then lead to my PC (i7, 12GBRam, dedicated graphics, basically a beast) being unable to run the game. I don’t know if I mentioned this before but Dangerous Diver was to run on mobile. MOBILE! If my pc can’t run it, how in God’s green earth would a phone run it?!
Images piled on top of images, Hundreds of images turned into thousands as more animations were being added. Let it be known that as idiotic and avoidable as all of this is, I kept finding info on the internet saying that “with 2D games you never have to worry about the images, you can always optimize later.” In my mind having to run so many images for animation had to be costly but from what I had been reading it seemed that I could just optimize it all later. Against my better judgment I carried on. This would never work and I should have addressed it immediately. So the next lesson I learned was pretty damn obvious…
LESSON LEARNED: When a problem comes to light deal with it there and then. Don’t wait to fix it later, it will just grow.
The sky is falling:
So that was it, I realized I was well and truly screwed with this and I had no way to save it. It needed to be bone-based animation and I needed to leave After Effects for in-game animations. I searched the internet for bone-based animation plugins for Unity and stumbled across “Anima2d.” This was at the time when they had just released it but I took the plunge and bought it because I liked the look of how integrated with the system it was.
*Anima2d” has since been bought by Unity and is now free to use!
Awesome news for the guys behind it so congrats to them!
I imported Danton into Unity and began the process of creating a skeleton and re-animating everything and it was the best move I had ever made! Doing this gave me so much more control, Danton was now integrated into the Unity system at a base level so all of the Unity Engine’s power started to open up.
During the development we had noticed that Danton had to be so far away to give the feeling of scale and allow the player to see the whole level at any given time, this meant you just couldn’t see him in his current state. I decided to redesign him with a black outline, more vibrant colouring and more pronounced features.
The character felt right during the cutscenes (animated in After Effects) I just felt he popped off the screen a little more with the colouring and black outline. He looked much better in game but still, he was a little small, you couldn’t see any facial expression from the distance. I had some ideas of how we could get a closer view of Danton but keep the style. Again, I was focusing more on the style and trying to make the game work around that rather than adapting, making the style work around the game.
LESSON LEARNED: Be adaptable with your character design at any stage, if it benefits the game then make the necessary changes.
Me make fire:
The images below are close to an average phone size, in fact they are larger than a large mobile screen but close. They aren’t an accurate representation of how it looks in motion but it should give you an idea. In the first you cannot see Danton at all. We had scaled him countless times and even used a dynamic camera but you could never really see him this. That spec in the top left is him, not working really is it?
Now I never felt you needed to “see” Danton’s expressions, more feel them. So we didn’t need a huge level of zoom to capture the facial animations but we did need something because he was indistinguishable as the game sat. We knew this so it was time to implement the camera changes and layout I had designed to see if we could make Danton work. Below was the UI with a close camera to the right, full screen to the right power and positioning below, nice! It had more of a “gamey” look to it and you could definitely see Danton in the close camera so we’re happy right?
Nope! It didn’t work! Why?! Basically we did some minor play testing (family, friends) most of which don’t play games except the odd mobile game so the perfect customer for Dangerous Diver and they couldn’t use both cameras. Funny, for me it was fine, I could look between both, probably from playing console games with a hud or a map but these are casual gamers and it wasn’t working for them. It was jarring though, the image doesn’t show it but the camera felt too close to see upcoming obstacles and once we pulled it back again, Danton began to become less and less visible.
Ever wonder why lots 2D characters in games have oversized heads with large features? It’s not just to make them look incredibly cute, which they do, but more so that you can see them from distance. It took forever but it all clicked, I had designed Danton as a character that would work great in an animated show but wasn’t necessarily right for the type of game I was creating which is no surprise given the fact that inspiration came from a cartoon that was on tv.
I got out the carving knife and began chopping and changing until I got this. Mini Danton!
Look at them side by side, they’re the same height but yet so much more can be seen with Mini Danton. Even bringing up the thickness of his outline really helped and the image could take it without becoming muddy. I dropped the camera in camera and that was that. Now he sits pretty in the level, there is still a sense of scale but now you can feel the animations, there is just enough facial animation coming through to involve the player with Danton’s experience. Again the image doesn’t do this justice but you can really feel his expressions when you play it.
LESSON LEARNED(again!): Don’t be afraid to adapt your character to suit the game you are trying to make!!!
The earth ain’t flat:
So in the end what have we learned, so much time could have been saved had I have thought about what the character needed to be to suit the game. I should have looked into the tools I was using and made sure that they could integrate seamlessly into Unity and I should have tested every step of the way to be sure. Run into a problem? Don’t back-bench it, face it there and then to avoid future tears (the worst kind of tears). Most importantly, because no matter how much prep you do you will need to change things, be adaptable!!! No really, there is a reason this is two points! It is so important that when you realize the game needs you to change something so it can function the way it should you are willing to take out the carving knife and make the cuts you need to.
Now go fourth and make mistakes, not these mistakes, you have been warned! Make new ones and write about it so development can be a more enjoyable and efficient experience for everyone!