1-Bit Detective Boy | Part 2: “The Memory Bank” (Pixel Art Timelapse)

[Music] hello there my name is Brandon and I make pictures out of tiny squares and for this time-lapse we're back doing some one bit work and we got a few things to go through with this one today a little bit of concept to completion work some more one bit pixel our construction tips and I'll finish it off with a bit of insight into the animation as well particularly about making idle animations for characters if you happen to check out my previous video about one bit pixel art I kind of made this dark like cyberpunk fantasy ish game mock-up of a cyborg detective boy investigating a little laboratory scene and I really liked how that art style came out with that piece and I wanted to return to it and explore like another entry in the series to kind of build out this world and maybe the story a little bit more when I make a new piece in a continuing series I usually start by just copy pasting over the previous one to maintain the layout in the sizing since I generally figured all that stuff out the first time anyway the full canvas size I'm working in here is 200 by 200 pixels but the real artwork area like where you see those white borders on that is 160 by 144 I like the way it looks having the artwork area sitting within a larger canvas and also a canvas that's 200 by 200 overall scales of exactly 5 times to the size of 1000 by 1000 pixels which I find to be a good size for posting online the creative direction I took for this one started from the idea of like if this was a real game what would some of the gameplay functions look like and I was thinking about what a safe point could be for this world since this little detective boy is like part human part robot one of the unique things to do would be to treat the save point like he's writing part of his memory to an external source somewhere and that led me to this idea of there being like a memory bank where instead of depositing or withdrawing money you could store memories in free up valuable hard drive space and this wouldn't be like the standard safe point but maybe a few scattered at key points throughout the game because of course by transferring over memory rather than just making a copy means he'd forget certain things but I think that kind of builds in a nice character flaw for a detective anyway it could also be a fun thing for a story perspective like if he had to go requisition someone else's memories to maybe help with a case he was investigating I wanted to have fun with darker or more like unsettling themes so I thought about there being a giant organic kind of humanoid creature that could facilitate this memory transfer and it would be wired directly into the building in like a creepy cyberpunk kind of way as a stylistic reference the creatures from super metroid came to mind but also those large statues you know the ones where you normally find like power-ups and things like that so I kind of do my own version on that compositional idea and that scaling in comparison to our hero I do enjoy making pixel work up on the spot but for this one I had more of a vision for it and wanted it to spend some time finding the right composition and design so to plan it out actually did a few rough sketches sometimes it's easier to hammer out a couple quick rough ideas before jumping into the pixel work because you can kind of storyboard your composition and some of the broader pieces of interest it doesn't have to be pretty it has evidence by my scratchy drawing here and it ends up saving time since it's faster to compose the idea of the entire scene quickly like this and then by the time you sit down to do the pixel work it's already pretty clear where you're heading the large creature here who I think named the writer because he writes the memories into the bank his design is actually a really good opportunity to exploit the simple style of one bit to our advantage since everything is either black or white we just have to consider pieces of the design to highlight in white and your eye kind of fills in and connects the rest that's hidden as shadows I've taken an approach here of mixing in different sizes of shapes and textures to hopefully bring some interest and balance into his design so there are large solid areas like his face and shoulder pad working into medium shapes like the spine and the muscles of the arm and then the small shapes like the line textures throughout to convey those detailed mechanical bits one of the things that I think helps keep this style looking clean is by giving enough space to the individual clusters of pixels I almost treat it like everything has a border around it so there's generally like a full one pixel gap around all sides of each individual object or cluster of pixels rather than having them kind of bleed into one another also I just realized the things really shaded in a complex way here but that could be something to keep in mind for a different kind of approach like if you were drawing a sphere for example it could be the difference between just making a full white circle or making something that's just an edge highlight to convey a spherical shape in this case I've gone for more of a solid look but I might try the other approach on a different piece someday just to experiment alright so at this point the major elements are established being the composition between our little detective character and the large creature so it's time to start filling out the remaining available space with some environmental details on top of my typical sci-fi decoration to everything I wanted to give the environment to feel that it's been around for a while so I created some areas where there's like foliage as these sort of vines and stems that are growing around certain parts of the room I think it'd be cool to work it into the function of this place like if there was a symbiotic relationship between the organic machines in the plants that makes this whole operation run but I'm gonna keep brainstorming on that I also give the detective boy little cat to have as a companion because cats are also really good at investigating like sounds and other disturbances I mean they don't often solve the case but you want one by your side nonetheless ok here's kind of like the first draft of this piece and I was pretty happy with it at this point but there are a couple edits I had in mind to really elevate it further for one we got to do something about that creatures face I thought I'd like the blank soulless look but it's kind of haunting me and the next thing is to add some dramatic pops of color which means will no longer be considered one bit because one bits just our two colors the black and white but that's ok I think it'd be cool to accentuate the living foliage in the room by having like a color accent of green and really bring it to the forefront what I like about the color accent approach is that all the pixel construction up until this point was built with one bit logic in mind so it's pretty easy to select and replace colors of certain elements like this and you retain the essence of that one bit style but just introduce some more interest into the piece with these color accents so I limit the color accent here to just green plants and red flowers so with all that in place let's jump ahead and take a look at the complete animated piece and then I'll come back after to discuss some of the individual pieces of animation going on in this one all right here we go [Music] alright here we are back in Photoshop for a behind-the-scenes look at the animation now this entire animation is 80 frames long which can be intimidating to put together in Photoshop but I'll show you my little trick for making a big animation like this see most of the length is only necessary because I needed time for all the dialogue elements to appear and hold on screen long enough so people have time to read it the main bulk of the animation itself is only 20 frames which is much more manageable to work with in these 20 frames loop exactly four times to generate the 80 frame total length I just copy pasted those 20 frames up to a total of 80 and then added all the extra fancy animation on top of that if you want to set up a seamless looping animation it's important to figure out the lowest-common-denominator elements that sort of establish the total frame count you'll need to work within in this animation it really comes down to those perfect loops for the breathing or idle animations of our three characters for instance the writers breathing cycle is slow and bulky so I built it into a 20 frame loop and everything kind of falls into place around that as far as looping goes it's actually only four different positions that are held for five frames each I employ this tactic that you've seen a lot of old games that have large ba sprites where each individual piece is its own sprite layer so rather than redrawing complex custom animations for each frame you just kind of move these individual body parts around and it does an okay job at establishing motion for the character the only further custom animating I did was for the arm folding down because I wanted that to have a nice smooth animation and even though it's only five individual frames to achieve that the boys idle animation is built from only three individual poses and they loop in a ten frame cycle idle animations are tricky because we want some kind of breathing motion to convey some life into the character but I think there's a tendency to achieve this by moving the head and shoulders and body individually one pixel every frame which does get us part of the way there but if we do it too much or loop it too fast it looks kind of goofy almost like the character is just constantly laughing or something and that might not always fit the vibe of the character or the scene so for this one I focused on him just kind of breathing and tensing his hands to control the bounciness here there are really just two main poses there's a down and an up and they hold for four frames each and just have a single frame of a transition pose moving between the small cat is also built on a 10 frame cycle cats are very still creatures so it wasn't really necessary here - Bob the head up and down or anything like that just a wave of the tail adds enough life and using a full 10 frames for something like this works really well because we can capture a very smooth movement with that sort of like flowy inertia to it and if it were fewer frames it'd have to oscillate faster which wouldn't feel quite as relaxed so let's wrap up here and I guess I'll end on the animation again let's do it CRT style this time I'm just curious what that looks like so thank you for watching and take care and keep it square [Music] you

Channel: Brandon James Greer

Views: 52,013

Keywords: pixel art, 1 bit, 1-bit, game design, video game, indie game, adobe photoshop, tutorial, idle animation, speedpaint

Id: snDW-1-KJ9c

Length: 9min 38sec (578 seconds)

Published: Sat Feb 01 2020