Page 1 of 2

All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Feb 2013, 06:40
by Mari0Maker
All About Tilesets
Create tiles in 10 easy steps!

Well, I'm just making this because I know some people don't know how the heck to make one.
This should hopefully answer all your questions about Tilesets.

What is a tileset?
Well, a tileset is textures that can be used for a game.
For example, the brick block is Super Mario Bros. is a texture on a 16x16 2D square.

How do I make a tileset?
It is a pretty easy process to understand. I'll show you how it's done.

1. Download a image-editing program. In this example, I will be using Paint.NET, a simple but yet advanced tool for editing photos.
You can download it from here: http://www.getpaint.net/download.html

2. When you open Paint.NET, you will be presented with a open canvas. This isn't what you want for making a tileset. Instead, go to File, then New...

3. In the dialog box, make the width and height of the canvas, 17x17, like this:
Image
Then just click OK.

4. You will now have a tiny canvas. You may want to zoom in using the Magnifying Glass tool, located to the left.
Now, click on the Eraser. Change the size in the bar above, to something above 20, and click on the canvas. The image will now have gray-and-white dots. This is transparency, which is basically invisibility. This means instead of showing the color White, it will show nothing whatsoever.

5. Click on the Pencil tool, and select your desired color in the bottom-left corner. Then, just draw/create your tile.
But, you can only draw on this section of the tile:
Image
Sorry for a image that takes up half the universe.
This is due to the configuration settings that go on the right side of the tile.
If you are wondering why you can't draw on the bottom, this is because the tile would be 16x17. That wouldn't make any sense at all, wouldn't it?

6. After you are finished with your tile, it's time to configure it.
To make it simple, use this image:
Image
Please note the image is not mine.
You can also use this for when SE (Special Edition) is released. It was created by Superjustinbros
Image

Thanks for WillWare pointing out it dosen't matter what color they are, but it just matters they are in the correct place.

7. Once you have configured your tile, and created it, it's time to Save it.
Just click File, and then Save...
Then save anywhere you like, for example, the Desktop.
Make sure you save it as a .png, which you can change it to that file format below where you name your file.
Then, press Save, and then press OK on the other dialog box that appears.

8. Now, how do you insert the tiles ingame? Well, it's simple.

UNIVERSAL:
Open Mari0, go the to mappack selection screen, and then press "M" on your keyboard. Next, open the "mappacks" folder, and open the folder to the mappack you would like the custom tiles to be added to.

WINDOWS XP USERS:
Press Start, click Run, and type "%appdata%" WITHOUT the quotes, and hit Enter.
Then navigate to LOVE, mari0, mappacks, and then select the mappack you would like the custom tiles to be added to.

WINDOWS VISTA/7 USERS:
Press Start (Start Orb), and type %appdata%, and click on the Roaming folder.
Then navigate to LOVE, mari0, mappacks, and then select the mappack you would like the custom tiles to be added to.

WINDOWS 8 USERS:
Press WINDOWS KEY + R on your keyboard, type %appdata%, and then press Enter. Next, navigate to LOVE/mari0/mappacks, and then select the mappack you would like the custom tiles to be added to.


You can also open Mari0, go to Mappacks, and press "M" on your keyboard to open the mappack folder.

9. Once you have navigated to the mappack you want, Copy and Paste the tile into your mappack folder (Not the mappack folder, but the mappack INSIDE the mappack folder you'd like to add the tile to.), and rename it to "tiles.png". The ".png" extension is not needed, UNLESS you have file extensions shown.

10. Open up Mari0, select your mappack, go to Level Editor, hit ESC, and go to Tiles, and click Custom, and there is your tile!

Congratulations, you have created your first tile for use with Mari0! :D

If you want to further expand and add more tiles, then I suggest using this template, created by Mr.Q.Marx:
Image
To save the image, right click, and hit Save Image As...

You can also use this template, created by Superjustinbros:
Superjustinbros wrote:Here's a template that allows a lot more room.
Image

Tiles go in the green squares, the white areas are the boundaries where the tile properties are configured.
If that dosen't work, you can use Qcode's, which is the maximum amount for some computers:
Qcode wrote:Image
Some computers cannot display images > 512 px. This is the most tiles you can have that will be compatible on all computers.
Or, you can use this template that QwertymanO07 made for Special Edition.
Image
Where do you post tiles?
I suggest posting them on this thread:
viewtopic.php?f=12&t=2437

To post them there, just upload the tile/tileset to Imgur:
http://imgur.com/
After you uploaded it, click on the picture, and Copy the URL, which should look something like this:

Code: Select all

http://i.imgur.com/RANDOMCODEHERE
Then, Paste that URL to the post you're making, and add IMG tags around it, and it will look like this:

Code: Select all

[img]http://i.imgur.com/RANDOMCODEHERE[/img]
Then, just create your post!

Anyways, I hope you enjoyed the tutorial.
If you have any questions, feel free to ask. I wont bite. :)
Hopefully I wont bite. :P

Single Tile Sample
Image
Created by lolpoop89

Multiple Tiles Sample
Image
Recreated by TheSeek

Massive Tileset Sample
Image
Created by Superjustinbros

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Feb 2013, 07:43
by Sky
Nicely done! Hopefully this does its job of educating the populace... or at least those who will read this at all. As I'm sure you've seen, we still get mappack threads by people who obviously haven't read MrCytosine's stickied thread. I'm expecting similar results here, but this should at least answer the questions of those who are actually searching around.
Mari0Maker wrote:6. After you are finished with your tile, it's time to configure it.
To make it simple, use this image:
Image
Please note the image is not mine.
Yep, it's color coded configuration.
Actually, they can be any color, as long as they're in the correct positions. I usually use red for all of them and my tilesets work just fine.

Also, don't forget you can access the mappack folder on any platform by pressing 'm' on the Select Mappack screen.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Feb 2013, 16:40
by Superjustinbros
Yea, the tile configuration pixels can be any color, it's only based on their placement will they affect the neighboring tile to the left.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Feb 2013, 16:57
by jokekid
honestly, this deserves a sticky, since it would be sad to see this drown through pages after a couple of days...

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Feb 2013, 17:22
by Smear-Gel
I assume the colours are there so people can tell how far down each pixel is.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Feb 2013, 22:15
by Mari0Maker
Superjustinbros wrote:Yea, the tile configuration pixels can be any color, it's only based on their placement will they affect the neighboring tile to the left.
WillWare wrote:Also, don't forget you can access the mappack folder on any platform by pressing 'm' on the Select Mappack screen.
Thanks for the tips!
I'll probably update the main post with that information. :)

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Feb 2013, 23:25
by Qcode
...

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 18 Feb 2013, 14:35
by SonicStalker
That template is really useful! Thanks for supplying it! For the longest time I thought that your entire document could only be 17px wide, so I had to completely rearange my tilests so I could have more room... At least I had that template to make it easier!

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 18 Feb 2013, 21:22
by Superjustinbros
Here's a template that allows a lot more room.
Image

Tiles go in the green squares, the white areas are the boundaries where the tile properties are configured.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 18 Feb 2013, 23:46
by Mari0Maker
Superjustinbros wrote:Here's a template that allows a lot more room.
*Image*
Tiles go in the green squares, the white areas are the boundaries where the tile properties are configured.
Updated.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 19 Feb 2013, 01:06
by Bonko
Remember, you can expand the canvas size for more tiles, but only on the bottom, because you can't scroll sideways in the tile part of the level editor.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 19 Feb 2013, 02:01
by BobTheLawyer
Bonko wrote:Remember, you can expand the canvas size for more tiles, but only on the bottom, because you can't scroll sideways in the tile part of the level editor.
The editor automatically fits it.
You can add columns, it just looks bad in the editor (see Bob's Group Mappack)

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 19 Feb 2013, 02:07
by Bonko
BobTheLawyer wrote:
Bonko wrote:Remember, you can expand the canvas size for more tiles, but only on the bottom, because you can't scroll sideways in the tile part of the level editor.
The editor automatically fits it.
You can add columns, it just looks bad in the editor (see Bob's Group Mappack)
I know, I recently made the mistake. But its better to just expand vertically.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 19 Feb 2013, 02:32
by Qcode
...

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 19 Feb 2013, 20:26
by Mari0Maker
Qcode wrote:*Image*
Some computers cannot display images > 512 px. This is the most tiles you can have that will be compatible on all computers.
Updated once again.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 19 Feb 2013, 20:53
by lolpoop89
Not to be a dick or anything but could you change "Created by TheSeek" to "Recreated by TheSeek"?
TheSeek wrote:made it in 5 min, of course credits still go to him, not me...
Image
I made them all collidable, portalable and not breakable(as i suppose they were intended)

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 19 Feb 2013, 21:01
by Mari0Maker
lolpoop89 wrote:Not to be a dick or anything but could you change "Created by TheSeek" to "Recreated by TheSeek"?
TheSeek wrote:made it in 5 min, of course credits still go to him, not me...
Image
I made them all collidable, portalable and not breakable(as i suppose they were intended)
Sure. It's now updated. :)

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 20 Feb 2013, 04:05
by Sunset_Moth
This tells you how to install them... Can you add a tutorial on drawing the tiles themselves, and not properties and installing them?

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 20 Feb 2013, 20:53
by Mari0Maker
bubba_nate wrote:This tells you how to install them... Can you add a tutorial on drawing the tiles themselves, and not properties and installing them?
Drawing is hard to explain. Someone has to be creative to draw.
To me, there is no such tutorial. :P

Unless you're talking about something else...

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 28 Jun 2013, 15:33
by Sunset_Moth
I meant like how to make them look good. Like, for people who don't know how to do it. NOISE IS IMPORTANT. ALWAYS USE IT.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 28 Jun 2013, 15:45
by Qcode
...

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 29 Jun 2013, 15:06
by BobTheLawyer
I like how it took Bubba_Nate four months to clarify himself.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 30 Jun 2013, 01:04
by Sunset_Moth
Haha, yeah, I forgot I had posted it :P

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 30 Jun 2013, 12:56
by Jackostar10000
you can use the tileset from super luigi 0 as a example if you want mari0maker

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 01 Jul 2013, 03:17
by Mari0Maker
Jackostar10000 wrote:you can use the tileset from super luigi 0 as a example if you want mari0maker
I already have a good amount of examples, so I really don't see a point in adding the SL0 tileset. But thanks for the offer.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 01 Jul 2013, 05:41
by Jackostar10000
ok, anyway working on something, will announce soon.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 03 Nov 2013, 19:21
by TheBroCount
I used Game Maker.

What? That has no background feature.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Nov 2013, 22:16
by Superjustinbros
When SE comes out, you can put in this Tile Property Guide to replace the old one:
Image

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 12 Nov 2013, 02:25
by Mari0Maker
Superjustinbros wrote:When SE comes out, you can put in this Tile Property Guide to replace the old one:
*image*
I'll just add it now so I don't forget. Thanks!

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Jan 2014, 04:34
by Sunset_Moth
This doesn't appear to be stickied, so... BUMP! Can't let this fall down through the pages.
Also, don't capitalize my name please.

Q-code... your template has no transparency.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Jan 2014, 04:37
by alesan99
bubba_nate wrote:This doesn't appear to be stickied
It isn't stickied because this is already stickied, and if you haven't noticed, it has a link to this thread.

EDIT: now that I have the chance to talk about it, just remove the whole "color coded tile properties" because some people might not see the text below it and I'm not sure why'd you want false info to be shown.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Jan 2014, 04:38
by Sunset_Moth
Oh.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 11 Jan 2014, 04:51
by Mari0Maker
alesan99 wrote:EDIT: now that I have the chance to talk about it, just remove the whole "color coded tile properties" because some people might not see the text below it and I'm not sure why'd you want false info to be shown.
Fixed. Also changed/added a few other things.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 07 Feb 2014, 12:51
by maidenTREE
Nevermind about that, it's gone.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 07 Feb 2014, 14:48
by Superjustinbros
Can't be used; it's not 22 tiles in width.
Unless you really want everything to look like a tsunami hit it when you view it in the editor.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 07 Feb 2014, 22:44
by Mari0Maker
I would've added the image, but it still wont work. It's past the 1024x1024 resolution that the low-end computers can handle.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 07 Feb 2014, 22:57
by idiot9.0
If you need a tileset that big in the first place, either you're making eye candy galore or you suck at map making.
There have only been a few cases where the tileset has been huge and the mappack great. Otherwise the massive tileset usually means the level design overall sucks.
Normally the limit that's in place for low-end computers is a perfect amount. Hell, my mappack, A0zora, Abstracta, and the Best of Stabyourself mappacks are tileset whores with the massive tilesets but they're still under the limit and still look fantastic, and those are only the ones I can think of immediately. There's plenty more that look fantastic with tons of tiles that still fit the limit of low-end PCs.

In short there's no need for a tileset that big since if it's used then 9 times out of 10 the map maker will use tiles to overshadow his terrible level design.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 27 Mar 2014, 02:05
by Superjustinbros
Just bumping to leave this template Qwertyman created for SE.
https://docs.google.com/file/d/0B1exEn8 ... laeE0/edit

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 27 Mar 2014, 03:04
by Mari0Maker
Superjustinbros wrote:Just bumping to leave this template Qwertyman created for SE.
https://docs.google.com/file/d/0B1exEn8 ... laeE0/edit
Updated!

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 27 Mar 2014, 04:23
by SauloFX
Nice job MM,a A++ Thread :)

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 07 Mar 2015, 16:50
by Lazarus
SE user here, i just created a tile that shows up fine in the editing phase but when I place it it turns into a coin.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 07 Mar 2015, 16:56
by alesan99
You either didn't use transparency or you misplaced a pixel.
Make the tile separators transparent and place the properties again.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 07 Mar 2015, 17:04
by Lazarus
Wait, I enabled tra- OH FOR FUCKS SAKES IT TURNED IT OFF WHEN I RESIZED IT.
EDIT: Alright, I fixed it and it works. But I enabled all the spike properties yet it doesn't do anything when i touch it.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 08 Mar 2015, 18:26
by Tecminer
collision?

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 03 Apr 2015, 22:40
by jumpinglizard
Image

i don't know where to post this so i'm posting it here

i need help
here is a problem and a question

question: if the format for the tiles goes down instead of something like the other templates, will the tiles work?

problem: the last brown block is supossed to be collision but in the game it acts like a coin once you stand on top of it! help?

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 03 Apr 2015, 23:06
by Squidish
jumpinglizard wrote:Image

i don't know where to post this so i'm posting it here

i need help
here is a problem and a question

question: if the format for the tiles goes down instead of something like the other templates, will the tiles work?

problem: the last brown block is supossed to be collision but in the game it acts like a coin once you stand on top of it! help?
All The properties are filled in. all tiles must be 16 x 16.

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 03 Apr 2015, 23:32
by MM102
^ your brown tile is 17x17 but it should be 16x16

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 22 Jun 2015, 23:33
by imgudman4567
I cannot download paint.net and I am using mspaint. does it work the same way?

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 23 Jun 2015, 00:04
by Rikifive
I personally liked working in GIMP. Easy to setup GRID that automatically points you where to draw tile. And there are no problems in increasing size of tileset. Simply re-size borders anytime you want and that's all. No need to use any templates (at least I didn't use).

Re: All About Tilesets - Create Tiles In 10 Easy Steps!

Posted: 23 Jun 2015, 05:53
by TurretBot
imgudman4567 wrote:I cannot download paint.net and I am using mspaint. does it work the same way?
doing this will screw up your tiles