The Fancy Mansion Heist: Final Animations

This’ll be the last blog post I write about the game my team and I are currently working on, called the Fancy Mansion Heist. By this point I’ve explained what the game is about several times, but let us do a quick recap: You play as a burglar breaking into the luxurious mansion of Mr. Otto von Fancy. Your objective? To steal as many valuables and as much cash as you can without getting caught by Otto, who is wandering through the halls of the building in search for you, blunderbuss shotgun ready to aim and fire away.

So what have I been working on? Well, my main task for the duration of this project have been to draw out the animations for the burglar and Otto, while doing various other tasks for the game whenever they were needed. If anyone is curious about the previous iterations of the animation style and design choices, feel free to check out earlier posts here on my blog. I will not talk too much about those things tonight, and instead focus mainly on the sprites I’ve been doing this week.

First off, here’s a gif example of how the final version of the burglar looks:

Pretty plain and simple, but with a colour scheme which makes them stand out just enough from the surrounding area:

Now, onto the animations I’m working on for the enemy, Otto. As the deadline (27th of February) draws near, I’ve been focusing on minimizing the time spent working on every frame, copypasting as much I can with only minor edits to do. Feels a bit cheap to do so, but there is still a lot to do and if I want to make it in time for my own personal deadline to finish all sprite sheets, this Sunday (to leave time for any last minute edits and other things), then every shortcut is valuable.

In hindsight, designing Otto von Fancy to be asymmetrical might not have been the best decision, as it required further edits of the side views of him, edits I didn’t have to do with our symmetrical burglar.

Here he is seen in his standard patrol mode, which will also be in a front and back view (currently working on those). He’s wielding an outdated blunderbuss shotgun, to fit his generally oldish look, complete with the gun powder bag he’ll be using to load his weapon before firing, to give the player a handful of seconds to make their escape. If they don’t make it out of firing range in time, Otto will hit them with his shot and it’s game over.

Animation-wise, this could have been a lot better. I rushed these, and as such the leg movement is far too choppy for my tastes. But as he’s going to be mostly covered by darkness, as you can see on the screenshot above, his animations weren’t vital enough for me to spend time perfecting, time which I don’t have. So for now, top notch quality has to be sacrificed in favour of producing the needed assets as soon as possible.

Why is he wearing a nightcap, pajamas dress and slippers you ask? Why, he got woken up in the middle of the night of course. What a silly question. All you need to hunt scoundrels is obviously your trusty old blunderbuss, gun powder and monocle.

Speaking of hunting scoundrels, here is a preview gif of Otto firing his weapon:

It’s not meant to loop and instead will end on the last frame, then shift over to his patrol mode if the burglar got away, or the screen will go back to the menu as it’s game over when the player has been shot. The shaking motion can be repeated as many times as needed, to give the exact amount of seconds we wish to delay his shot with. There’s also a few frames missing in this gif, which is why it looks a bit jumpy when he fires his blunderbuss. Those frames are something I will add if there’s the time to do so (as in I’ve yet to do them), but if all else fails, this’ll be all we need for our shoot animation as it’ll be aided by sound and other visual effects. There’s also a sprite sheet for him firing from his other side, and I’ll be done with the ones for his back and front view soon enough.

To sum things up, this week has been all about animation and making sacrifices for the sake of keeping on schedule. Not something I’m particularly happy with, but in a pinch you gotta make do with what you got.

That’s all for me! Here’s to hoping all the work my team and I have put into The Fancy Mansion Heist will show through in the final version of it. Also, here’s an icon image for Otto, which will accompany his voice lines/talk bubbles when they show up. See you folks around!

/Addis

Finished Player Avatar Animations

Quck recap of the story of my team’s game before I go into detail about what I’ve been doing for it this week:

The name is The Fancy Mansion Heist, and you play as a burglar who’s breaking into the mansion of Mr. Otto von Fancy, to steal his various valuables and money. He stalks you throughout your wandering around the building, shotgun blunderbuss in hand and ready to shoot you the second he hears or sees you.

So! This week I’ve been finishing up a bunch of animations, mostly for the player character also known as “the burglar”. So far I’ve gone through several test animations and iterations of the burglar’s design, all which you can see in previous posts here on my blog. What I will be focusing on for today’s post is how I’ve gone about making the final versions of the animations, and what troubles I ran into while doing so.

These are the finished walk animations for the burglar, now featuring slightly darker colours compared to previous versions, shading and highlights, and blinking eyes, to bring in slightly more life into an otherwise fairly plain animation. Here are also the animations/images for the idle position:

 

And for the curious, here’s a sprite sheet featuring the 28 frames used in one of the animations:

It’s a basic 14 frame walk animation, duplicated and with the first three frames in the second 14-part group edited to feature the blinking. This to prevent the burglar from blinking every step they take, which seemed far too rushed and unnatural.

So what were the troubles I ran into while drawing these out? For one, figuring out how to go about things in the most time efficient manner possible was a hassle, especially with the numerous revisions and iterations of the design and animations I had to do. My original idea was to only add shadows to the leg and arm behind the body, but the result was still too flat and did not match the rest of the game’s visual aspects. So upon request from my team members, I buckled up and added shading and highlights to various part of the body, still keeping it fairly simple so it would not require too much time to animate.

Secondly, I was working around the clock on these to manage the looming deadline of the Beta presentation we have tomorrow (Friday, 13th) and thus I was working while sleep deprived. This was not the best choice (but what other option were there?) as I ended up drawing the legs wrong on the back view animation. This I didn’t notice until the lines had been drawn out, and the result looked like the burglar was locked in place and only kicking their legs back repeatedly. Frustrated, I tried to salvage what I could to save time, minimizing the frames I had to re-draw. This ended up as a less than satisfactory animation with some jittery lines I’d be glad to edit, if the time was available for something like that. As it stands, the result is still decent enough to use, and most mistakes won’t be as noticeable in the actual game where the character moves through the various rooms of the mansion.

Still, it’s a frustrating mistake to make, and one I’ll be sure to avoid in future projects.

Other that that, I’m fairly pleased with how things are progressing so far. Everything visual is matching up far better by now compared to earlier versions, and my team and I are working hard everyday to put this game together. To round this post up, here are a couple of screenshots of how the overall game is looking so far:

Without the black-out parts of the screen, to give an idea of how everything is laid out, and

with the mostly blacked out screen. This will be what the player sees for the most of the game.

See you folks again next week!

/Addis

Player Avatar Animations

Alright! Another Thursday, another game development post. A quick recap:

The game my group and I are working on is called The Fancy Mansion Heist, and it’s about a burglar breaking into the luxurious mansion of Mr. Otto von Fancy, a trigger happy elderly man. Your objective is to steal as many valuables as you can in the shortest amount of time possible, without being discovered by Otto, who will shoot you upon sight.

Now, my main task have been to animate the burglar and Mr. Otto von Fancy. Various setbacks and revisions have eaten away a lot at my time, and as such I’ve yet to begin animating Otto. But here are my concepts of the blunderbuss-toting gentleman in question:

A tired man still wearing his bed clothes after rushing out of bed the second he was awoken by the sounds the burglar makes. Only had the time to grab his blunderbuss and slip on his monocle. I stayed close to the previous group’s concept art of Otto (aka: the ones who created the Fancy Mansion concept which we’re building our game from), and chose to simplify whatever details were there into something which could be easily animated. In his final animated shape, he’ll most likely be slightly more rounded and shorter, to fit the size of the burglar and environments better.

Speaking of the burglar. I’ve gone through a few versions of them so far, trying to produce the best I can within the time frame we have. But as the Beta deadline is creeping up on us, and a nasty illness stole a week of my time, I’m forced to put the finer details to the side and just cram out as much as I can before next Wednesday, while still making it look good.

I won’t talk about the previous versions of the burglar here, or why I’ve gone with the previous design choices I have. All that have been covered in previous blog posts, so feel free to take a peek at those for a more comprehensive look on my process over the past few weeks. For now, I’ll just mention where I am in terms of animation, and what needs to be done.

This is the “final” burglar side animation I showed to my team mates earlier today, which has been edited in terms of line thickness and depth indicating shading. A blinking eye has been added as well, which I personally felt didn’t quite work. This will be fixed by duplicating the 14 frames visible here into a 28 frame animation, and editing out the blinking from the second set of 14, to make the player avatar blink every other step instead. If this looks odd or still feels rushed, we will talk about further duplicating and editing frames, or leaving the blinking out entirely. It all boils down to a question of aesthetics vs. “how big can the animation sizes be”?

Other edits which needs to be done, to ensure the character does not appear too flat against the environments they travel in, is to add more shading and highlights in a few select places. I whipped up a quick test example, just to have something visual to compare everything else with:

This finally gave the look we were after, where the burglar “popped out” enough, but did not make the environment appear flat in comparison. So now, I will edit the animations I have to feature the new shading and highlights, and proceed to finish the rest of them, including Mr Otto von Fancy’s animations, in the same style. It’s an around the clock work to finish everything up before the due date, but I’m positive we’ll make it, and have a pleasing product to show for our hard work these past weeks.

/Addis

Player Avatar Design

Another week has passed, and it’s time to write down the current process of building up a game, piece by piece. And what is the game my team and I are working on? For starters, it’s called “The Fancy Mansion Heist” (working title) and it’s about a burglar breaking into the luxurious home of Mr. Otto von Fancy. There’s an accomplice waiting for the burglar outside the mansion as well, but they are never seen within the actual game, only communicated with via the use of a mobile phone.

For the past few weeks I’ve focused mostly on the player avatar, the burglar, as they are the prime focus of the game. But what I’ve forgotten to mention so far in my blog posts is my thoughts and process behind designing the look for them.

This is the concept artwork of the player avatar from the group who made the Fancy Mansion concept, team 15. They described the burglar as a modern and gender-less individual, so anyone would be able to identify with the character. This was something I wanted to keep while designing our version of the game, yet I knew I also had to make the look a lot simpler to make animating them doable. So I proceeded to sit down and draw out what I thought could be a good design.

I kept things as simple as possible, with few lines and some edits to the design, clothes-wise and colour-wise. At first I had an idea how perhaps the burglar’s mask was just a piece of cloth tied over their lower face and with a hat on, but this idea didn’t go over so well with the rest of my team, saying that it makes for an odd head shape. The eyes also struck them as not the best idea, so all this was changed in later designs.

This is from a test animation where I had only changed the eyes and made the shoes all black (a detail we decided to keep), but where the mask was as of yet unchanged. In the end, I decided to go back to the concept design of the burglar, and use the burglar mask as it was, albeit simplified and all black.

This is another still image from a separate animation, where a simpler mask design had been implemented and the colours were brightened up a bit, after further input from my team members and other people. As I’m responsible for animating both the player avatar and the antagonist, I’ve had to figure out shortcuts to lessen the time spent working on each animation required. Which is why I opted for simple forms with even lines this time, to make copypasting easy and quick. The lines I used were too thin, however, and the colours looks too plain against the in-game enviroments. So for the next step I’ll have to thicken the lines and include some simple shading on the character, to make it fit in with everything else better. I will also re-think the torso piece of the burglar, as I feel it might have gone too far away from the originally intended gender neutral design I wished to keep.

More of this will be discussed in next week’s post! See you then.

/Addis

 

 

Player Avatar – Walk animation

Work on building a game is progressing, and last week I wrote about the test animation I did for the player avatar. Now, before I go into detail about my process while doing the first attempt at a proper animation, let’s do a quick run-through of what the game is really about.

My group, also known as Team 1, are working on the game “The Fancy Mansion Heist” (working title), which is about a burglar breaking into the luxurious mansion of Mr. Otto von Fancy. The burglar is a scruffy hoodlum of indeterminate gender, and Otto is a wealthy elderly man who is trying to stop you from stealing his valuables.

As I’m the one responsible for animating both the burglar and Otto von Fancy, I have had to try ways to shorten the time spent working on every frame of the individual animations. So I decided to try something I personally don’t enjoy, and draw out perfectly even lines for every body part of the burglar on separate layers in my art program of choice, Paint Tool SAI. This was to simplify copy-pasting, which would only require small edits to the limbs for each frame once I had the main parts drawn out. After spending a few hours adapting the different layers to make 14 frame drawings for the right-side walk animation, I had something which looked like this:

This .gif shows how the “bare bones” of the animation looks like, so I could see if the lines matched up well enough to proceed to colouring it in. And as I deemed the mistakes small enough to never be noticed in the actual game, where the burglar will be only a fourth as big as this example .gif, I went on to doing a minor edit line-wise and quickly filling in the flat colours. Once this was done, my animation became something which we could put into our game prototype, to test both speed and graphic elements:

For this .gif, I chose to slow down the animation speed a bit, to show my group how quickly I expected the burglar to walk in-game. I assembled a sprite sheet with the 14 frames which makes up the animation, and we implemented it into our prototype. Unfortunately, there was an issue I had overlooked in my process. The burglar did neither stand out against the environment in the way we have strived for, nor match anything design-wise to the rest of the game:

At this point, all it creates is a boring and bland spot on the screen. So how will I fix this error? Well, since so far this was the only “finished” animation, there won’t be too many hours lost. I’ve come to the conclusion that I’ll have to redo the lines in a manner I’m more familiar with, which is smooth lines with variation in thickness. I will also add simple shading, to give depth cues and create a less flat look for the burglar among the rest of the mansion objects and environments. I will keep the arms on separate layers, and eventually make individual sprite sheets for those, as the player avatar will be carrying a multitude of objects, and the arms has to be adapted accordingly.

Other than this, I’ve learned more of what my weaknesses and strengths are when it comes to graphics due to working on this particular animation. So even though the hours spent on it turned out to be for nothing, I’ve gained important insight, which will hopefully aid me in the coming weeks of building “The Fancy Mansion Heist”.

/Addis

Test Animation

For one of the courses I’m currently studying, my group and I have been assigned to build a 2D game based on another group’s concept. My role in this production is Lead Art; to keep track on all the graphics being made between the three artists. My main task is to animate the player avatar and antagonist, and I started by doing a test animation of the player avatar, since it will be the focal point on the screen and it’s crucial that the animations will move in time with the player’s input commands.

I began by making a quick lineup, consisting of a few key frames:

The lines were not cleaned up, since this animation was only for functionality, not looks. Once I had the first frames done, I began sketching out “inbetween” frames, also known as “tween” frames, to smooth out the movement. I repeated this process, copy-pasting previously drawn frames and editing them to save time, until I had 14 frames in total and a complete walk cycle. At that point, I began to fill in the sketches with colours, keeping them flat and simple, but covering all the parts of the player avatar. This to see how the avatar’s colours would compare to the colours of our prototype level design. Once that was done, I compiled them onto one page, a so called sprite sheet:

And lastly, I combined each frame into one .gif, to see how well they worked together:

There is a bump in the step I missed as I lined up each sketch over the previous one while building the animation, and the arm movement is not as smooth as I would have hoped for. But due to doing this while I still had time to test things out, I learned what to watch out for before I continue to work on the final animations. And by putting the animation into our prototype game level, It was easy to see that the colours needs to be edited, to avoid making the player avatar be nothing but a bleak blue-grey spot on the screen, as seen here:

Since testing this, the colours have been adjusted on both the player avatar and the surrounding environment, to make the few light spots on the screen be more visible in the darkness that most of the screen will be covered with during the entirety of the game.

To sum things up: The six to seven hours I spent sketching out and editing this test animation in Paint Tool SAI and Photoshop was time well spent, as it proved to be both the learning experience and useful tool it was created for.

/Addis

 

Computer issues and busy times have kept me from posting new material lately, so here’s a collection of some work I’ve been doing lately.

Concepts of the player avatar, and

front page design for Ambient Pressure.

Perspective and object rotation assignment.

Warm-ups of the character I’ve been developing, Muir.

Step by step view of my artistic process for assignment drawings.

 

Character Construction & Turnaround

Last weeks assignments were to pick one of our previously made character thumbnails, and continue building onto the one we chose. To do so, we were to draw our chosen character from loose pose sketch to clear lines, and an orthogonal turnaround as well. For extra credit we could also provide a close-up of the head.

Loose sketch –> roughed out details –> first clean-up

Orthogonal turnaround, with a detail of the sides of the shoes facing inwards

Close-up of the head

Basic facts about this character:

Name: Muir

Sex: Female

Age: Young adult (roughly 22 – 25 years old)

Strong and somewhat agile. Has good stamina but cannot run very fast. Can grab objects with her tail.

Adventurous and eager to help out in situations where her strength can be displayed. Overly confident to the point of where she’s often cocky, which leads to her ending up in trouble a lot. Trouble usually resolved by fighting her way out of it, or by the wit of her two close friends.

All in all, this was an interesting assignment, and my first time doing a full-body turnaround. If I ever get the chance to, I will redo Muir’s turnaround just to see how I can improve upon it.

Croquis 2 & 3

Some more pages of live model studies, from the third week in the 2D Computer Graphics: Theory and Application 1 course.

   

    

Croquis 1

A handful of pages from last week’s croquis classes.