How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore

  • 48 Replies
  • 63204 Views
*

Offline minmay

  • 654
  • 8
    • View Profile
    • Cow Muffins
Too long have we suffered from really, really bad tilesets.  Too long have we suffered from questions about transparency.  It is time to take action.

What?
This is a tutorial for drawing Knytt Stories tilesets in the style of those present in, for example, The Machine and A Strange Dream.  And the original Knytt, for that matter.  It is also a tutorial for how to make a tileset work in the editor in the first place.

Why?
I'm bored and I want to see more and better custom tilesets, though the impact of this post may not be as significant as I hope for it to be.

When?
Right now.

Where?
Okay, this isn't clever anymore.  We'll go on with it, then.





First of all, you will want to obtain a good image editing program.  If you decide to ignore this and use MS Paint, I hate you.  Sorry.  This tutorial will use GIMP, but none of it is specific to GIMP.

-The GIMP is very powerful, and cross-platform.  Its interface may take some time to get used to, however, and it is not suitable for extremely low-end computers.
-Paint.NET seems to be preferred by the majority of Nifforumers.  While not the most versatile or powerful of programs available, it is simple to use.
-Photoshop and Paint Shop Pro are perfectly suitable, but neither one is free, and most of their features will be useless in tileset creation.



Now, I'll explain how to use custom tilesets in the first place.
Every KS level has its own directory.  Inside your Knytt Stories directory is a directory named Worlds.
The Worlds directory contains another directory for each level.  A level's directory will be named [author's name] - [level name].
If a level has custom tilesets, then its directory will contain a directory named Tilesets.
Inside this directory will be one or more tilesets, labeled with Tileset[number].png.
The number determines the tileset's ID in the editor, hence Tileset43.png will appear in slot 43 in the editor, Tileset214.png in slot 214, and so on.  You can use slot 0, and there is no particular reason not to.



Now, the conditions that the tileset itself must satisfy:
-It must be a valid PNG image.
-It must be 384 pixels wide and 202 pixels tall.
-It must have no completely transparent tiles except for the one in the top left.  (Regardless of the content of the top left tile, the game will treat it as transparent, hence it is pointless to put anything in the top left tile.)

The ten pixels at the bottom are used for an info bar, which is generally used for the tileset title and author name.  It is up to you what you put in that 384x10 space if anything.



And now, the part four or five people have been waiting for: how to draw a tileset.

First of all, start up your image editor.
Then open [your KS directory]/Data/Tilesets/Tileset0.png.  This is the tileset "template"; it meets all the game's tileset requirements and has all the tiles neatly marked out for you.  For reference, it's this:


Then save it to [your KS directory]/Worlds/[your level's directory]/Tilesets/Tileset[number].png.  This will ensure that you don't accidentally save your own tileset over the Tileset0 in the Data folder (although if you do, it should be a trivial matter to correct).

You may want to turn on the grid function of your image editor; make sure it's set to 24x24 with no offset and no spacing.

Now it's finally time to start drawing - yay.
The first thing any KS tileset needs is its basic ground tiles.  Normally, this will be a box three tiles wide and three tiles tall, filled with some sort of texture.  Generally, the box will have a black outline that is one pixel thick, like this:


A simple ground texture will generally be a 4x4, 6x6, or 8x8 pattern of two colors.  It is generally preferable for the colors to not differ too strongly, and usually the result of this is that the second color is simply a different shade than the first color.  The best way to find an appealing texture is to experiment!
In any case, once you've drawn your texture, go ahead and copy-paste it to fill those nine tiles, then draw the box around it.  You'll end up with something like this:


Often, your ground tiles will look better if you put a slight layer of white or black "gloss" on their extremes.  Generally, you would do this by drawing over the desired pixels with Opacity set to 10% or so.  The effect is slight, but often very appealing.


A very common feature of tilesets is grass.  It is simple enough to draw; just draw a bunch of straight, dark green lines next to each other, constantly varying their height.  Generally, you'll want three or four grass tiles, and possibly "end" tiles:

(Here I've made two of the three tiles suitable for use as "end" tiles.  Also, the grass I've drawn here is rather taller than normal.  Of course, some tilesets won't have any place for grass at all.)

Another staple is background tiles, which can usually be done satisfactorily simply by altering the saturation, contrast, and especially brightness of the foreground tiles.  You may want to make multiple "flavors" of these.  Generally, they have 45-degree slopes instead of edges, for some reason.  It just looks better that way.  The tiles shown here would be used for, say, a cave:




And that's it!

No, really!  Drawing a simple tileset is, well, simple.  It takes a few minutes.  From there, you can simply add whatever you think suits the set.  I'm just going to add some rocks:


And make an example screen:




Really, you can hardly expect me to write a complete pixel art tutorial.  There are thousands of things you can draw in a tileset, and many of them I can't even properly draw myself, let alone tell someone else how to.  This is intended as sort of a quickstart guide, nothing else.

Oh, and y'all are free to use/edit/steal that tileset as you wish.  It isn't like it's very good or anything.



If this whole thing seems a bit bare-bones, it's because, well, it is.  I assume that you already know what Knytt Stories is, for example.
« Last Edit: October 06, 2009, 04:02:15 by minmay »

Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #1 on: September 13, 2009, 21:33:17 »
Nice tutorial. :)

*

Offline Pick Yer Poison

  • 782
  • 3
  • One cool cat.
    • View Profile
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #2 on: September 13, 2009, 22:22:08 »
Thanks for making this; it's about time someone did. We've had way too many "how do I make a tileset" threads started recently.

*

Offline LPChip

  • You can only truly help other people by allowing them to fail.
  • 3510
  • 138
  • Excel at the thing you're the best at!
    • View Profile
    • LPChip Interactive
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #3 on: September 13, 2009, 22:25:06 »
Nice topic.

Topic awarded with a sticky ;)
on the left, above my avatar.

MODPlug Central Forum
"If I tried to kill you, I'd end up with a big fat hole through my laptop." - Chironex

*

Offline Evil

  • 1112
  • 1
  • 1723
    • View Profile
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #4 on: September 13, 2009, 23:37:11 »
*steals tileset*

*

Offline googoogjoob

  • Forum Walrus
  • 823
  • 9
  • The Walrus is me.
    • View Profile
    • I have a LiveJournal. Yes. I do.
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #5 on: September 14, 2009, 01:09:57 »
I applaud this tutorial.

Hopefully it will have its intended effect.
good bye

*

Offline StaticRomantic

  • 269
  • 1
  • it's coming to get you
    • View Profile
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #6 on: September 14, 2009, 07:09:57 »
very nice. well put together.
hopefully this'll put an end to bad tilesets and spark more creativity in forummers :O
(although i have no room to speak)

*

Offline Razzorman

  • 965
  • 4
  • Contemplating name change.
    • View Profile
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #7 on: September 14, 2009, 08:34:33 »
hopefully this'll put an end to bad tilesets and spark more creativity in forummers :O
(although i have no room to speak)
Probably not that much. People who are bad at pixel art will still be bad at pixel art, even if they know where they are supposed to draw. :P

A general tip for up and coming tileset makers: If you do not know how to draw something that you want in your tileset, look at other tilesets. Open them in your image editor and zoom in to see how everything is done.
My only star: :hiddenstar:

 :D

*

Offline Londeea

  • 29
  • 0
  • Wahoo!
    • View Profile
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #8 on: September 21, 2009, 09:17:03 »
Woot, this is a GREAT tutorial. Unfortunately I cannot see the pictures...
If I did say anything, who would it affect?

*

Offline googoogjoob

  • Forum Walrus
  • 823
  • 9
  • The Walrus is me.
    • View Profile
    • I have a LiveJournal. Yes. I do.
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #9 on: September 21, 2009, 09:22:09 »
Woot, this is a GREAT tutorial. Unfortunately I cannot see the pictures...

Yeah Vulomedia (which was hosting the images) appears to have crashed.
good bye

*

Offline Londeea

  • 29
  • 0
  • Wahoo!
    • View Profile
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #10 on: September 21, 2009, 10:07:35 »
And, Paint is a very easy program to function... the only problem I now have is finding the color that Knytt Stories accepts as a transparency.. but you can also use Irfranview for saving transparent pictures.
If I did say anything, who would it affect?

*

Offline AClockworkLemon

  • 708
  • 2
  • -Inactive-
    • View Profile
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #11 on: September 21, 2009, 10:54:01 »
if you mean msPaint, I've never been able to get magic pink (r=255,g=0,b=255,g=0) to work in that program. personally i have something against anyone who uses msPaint to make tilesets etc. blahblahblah....

If you are using msPaint, you should SERIOUSLY download Paint.net It is like a free version of photoshop, and is ver handy. It can handle transparency no problems. like ACTUAL transparencey, not just magic pink.

so I repeat:
if you are using msPaint GET PAINT.NET!
I'm not dead. Not entirely. And yes, I'm embarrassed by most of the posts I made here.
:hiddenstar: - From Pumpkinbot

Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #12 on: September 22, 2009, 02:22:58 »
if you mean msPaint, I've never been able to get magic pink (r=255,g=0,b=255,g=0) to work in that program.
Maybe that's because you've added two values for green. :P

Seriously, though. Will everyone please shut up about MS paint. If it ain't broke don't fix it. I thought tilesets were supposed to be about pixel art, not fancy effects, anyway.
Lurk more.

*

Offline Pick Yer Poison

  • 782
  • 3
  • One cool cat.
    • View Profile
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #13 on: September 22, 2009, 03:07:03 »
Seriously, though. Will everyone please shut up about MS paint. If it ain't broke don't fix it. I thought tilesets were supposed to be about pixel art, not fancy effects, anyway.
Fancy pixel art doesn't count for squat if it doesn't show right.

*

Offline AClockworkLemon

  • 708
  • 2
  • -Inactive-
    • View Profile
Re: How to Draw Simple Tilesets - So You Don't Have An Excuse Anymore
« Reply #14 on: September 22, 2009, 10:14:57 »
/\ I agree. Its all very well if your PixelArt is "DaBestInDaWordl!!!!!", but it's no use to you if you cant get it to work properly. If you can get magic pink to work in msPaint, good for you, but Paint.net is still a better tool as it has more functionality.

Anyway, could we get back on topic? minmay, Great tutorial!
I'm not dead. Not entirely. And yes, I'm embarrassed by most of the posts I made here.
:hiddenstar: - From Pumpkinbot