Cowboy Bebop as an RPG | Pixel Art Mock-Up

Howdy there, my name’s Brandon and I make  pictures out of tiny squares - and today   I’m gonna be making some mockups inspired  by Cowboy Bebop, to explore what it might   look like as a pixel art game. I’m not  breaking any new ground by saying this,   but this series has just got the perfect  blend of sci-fi western aesthetic,   comedy, drama, and one of the most incredible  and eclectic soundtracks you’ll ever hear - so   there’s a lot to be inspired by - and to do  a thorough job on the pixel art adaptation,   I’m gonna create a unique piece for each member of  the main cast, so without further ado - let’s jam! Alright to get started, I’ve decided to work  with a canvas size of 160 by 144 pixels.   This is the same resolution as the Game  Boy and Game Gear handheld consoles,   and I usually find something in this range to  be a reliable go-to for me because there’s an   efficiency in creating work within this small  space, and also the restriction here kinda   forces your hand into creating something  really stylized and noticeably “pixely”.   The mock-up I’m making for Spike is gonna be  set up kinda like a battle in an RPG, with the   characters taking the top part of the frame,  and then the lower area being for the battle   commands - and I’m creating his character sprite  first so that I know I’m happy with the appearance   and scale before sizing all those additional  elements and details to the sprite size.   The other restriction I’m using for this  series of mock-ups is that they’re gonna   be limited to only 8 colours, and  I’ve prepared a series of unique   colour palettes ahead of time which are  inspired by each of the main characters.   So for instance, with Spike’s palette here, I’ve  represented the blues and yellow of his outfit to   be three of the eight colours in the palette.  He’s also got a subtle green tint to his hair,   so I’ve assigned one for that as well, and there’s  also a red as a nod to the colour of his ship,   but I also figured it’d work well as a  contrasting colour for the environment. The fight I’m staging here is based on the  episode featuring the character “Mad Pierrot”,   who’s this really creepy but whimsical assassin,   and Spike ends up facing off with him in a  space-themed amusement park. Even for the   wide variety of situations the main characters  find themselves in across the series, this is   one of those settings and villains that’s just so  over-the-top and spectacular that I felt it’d be   something that would lend itself quite well to  a stylized and cartoony pixel art appearance.   So you can see here I’m working my way through  the SpaceLand visuals, trying to find ways to   represent some of the things we see within the  episode as a backdrop for the battle. One of the   challenges when putting this palette together  was just the way that these limited colours,   which were derived from the character colours,  could also substitute for a multicolour backdrop   of a theme park. And I think what helped in this  case was ensuring that I used a low-to-moderate   saturation in these colour selections, and  that way it’s a lot easier to stick totally   different hues next to each other and have them  complement one another rather than compete. Now, when it came to the sprite work for Mad  Pierrot himself, he’s got this really balloon-like   body; or rather, his coat is at least - so I  figured the best thing to do is just to start   from a silhouette and then keep throwing detail  onto that and carving away to find the character.   Also, when he first appears in this scene  he’s standing on top of a giant hippo statue,   which I definitely considered trying to  find a way to fit it within the frame,   like maybe just the top of the statue underneath  him - but I think that’s really the kind of thing   where that may be better suited as a cut scene,  then it’d drop you into the fight and he’s right   here like we see him. Still, I adapted the  pose based on how he’s firing at Spike from   up on that statue just to give him some  of the characterization from that moment. I had saved some space along the top and used  this to create a small name and health bar,   which was nice because there's a lot  more space than trying to fit this   information above the character itself -  and kind of covering up the background.   And then similarly for Spike, I’ve got a wide  bar along the bottom of the screen so I can fit   a character portrait and some battle commands. The  portrait here is made within a spacing of 24 by 32   pixels, and I kept building out and iterating  with linework - but also a lot of this was just   experimenting with the right balance of rendering  to try to capture the animated appearance.   Getting the eyes right is always one of the  trickier things at these lower resolutions,   and the palette didn’t leave room for a colour  lighter than the skin tone to use within the eyes,   so it was a bit of searching for whatever the  best option was here. Anyway we’re getting to   the end here, so let’s take a look at  the finalized battle concept for Spike! For Jet’s mock-up, I wanted to explore a top-down  overworld-style perspective aboard the ship.   Specifically, we see him on several occasions in  the series cooking - and food, or lack thereof,   is a recurring theme within the show - so if  this were an RPG I thought it’d be fun that   he could have ingredients and recipes in order to  make consumables for the crew. To get started I’m   creating the entrance to the room where he cooks  - I’m not sure to even call it the kitchen to be   honest, but it’s down one of the main corridors  and there’s this large circular opening into it.   Once again, the palette here is inspired by Jet’s  costume, and I’ve extrapolated the blue of his   jumpsuit into a series of three tones that can be  used to detail the walls and floors of the room.   While this isn’t exactly the colour scheme of  the interior of the Bebop, not this particular   hall anyway, my plan was that these colours  suit the dim look inside the room, and then   that frees up the remaining colours of the palette  for Jet so that he’ll stand out within the scene. The trickiest part of this earlier phase  was just trying to make sure I had proper   reference for the layout. I’m not sure we ever  see a super clear-and-wide shot of Jet cooking,   because it’s more about those dramatic close-ups  - as it very well should be - so I got kind   of obsessed trying to piece together what the  layout of this room is exactly. Luckily there   are a couple times we can catch Ed in here, and  there’s a great wide shot that shows the cooking   space with the burners there, so this was one of  my main references for detailing the interior.   So, I’m continuing to translate a lot of  these objects and details primarily using   these three blue tones and the black, and  the other colours work well for highlights   or pops of colour to make certain objects  more noticeable, like the cooking station. For Jet’s sprite, I started with a sizing of  16 pixels and then painted in the details on   a forward-facing appearance. This one ended  up coming out nicely, but it’s not exactly   engaged in cooking, so I ended up taking it  and trying to explore a side-facing sprite,   but in the end I liked the recognizability of  him looking at the camera, so it ended up being   sort of front-facing but sideways gesture, just  so we can see enough of his features but that   he’s actually engaged in cooking. That being  said, I did eventually give him his “cooking   sunglasses” anyway, but it’s nice to have a  few of those sprite variants on hand at least.   Alright so all that work is kind  of on the left side of the canvas,   and I had left this large column along  the right half of the screen to add in   a sort of character info card - just something  that’ll represent a character menu or status   screen kind of idea. And we can see here  I’ve made him Level 4 at this moment - which,   I also eventually added a bunch of recipes to  his known skills, so that may track with him   actually deserving to be higher level than this  but, y’know I haven’t really sat down to work   out the finer details of the skill tree quite yet,  so take everything with a grain of salt for now. Once again I’ve created his portrait within a  space of 24 by 32, just like Spike’s. Actually,   to be specific, this one (and I think Spike's)  are 23 by 32 because I wanted there to be a middle   column of pixels so that things could have that  centre pixel - like for the point of his beard on   the chin there. I also tried to do just a touch  more of subtle styling to these menu elements,   and one of the last things I did was also add in  a few items just as additional references to the   character. So with that, let’s take a look at the  finalized artwork for Jet at his cooking station! Another strong element of the show is that  there’s a lot of time spent in space ships,   either travelling between areas or chasing down  bounties. For Faye’s artwork I wanted to explore   a mock-up where she’s in her ship seeing a bit  of action like this, and so this one takes a   bit of a departure from the RPG format that’s been  building from the last two mock-ups, in the sense   that it ends up being more heavily inspired by  something like a side-scroller “shoot-em-up” game.   That being said, I think it’d actually be awesome  to see something like that exist within a typical   RPG format; maybe as a mini-game or an alternate  battle structure for ship combat specifically.   Another format I considered for something  like this would be like a turn-based   tactical RPG battle for ship combat; but  in the end I went with the side-scroller   idea since I felt it’d do a better job  at capturing more energy to the scene. Just like with the mock-up for  Spike, I’ve created Faye’s ship first   since it’ll be the defining element  for the sizing and composition.   There are also a lot of great ship moments  to select from throughout the series,   and I’ve decided to base my mock-up on a  scene from the “Jamming with Edward” episode,   where they’re chasing down a rogue  satellite and have to navigate their   way through an entire field of laser fire  from these other defending satellites.   Faye’s role within this moment is to act as a  decoy and basically bait all these attacking   satellites in order for Spike to get close to  their target, so it really felt like the kind of   thing that was well-suited for translating into  gameplay - specifically, one where you’d need   to maneuver around laser fire and debris while  also shooting down all these little satellites. Carrying on the 8-colour palette idea, I’ve  extrapolated the purple highlight of Faye's   hair into a series of purpley-grey tones that  could be repurposed across her ship and within   the space backdrop; and then there’s also the  red and yellow of her outfit which worked well   for other elements like the satellites  and laser fire. Along the top I’ve left   a 32-pixel tall black bar across the canvas to  create a HUD, and this becomes a different form   factor for portraits and other elements than  what was seen in the previous two artworks;   but that works out ok because it just mixes  it up a little bit for my own amusement too. These two icons here on the HUD  represent meters for her attacks,   like maybe there's a standard firing with  a cool-down and then perhaps a stronger   missile attack which I imagine would  be more discrete and finite quantities.   With the remaining space along the HUD, I’ve  brought in some inspiration from the visuals we   see on her dashboard to create the suggestion  of a small map; or more of a radar actually,   which worked as a nice way to also show  that Spike’s in the area in his ship.   And then finally, I had a bit of leftover space,  so I’m adding in some dialogue from the show,   basically where Edward volunteers Faye to  be the decoy, so I picture it to be the   kind of thing where this is where you can  see messages from the radio chatter here,   and then I’m gonna finish this off by  giving Faye her reply to that suggestion;   just kinda placing that over her  ship in this comic-book style bubble.   So let’s go ahead and take  a look at the final piece! Alright with the final mock-up, we’re  returning to the top-down overworld style look,   because I want to recreate something from one of  my favourite Edward and Ein moments - which is   basically the entirety of the "Mushroom Samba"  episode, is like my favourite moments of them,   but for this scene in particular the two of them  are wandering through a desert looking for food,   and they come upon a truck on the side of the road  selling watermelon, but don’t have any money to   buy any. The reason I chose this scene was because  that idea of “wandering” translates really well   to exploration in an RPG, and then of course  it's just sort of relatable - sometimes coming   upon some useful wares but not having the coin to  purchase them. Just like with the mock-up for Jet,   the sprite work here is around that 16-pixel  height; give or take - and then for Ein I tried   to find something that felt reasonably  in scale while still being recognizable. Surprisingly, the most technically  challenging piece of this mock-up,   maybe even of the entire project, was just working  out the structure of this watermelon truck here.   It’s the kind of thing that seems harmless  before you start, like “oh yeah I’ll do the   scene and then I'll just quickly throw a  simple truck in there, it'll be all good”,   but the thing that makes it challenging is  just translating that exact architecture   into the top-down perspective, y’know it’s got  a few different levels and edges, and then it   has to be something that’s recognizable and  looks like you could interact with it also.   Originally I wanted to have the dude kind  of poking his head out a little bit too,   but I already had to exaggerate the back end there  so that there was for the watermelons on display,   so I just kinda left it like that.  On the flip side of that though,   in the category of “things that I  didn’t expect to be surprised by but   was”, I was really happy with how the  small watermelon sprite came out here,   and once I had that singular sprite I was able to  copy it out and fill out the rest of the truck. For the colour palette, the orange,  green, and purple come from Edward’s look,   and then the brown is in there for Ein. I’ve  added in a grey-blue because I knew it’d be   useful for the environment - like for the colour  of the truck and the road, but it also works as   a nice shade tone for the green. Once again I’ve  used kind of a moderate saturation for everything,   and that really helped give it sort of a worn  or dusty vibe to suit the desert aesthetic. To fill out the environment, what I’m doing here  is just creating a bunch of isolated assets,   and then eventually what I did was replicate  those out across the map to fill it out.   Most of this is pretty standard desert highway  decor, but I was also looking across a few   reference images to bring in the kinds of things  we see within this scene of the anime itself.   Lastly, I’m creating a small 16-pixel tall  HUD along the top for the character info.   This is the same sizing that was used  in the enemy HUD of Spike’s mock-up,   and I really liked how efficient it could  be with that spacing so I wanted to try   it out for the player characters in this  context as well, and just see how it looks.   So with that, let’s take a look at the  finalized artwork for Edward and Ein! Alright and here’s all that artwork  altogether. Overall this was really   fun to explore a few different configurations  and form factors of this general idea - This   was mainly approached from a “whatever happens,  happens” mentality for each individual mock-up,   but I think there’s kind of a nice loose  cohesion across the collection here.   So let’s go ahead now and close this out  with CRT Time - probably our first ever   'quadruple CRT Time' I suppose - so thank you  for watching and take care and keep it square!

Channel: Brandon James Greer

Views: 54,146

Keywords: Cowboy Bebop, anime, retro games, video games, indie dev, role-playing game, netflix, gaming, fan art, pixel art, timelapse, speedpaint, tutorial, game design

Id: CGOfoLzCi_A

Length: 18min 16sec (1096 seconds)

Published: Sun Nov 14 2021

Reddit Comments

[u/TheGnomeFarmer]

Incredible!

[u/Kornii6]

Hey friend, this might be a little drastic, but I would kill for this to be a real GBC/GB game