Streaming game development: https://www.twitch.tv/stabyourself Image

All About Tilesets - Create Tiles In 10 Easy Steps!

Mapping related threads and questions go in here!
Mari0Maker
User avatar
Posts: 1347
Joined: 07 Apr 2012, 17:10
Reputation: 39
Contact:

Post » 11 Feb 2013, 06:40

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
Last edited by Mari0Maker on 27 Mar 2014, 03:04, edited 14 times in total.

WillWare
User avatar
Posts: 1220
Joined: 08 Mar 2012, 04:35
Reputation: 267
Contact:

Post » 11 Feb 2013, 07:43

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.

Superjustinbros
User avatar
Posts: 2101
Joined: 29 Mar 2012, 20:39
Reputation: 132
Contact:

Post » 11 Feb 2013, 16:40

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.

jokekid
User avatar
Posts: 81
Joined: 05 Feb 2013, 23:28
Reputation: 0

Post » 11 Feb 2013, 16:57

honestly, this deserves a sticky, since it would be sad to see this drown through pages after a couple of days...

Smear-Gel
User avatar
Posts: 297
Joined: 23 Oct 2012, 18:49
Reputation: 4

Post » 11 Feb 2013, 17:22

I assume the colours are there so people can tell how far down each pixel is.

Mari0Maker
User avatar
Posts: 1347
Joined: 07 Apr 2012, 17:10
Reputation: 39
Contact:

Post » 11 Feb 2013, 22:15

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. :)

Qcode
User avatar
Posts: 1466
Joined: 05 Feb 2012, 18:00
Reputation: 72
Contact:

Post » 11 Feb 2013, 23:25

Mari0Maker wrote:This is Transparency, which is basically invisibility

Congrats on remembering the word! Just kidding, man. :)

SonicStalker
User avatar
Posts: 21
Joined: 30 Jan 2013, 02:33
Reputation: 0

Post » 18 Feb 2013, 14:35

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!

Superjustinbros
User avatar
Posts: 2101
Joined: 29 Mar 2012, 20:39
Reputation: 132
Contact:

Post » 18 Feb 2013, 21:22

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.

Mari0Maker
User avatar
Posts: 1347
Joined: 07 Apr 2012, 17:10
Reputation: 39
Contact:

Post » 18 Feb 2013, 23:46

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.

Bonko
User avatar
Posts: 484
Joined: 13 Jun 2012, 00:59
Reputation: 5

Post » 19 Feb 2013, 01:06

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.

BobTheLawyer
User avatar
Posts: 2240
Joined: 01 May 2012, 21:00
Reputation: 55

Post » 19 Feb 2013, 02:01

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)

Bonko
User avatar
Posts: 484
Joined: 13 Jun 2012, 00:59
Reputation: 5

Post » 19 Feb 2013, 02:07

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.

Qcode
User avatar
Posts: 1466
Joined: 05 Feb 2012, 18:00
Reputation: 72
Contact:

Post » 19 Feb 2013, 02:32

Image
Some computers cannot display images > 512 px. This is the most tiles you can have that will be compatible on all computers.

Mari0Maker
User avatar
Posts: 1347
Joined: 07 Apr 2012, 17:10
Reputation: 39
Contact:

Post » 19 Feb 2013, 20:26

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.

lolpoop89
User avatar
Posts: 124
Joined: 05 Apr 2012, 17:38
Reputation: 0

Post » 19 Feb 2013, 20:53

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)

Mari0Maker
User avatar
Posts: 1347
Joined: 07 Apr 2012, 17:10
Reputation: 39
Contact:

Post » 19 Feb 2013, 21:01

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. :)

bubba_nate
User avatar
Posts: 818
Joined: 02 Sep 2012, 23:22
Reputation: 30
Contact:

Post » 20 Feb 2013, 04:05

This tells you how to install them... Can you add a tutorial on drawing the tiles themselves, and not properties and installing them?

Mari0Maker
User avatar
Posts: 1347
Joined: 07 Apr 2012, 17:10
Reputation: 39
Contact:

Post » 20 Feb 2013, 20:53

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...

bubba_nate
User avatar
Posts: 818
Joined: 02 Sep 2012, 23:22
Reputation: 30
Contact:

Post » 28 Jun 2013, 15:33

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.

Qcode
User avatar
Posts: 1466
Joined: 05 Feb 2012, 18:00
Reputation: 72
Contact:

Post » 28 Jun 2013, 15:45

This isn't a pixel art tutorial. People can look up that stuff on their own.

BobTheLawyer
User avatar
Posts: 2240
Joined: 01 May 2012, 21:00
Reputation: 55

Post » 29 Jun 2013, 15:06

I like how it took Bubba_Nate four months to clarify himself.

bubba_nate
User avatar
Posts: 818
Joined: 02 Sep 2012, 23:22
Reputation: 30
Contact:

Post » 30 Jun 2013, 01:04

Haha, yeah, I forgot I had posted it :P

Jackostar10000
User avatar
Posts: 416
Joined: 17 Jun 2012, 12:06
Reputation: 14

Post » 30 Jun 2013, 12:56

you can use the tileset from super luigi 0 as a example if you want mari0maker

Mari0Maker
User avatar
Posts: 1347
Joined: 07 Apr 2012, 17:10
Reputation: 39
Contact:

Post » 01 Jul 2013, 03:17

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.

Jackostar10000
User avatar
Posts: 416
Joined: 17 Jun 2012, 12:06
Reputation: 14

Post » 01 Jul 2013, 05:41

ok, anyway working on something, will announce soon.

TheBroCount
User avatar
Posts: 19
Joined: 12 Jul 2013, 17:47
Reputation: 0

Post » 03 Nov 2013, 19:21

I used Game Maker.

What? That has no background feature.

Superjustinbros
User avatar
Posts: 2101
Joined: 29 Mar 2012, 20:39
Reputation: 132
Contact:

Post » 11 Nov 2013, 22:16

When SE comes out, you can put in this Tile Property Guide to replace the old one:
Image

Mari0Maker
User avatar
Posts: 1347
Joined: 07 Apr 2012, 17:10
Reputation: 39
Contact:

Post » 12 Nov 2013, 02:25

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!

bubba_nate
User avatar
Posts: 818
Joined: 02 Sep 2012, 23:22
Reputation: 30
Contact:

Post » 11 Jan 2014, 04:34

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.

alesan99
User avatar
Posts: 1671
Joined: 30 May 2013, 21:42
Reputation: 315
Contact:

Post » 11 Jan 2014, 04:37

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.
Last edited by alesan99 on 11 Jan 2014, 04:42, edited 1 time in total.

bubba_nate
User avatar
Posts: 818
Joined: 02 Sep 2012, 23:22
Reputation: 30
Contact:

Post » 11 Jan 2014, 04:38

Oh.

Mari0Maker
User avatar
Posts: 1347
Joined: 07 Apr 2012, 17:10
Reputation: 39
Contact:

Post » 11 Jan 2014, 04:51

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.

Turtley3
User avatar
Posts: 651
Joined: 28 Mar 2013, 16:16
Reputation: 22

Post » 07 Feb 2014, 12:51

Nevermind about that, it's gone.
Last edited by Turtley3 on 30 Apr 2017, 08:22, edited 2 times in total.

Superjustinbros
User avatar
Posts: 2101
Joined: 29 Mar 2012, 20:39
Reputation: 132
Contact:

Post » 07 Feb 2014, 14:48

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.

Mari0Maker
User avatar
Posts: 1347
Joined: 07 Apr 2012, 17:10
Reputation: 39
Contact:

Post » 07 Feb 2014, 22:44

I would've added the image, but it still wont work. It's past the 1024x1024 resolution that the low-end computers can handle.

idiot9.0
User avatar
Posts: 1713
Joined: 09 Mar 2012, 10:28
Reputation: 198
Contact:

Post » 07 Feb 2014, 22:57

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.

Superjustinbros
User avatar
Posts: 2101
Joined: 29 Mar 2012, 20:39
Reputation: 132
Contact:

Post » 27 Mar 2014, 02:05

Just bumping to leave this template Qwertyman created for SE.
https://docs.google.com/file/d/0B1exEn833RIZa09EMmduTWlaeE0/edit

Mari0Maker
User avatar
Posts: 1347
Joined: 07 Apr 2012, 17:10
Reputation: 39
Contact:

Post » 27 Mar 2014, 03:04

Superjustinbros wrote:Just bumping to leave this template Qwertyman created for SE.
https://docs.google.com/file/d/0B1exEn833RIZa09EMmduTWlaeE0/edit

Updated!

SauloFX
User avatar
Posts: 617
Joined: 26 Feb 2014, 02:52
Reputation: 84

Post » 27 Mar 2014, 04:23

Nice job MM,a A++ Thread :)

Lazarus
Posts: 5
Joined: 07 Mar 2015, 12:22
Reputation: 0

Post » 07 Mar 2015, 16:50

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.

alesan99
User avatar
Posts: 1671
Joined: 30 May 2013, 21:42
Reputation: 315
Contact:

Post » 07 Mar 2015, 16:56

You either didn't use transparency or you misplaced a pixel.
Make the tile separators transparent and place the properties again.

Lazarus
Posts: 5
Joined: 07 Mar 2015, 12:22
Reputation: 0

Post » 07 Mar 2015, 17:04

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.

Tecminer
User avatar
Posts: 484
Joined: 11 Jan 2014, 20:44
Reputation: 180
Contact:

Post » 08 Mar 2015, 18:26

collision?

jumpinglizard
User avatar
Posts: 335
Joined: 02 Mar 2015, 22:02
Reputation: 133

Post » 03 Apr 2015, 22:40

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?

Squidish
User avatar
Posts: 807
Joined: 05 Apr 2014, 04:04
Reputation: 215
Contact:

Post » 03 Apr 2015, 23:06

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.

MM102
User avatar
Posts: 1015
Joined: 11 May 2012, 06:08
Reputation: 498

Post » 03 Apr 2015, 23:32

^ your brown tile is 17x17 but it should be 16x16

imgudman4567
User avatar
Posts: 249
Joined: 22 Jun 2015, 23:22
Reputation: 18
Contact:

Post » 22 Jun 2015, 23:33

I cannot download paint.net and I am using mspaint. does it work the same way?

Rikifive
User avatar
Posts: 24
Joined: 05 May 2014, 20:23
Reputation: 10
Contact:

Post » 23 Jun 2015, 00:04

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).

TurretBot
User avatar
Posts: 4655
Joined: 15 Mar 2012, 23:18
Reputation: 719
Contact:

Post » 23 Jun 2015, 05:53

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


Return to “Mapping”

Who is online

Users browsing this forum: No registered users and 6 guests

cron