[Tutorial] Custom Map & Tileset for Newbies

Mapping related threads and questions go in here!
Post Reply
User avatar
Sentinel
Posts: 119
Joined: 29 Mar 2012, 09:48

Post » 26 Apr 2012, 23:54

I'll do my best to make this tutorial straightforward and easy to follow. Now, lets get down to business!

Contents:

1. Download required files
2. Installation
3. Setting up your custom tileset Folder (map pack)
4. How to draw your custom tileset
5. How to configure your custom tileset
6. How to add your custom tileset to Mari0
7. How to use Mari0 Level Editor and create your maps
8. Conclusion

==============================================

1. Download required files

Winrar: http://www.win-rar.com/download.html
LOVE engine: https://love2d.org/#download
Mari0 Source: http://stabyourself.net/mari0/
Any Graphic Software of your choice! (Photoshop, GIMP, Paint.net and etc.)

2. Installation

Winrar: I'm pretty sure you already have this.
LOVE: You need this engine to run and customize Mari0 source file. Double click the LOVE shortcut and you'll see a pink rubber piggy that will try to hypnotize you. Ok, close this window.
Mari0 Source: Unzip it to your Desktop. Never download this from any other website.
I'll be using Photoshop CS5 because thats what I'm comfortable with.

3. Set up your Custom mappack folder**

I'm using Windows 7, so I dont know the path if your using mac or linux. Maybe someone else can help you with that. :)

- Users> Your Username > Appdata > Roaming > LOVE > Mari0
- Go to Mappacks
- Create a new folder and name it whatever you want.

4. How to draw your own custom tileset

- Right click mari0_1.6 LOVE game file and open it with WinRAR. Your game file should be on your Desktop, inside the mari0 folder.
- Go to graphics > SMB > and extract smbtiles.png to your desktop. (drag and drop should work)
- We will use smbtiles.png as our template for now. You can make your own tileset when you get enough experience and trust me that you'll be making custom tilesets in no time.
- Open smbtiles.png using your Graphic Software. (in my case Photoshop)

- Take a good look at it and ignore the red dots for now.
Image

Our tileset is 16x16 (17x17 if you include the grid and tile properties), so all you need to do is to draw inside every tile to create your own graphics.

For example:
Image Here is our original ground tile
Image and this is the one I edited.

Looks easy, right? I suggest that you create a new layer above the original layer so you wont mess up the original tileset. When you are happy with it, then just Merge Visible layers and Save it as PNG.

Go ahead and experiment, just make sure that you draw within the 16x16 tile and you will be fine. You can also expand your custom tileset by adjusting the original height. The default size is 374 x 102, so increase your Canvas Size (102px) to a higher number and use the smbtiles grid as your guide.

You won't need every tile from the default tileset, so just use those unused tiles and replace them with your own if you want.

This is what I came up with:
Image

Note that you won't need the first default tile from the upper left hand corner. I replaced it with my own tile :)

5. How to configure your custom tileset

- Remember those red dots that I told you about earlier? Those are custom tileset properties which you need to configure everytime you make a custom tileset.
- Use this as your reference: You can use one color for every tile properties, but make sure that its opaque.

Image

Example:

Let's set our edited ground tile to Collision:true
Image

What if I want it to be breakable too? Then add a pixel to the 3rd Column.
Image

Hey, make it so its non portable! Then add a pixel to the 6th Column.
Image

Um, I want it so its just a tile decoration. Then leave the whole column blank.
Image

6. How to add your custom tileset to Mari0

- Save your custom tileset as Tiles.png (transparent background, merged visible layers)
- Go back to your custom mappack folder (Content #3) and place your Tiles.png there.

7. How to use Mari0 Level Editor and create your custom maps

I'll explain the basics for now.

- Run Mari0 game file and select your custom mappack.
- After it loads choose Level Editor.
- Go to Tools Tab. Set up your Mappack Title, Author, Description and Starting Lives. You'll also notice Link Tool for Portal Maps with a nice explanation on how it works.
- Go to Main Tab. Everything is self explanatory here. (I will talk about custom background, scroll factor, and stuff when I make Advanced Mapping Tutorial in the future.)
- Go to Tiles Tab. Your custom tileset should be on the Custom tab, so check if its there.
- Use every tile that you made and make sure that your Tileset properties are working properly.
- If you want to erase a tile, then go to All or SMB Tab and choose the first tile on the upper left hand corner. It looks like a Black & Pink Checkered tile.
- If you need to place default Coins, Coin Block, and Invisible Block then go to SMB Tab.
- If you want to put enemies then go to Entities Tab.
- If you want to erase an Entity, then go to Entities Tab and select the first tile on the upper left hand corner.

+ Mario's Spawn Point.
-- Select the Red M and place it on an empty tile (just like what the description said). You can also place it in mid-air and Mario will drop from above! Good for sub level spawn points, eh?
Image

+ Pipes!
-- Draw a pipe using your tiles and place the Down/Right Pipe Entity on it.
Image Image
- Make sure that you created a sub-level first. If you havent done so, go to Maps Tab and choose your sub level. Dont forget to save!

-- Right click your Down/Right Pipe Entity and set your destination level.
-- When you want to go back to your original destination, place another pipe tile/pipe entity on the sub level and set the target to Zero. Then, place Origin Sub Level Entity on your Pipe tile (navigate back to your origin level, dont place it on your sub level) and set the target from your origin sublevel.
Image

It seems confusing at first, but you will get a hang of it.

+ Checkpoint
-- Place your Red C Entity on the ground. I recommend that you dont place it any higher than that.
Image

+ Flag
-- Place your Red F Entity where you want to place the flag, which will end your level.
Image

Make sure that you set your castle tiles as collision:false. (decoration)

8. Conclusion

Well, thats about it for our tutorial. If you want to use my practice Tileset then feel free to use it to your own maps.
Image
Save it as Tiles.png and place it to your mappacks. I'll try to do an Advanced Mapping Tutorial when I get free time.

Enjoy.

Camewel
Posts: 2996
Joined: 02 Feb 2012, 21:32

Post » 26 Apr 2012, 23:58

Why are you making people go into the Mari0 source and install LÖVE to make a map-pack that's so amazingly unnecessary.

Also, you can find the map-packs folder on any OS by opening the 'select mappack' menu and pressing 'm'.

User avatar
Sentinel
Posts: 119
Joined: 29 Mar 2012, 09:48

Post » 27 Apr 2012, 00:03

They will need it when I do my Advanced Mapping Tutorial (a part 2) which will include Custom Entities.

Camewel
Posts: 2996
Joined: 02 Feb 2012, 21:32

Post » 27 Apr 2012, 00:16

That's not mapping.
That's modding.

User avatar
Sentinel
Posts: 119
Joined: 29 Mar 2012, 09:48

Post » 27 Apr 2012, 00:45

Part 2 has mapping and then modding, but who knows I might change my mind and just dont do shit now.

I wanted them to see where the other graphics are located and where I will get smbtiles.png. Thats my reason why I wanted people to download Mari0 source and Love. I want people to see the source, making them a potential mapper/modder. How do you want me to make this tutorial? OH, heres smbtiles.png draw on it, save it as Tiles.png and put that inside your mappack folder. Done! I mean... wtf? Why not introduce them to the Source file and see how everything is built while I'm at it.

That is also how I learned how to create a mappack. I downloaded the source and when straight to the graphics folder to see how it works.

Camewel
Posts: 2996
Joined: 02 Feb 2012, 21:32

Post » 27 Apr 2012, 00:48

Many people will not want to make a map-pack because they think it's complicated to do. Why would you bring the source in when there's just no need at all? You don't need smbtiles to make a custom tileset. The whole point of a tutorial is to make something easier, not to make it overly complicated.

User avatar
Sentinel
Posts: 119
Joined: 29 Mar 2012, 09:48

Post » 27 Apr 2012, 01:09

I already told you why I brought up the source.

Installing files with instruction, posting pic as visuals, guiding people by example is overly complicated for you? The whole point of tutorial is to make something easier? Lol wth, Do you know what tutorial means? Anyway, if you think that I made this tutorial overly complicated by asking people to download mari0 source and Love... well, I apologize.

If you want you can make your own Mapping tutorial, then use your own template and not smbtiles because you dont need that according to you. Y'know something helpful for those people you mentioned. Something easier to understand... yea?

Sounds good? Ok.

Camewel
Posts: 2996
Joined: 02 Feb 2012, 21:32

Post » 27 Apr 2012, 01:24

You seem offended. Whoops.
Other than the whole source thing, this is actually a really well-made tutorial for things like pipes, flags, and making the tileset itself.

User avatar
Superjustinbros
Posts: 2119
Joined: 29 Mar 2012, 20:39
Contact:

Post » 27 Apr 2012, 13:11

I like the tiles you created. Very detailed remake of the original SMB.

User avatar
LightningFire
Posts: 1828
Joined: 10 Mar 2012, 17:24
Contact:

Post » 27 Apr 2012, 13:13

Thanks, Sentinel! Now I know everything I need to know.

User avatar
Nate*Rod*
Posts: 47
Joined: 10 May 2012, 03:11

Post » 13 May 2012, 14:44

You can also put in your guide how to edit/delete their blocks in case they screw up or something.
(Just a suggestion, don't get pissed.)

User avatar
Smiley43210
Posts: 2
Joined: 14 May 2012, 06:15

Post » 14 May 2012, 06:19

Sentinel wrote:...
What if I want it to be breakable too? Then add a pixel to the 3rd Column.
Image

Hey, make it so its non portable! Then add a pixel to the 6th Column.
Image
...
It should be

What if I want it to be breakable too? Then add a pixel to the 3rd row.
Hey, make it so its non portable! Then add a pixel to the 6th row.

Sorry, grammar/spelling nazi :P.

Also, this tutorial should note that the remaining space should be transparent, not just white. Sometimes, it's hard to tell, so for me, I make another layer, color it blue or something, and put it behind my working layer. This way, if its blue, I know it's transparent. Then, before I save it, I just delete the layer.
Last edited by Smiley43210 on 14 May 2012, 07:20, edited 1 time in total.

User avatar
Sky
Posts: 1283
Joined: 08 Mar 2012, 04:35
Contact:

Post » 14 May 2012, 06:32

Smiley43210 wrote:Sorry, grammar/spelling nazi :P
Don't worry, then. You'll fit right in.
Unless you're one of those alt accounts...
ASSUMING !alt_account, welcome to the forums!

User avatar
RWLabs
Posts: 796
Joined: 05 Feb 2012, 03:36
Contact:

Post » 14 May 2012, 07:13

Smiley43210 wrote:
Sentinel wrote:...
What if I want it to be breakable too? Then add a pixel to the 3rd Column.
Image

Hey, make it so its non portable! Then add a pixel to the 6th Column.
Image
...
It should be

What if I want it to be breakable too? Then add a pixel to the 3rd row.
Hey, make it so its non portable! Then add a pixel to the 6th row.

Sorry, grammar/spelling nazi :P
Normally I welcome newcomers by correcting their grammar. And here's a newcomer correcting an old hand.

User avatar
Smiley43210
Posts: 2
Joined: 14 May 2012, 06:15

Post » 14 May 2012, 07:22

RWLabs wrote:
Smiley43210 wrote:
Sentinel wrote:...
What if I want it to be breakable too? Then add a pixel to the 3rd Column.
Image

Hey, make it so its non portable! Then add a pixel to the 6th Column.
Image
...
...
It should be

What if I want it to be breakable too? Then add a pixel to the 3rd row.
Hey, make it so its non portable! Then add a pixel to the 6th row.
Normally I welcome newcomers by correcting their grammar. And here's a newcomer correcting an old hand.
Lol.

WillWare wrote:
Smiley43210 wrote:Sorry, grammar/spelling nazi :P
...
Unless you're one of those alt accounts...
ASSUMING !alt_account, welcome to the forums!
Nope. New. :)
Last edited by Smiley43210 on 14 May 2012, 07:23, edited 1 time in total.

User avatar
Sentinel
Posts: 119
Joined: 29 Mar 2012, 09:48

Post » 14 May 2012, 08:37

I thought columns go vertical and rows go horizontal... hm, it doesnt matter though most grammar nazis fail at their own grammar anyway.

User avatar
cavejohnson99
Posts: 185
Joined: 09 May 2012, 08:37

Post » 14 May 2012, 09:30

Smiley43210 wrote:
Sentinel wrote:...
What if I want it to be breakable too? Then add a pixel to the 3rd Column.
Image

Hey, make it so its non portable! Then add a pixel to the 6th Column.
Image
...
It should be

What if I want it to be breakable too? Then add a pixel to the 3rd row.
Hey, make it so its non portable! Then add a pixel to the 6th row.

Sorry, grammar/spelling nazi :P.

Also, this tutorial should note that the remaining space should be transparent, not just white. Sometimes, it's hard to tell, so for me, I make another layer, color it blue or something, and put it behind my working layer. This way, if its blue, I know it's transparent. Then, before I save it, I just delete the layer.
Correction: Hey, make it so it's non portalable! Then add a pixel to the 6th column.
:)

User avatar
BobTheLawyer
Posts: 2232
Joined: 01 May 2012, 21:00

Post » 31 May 2012, 21:17

Ok, so I can't download winRAR. Is there another way? I tried using the picture you had, but everything was misalligned...

User avatar
BobTheLawyer
Posts: 2232
Joined: 01 May 2012, 21:00

Post » 31 May 2012, 21:37

BobTheLawyer wrote:Ok, so I can't download winRAR. Is there another way? I tried using the picture you had, but everything was misalligned...
I can't get winRAR, but yours is no longer misalligned, I just don't know how to do it with paint...

User avatar
rokit
Posts: 2095
Joined: 03 Feb 2012, 00:47

Post » 26 Jun 2012, 22:02

I'm gonna hump this, for newcomers good.
Seriously, good thread.

User avatar
renhoek
Posts: 4545
Joined: 11 Feb 2012, 10:04

Post » 27 Jun 2012, 01:57

rokit boy wrote:I'm gonna hump this, for newcomers good.
Seriously, good thread.
I think saso should sticky this so you won't have to again later.

User avatar
rokit
Posts: 2095
Joined: 03 Feb 2012, 00:47

Post » 28 Jun 2012, 17:18

xXxrenhoekxXx wrote:
rokit boy wrote:I'm gonna hump this, for newcomers good.
Seriously, good thread.
I think saso should sticky this so you won't have to again later.
All in favour, say aye.
Aye.

User avatar
Jorichi
Moderator
Posts: 964
Joined: 11 Feb 2012, 02:08
Contact:

Post » 28 Jun 2012, 17:21

I concur (Aye).
However, if this becomes a sticky it should be kept up to date with new releases and changes at all times. So Sentinel should be willing to do that as well. But yes, it deserves to become a sticky in my opinion.

User avatar
renhoek
Posts: 4545
Joined: 11 Feb 2012, 10:04

Post » 29 Jun 2012, 10:52

Aye (hurr durr it wasn't obvious.)

User avatar
Assasin-Kiashi
Posts: 643
Joined: 07 May 2012, 10:21
Contact:

Post » 29 Jun 2012, 12:34

Sentinel wrote:They will need it when I do my Advanced Mapping Tutorial (a part 2) which will include Custom Entities.
wrote:which will include Custom Entities.
wrote:which will include Custom Entities.
NEEEEEEEEEEEEEEEEEEEEEEEED

User avatar
rokit
Posts: 2095
Joined: 03 Feb 2012, 00:47

Post » 29 Jun 2012, 13:44

Motion Passed.
Now someone, get Maurice!

User avatar
Sunset_Moth
Posts: 781
Joined: 02 Sep 2012, 23:22
Contact:

Post » 12 Oct 2012, 21:37

This has really helped me a lot. I'm sure the custom entities one will too.

User avatar
Bonko
Posts: 458
Joined: 13 Jun 2012, 00:59

Post » 24 Nov 2012, 02:21

I think this thread should be back at the top. It's very useful and helpful.

User avatar
Filio
Posts: 185
Joined: 04 Mar 2012, 19:01

Post » 24 Nov 2012, 17:39

Bonko wrote:I think this thread should be back at the top. It's very useful and helpful.
Sadly it's not as useful because the images are broken.
Especially the one that tells you what dot on the tileset does what.

User avatar
Bonko
Posts: 458
Joined: 13 Jun 2012, 00:59

Post » 24 Nov 2012, 18:54

Filio wrote:
Bonko wrote:I think this thread should be back at the top. It's very useful and helpful.
Sadly it's not as useful because the images are broken.
Especially the one that tells you what dot on the tileset does what.
Agreed. Someone should make a new thread that basically has this but with pictures.

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

Post » 26 Nov 2012, 16:57

Sentinel wrote:The whole point of tutorial is to make something easier?

If a tutorial doesn't make something easier to understand, what's the point?

But yeah, this is a good tutorial.

Post Reply