Grim Girl Hana Returns! (Pixel Art Mock-Up)

[Music] hello there my name is brandon and i make pictures out of tiny squares and today i'm bringing back grim girl hannah who is a character that i designed in a previous video and i got some nice feedback on that one and i've just kind of noticed some comments from time to time of people asking like if she's ever gonna appear again in another video uh so i thought it was about time to do a follow-up and just kind of explore this concept some more and so the list of original characters on this channel starting to climb now uh we've got nano of course and jace and hannah and the one bit detective boy who by the way i'm still hoping to do another entry for pretty soon actually and i think there's a pretty fun balance between all of these uh hannah especially though is a nice departure compared to the other three since i picture her world being more of like a whimsical dark fantasy so i think it'd be fun for exploring different creature or monster designs or maybe just in general some weird or unique kind of settings for this piece in particular i wanted to design something that would be a nice representative look at her world and i wanted it to also be like a little screenshot from a game like a mock-up of sorts so i began by doing a really rough sketch of the composition um and i've got hannah here and there's a couple of platforms and a scarecrow dude and then i also just wanted the environment to have this crazy bright and colorful feel to it uh just to kind of play against what otherwise might be sort of that creepy or dark tone the canvas size i decided to work in for this one is 240x160 pixels which is the resolution of the gameboy advance and i'm not designing this to try and mimic other technical specifications of game boy advanced games i just think that resolution itself is a nice size it's small enough to force a restricted pixely look but still large enough that it should be possible to nicely execute any concept that you have in mind and i also just wanted to try out that three to two aspect ratio just for something a little different than i normally do and just to warn you ahead of time this initial footage that we're watching right now doesn't actually end up working out for me uh it happens from time to time but essentially what happened was that i got excited about executing the idea from my rough sketch so i just hopped right into this canvas and pulled up the nes palette to have a bunch of initial colors to work with and i thought i could just freestyle drop blocks of color into a black canvas to create everything that i needed and i think my thought was that by default everything would kind of recede into dark shadows you know sort of like the nes batman or castlevania games the way that they look the problem with that execution though was that it didn't really support my initial concept of this being like a hyper vibrant world it would probably end up being too shadowy of a look instead either that or it would just take a roundabout way into achieving the final product that i had in mind and there's nothing wrong with that look or style obviously in fact it's a great look but it just wasn't exactly the right fit for me on this one but i wasn't really thinking that far ahead yet so we can just watch me get a little bit further here before realizing what's happening some good things did come of that first draft though uh like i noticed that my original hannah sprite was a little too big to be kind of a comfortable looking size within this canvas so i decided to shrink it down a little bit and then just sort of cleaned up the line work um just toggling the resize box like that to kind of shrink a sprite usually gives you pretty mixed results you know since it has to calculate like what gets left over but depending on the design you can sometimes get something that's close enough and then you just have to clean up the result a little bit uh certainly we're trying first rather than just redesigning totally from scratch mostly what i liked about the original sprite was really just the character concept in general and i really like her banner scythe as a weapon and accessory idea and so those designs were simple enough that the sprite didn't really need to be the size that it was so i think it did translate fairly well to a smaller sprite size so she's been reduced here from 35 pixels tall down to 26. so i think it was around this time that my you know pixel sense was alerting me that something might be wrong i started to notice how the execution here wasn't really aligning with what i envisioned for this piece like as an example adding the foliage and the flowers on the black background forced this kind of one bit style and i couldn't see how i was gonna properly add some kind of colorful background behind that eventually uh you know not without having to carefully work between all of those little details so i added in the archway as just like the final thing and then i had to make that executive decision just to scrap this and start from scratch and that's not really an easy thing to do when you've already sunk some time into a piece uh but it really was for the best in this case i just wiped the slate clean and just considered that one to be sort of like a first draft or a warm up i guess and then i came into version two with a few ideas in mind for how to improve the appearance i think it'd be fun to give this sort of a simple storybook feel uh or almost like something that could be thought of like a stage production or a musical in a way but with a cartoony look if that makes sense like my jumping off point was just to use really simple and flat layering just to kind of create these discrete set pieces and then just focus on using strong patterns to define the textures rather than intricate shading so like the grass here for example i'm working on this sort of repeating pattern that's a jagged swirl and it'll end up being a stylistic representation of the grass hanging over the soil and then it also adds a little bit more interest or like whimsy i guess is whimsy the right word um either way it'll be more obvious after adding color but i just like this idea of creating these unique patterns for the different components of the scene and then just having them all sort of mix and match to create the overall stylistic direction the other thing was just being somewhat loose with the line work in certain spots to kind of offset the more repetitive elements like the stone archway here you know in a different piece i might create something like this by using perfectly segmented lines that don't have any jaggies thrown in but in this case the jaggy lines are actually a benefit for creating kind of a more uneven look to the stone work and i feel like that's a better fit for this environment and can even be used to create more of a cracked or chipped texture to the stone as far as technical approach goes for the most part i stick with the pencil tool when i'm doing the line work like this a lot of times people will ask if i use any special brushes or anything but literally just the square one pixel size pencil tool is what i'm set to most of the time i might lay that line work down one pixel at a time or just in kind of little small movements if i'm roughing out sort of a larger shape sometimes i'll increase that pencil tool to a larger size just so i can quickly create sort of a large blob for the object silhouette and then you can refine it from there which usually just entails kind of erasing from that blob to leave some sort of object shape or whatever so a lot of it is just flipping between that one pixel size pencil and one pixel size eraser either to add details or to cover away from a silhouette layers are also a really important part of this for my workflow every time i add a new object normally what i do is make a new layer to draw that object on and then that way it doesn't impact what's already been put down and that'll also allow you to move its position around just using the arrow keys if you want to feel out the correct placement of that object within the scene once i have it in a good spot i tend to merge the layers all together just so it's kind of locked in on the same layer and i find that organization easiest for being able to drop in the color all in one step but that obviously happens a little bit later when it comes to adding brand new character sprites within a scene like this it's important to figure out their approximate size first and usually they can be scaled according to the environment or if you happen to have another character already made you can think about their size relative to that one so what i'm working on here is the scarecrow character and i brought in the hana sprite just to scale an appropriate head size for him and then since his body construction isn't quite typical i just defined his height based on the placement of the head and then the post that i already started working on aside from the overall size and proportion i like detailing the character head first uh because you can kind of quickly test if it's the right size to fit all the details that you're hoping to fit in this case i just wanted to be able to have a couple of eyes and then like that jagged looking mouth sort of for the appearance that it's stitched on and luckily those details worked quite well in the sizing here the rest of his design is fairly stock scarecrow attire you know he's got a ratty looking hat and a long coat originally he was going to be a bit of a throwaway set piece like maybe just kind of silently pointing in a direction where to go or something like that but as i went along i started liking the idea of making him more of a prominent character in this world i think actually be funny to see him pop up in random locations to give quests or advice or something uh with little to no explanation how he got there since he should just be stuck in the same spot all the time but eventually i add some animation to this piece and it kind of focuses on some dialogue with him so we'll get to that in a little bit but yeah i like how he turned out and i think it'll be worth exploring more variations for what his appearance or characterization could be and by the way i named him crow for the time being which i know is a pretty obvious and borderline lazy name for a scarecrow character but after i thought of it i just couldn't shake the idea that i liked it anyway and he's got a small raven friend there as well who doesn't have a name yet but i'll probably just go with raven to keep it simple and obvious as well or maybe it should be like reginald or something just to break the expectation i don't know yet from here one of the final tasks for the line work was just to fill out the remaining space with a few environmental details so i'm adding a few more railings some small patches of grass poking up and then some flowers within that as well someone had mentioned in the previous video that hannah is actually the japanese word for flower and that was sort of a nice and fitting coincidence so i wanted to play with that flower motif and have it be a prominent part of the imagery in this world uh it works well obviously within the whole like deathy theme here of this being like an after world or spirit world sort of location and the fact that it could tie back to our main character's name like that is just kind of a perfect fit i even went ahead and made a flower pickup icon and i'm using them to be like the main pickup item i guess like maybe even as a currency type thing rather than coins just give that theme some more focus and then perhaps maybe that's even part of her purpose in the world as well like to collect these flowers that have been scattered for some reason i think it could be a nice secondary quest idea or something along those lines and then working on these icons kind of led me straight into designing the hud bar i wanted to have a small character portrait up there so actually just took the larger hana appearance from the original sprite and used that as the portrait which worked out perfectly for the sizing i spaced out some letters next to it and a little health bar as well and that was another thing like since she's actually a spirit i didn't just want to call it like the life bar or hp or something because that doesn't really fit that theme i thought it'd be funny to call it like a death bar but then obviously that also might be kind of confusing or hold other implications so i settled on calling it uh spirit points which i eventually abbreviate to sp for short at the bottom of the hud i've also added a mood indicator and i'm not sure exactly what that'll entail at this point maybe the moods carry different abilities but i just like the idea of there being an indicator on her hud showing that she was in a spooky mood and this isn't a real game or anything so i figured why not have a little bit of fun with that kind of stuff when i made the original character concept i'd roughed out a few emoji type expression designs so i think the mood indicator could also be a nice way to tie those in somehow and then to finish out those hud elements i'm adding a little display count for the flower pickups and then there's also an extra life indicator and in this case the extra life is a little tombstone icon again just to have that sort of opposite interpretation of the idea all right so here's a look at the completed line work for the main foreground elements and now before i move on to adding color to the piece i'm just doing a first pass using grayscale tones so that i can work out how light or dark i want each of these pieces or sections to be the way i think about my workflow is like this you essentially only want to give yourself one piece of information to be working on at a time so the line work was the first piece of information all i had to think about during that phase was whether or not the things i was trying to make were clear and readable as just line work in the second phase here the single piece of information i'm focused on is just the contrast i don't want to worry yet about what color everything is going to be i only need to decide how light or dark they are relative to each other eventually we'll be overlaying the color using this grayscale contrast and those colors will adopt the relative brightness values of the grayscale here so it's really the foundation of our color at this point if you were to create pixel art that doesn't use strong line art like mine does here you could always start at this step and just work in grayscale contrast to keep things simple before adding color see this is why i think the first version didn't work out for me i was just kind of randomly working my way through by selecting colors and improvising literally everything uh so that forces you to have to focus on construction and contrast and color harmony all at once the three c's i think they call it nah i'm just kidding i just made that up uh but i guess all i'm saying is that at least for me i do my best work by building things up slowly rather than tackling all that information all at once um of course if you're working from a preset palette especially one that's sort of a small and restricted one there's generally going to be a good color contrast worked out for you already which is why those are such a pleasure to use a lot of the time so at this point i'm also adding in the background design by using a couple layers of solid gray tones again i'm going back to that idea of a storybook or stage production and just having these flat elements layered one over the other one of my biggest inspirations for this sort of look kind of indirectly comes from the art of yoshi's island actually and i don't mean that i'm trying to mimic the style of that game i mean more from an approach idea i love the way that game doesn't really approach the pixel art from the typical standpoint the pixel art itself aside from the character sprite work is almost incidental to just creating these fun pastelly set pieces that have this sort of hand-drawn quality to them to me this particular look is less about having these amazing rendered pixel art tiles and more about creating fun patterns and colors that define an emotion for the environment so that's kind of the stylistic philosophy i was trying to adopt with this one and right now what's happening is i'm overlaying those colors on top of my grayscale layer by using the color blending mode and just doing some fine tuning to their appearance again i started by selecting some random nes colors but then by the time they get overlaid with that gray value underneath they take on a slightly different tone and from there i just make slight adjustments to the hue or saturation to find what i'm looking for when you're trying to find the exact right color balance one of the things that i find helps is to view the art on different screens like normally i'll send the image to my phone or connect my laptop to the tv just to see how the color changes across different devices you know everything is sort of calibrated slightly differently so it usually gives you a little bit of insight into how this might end up looking for other people viewing it on whatever devices they have all right with those colors in place my final step before the animation work was just to add a small touch of shading and highlighting as i mentioned i was going for a bit more of a flat and layered feel with this one but some slight shading in the right spot can just help to accentuate the depth in a few places and then it also injects a little bit more color across the whole piece i also added a few highlights on the blocks underneath hannah just to further portray that she's glowing and i think if she were moving along that'd be kind of a fun effect to track across the environment okay let's take a look at a few examples of the animation for this one first of all if i'm making a perfectly looping animation i always start by finding the one thing that's going to define the loop cycle of the entire piece it'll be the one thing that has to be seamless every single frame so that's usually stuff that's constantly in motion like scrolling things for example so that's what i've got here there's this jagged pattern that's supposed to be like a lava river and i'm working out that from peak to peak of these zigzags is a total of six pixels so that will require exactly six unique frames to create a constant and loopable motion after separating that piece from the foreground i set up my six frames and simply bumped that piece over by one pixel for each frame and by the time it loops back to frame one everything appears seamlessly in the correct spot and similarly i've got this lava waterfall or i guess it's just called the lava fall at that point and so this is pretty much the same idea as the river but it's scrolling vertically and it should be configured to synchronize with the river loop as well now when i arbitrarily drew this i made this zigzag pattern that has three different colors of bands and they're each four pixels thick so that's a total of 12 pixels for the loopable portion of it which works out perfectly because if we just duplicate the existing frame count of 6 to 12 that'll work to scroll this component per every two loops of the river scrolling if i had drawn this at any other sizing i would have had to change the design so that the math would work out in this way but i guess the pixel god smiled upon me this time so that worked out quite nicely [Music] all right here's one that's just a really small environmental detail but i think it's a really nice touch i'm just animating a simple two frame bounce for this flower here so basically just creating a down and an up position really easy to put together but it just brings some life to the environment and also adds this sort of beat or rhythm in a sense i also really like these sort of animations that keep it simple like i think there's a nice charm to the simplicity of a two-frame animation like this for some character animation work as i mentioned i'm gonna have crow saying a few things here so i wanted to work out a few simple gesture poses uh just so his arms could move between a few positions while talking and also having his mouth move a little bit too i've never animated a scarecrow character before uh but i thought it'd be fun to bring the post into the movement here as well as if it kind of work like it's his spine and legs uh so it could tilt and bend around a little bit so the first thing i'm doing here is just leaning him back a little bit like he's straightening up to talk and then just kind of working out a bit of repositioning of the rest of his outfit his full set of animation just ends up being a few subsets of different positions usually about three frames each just to achieve that gesturing and talking and so the final thing is going to be adding a text box and dialogue for crow so i started by sizing out the text box first just to fill a decent amount of space within the design and then sized out some small lettering that's built at a sizing of three by five pixels i wanted to do kind of a scrappy storybook type of font to fit the vibe here and i always find the lowercase letter a can actually go a few different directions compared to a lot of the other letters like you can do it with or without that terminating top part or serif versus sans-serif etc the good thing with this lettering though was that it could be a little bit looser probably you know having a bit of randomness or imprecision would actually suit the feel here i think so you know what i think we're actually ready to go into the reveal of the final art so here's our first look at the world of grim girl hannah [Music] what [Music] [Music] so all right and if you're curious um the base animation of all the environmental stuff was able to stay within that loop of just 12 frames so that's just what's going on by default in the background but then what i did was replicate those 12 frames out to a total of 156 frames for the full animation and that was just kind of the amount of frames necessary to have crow's dialogue appear and cycle through i went pretty simple and just kind of put each word or small groups of words on their own layer so when the text is appearing it's literally just adding a new word for every frame of the animation and then when they're all there it just kind of holds there at the end of it before fading away and moving on to the next all right let's roll on through to crt time to close this out i hope you enjoyed joining me to explore this world a little bit more and i hope to create more for it at some point but until then thank you for watching and take care and keep it square [Music] [Music] you

Channel: Brandon James Greer

Views: 97,933

Keywords: pixel art, timelapse, speedpaint, gba, gameboy advance

Id: vfSRKvHIvmg

Length: 22min 38sec (1358 seconds)

Published: Sun Aug 16 2020