Wednesday, October 30, 2013

Tasty Tiles

Hello all, last week we made art! Lots of it! Some of it is programmer art, some of it is artist art and all of it is concept art! Now, you may be wondering why I'm using so many exclamation points. It's to mask the pain and sadness I feel.

Read this
Haha, now that that's out of the way, I'm going to go ahead and delve into the spectacular and incredibly exciting art creation process! If you're just interested in the pretty pictures, feel free to scroll down and ignore all the content I worked so hard to create!

Anyways, contrary to what I said in the 2nd paragraph, the beginning of the process was fairly boring. It started in much the same way other processes do, by setting a goal. In our case, the goal was to make a thematically relevant and attractive tileset for Engauge. 

Research Terminal
Next, the denizens of ToastieRepublic conducted exhaustive research on the qualities of a good tileset. The results? It's a piece of cake. Literally. Except not I guess. Anyways, we "discovered" that good tilesets have layers. Layers of delicious cake tiles. 

For anyone curious, here's a little powerpoint that I put together in this phase. 

After the research came the most challenging part, the communication. Sure, I had all these grand ideas about what makes a good tileset but how could I translate those ideas into actionable requests?  Then  it hit me.
Show not tell
I could give examples from dusk til dawn but it wouldn't be as effective as simply concepting a tileset myself. Them's the bricks I guess. Speaking of which, bricks served to confirm two things. One, that effective space-filling tiles are layered like a cake. Two, that space filling tiles should be broken up periodically to form self enclosed patterns.

Them's the breaks. Pattern breaks!
So, why did I specify that patterns needs to be self-enclosed? Well, if you extended any of these patterns lower or higher than intended, the patterns begin to feel vertically skewed. In order to combat this, you would need to incorporate horizontal breaks or make patterns logically sound to prevent  drawing attention to seemingly incomplete patterns. Of course, this is all theory oriented towards 2d platformers that use tilesets. TAKE THAT NITPICKERS! I qualified my statements; your counter-examples can't hurt me now!

Variety is the spice of life
The next thing we tackled was how to handle open spaces. For this portion, we decided to try to design an area that consisted of two main tiles, its variations and a few sprites. The sketch served to emphasize that pattern variations don't need to be huge to be meaningful. A dent here and there or some rust do the job just fine.

While that may sound obvious, it's important. Before, we were too ambitious with our tiles and made them capable of forming complex patterns. Unfortunately, this backfired on us and made the variation feel haphazard and inorganic. The point here is don't try to get too fancy with your tiles. Leave big variations to your sprites. If you're interested, here is a breakdown of the tiles used in the sketch. The bottom left was my attempt to transform the tiles into something more thematically relevant.

Consistently inconsistent
The final thing we addressed was consistency. This aspect of tilesets is so huge it could sink the Titantic faster than an iceberg. First off, I should mention that there are multiple ways to make a feel consistent, and by extension, cohesive. For brevity's sake, I'll focus on pattern consistency and palette consistency.

In my opinion, pattern consistency is the easiest type of consistency to achieve; however, it is also the easiest to type to do poorly. For this example, use the figure below to follow along. When shooting for pattern consistency, you shouldn't aim to homogenize your patterns. Instead, decide on two or three base patterns and mix them together strategically. In the figure, the two most prominent patterns are the metal and brick patterns.

Pattern Paradise!
For our space-filling purposes, we used the brick pattern. For our pattern breaks and edges, we used the metal patterns. In other words, we only used one pattern type to create consistency for the entire room. Instead of creating two completely distinct patterns for the floor and ceiling, we re-used the brick pattern in the ceiling and ground. This is a common trick I saw employed in Cave Story and Megaman X, so it's not like this is an obscure technique. A specific instance that Megaman X does this can be found here (be warned the timestamp is wonky so it doesn't all play at 16:09).

Once your first pattern creates consistency, you can vary your second main pattern for a little flavor. This method is very friendly towards endless variations of the same tile types. Also, this method is very good for creating quick iterations. All together, the tiles for this example took 2 hours to create. 1 hour on our end and 1 hour for the artist to touch up.

Color me impressed!
The other type of consistency is arguably more important than pattern consistency. Because of that, it's been covered many times by people far more qualified than I am. Yup. I'm talking about color theory. Now, I don't want to drawl on by something outside my expertise, but as far as I can tell, a good palette can make completely arbitrary patterns feel natural and organic. Anyways, here's where I'm going to stop.

I hope this post has given some insight on how development has been going so far and the sort of obstacles in our path. The next step is taking these concepts and making them more cohesive overall. This entails smoothing out the rough edges (literally) and expanding the tileset to allow more dynamic tile placement. The screenshots below are pretty indicative of the current iterations' limitations. To see what these areas looked like pre-rework click here.

Demo Spawn Area
Jumping Area
Enemy Spawn Area
Projectile Area
Bonus Image
All in all, last week was pretty productive. I hope this gives you all some idea of what we're doing at the moment (on the art side). Until next time (also sorry for posting late)! 

No comments:

Post a Comment