Creating a background, from start to finish

I’ve been super engrossed in making sprite backgrounds for In Retrospect lately, in fact it’s pretty much all that I have been doing on the game for the last couple of months. It’s very overwhelming, and if I learned anything from this experience it is that I want to plan my next game right so that I don’t have so many darn backgrounds to make all at once. But I digress. Today I want to talk a bit about the process of making a background. I’m not an artist by trade, in fact this game is the first time I have put much time into anything art related, so I won’t be able to explain the art process much beyond some basic stuff I’ve stumbled upon. I can really only just show you my trial and error process and how it resulted in a background that I’m pretty happy with.

I’m going to use my stage one background for this post, not because it is necessarily my best background, but because it is the one that went through the most revisions, and I made some of the most mistakes with it, so it’s probably the best one to see evolve over time. It’s currently on its 20th iteration, which I hope will be the last one, though I will probably still tweak a few minor things here and there moving forward. I won’t show all 20 iterations though, you will see some iterations skipped below and it is because they had insignificant changes (often just tweaking the edge of a cloud or something), so I’ll stick with only showing off the ones where a significant change was made.

Let’s begin.

First off, for almost every background in In Retrospect I start with a reference photo (usually just something found in free stock photos online or whatever) which I mess around with a bit in GIMP to pixelate it a bit so it fits the game more. I tend to try out a bunch of backgrounds until I find one that fits what I want. I then mess around with the size a bit to make it (more or less) fit the perspective of my game, although honestly, I don’t have the best sense of correct perspective so it becomes a “feels right” type of thing more than a science. The theme for stage one is childhood excitement and exuberance, and I knew I wanted to set it on a farm because, basically, running around on one of my relative’s farms is one of my childhood memories that best fits the feel I wanted for this stage.

REFERENCE IMAGE

stage-1-new-timeline-0

I do all of my sprite work in Pyxel, and to get to my first iteration of a background I tend to more or less trace over my reference photo, but with a much smaller color palette and simplified objects (especially when it comes to complicated things like field textures.)  I’m mostly just trying to get the feel right at this point, but with my own art, as opposed to the placeholder background.

ITERATION #1

stage-1-new-timeline-1

As you can see I originally made the farm a bit run-down, with dying trees.  However, that didn’t really feel right to me, since I was going for “excitement” and “exuberance”.  I also just kind of hastily sketched out the ground, but it felt too sloppy.

ITERATION #2

stage-1-new-timeline-2

So I made nicer trees and cleaned up the ground.  The colors had felt dull, so I brightened them up a bit too.

But the ground was still bothering me, it felt like a big chunk of boringness.  I tried out a bunch of stuff that wasn’t working at all, got frustrated, and put this background on hold for a bit.  However, when working on some other backgrounds I started looking to one of my favorite SNES era art inspirations, Yoshi’s Island, for some ideas.  And I noticed they often used a kind of soft gradient in their skies.

YOSHI’S ISLAND

yoshis-island-1

I started doing a similar thing with the sky in some of my other backgrounds and it was looking pretty solid, so I decided to try it on the ground in stage one’s background.

ITERATION #3

stage-1-new-timeline-3

It had a decent effect.  You’ll notice also that the image is taller now.  My process is to originally make all of my backgrounds 480×270 pixels, which can be multiplied by 4 to make a 1920×1080 background.  I then have a background that nicely covers the screen on a typical 1920×1080 monitor or TV (and my graphics stretch to fit other resolutions.)  HOWEVER, since I use parallax scrolling my backgrounds move a bit when the player moves. I make sure that a background like this tiles nicely left to right, but it’s kind of hard to make it tile nicely top to bottom when you have sky and ground, so without adding some padding on the top and bottom, you end up with a situation where if you get too high up in the level you see the bottom of the ground show up on top of the sky, and vice versa.  So after I get a background into a decent state I add some padding on the top and bottom to make sure that never happens.

Anyway I felt like it was getting there but the colors still felt too dull, so in my next iteration I brightened them up a bit again.

ITERATION #4

stage-1-new-timeline-4

At this point I was kind of happy with the state of the background, but even with the gradient, it still felt like there was too much empty space on the bottom.  Sure, you mostly never see the entire bottom, but on occasion you see quite a bit of it, and it felt wrong to me. I tried to add a variety of farmlike things down there like haystacks and such, but none of that was working.  

ITERATION #5

stage-1-new-timeline-5

So I made a lake.

I also redid the gradient to have more steps and so instead of smooth change from one color to another the lines jump around a bit, which I thought better hinted at (without explicitly being) the sort of rows of uh… stuff? you might find on a farm.  I had no clear idea WHAT that stuff might be and why it would be covering the entire field, which is why I left it as just a hint.

But the lake felt all wrong to me.

Doubly so when you got further to the right in this level and, due to the tiling, the lake started appearing again.  I only wanted one lake, not multiple, identical lakes! (This is always an issue when putting a “unique” object into a background that is supposed to tile, but, for instance, it doesn’t matter with the trees and the farmhouse in this case because the level isn’t long enough for them to start showing up again.)

I kind of liked the idea of a lake, but I wanted something that tiled nicer.

ITERATION #6

stage-1-new-timeline-6

So I turned it into a river.  It’s hard to explain to people who haven’t had experience with this kind of art, but although the lake might look ok in a single image, even better in some ways, the river felt better as a tiled background, because it hides the tiling better so things feel smoother as you move to the right.  One thing I’m learning fast is that game art is all about context, backgrounds especially. You can’t just make something that looks fine as a standalone image and call it a day. I also saturated the colors more again, because it still looked too desaturated, especially next to my other backgrounds.

But the area below the river still looked too empty to me.

ITERATION #7

stage-1-new-timeline-7

So I added a bunch more trees!  Cool, ri… right? Keep in mind I am an amateur here, and this was a process of experimentation.  

Whatever the case, it certainly made the area below the river less empty, but I knew something was off, because now the background just felt way too busy.

ITERATION #10

stage-1-new-timeline-10

So I pulled down the shadows a bit.  That helped some, but look at this monstrosity.  It’s still way too busy!

ITERATION #11

stage-1-new-timeline-11

To deal with the busyness I looked at the sky, and realized I had stuck with this multi-color sky for no real reason other than the fact that my original source image had it.  So I decided to clean up the sky and use a soft gradient on it. That definitely helped a bunch, but it was still too busy.

Well gee, I wonder how to fix this one.

ITERATION #13

stage-1-new-timeline-13

Get rid of all of those trees I added, duh!  Sometimes you have to admit you made a mistake and fix it.

Honestly, at this point I was pretty happy with where things were at in context of stage one alone.  The image above looks pretty solid, right? However, one of my big concerns with In Retrospect is that I feel like stage one and two are too similar, and now they both had similar colored blue skies as well.  So I decided to do something about that.

ITERATION #15

stage-1-new-timeline-15

I decided to change the sky gradient.  I honestly expected to have to try a bunch of different colors out, but the first yellow I picked I ended up liking, so I stuck with it.  

The yellow made the clouds and sky blur into each other a bit at the bottom though, so I gave the clouds more contrast with the yellow by darkening the gray in them a bit, which ended up looking way cooler anyway, so that worked out nice.

I also made a texture behind the ground using four colors, and added some transparency to the ground so the texture comes through a bit.  Just gives it a little more of a “ground” feel, and distinguishes it from the sky a bit.

However, with a more dramatic color shift in the overall sky gradient, each little step becomes a lot more noticeable.  I’m obviously making “pixel” style games so I don’t try to hide every “line”, but I like to find a balance and the sky lines felt too obvious now.

ITERATION #16

stage-1-new-timeline-16

So I changed the gradient to give it more steps, making the color changes a bit less obvious.  I was pretty close to calling this one done but I decided to try one last thing.

ITERATION #20

stage-1-new-timeline-20

I added more clouds.  Uh oh, is this really a step forward?!  Honestly, it’s tough for me to say, and I go back and forth on whether this iteration is better than the last one, or if I just made it too busy again.  

But for now, I’m pretty happy with it, and I decided to call this “done” and move on.  There are still a TON of experiments I could try on this background, or little tweaks I could do, and I’ll probably see a few things here and there that nag at me and get me to change them, but as a solo indie developer who is doing a lot of art, audio, storytelling, game design, programming, etc. in addition to my full-time job and other responsibilities, I’m trying to get ok with things not being perfect.  I’ve already been working on this game for over 4 years, I don’t really need to make it a 10 year project.

ENTIRE PROCESS

stage-1-background-animated

Anyway if you have any questions, comments, concerns, etc. I’d love to hear them!

My 2017 goal was to turn my game into a Minimum Viable Product (MVP), did I make it?!

For those not in the know, a Minimum Viable Product (MVP) is basically when you get to the point with software (or anything really) where it is in a state that you could release it. It usually refers to something that still has a lot of work to do to get it to the point where you want to release it though… it’s probably barebones, sloppy, has a lot of bugs, missing some features you really want to put in, etc. But technically you could release it. It has a start, a middle and an end, as my cousin Jim often says. And a working menu system, and blah blah blah.

So my goal for 2017 was to get my game to that state by the end of the year, and then spend the majority of 2018 trying to polish everything up, add more content, etc. before finally releasing this sucker in 2018. It was only a loose goal, because honestly, I had no idea how long it would take to get there, it was just something to shoot for.

I’m not going to get into my health issues here but some things I have been dealing with for a long time flared up over the summer of 2017 and I’ve been battling them ever since, which hasn’t stopped me from continuing to work on the game, but it has made it a bit tougher to stay focused. But I haven’t let it stop me, though I have slowed down a bit.

So did I make it to MVP? Well, in short, no. But I got really darn close, which for a loose goal, is good enough. The main thing I’m still missing is background art for all of the stages. To be honest I probably could take what I have and get it into an MVP in just a few days by reusing background art, but I’m going to stick with every main stage having its own background art plan, so… that’s 10 backgrounds (+ title screen, menu screen, etc.) About halfway through those and should be done in another few weeks.

Here is an example of my background art. It’s not perfect, but for someone who basically has no real art background and just started doing pixel art for this game, I think it’s turning out ok! (Keep in mind all art is a work-in-progress, I plan to polish it all up eventually. If I find the time.)

stage-3-new

Beyond the background art there are a few other minor things that I need to finish to get this game into MVP status. And maybe some stuff I’m forgetting. But it’s close. End of January, perhaps?

Is a 2018 release date still viable? I think so. But really that depends on a variety of factors, including making a final decision on which platform to launch it on and dealing with any platform-specific issues that might arise.

So I guess that is my year in wrap. Not happy with my health, but happy enough with where the game is at, and still hopeful that a 2018 release can be a reality. We’ll see.

Put together some dev stats for In Retrospect

I was bored and not really in the mood to do another long work session today so I threw together some dev stats for my game instead.  My first game.  Not sure if these numbers make sense for the type of project I am doing but whatever.

noidea

Date started: November 14, 2013
Years worked: About 3 2/3 years
Hours worked: God, who knows? Hundreds? Thousands?!
Projected finish date: Fall 2018!!!

Project folder size: 4.44 GB
Assets folder size: 534 MB
          Art assets size: 211 MB
          Audio assets size: 100 MB (23 songs + SFX, this will probably be much larger when I put the audio in its final format)
Build (playable .exe) size: 660 MB

Total scenes: 40
Total prefabs (game objects): 1,081
Total scripts: 88 (+ some 3rd party scripts)
Total lines of code: 19,987 (+ 3rd party code)

Largest scripts by lines of code:
          1. Player Controller: 3,085
          2. Menu Manager: 2,370
          3. Stage Manager: 1,932
          4. Non Player Controller: 1,400
          5. Non Player State Manager: 1,366

Largest scripts by file size:
          1. Player Controller: 126 KB
          2. Menu Manager: 97 KB
          3. Stage Manager: 88 KB
          4. Dialog Content: 74 KB (will get much larger when I actually write dialog…)
          5. Save / Load Manager: 70 KB

Smallest script:
          1. Spawn When Needed: 1 KB, 7 lines of code (I made an entire script that essentially just holds a single variable and I honestly can’t remember why…)

And of course this is a work in progress so many of these numbers will get much bigger…

A milestone? Planned animations done. I guess.

You may detect a tone slightly less ecstatic than my last post. I’m trying to figure out why that is myself. This is big! Every planned animation is done!

…so why does it not feel exciting?

Probably a large part of that is that my overall excitement about working on my game has become a lot more… complicated. I’m currently working a job with a longer commute and longer hours than my last one, which makes it tough to come home and work on my game at the end of the day. I’m still getting work done, but I’m often sitting down to work already exhausted, which doesn’t make for the best sessions. To be frank, I feel like I’m burning out on it a bit. So I’ve slowed down to try to not burn out, but then I feel like I’m not getting enough done. WHAT A CONUNDRUM.

Another part is that I just don’t think i’m that good at animation. Don’t get me wrong, the stuff I have animated is as good or better than I originally expected, but that doesn’t mean I’m particularly happy with it. With work I could get better of course, but becoming an excellent artist in addition to everything else I’m trying to become excellent at is just… ug. See above where my time and energy are already limited. So it reminds me that, if I want to really feel good about how this game looks, I’m probably going to need to seek an outside helper. So then, what was the point of this year and some change of focusing almost exclusively on doing my own art and animation? That’s a good question. It certainly helped me learn a lot about the process, helped me solidify exactly what assets I need, helped me define what kind of style I’m going for, and helped me get my game looking a bit more professional, all of which put me in a better state to try to find someone to work with, if I go that route. And you know, whatever I prefer I might need to do my own art and animation if I can’t find / afford / etc. the right person to work with, so I guess we will see what happens there.

Finally, the “planned” part of “planned animation” comes with quite a big caveat. I can already think of a lot more stuff that should probably have some animation, including my environments, which are VERY static at the moment. And of course a lot of my current animations are garbage that should be fixed. So it feels far from done.

Still, this very long period of pretty much only working on art and animation has probably come to an end for now. Next up? I guess I need to do the same thing for sound effects, which should hopefully be a much faster process.

After that? After that I’m finally getting close to that finish line.

I think?

MAYBE.

Now look at some wacky animation that I made.

end-boss-animation

Another milestone: finished static art for every single object in the game!

By static art I mean that a lot of stuff in the game doesn’t have any animations done yet. But I now have at least a single frame of art for almost everything in the game.  The only exception are the backgrounds, which are still placeholder art.

Checking my emails it looks like I started doing pixel art for In Retrospect around March of this year.  And outside of some programming / design tweaks here and there, I really haven’t done much else on the game since then.  So that’s about 9 solid months of just working on pixel art, day in, day out.  Fun!

I did some quick math, didn’t count everything exactly but skim counted and it looks like I did art for a total of around 3,750 16×16 tiles, which is about 960,000 individual pixels.  THAT’S ALMOST A MILLION PIXELS.  I mean yeah not every single one was individually drawn, there are fill tools, copy and paste, etc. but geez louise that’s a lot of pixels.  If and when I get the animations in it will surely top a million.

There is still a ton of work to do on the art. Some of it I’m happy with, some of it I’m not. The UI / menus need some work. And as mentioned above, I still need more animations. But it’s a pretty big milestone nonetheless.

Anyway, enjoy some screenshots!

Some boss fight art, and thoughts

Most of the objects in my game are relatively small in size, but I do have a few big pieces, including the one and only “boss” in the game. Anyway, this is definitely one of the biggest single sprites I have made and THE most detailed big sprite I have made. And the boss has 3 big destructible “cannons” so I had to make what the boss looked like underneath and then make parts that fit nicely on top as well.

WITH CANNONS
boss-1-before

WITHOUT CANNONS
boss-2-after

I’m getting near the end of the first pass of static art, just a few pieces left. After that… I guess I need to decide if I am going to try to take on all of the art in my game for real, or try to find an artist. Because the next step is animation and that’s a lot of work if I’m just going to have someone else replace it all anyway.

Then again making all of the current art has been a lot of work if I’m just going to have someone else replace it all anyway, but it’s been a nice learning experience as well.

Programming versus art

I’ve been working on art a lot lately and it’s been making me think about the differences between programming and art. Specifically, the anxieties related to the two.

When I need to do programming, whether adding new features or fixing bugs or the likes, I generally know what I’m trying to accomplish, yet I’m not always quite sure exactly what the means to doing it are in advance. Most of my anxiety comes from a somewhat binary question, “Will I figure out how to make this work?” with the answers being either yes or no. As long as I have some confidence in a “yes” going into it, the actual details aren’t super important. This isn’t to say that how code is executed doesn’t matter, because it does, but for the most part, at the point I’m at now anyway, if I write working code, as long as it doesn’t slow down the framerate significantly or something then that’s good enough. It works, it’s done.

I’m simplifying things of course, because programming is tied into game design so often programming has to go alone with tweaking the design, which is a very not so binary thing. What kind of movement should a piece have, how should it interact with the player, even questions like how big should it be all play into the feel of the game. You can’t just switch off the artistic side to work on solving problems all the time. Still, I tend to feel significantly less creative pressure when I’m working on programming than art.

Art is almost the opposite. There is some small bit of execution getting my art from the art program I use into the game, but at this point it’s mostly routine. Not much anxiety about making it work… make some art, export it, import it, it’s there. Hard to mess that up. Here though, the anxiety comes in the execution. Art is not as binary. I can get working art into the game easily enough, but how good will that art be? My art tends to range from REALLY BAD art to REALLY OK art (and sometimes, on rare occasions, SOMEWHAT GOOD art.)

So the mindset coming into work sessions is very different, and sometimes I’m more mentally / physically prepared for one kind of work more than the other. But that’s not necessarily the thing that needs the most work at the moment. A conundrum to be sure.

All of this is to say that today should be an art day, but I’m not really feeling it. BAH.

PS. Everything that applies to art applies to audio as well, though I suppose I have a tad bit less anxiety when it comes to audio, because honestly… my soundtrack is probably the best part of the game. Even if I have a mediocre day of music making where I’m just not feeling it, it still ends up better than most everything else I do for this game.

PPS. I’ve been working on the game for a bit over three years now, and the end still feels a decent ways off. BAH AGAIN.

It’s been a long time without much progress…

Well, it’s not totally my fault. Between interviewing for a lot of jobs, accepting a new job and preparing for it, looking for and buying a new car, a trip to Canada, spending days and days and days finding a decent apartment to move to in order to be closer to my new job, and packing in order to move (in a few days) it has been a very busy summer. As a teacher I usually use my free time in the summer to really go at my game hard and get a lot done, but this summer was the opposite. I barely got anything done on the game. Nearly 2 months with maybe 3 or 4 hours total work done on the game. I usually get that much done almost every day in summer. Disappointing but what can you do? Had some necessarily life changes to execute.

The new job seems like it will be pretty exciting though. I get to teach a computer science class to high schoolers, and this will include game design segments. I’ve taught a little bit of game design in elementary but I always had to sneak it in between a bunch of other stuff. Now I get to focus an entire class on programming and I’ve been given a lot of free reign to decide how to implement that. The administration and students seem legitimately excited that this will include game development too, so it doesn’t feel like I’m forcing this on anyone (in fact, I think my game dev background is a big part of why I was hired.) And I start the job with only this one class to teach each day, so in addition to helping out with the tech support at the school I will (supposedly) have a lot of time to build this class and future computer science classes, and (supposedly) will have a large say in what kind of stuff will be taught in future classes. They’re really looking to me to help build their computer science program.

But yeah, I need to get back to the game. I had gotten pretty far along before the summer hit, though deciding to (at least for now) do my own art slowed down the progress of the game significantly. Or maybe it didn’t slow it down, since art is necessary, but it was definitely not something I had originally had planned on doing, so it felt like a setback. There is still a pretty serious amount of art to get done.

I think I will have time once this move is finalized though. I think. I don’t foresee any obstacles…

Hitting a huge milestone. All gameplay objects (for the most part) + early versions of all 10 stages now built.

It would have been nice to have hit this about a week ago, which was the 2 year anniversary of starting work on this game. But considering that my unofficial deadline was “the end of the year”, it’s pretty nice to hit it over a month early.

Basically I now have all 10 of the “raw” stages built for my 10 stage game. “Raw” stages are what I call the sort of pre-demo stages I build that include all types of platforms, enemies, etc. that will be included in the final versions of these stages, as well as a lot of the gameplay ideas I had for the stages, etc. Essentially, these are fully playable stages that contain all of the elements they will have in the future. That isn’t to say that they are done though, or even close to done. They’re still sloppy and unpolished in a lot of respects, and the actual level design in most of them needs a lot of work, so there is a lot to be done there. Still, the basic form and elements are all there now.

For the most part. I still want to build some objects that will appear in various stages based on what your current collectible “alignment” is, etc. But that’s small stuff. The bulk of the main content is there. It needs a lot of polish, but it is there.

So why did it take me two years to get to this point? In part because I started this game with zero experience in game development so the first year or so was spent just getting a lot of basic elements like movement and camera and such in place. It’s really only been the last year or so that I got to attack the content hard.

Also, because my game has a LOT of stuff in it. So far…

About 70 different enemy / hazard objects. Many with attacks that involve additional objects.
About 35 different platform objects.
9 button objects (these give you a variety of special moves, etc.)
5 collectible objects (x6 of each collectible.)
About 10 collectible spawner objects.
About 20 “etc” objects.
5 player objects.

Much of the above also have variations, so… that adds a bunch more.

In truth, I think I packed too much in. The game’s main “story” mode, if you manage to play through without dying, only involves about 45 minutes of gameplay. All of the above packed into 45 minutes of gameplay! I have a lot of additional challenge stages and such planned to make sure the game has at least 3-4 hours of content, but that will all be reusing the same objects. A lot of the complaints at my playtesting sessions have involved too much coming at you too fast, so one difficult thing I will have to do in the near future is decide what objects to cut. Tough, but necessary.

There is still a ton more to do for this game. I need to polish up what I have hardcore. Add in the “alignment” stuff. I haven’t even really started on the story / choice sections yet. Lots of art to get in (it’s mostly placeholder stuff right now), sound design (have been keeping up with the soundtrack but sfx are all placeholders), gameplay modes, the above-mentioned challenge stages. Make it work nice on a variety of resolutions with a variety of controls. Optimize it to get rid of some framerate issues in certain areas. A lot of known bugs to fix and plenty of unknown bugs that are sure to arrive. Still way more to do so please don’t ask me when it will be finished because my answer is still “I don’t know.” Probably at least another 1-2 years.

But it feels nice to hit this huge milestone. Might be time to take a small break and go outside and breathe some fresh air again. Maybe I can sit down and actually play some video games for once!

What to do when an unstoppable force meets an immovable object

So, it occurred to me recently that the development of my game is pretty much just the story of that one Batman movie (or something.) Because there are a few ground rules for my game that contradict each other…

A. The main character can NEVER stop moving forward. (Important for many reasons… it’s a runner, certain things sync with the soundtrack thus have to happen at specific times, etc.)

B. Many objects cannot be moved through. (Important because uh… self-explanatory? Human beings can’t pass through everything in the world? Or they would just be ghosts or something?)

So what do you do when the player can’t stop moving forward but also can’t pass through certain objects?

Most runners that I have played have a simple solution to this… you hit a wall, you die, and start the stage over again. Well, that’s fine I guess, but I didn’t want that in my game, which is not a one hit kill runner but a runner with an actual life bar.

So my main solution to this issue from the start has just been to have slopes and bumpers everywhere, so when the player needs to go from a more open-ended area to a tighter area they essentially get funneled into it without having to slow down. The problem with slopes though is it kind of makes no sense to be running up a slope and keep the same forward momentum… so I use them minimally and have broad slopes such that the player (maybe?) doesn’t notice this inconsistency if they are on a slope. Bumpers are both more consistent physics-wise and more fun, but then it kind of breaks up the feeling of a semi-logical world having random bumpers all over the place. Of course, this is a world with ghosts and birds carrying power-ups and clones of yourself and… point is, it probably doesn’t need to make sense based on the real life human world. Still, putting bumpers all over makes me feel a bit uncomfortable from a design standpoint.

So I’ve tried to think up other solutions to mix things up. One stage is in the sky and it has no ground… just a LOT of wind that will push you back up if you fall off of the cloud platforms. Another stage (in planning) has a bit of a wacky creepy fun house part, so I plan to use mirrors as warps to instantly transport the player elsewhere. Etcetera. A lot of these ideas have stemmed from trying to solve that fundamental issue in a way that doesn’t rely on bumpers everywhere.

Whether or not I’m going to successfully solve this in a fun, consistent way throughout the entire game… we’ll see.