Nifflas' Support Forum
Level Editing Support => Knytt Stories Level Editing Support => Knytt Stories - Custom Content => Topic started by: minmay on September 13, 2009, 21:04:45
-
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 (http://www.gimp.org) 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 (http://www.getpaint.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:
(http://imgur.com/kO2Fy.png)
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:
(http://imgur.com/gd851.png)
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:
(http://imgur.com/kJG8M.png)
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.
(http://imgur.com/6wg6B.png)
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:
(http://imgur.com/VxKxW.png)
(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:
(http://imgur.com/jBM0H.png)
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:
(http://imgur.com/rUq5o.png)
And make an example screen:
(http://imgur.com/6wAva.png)
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.
-
Nice tutorial. :)
-
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.
-
Nice topic.
Topic awarded with a sticky ;)
-
*steals tileset*
-
I applaud this tutorial.
Hopefully it will have its intended effect.
-
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)
-
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.
-
Woot, this is a GREAT tutorial. Unfortunately I cannot see the pictures...
-
Woot, this is a GREAT tutorial. Unfortunately I cannot see the pictures...
Yeah Vulomedia (which was hosting the images) appears to have crashed.
-
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 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 (http://www.getpaint.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 (http://www.getpaint.net/)!
-
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.
-
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.
-
/\ 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 (http://www.getpaint.net) is still a better tool as it has more functionality.
Anyway, could we get back on topic? minmay, Great tutorial!
-
While most drawing tools in editing programs will be useless for tilesets, having layers and more than three undos will be extremely useful.
One thing you will NEVER be able to do with MS Paint is alpha transparency - you know those gradients present in, say, the Desert tileset? Can't make those.
-
OK. Few things (really a couple):
1. You can make transparency with MS Paint, but not the mist-like effects Minmay (you mind MM? I love abbreviations) spoke of, but normal transparency - just use that magenta/pink/whatever for transparency.
2. This is a problem with me - my tileset ain't showing up. I'll post a pic of it soon... the name is Tileset11.png.
-
Seriously, guys there's like 10 posts of mspaint ranting.
-
I didn't cover fudging transparency with magenta, because I don't want people to do it! This tutorial assumes you have an image editor that can do transparency and you know how to use it. It only covers what KS requires of tilesets - it doesn't cover how to meet those requirements with, say, MS Paint or Paint.NET or Photoshop or whatever you have. Because, frankly, that would just be silly! It's about tilesets, and nothing else.
This tutorial is about how to draw a tileset and what KS requires of the image. It is not about how to "do" transparency. If you don't know how to add transparency to an image (and you're using a program that can do so in the first place), your problem is one with your program, not with KS, and frankly doesn't really belong in the Knytt Stories Level Editing Support subforum.
-
Lets break this whole thing down before we shush everyone.
Basic pixel art
Ms paint: Easy enough, but you only get three undos, so making mistakes is incredibly annoying.
Any other program: Easy
Transparency
Ms paint: Can't do it, but you can use magenta if you want to. Semi-transparency and blurring is impossible.
Any other program: Can do it.
Brush sizes
Ms paint: A few presets.
Any other program: Allows you to scale brushes freely.
Selection tool
Ms paint: Annoying and limited.
Any other program: Useful.
Color selector
Ms paint: Good enough once you learn it, but you have to delete one of your preset colors to use it.
Any other program: Simple and easy to use.
Zooming
Ms paint: Has a few presets.
Any other program: Allows you to zoom freely.
Layers
Ms paint: Nope.
Most other programs: Yes.
Grids
Ms paint: Nope.
Most other programs: Yes.
Final verdict
Anyone still using paint is just being stubborn. Its useable, but not nearly as good as, well, anything.
If you want to use it, then go ahead, but I highly recommend that you get something else, like Paint.net (http://www.getpaint.net/index.html) or GIMP (http://www.gimp.org/).
Now lets not get any further off topic. :)
-
Grids
Ms paint: Nope.
Most other programs: Yes.
Actually, it does have a grid, and it works fairly well, but the rest of the post is still 100% correct.
-
I've moved the images since it turns out Vulo is gone for good.
-
If you look down at this tileset by me (shameless advertising), this is how I like to lay out the general shape of my tiles. Ground is two 3x3 squares on the left. This leaves room for the 4x4+1 background tiles on top. Then you have a huge space on the right for anything you want, with nearly no size limitations.
I do recommend you make your first few tiles like this, it saves alot of room and makes the tileset easy to use.
EDIT: Oh, and MS Paint does have a grid, but unless you want to blind yourself with dotted gray lines and where one square=one pixel then I say no.
-
Hey! Have anyone seen the new ms paint for the new windows OS? Apparently it will be more advanced.
-
Hey! Have anyone seen the new ms paint for the new windows OS? Apparently it will be more advanced.
Although it is completelly offtopic, yes, I've already used it. Its better than the normal MS Paint, but doesn't beat say... Paint.net or gimp or any other known draw tool.
-
shawnachu: I have not covered, and will not cover, tile layout. It is a matter of personal preference. If you're making a tileset for other people to use, then you should worry about tile layout - but who makes KS tilesets specifically for public use?
-
but who makes KS tilesets specifically for public use?
I do. :|
-
Lots of people did back when we had a tilesets board...
-
Lots of people did back when we had a tilesets board...
which is now th development showcase
post those tilesets!
-
You know, I wonder why the object 11 of bank 11 doesn't work.
-
You know, I wonder why the object 11 of bank 11 doesn't work.
This was posted on the old forum and stuff: it doesn't work because the object isn't actually in the game, but its icon got left in the object bank. Or something.
-
...OK...
-
Woo hoo hoo hoo. C)p Thanks for that. Now I can make my own tilesets.
-
As for magic pink, it's apparently not a "real color". Interesting link.
http://www.null-hypothesis.co.uk/science/strange-but-true/profs-probings/colour_spectrum_magenta_complimentary_bizarre
-
Really good
-
Problem: how to copy/paste in Paint.NET without blowing your wrist up?
-
Problem: how to copy/paste in Paint.NET without blowing your wrist up?
ctrl-x to cut, ctrl-c to copy, ctrl-v to paste.
-
This tutorial has really helped me and put me on track to make custom content! >) also pixel art in general.
-
Just found this really nice tutorial ! Thanks, it really learn lots of interesting things about pixel art and making custom content and it's also very easy to understand :) !
-
Hi there
I am trying to follow this tutorial, but I have to trouble getting the transparency right in Gimp.
I have several layers in my Gimp project that I am combining into on png image. But somehow, when I try to apply my "art" in KS, what happens is that the transparent pixels in the tiles cover the background!
What am I doing wrong?
How should I make transparent pixels in Gimp, that also work in the KS editor?
Best,
troels
-
It sounds like you're saving the image without an alpha channel. However, I'm confused by that since as far as I know GIMP will always save an image with an alpha channel as an image with an alpha channel, provided the format supports it (and PNG does, and if a format doesn't then it will tell you).
I guess another possibility is that you're merging layers with alpha channels into a layer with no alpha channel and not noticing. Make sure all the layers have an alpha channel.
-
There is default empty tileset for Gimp users.
To see, what I changed without using Gimp, look in the preview.png
tileset.png file: I changed xcf to png, cause I can't upload xcf files. You can open it in the Gimp only
-
Wow! Thanks! That's a great tutorial.
-
Alright, now how do I upload it? I have made my tileset, and finally saved it as one of the preexisting tilesets, my question is, How do I upload a tileset without replacing the other tilesets?
-
and finally saved it as one of the preexisting tilesets
I sure hope you have a backup of that, as it may alter the look and or gameplay of other levels you play.
Anyways:
inside the folder for your level, create sub-folders for the custom art and music content and put them in there.
Knytt Stories\Worlds\Your Level\Tilesets\TilesetX.png
Knytt Stories\Worlds\Your Level\Music\SongX.ogg
Knytt Stories\Worlds\Your Level\Ambiance\AmbiX.ogg
...Where "Your Level" is the name of the autor of the level followed by a dash and the name of the level. And X is a number beteween 1 and 255.
-
When I make grass, I did exactly what you did, but then the original color I draw over is still there and when I make use of the tileset it ends up like this.
How do I fix it? I tried to make it white and I tried to make it black but still with no success. I also tried to take away the color using Rectangle select and then Move Selected Pixels, but it didn't work. (I use Paint.NET)
-
You have a problem as I see.
Who can fix it? Me!
To fix the transparency of its,
Make the bit depth 32 bits.
Then make your grass and trees!
(http://i329.photobucket.com/albums/l397/Bass_Net/ImageDepth_zpsd93cc9ff.png)
-
Thank you! Gives a :hiddenstar:
-
Another program I'd recommend for tileset creation is Aseprite. (http://www.aseprite.org/) The current version (at time of posting) is $10, but you can grab version 0.9.5 for free and it works just as well as the paid version (give or take a few features).