Mondayne

Just another mundane Monday at the office.

 
 
Learning pixel art is a war of attrition, layered with acts of futility, and with only one functioning eyeball, throw a migraine or two into the mix.

Learning pixel art is a war of attrition, layered with acts of futility, and with only one functioning eyeball, throw a migraine or two into the mix.

The idea

Have you played Dead Cells from Motion Twin? We absolutely were not out to recreate, compete with, or even be mentioned in the same breath as Dead Cells. Maybe if someone said “pff, I’m not playing another Double Bear Rolled game, I’ll play Dead Cells, instead” was the breath. Actually, definitely. Something we really liked about Dead Cells, even before logging over 200 combined hours in the game, was the art work. In fact, many of us being children of the 80’s and 90’s era of video games, there is something nostalgic about pixel art. With titles making a huge splash like Crossy Road and the long-standing reliability and playability of Minecraft, we wanted to learn more about how an artist can adapt their 2D style into 3D style.

Separately, we also wanted to learn more about Unity’s object pooling and building efficiencies across a large number of (the same) game objects. We have plans for something bigger than we usually take on, but we need the foundational concepts before diving too deep into the shallow end. So to the books, the video tutorials, the countless hours of sleep lost due to white boarding how procedural generation could work! (Only to realize someone drew obscenities all over the white board before we were done, and covered up half our notes. Whiteboards need an authentication layer. Oh! That’s a good—no, that’s terrible, stop it.)

Oh and spoiler alert: converting 2D pixel art into 3D pixel art isn’t really a thing. The 3D version is referred to as voxels. And why it didn’t occur to any of us to research this word before taking on this Mondayne product is inexplicable, especially considering any of the Minecraft tutorials, guides, and public servers we’ve played around with all refer to the individual blocks as voxels.

“Everyone gets one free facepalm, then back to work.”


The Goods

The team members on this particular product did not include an artist. There wasn’t one available to teach us anything about colour theory, shading, any of those core concepts you learn trial-by-fire as an artist or illustrator — or even concepts you’d learn in school. We knew that Unity was going to provide some lighting effects, and initially we thought there’d be an opportunity to use said lighting effects on (otherwise flat) art work, turns out that doesn’t really do the trick. (Or it does and we didn’t learn how this time around.) After following a few online courses, we started wrapping our heads around the core concepts that (we assumed) come naturally to pixel artists. There are a lot of folks on Instagram that make time-lapses, which seem like some artist already seeing a final product on the page chiseling out pixel by pixel the character they want to bring to life. Animation tutorials, even, to have your character walk or run, reference core concepts that are much easier to grasp as an artist than an engineer or product manager.

Regardless, we charged through. Starting out we focused on understanding the concepts of lighting. Simply put, the key to quality pixel art is to ensure your light source is consistent across all of the elements of your piece (whether a static image or game). At multiple points of frustration we asked ourselves “why not just rip off {insert classic game with documented sprites, here}?!” Low and behold, taking sprites from old video games doesn’t guarantee their light source to be similar or the same, which means you’ll end up with a boat load of assets that look out of place. (Even in our final product, having carefully crafted each piece of art, the lighting and palettes across each asset still seem a bit off.) There are whole sites and communities dedicated to providing pallets of complementary colours, and even those aren’t a substitute for learning colour theory and really understand what you’re making.

There were also two new pieces of software that hit our tool bucket. Asprite (which one team member keeps pronouncing like “aspartame” but in fact it’s “a-sprite”) is an industry-standard tool that doesn’t provide distraction with a load of tools but does mess with your brain when it comes to utilizing keyboard shortcuts. PyxelEdit (which seems to be in perma-beta, yet still a reliable tool) has similar utility for making pixel art, but is more geared towards building sprite sheets and tile sets. Both applications have tools to help facilitate the animating of any static artwork created.

In the two examples depicted on the right, the end result doesn’t look terrible, but it’s the result of over 16 hours of trial and error. One wrong pixel (placed in the bottom animation, which is a zoomed in version of the character’s oversized belly) makes the seem of a shirt suddenly something different. And while these graphics are shared as they were created, the light source for Mondayne actually comes from the top right (the north east corner (possibly the “ne” in Mondayne) of the game board), so everything crafted here, is actually backwards! After about the 12th hour into building this sprite, frustration won over and we just dealt with how this had been crafted.

Building pixel art is fun in the sense that a mood or perspective can be changed with a few small pixels. The other side of that coin is pixel art becomes dangerous for anyone that has a hint of perfectionist in them. Some of the guidance we received from other artists already in the industry was to “start small, that way the amount of clean-up work you’ll inevitably have to do is less than if you attempted something huge.” All of the sprites and all of the tiles are on a 32x32 grid for the Mondayne game.

The critical path in this product was easily the art work. Mondayne - or the concept that would become Mondayne - was meant to be launched in May 2019 and wasn’t launched until late June of 2019. (It’s one of the “let’s launch an app a month” -challenge apps we’re taking on this year.) The other challenge with this product was on learning about procedural generation. Turns out, the “procedural” bit is a small-scoped randomized function, to pull from a list of objects, and then do something with those objects. The boxes placed throughout Mondayne, are in fact one sprite that is randomly dropped across the game board. Same goes for those poorly shaded coffee cups and cupcakes. Actually, can you even tell if they’re cupcakes? This case study is giving cravings of the sugary degree.

The end result of a 5-frame idle animation, followed by a 4-frame aggressive animation.  “WHERE’S MY TPS REPORT?!”

The end result of a 5-frame idle animation, followed by a 4-frame aggressive animation.

“WHERE’S MY TPS REPORT?!”

Exact same 5- and 4- frame animation, but zoomed to the level one works on while building pixel art. Staring at a fictitious boss’ fat belly as he idles and then gets aggressive is enough to drive anyone insane.

Exact same 5- and 4- frame animation, but zoomed to the level one works on while building pixel art. Staring at a fictitious boss’ fat belly as he idles and then gets aggressive is enough to drive anyone insane.


The Product

As soon as the iOS version is approved by Apple, we’ll post a video of the final product.

As soon as the iOS version is approved by Apple, we’ll post a video of the final product.

In the end, the product we crafted utilizes 3 or 4 sprite sheets, sliced up to populate a series of game objects that are randomly placed across the game board. The player always starts in the bottom left and always has to navigate to the top right. The code makes the game appear - only from a code perspective - as a turn based game. The player moves twice for each time a boss/manager moves once. So it’s very possible and reasonable to escape questioning from any of the managers presented. Each move costs the player 1 (one) energy, and picking up coffee and cupcakes gives the player more energy. Being questioned by a boss, or kicking open boxes to clear them from your path costs additional energy besides standard movement.

Run out of energy and it’s game over, you didn’t make it through Monday.

Make it from 800a to 500p and you’ve made it through Monday! Horray! Trouble is with Mondays, there are always more of them.

Oh before we let you loose on the product, know that the ‘turn based’ nature of the product is going to make controls feel wonky. In preliminary tests, it seems like most players interpret the approaching bosses/managers as a time sensitive challenge and the human-players try to hurry their movement across the game board. Unfortunately, with up to 11 (or is it 12?) bosses on the game board at once, after the player moves twice, each boss gets a chance to move. Just like a real Monday (or so we hope) there’s a lot of anxiety induced by the slow moving managers to question the bearded player before they can get through another minute of the day.

Alright one more fine point before we close the books on this product: because each level is generated, and because the point of the game is to go from 800a until 500p, and because it will take longer than a minute to get past later levels: we’re anticipating there isn’t a player out there who will make it to the end of the game based on the sheer amount of real-world time required to get through the whole Monday. Effectively, the only way to get through Mondayne is to spend your entire Monday playing. (Is it ok to say “sorry not sorry” in a case study?)

Mondayne is the second of the 2019 App Per Month Challenge at Double Bear Rolled.