[Tutorial] Custom Map & Tileset for Newbies
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.
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:
Here is our original ground tile
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:
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.
Example:
Let's set our edited ground tile to Collision:true
What if I want it to be breakable too? Then add a pixel to the 3rd Column.
Hey, make it so its non portable! Then add a pixel to the 6th Column.
Um, I want it so its just a tile decoration. Then leave the whole column blank.
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?
+ Pipes!
-- Draw a pipe using your tiles and place the Down/Right Pipe Entity on it.
- 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.
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.
+ Flag
-- Place your Red F Entity where you want to place the flag, which will end your level.
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.
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.
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.
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:
Here is our original ground tile
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:
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.
Example:
Let's set our edited ground tile to Collision:true
What if I want it to be breakable too? Then add a pixel to the 3rd Column.
Hey, make it so its non portable! Then add a pixel to the 6th Column.
Um, I want it so its just a tile decoration. Then leave the whole column blank.
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?
+ Pipes!
-- Draw a pipe using your tiles and place the Down/Right Pipe Entity on it.
- 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.
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.
+ Flag
-- Place your Red F Entity where you want to place the flag, which will end your level.
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.
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.
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.
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.
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.
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.
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.
- Superjustinbros
- Posts: 2119
- Joined: 29 Mar 2012, 20:39
- Contact:
I like the tiles you created. Very detailed remake of the original SMB.
- LightningFire
- Posts: 1828
- Joined: 10 Mar 2012, 17:24
- Contact:
Thanks, Sentinel! Now I know everything I need to know.
- Smiley43210
- Posts: 2
- Joined: 14 May 2012, 06:15
It should beSentinel wrote:...
What if I want it to be breakable too? Then add a pixel to the 3rd Column.
Hey, make it so its non portable! Then add a pixel to the 6th Column.
...
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.
Don't worry, then. You'll fit right in.Smiley43210 wrote:Sorry, grammar/spelling nazi :P
Unless you're one of those alt accounts...
ASSUMING !alt_account, welcome to the forums!
Normally I welcome newcomers by correcting their grammar. And here's a newcomer correcting an old hand.Smiley43210 wrote:It should beSentinel wrote:...
What if I want it to be breakable too? Then add a pixel to the 3rd Column.
Hey, make it so its non portable! Then add a pixel to the 6th Column.
...
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
- Smiley43210
- Posts: 2
- Joined: 14 May 2012, 06:15
Lol.RWLabs wrote:Normally I welcome newcomers by correcting their grammar. And here's a newcomer correcting an old hand.Smiley43210 wrote:...Sentinel wrote:...
What if I want it to be breakable too? Then add a pixel to the 3rd Column.
Hey, make it so its non portable! Then add a pixel to the 6th Column.
...
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.
Nope. New. :)WillWare wrote:...Smiley43210 wrote:Sorry, grammar/spelling nazi :P
Unless you're one of those alt accounts...
ASSUMING !alt_account, welcome to the forums!
Last edited by Smiley43210 on 14 May 2012, 07:23, edited 1 time in total.
- cavejohnson99
- Posts: 185
- Joined: 09 May 2012, 08:37
Correction: Hey, make it so it's non portalable! Then add a pixel to the 6th column.Smiley43210 wrote:It should beSentinel wrote:...
What if I want it to be breakable too? Then add a pixel to the 3rd Column.
Hey, make it so its non portable! Then add a pixel to the 6th Column.
...
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.
:)
- BobTheLawyer
- Posts: 2232
- Joined: 01 May 2012, 21:00
Ok, so I can't download winRAR. Is there another way? I tried using the picture you had, but everything was misalligned...
- BobTheLawyer
- Posts: 2232
- Joined: 01 May 2012, 21:00
I can't get winRAR, but yours is no longer misalligned, I just don't know how to do it with paint...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 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.
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.
- Assasin-Kiashi
- Posts: 643
- Joined: 07 May 2012, 10:21
- Contact:
NEEEEEEEEEEEEEEEEEEEEEEEEDSentinel 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.
- Sunset_Moth
- Posts: 781
- Joined: 02 Sep 2012, 23:22
- Contact:
This has really helped me a lot. I'm sure the custom entities one will too.
Agreed. Someone should make a new thread that basically has this but with pictures.Filio wrote:Sadly it's not as useful because the images are broken.Bonko wrote:I think this thread should be back at the top. It's very useful and helpful.
Especially the one that tells you what dot on the tileset does what.