Graphical Guidelines for Kickle Cubicle pack

Graphical Guidelines for Kickle Cubicle
pack
BY TOMMY BRUNN (TOMMY.BRUNN@GMAIL.COM)
REVISION 2
What we are aiming for with this pack is to strike a good balance between likeness to the original game
and a new, clear style. In a way, the pack is a visual reboot of the original game. One very important part
of this is that we all create art using the same style for each category of pieces.
Below I have outlined some guidelines that will hopefully help you do this. While I have tried my best to
give you all the “rules” that I’ve been following, some could just be habits or things that I’m simply not
aware of. The best way to see how the pieces fit together is to simply open up one of my SVGs and see
for yourselves.
Where can I find the SVGs/PSDs/XCFs?
They will be made available in a separate SVN branch. However, they are currently only available on my
local machine. Send me an email and I will send them to you.
Game objects
By “game objects” I’m referring to anything that isn’t part of the background. Examples could be Kickle
himself, enemies, popsicles, magical bags, springs, etc. The biggest distinction between background
objects and game objects is that the former has no outline.
Outline
The outline of any game objects is about 1.5px large. The color is derived from an average of sorts, and
then turned darker.
1|Page
In the example above, the slime’s primary color is blue, so the outline is then a dark blue. Quite simple,
really.
Colors
This applies to both game objects and background objects. The colors used are always subtle, lowsaturation colors. I believe the difference is best illustrated by an example.
The best advice I can give you is to simply place your object in the world and ask yourself if it fits in. If it
does, then you’re probably on the right track.
Shadowing
Both game objects and background objects can have shadows. They are a way to give your object depth
and as you can see, they can make quite a large difference.
There is really just a single rule when it comes to shadowing, and that is to always use hard shadows.
That is, no gradients. If you need to illustrate that one area is even darker than the area next to it, simply
use two shadows where one is slightly darker.
2|Page
Opacity
Some objects can be seen through, even if they may distort the underlying objects a bit. Our game is no
different.
Both the ice block and the slime can been seen through. There’s no exact amount of alpha that makes it
look good, so feel free to experiment. In my pieces I have used around 80-85% opacity for the base
layer, and then maybe 30-35% for any layers on top of that. However, outlines are always at 100%
opacity!
Background objects
Background objects are things that don’t really interact in any way with the rest of the game world. For
our purposes, that is the water and the “floor” tiles.
Outlines
Unlike game objects, background objects have no outlines.
Textures
To fit our styles, no object has a texture. We only use flat colors and shadows to create depth.
Tile format
The tile format that we are currently using is quite complex programmatically, and creates quite a few
problems with the engine. This is something that I would like to see changed, so if you are really good at
making tiles, do get in touch with me!
Currently a tile has up to three components: the top walkable part, the side and the reflection in the
water. Each tile is 48x48 pixels.
3|Page
As I said, this creates a bit of a conundrum for us. While I do adore the way they look, I would really like
to have them replaced with something that’s easier to work with. However, for the time being, this is
what we’re going with. The water tiles weren’t made by me, but here’s how Maxim described how he
made them (in case you need to make more):
For the reflections in the water, I took the sides of the iceberg, flipped them
vertically, distorted them using a ripple filter in photoshop, threw on a gradient
transparency mask, and reduced the alpha of the layer. I'm not sure if that's 100%
correct (I usually wing it when it comes to special effects) but off the top of my
head, that's how I'd do it again.
The PSD may be available here. If not, contact me.
That said, not all tiles need all these components. Some tiles consist of only a single tile. Here are the
ones we are using at the time of writing (minus the water tiles):
4|Page
Animation
Currently our animations have 8 frames. The length of time between each frame can be defined in a
separate XML document.
The general format is to simply lay out each frame for each animation horizontally, and each separate
animation vertically in the following order: (facing) up, down, left, right.
For further information, see the file named Kickle_48x60.png.
Software
To create these pieces I have been using Inkscape, which is an excellent, free vector based illustration
tool available for Windows, Linux and Mac OS.
5|Page
The water tiles are unfortunately created using Photoshop (which is part of why I would like them
replaced). While you are free to use whatever software you know best (as long as you adhere to the
style), in the spirit of collaboration it would be best to use tools that are freely available to anyone both
in terms of price and cross-platformness.
Questions?
While I have tried my best to detail all the rules that I have been going by, it’s very likely that I have left
something out. If you have any questions regarding the art direction or if you just want to get some
input on what you’re working on, feel free to contact me either via the mailing list or by sending a direct
email to tommy.brunn@gmail.com.
6|Page