I am overburdened, miles of tiles

Hi there!

Short entry, a bit tutorial-ish, about the tile graphics of the game.

Art direction, ideas

I really liked the style of the open art assets I used for prototyping. Pixel art, huge value differences between the wall and the floor tiles and a little noise to make it a little grimy & wrecked.

2017_02_04_screenshot_1

Though I liked it’s looks and simplicity, I wanted to try some other ideas before settling on anything so I went ahead and made mockups.

False positive

The most interesting and furthest developed one was a tile-set and look with an oblique top-down view effect. I think this looks really good in many games, but sometimes it can get too exaggerated covering too much of the entity sprites.

2017_03_26_mockup

I came up with this, but I decided to scrap the idea. I liked it sort-of, but making multiple varied sets for the 30 to 60 minute long campaign and fully fleshing them out in this style would require and immense amount of work. I choose the original simple style with a decent amount of variation instead.

Goals, final looks

So I returned to the looks of the prototype. Easily distinguishable wall and floor tiles, noisy and grimy places (it is an old dungeon after all) and good variations (many sets and small randomization within each set too) so it does not become boring during a full play-through. I needed a cool palette. Something murky. While picking colors I naturally deviated towards the looks of a game I always cherished for its atmosphere 🙂 .

2017_03_26_quake

Colors were picked carefully for supporting the look of the entity sprites, as they will use a marginally different palette full of contrasting colors instead of saturated ones to make them pop from the terrain (again just like in the prototype).

Here goes some shots about the results:

2017_03_21_screenshot_1

2017_03_26_screenshot_1

2017_03_26_screenshot_2

I have 10 different tile sets ready which I suspect will provide a good variety 🙂 . With 30-ish level deep dungeons a set change will happen after every 3 levels.

How-to?

For creating a lot of pixel art tiles, like the ones I made, you are going to need a frame so to say. Some rules and patterns how you start pixeling each tile and afterwards patience for experimentation. That is all to it actually. I walk through the creation of one.

I use GIMP, a free and cross-platform image editor, but pixel art can be done just as well in a lot of paint programs (even in paint, but I advise you to choose a better one which supports layers). A graphics tool which can work with tiles or a hot-reload engine feature (because GIMP as an example does not support tile graphics) also helps, since you can check while you are drawing, whether your graphics work well when tiled instantly.

2017_03_26_gimp

First I usually start with selecting values for the whole set. This is a handy technique for defining an overall lightness/darkness balance for each tile.

2017_03_26_tile_values

Than I “sketch” a simple pattern for a tile using the values, usually with a light-source residing in a North-West direction.

2017_03_26_tile_pattern

I add a little variation, like cracks, missing bricks, mixing up the pattern etc… Detail like wines or stains can be added after coloring is done but this step alone makes enough differences between tiles.

2017_03_26_tile_detail

I know simply selecting the same hue for the given values feels easy, but it makes the outcome look kind-of boring. Try to make colors interesting by selecting at least two different hues and by playing with saturation a little. It will make a huge difference!

2017_03_26_tile_colors

Now you have a nice looking tile. The next step is optional. Adding noise was a deliberate style choice in my case. You simply add an extra set of values with only slight changes relative to the originally used ones. Select the noise colors the same way as the “normal” colors. Generate a noise pattern and overlay the noise colors on top of the tile using it as a mask.

2017_03_26_tile_noise

A screenshot with the final tiles:

2017_03_26_screenshot_3

Thanks for reading.

Stay tuned!

I am overburdened, evolution of box-art

Hello there!

Took most of last week off for vacation == no entries, sorry about that, but this week I’m going to make multiple videos and blog posts 🙂 ! This first one is about the box-art of the game.

Backstory, requirements

For previous projects I did not spend too much energy on the promotional art. That was obviously a mistake, because usually it is the first thing both the players and the press comes across when checking your game, so it needs to have a good teaser, but it is easy to forget the importance of it and miss allocating time for it…

I planned to make a difference this time, but I significantly underestimated the needed efforts 😦 . I wanted to capture the plot of the game in an image, suggesting the core mechanic, which is trying to collect a lot of loot and having a huge inventory, but still not being enough. All in all I think I succeeded but it took two tries 🙂 .

First try

My first idea was to focus on the protagonist of the game, who is a tomb raider kind-a guy (the not so morally OK one). Not being a typical hero or warrior, I wanted to present him as a bit of a simpleton and not someone who would kill a bunch of monsters with a single slash, since you won’t be able to do that in the game either.

Concepting and direction

I started out with some concept sketches in my notebook, portraying a bandit/pirate figure carrying huge bags…

2017_03_21_concept_1

I continued with flashing out this character with a composition I thought I like:

2017_03_06_boxart_11

2017_03_06_boxart_21

I wanted to create a pixel art end result, because I dislike box-arts with totally disconnected style from the game (except if it is top-notch quality + it adds to the lore of the game) but from my experiences with Operation KREEP, I knew I’m going to need a s#!tload of image sizes for promotional art (especially true if you plan to sell the game on multiple storefronts). Steam alone requests 5+ marginally different aspect ratios. So I decided to go with vector art as a base, and fix various sized renders instead of manually doing 3 to 4 different setups pixel by pixel.

Inking, results and confession

I use Inkscape for vector art. It is a free and cross-platform vector graphics editor, and has a convenient user interface . Perfect for line-art, icons etc…

2017_03_21_inkscape

First batch of line-art and shading work was pretty promising, I grown to quite like the character…

2017_03_21_lineart_1

I tried out rendering the character in various sizes and fixing them up in GIMP using color reduction and manual pixel pushing. I still had “hope” at this point 😀 .

2017_03_21_lineart_2

Then I throw together a “placeholder” pixel art title text.

header

The only thing left, was composition, fine-tuning and polish, so putting together an actual art piece which I could use as the promotional material for the game. Here are my attempts:

2017_03_21_attempt_1

2017_03_21_attempt_2

2017_03_21_attempt_3

Of course I made close to a dozen of these, to try out various text sizes, backgrounds etc…

I don’t know if anyone likes them, but I sure felt like they simply aren’t working. I liked the character, I liked the colors, but the image was lacking detail, a good looking title-text, a correct composition and most importantly somehow it was lacking life 😐 . After days of fiddling on-and-off with it I decided, that no amount of polish is going the fix these problems, so I scraped it and started over!

Second try

I wanted to approach the next trial smarter. So instead of jumping in I looked at a lot of reference pictures and lay down much clearer goals and concepts before jumping into producing the picture.

Reference material

Looking at some images made for other games helped a lot! It made me realize, that I have to focus a lot more on the text first and foremost, and a more clever use of both color and space is required for the image as a whole.

2017_03_21_reference

I came up with the following concept afterwards which I really liked:

2017_03_21_concept_2

I followed a similar approach for scalability, using Inkscape to create the outline and work from the renders, manually pixeling the final image:

2017_03_21_lineart_3

Final, final, final, final!

Funny thing about the final image is, that it took much less time and effort than my first attempt and I think it turned out to be a good deal better looking 🙂 .

boxart_final_final_final_final

The takeaway is if you feel even a tiny bit stuck, sit back to the drawing board and spend some more time on your concepts, it will probably yield better results !

The upcoming entries will be about the linux and mac ports of my previous game Operation KREEP and the tile graphics of I am overburdened. Here is a little sneak-peek of the last one:

2017_03_21_screenshot_1

Stay tuned!

I am overburdened, nobody make a sound!

Hi everyone!

This post is going to be more like a tutorial, than a journal entry. I highly recommend checking out the video version, as it is heavily audio oriented + it contains some recent game-play footage 😉 .

I missed out creating an entry last week. I juggled between projects and tasks a lot, which led to me feeling a bit weary + no significant progress was visible on any front due to working just a tiny little on many aspects, so I decided to postpone it a little. Nevertheless, I’ve spent the last few days on finalizing the audio and sounding of I am overburdened.

Chip tune or not?!

My two completed games used pixel graphics and as a natural fit they were armed with 8-bit style sound effects. This is a really economical approach since making matching effects with a tool like sfxr takes only a few hours tops. From the get-go I wanted to try something different for I am overburdened, both for personal development and because some pixel games with realistic sounds (Canabalt) made me want to experiment with this style. I’m even less qualified as a sound engineer than as an artist 😀 so take my words with a grain of salt! All my mumblings here are based solely on tutorials scattered around the INTERNETZ + some fiddling with tools…

Recording

I decided to record and process as many effects of the game as I can. Last week almost a day was spent clowning with common household items to create noises 🙂 . If you are thinking about a similar approach, start by throwing together a DIY “recording studio” (sponge box). Even if you have a decent microphone it will help immensely with canceling noise and reverberation. Some sponge (check the boxes of your PC parts 😉 ) or a curtain can do the job. Otherwise you may end up with really echoing results (noise can be helped with software!).

2017_03_02_foam_11

2017_03_02_foam_21

Audacity to the rescue

First things first, download Audacity. It’s GIMP for sounds so to speak. Its interface is relatively straight forward (all what you would expect: select, copy, cut, paste, new track, the ‘z’ key ?! for clean cut selection etc…), but Youtube is filled with video tutorials (even with advanced tips and tricks) if you get stuck.

2017_03_02_audacity

The following is a good repertoire to familiarize yourself with from the “Effect” menu:

  • “Noise Removal”: for sampling noise profiles (noisy but otherwise silent segments of a track) and noise canceling.
  • “Change Speed/Tempo/Pitch” and “Bass and Treble”: for mixing and changing effects (e.g.: making them play slower/faster or higher/lower etc…).
  • “Echo” and “Reverb”: for making sounds feel more spatial, and for creating some fancy voice effects (e.g.: making yourself sound like a ghost, demon or a robot etc…).
  • “Fade-In/Out” for correctly starting and cutting off sounds, especially alongside cuts.

My approach, which helped me out learning the ins and outs of effects, is to change back sliders to default positions (0Db, 0% +/-0) and experiment a lot, gradually trying out various modifiers, to see how something affects a sound.

2017_03_02_effects_1

2017_03_02_effects_2

Here is a short reel of what I was able to record and mix for the game:

Public domain

For I am overburdened approximately 50% of the final audio were recorded (some stuff is just hard to record in your room 😦 ), the other half came from OpenGameArt.org and Freesound.org. Both of them are wonderful sites full of really good content, many even final production quality. After listening to an hour worth of sound effects I selected the best matching ones based on my list of requirements and remixed many of them using Audacity for even better results.

2017_03_02_opengameart

2017_03_02_freesound

One thing to be aware of before browsing around these sites is licensing. Keep in mind, just like code, various assets like pictures and sound effects can only be used under strict terms. Some only require author attribution, but some permit fully free modification or commercial use. If you don’t really want to dig into the topic, simply make sure you search for and use assets under CC0. This means the asset is essentially public domain, you can do what ever you want with it, even for commercial purposes!

2017_03_02_cc0

Runtime tricks

You should be applying effects runtime too, to make the sounding of your game more dynamic. I constantly need to remind myself of this practice, I tend to forget about it. Few simple examples are: dynamic pitch, panning and volume control. If a sound effect is played a lot (e.g.: footstep, attack, shoot, hit) and your API of choice allows to set the pitch value (e.g.: XNA SoundEffectInstance) throw in some minor, but random changes! This will make it feel more varying. If your API does not allow this, have no fear! Pre-generate some good sounding variations for the often played effects and randomly select between them.

Example walking cycle in I am overburdened:

If you are not really into the video series but want to hear the difference between the placeholder sounds and the final sounds of the game, here is a timed link: Sound effects comparison

That is all for this post. I already cranked-out tiles and some sprites for the game, so I’m guessing the next entry will be kind of similar, but focusing on the art side.

Take care!