Jump to content


Photo
* * * * * 6 votes

Guide to simple tileset edits [Rearranging, clumping and recoloring]

tiles edits mapping

  • Please log in to reply
49 replies to this topic

#1 Indrah

Indrah

    Maker of silly games

  • Member+
  • 1,122 posts
  • LocationSpain
  • Primarily UsesRMVX Ace
  • First LanguageSpanish

User's Awards

           

Posted 21 July 2012 - 08:01 AM

This is my second tutorial and a bit more technical than the one I did before, so please bear with me if I have a harder time explaining myself.

Guide to simple tileset edits

Once upon a time I submitted a mapping tutorial, and towards the end mentioned:
“Simple edits and recolors: Everyone can do this, and it helps a lot to create ambience. You may find that repeating, for example, the same weeds and flowers in fields over and over across the world gets old. It’s simple enough to recolor the flowers or make a simple cut/paste job to come up with new items. Small objects like flowers and single tile decorations are usually simple to cut and combine.
There’s also recoloring. The same grassy tiles can become a different map just by changing the colors (making the coloring greyer, more vibrant, a different tone, whatever) same goes for walls and floors.
So if you ever feel like those trees, caves and stones are looking boring, crack open a graphics editor and mess with the tiles a bit.”


That said, I rarely see people posting screenshots of edited tilesets that are NOT parallaxes (those usually go hand in hand with editing so no need to mention them here), and there seems to be the fact that some people claim they could not “do that sort of thing”.

Simple edits can go a long way, and give the dreaded “RTP style” a fresh look if used well.
Now, what I will describe here is extremely basic. I will not talk about complex editing because frankly, I can’t do it myself so well, nor will I explain how image editors work in detail: there are many tutorials out there and help files to help you out, I will only give basic instructions.

There are roughly 3 very simple techniques: rearranging, clumping and recoloring.
-Rearranging is by far the easiest, it simply means moving the tile around in the grid so it has a different position (for example, moving furniture so they line up better with the walls).
-Clumping is to combine one or more tiles in a pattern so they create a cohesive and visually nice tiles. It’s usually done with plants (for wilderness natural effects) and small items.
-Recoloring means changing the color of a tile. This can mean changing the color of only one part of the tile or the entire thing (such as the bloom of a flower or the whole plant, leaves and all).


A few things before we start:
Spoiler


I won’t be fiddling with the A tiles except for recoloring the basic grass, since autotiles require some knowledge and I’m not here to explain that. What we will do is simple: create an edited tileset for a new area.
I’ll be making a sample map of a shop in a forest so we can illustrate the change from the default to the new edited tileset.

The very first thing you should think about:
What are you doing?
Even if for the purpose of this tutorial I’ll be editing almost all the pieces for the tileset, that doesn’t have to be what you do. Maybe you simply need a few extras or adjustments to an existing tileset, in which case you may want to simply edit a tile sheet directly.
But let’s say you want to make a thematic tileset. For this tutorial, as I said, we’ll be making a forest area with a small shop, but we will make it all slightly different so you can see all the steps.

Gather your materials.
Get all the materials you think you will need beforehand. The default tileset, the custom materials, stuff you found on the forum (don’t forget to credit the creators when you’re done!), anything you feel you will need.
If you’re doing an entire tileset, copy one of the default sets (Interior/Outside/Dungeon) from A (1 to 5) to B (B to E are all the same, so one will suffice. Rename them to whatever you want. Especially for the A tiles, it’s important to have some reference to work with so you don’t accidentally mess up the autotiles.
Those will be the final images you will import into the game. I strongly recommend you use another, larger image file to do the editing so you have the space to comfortably manipulate the tiles.

Ok, now off we go!

Rearranging
Spoiler


Clumping
Spoiler


Recoloring
Spoiler



So now that we know the three ways of simple edits we can mix them all to create our tileset. Here we have all we need for our little forest shop. To make things easier on ourselves, we will do the recoloring first, then the rearrangement and clumping.

Posted Image


Now what’s left? Arranging them on your tileset sheets. Keep in mind the sheet size (512*512) and make sure you align the tiles to the grid well.
Here we added the recolored A2 tiles to an existing Ouside_A2 tile, and created a new B tile:

Posted Image


Posted Image


Import the tile sheets and configure the tileset.
Remember that if the tileset setup is similar to a default one you can save time configuring passabilities by copypasting a tileset and substituting and fixing the new tiles.

And we’re done! Now to map the bastard!
Here, have a before and after (if we had tried using the normal exterior and interior tilesets).

Before: [with default RTP tiles]

Posted Image


After: [with new edited tiles]

Posted Image


Not bad for a quick editing job, is it?
This was done in a very shallow way, so putting even a little time into the process makes a difference. Above all, it breaks the “I’ve seen the rtp tiles seven thousand times already” feeling.

There are many more ways to edit tiles out there, but I’m not going to get into that.
Cut-pasting, changing size and angle; I recommend you experiment a bit to see what works and what doesn’t. Learning to use the image editors is a big factor to editing, so be patient and start small.

I hope this helped and encouraged people to try their hand at simple edits!

Edited by Indrah, 21 July 2012 - 09:13 AM.

  • Chaos17, Mihel, Lunara and 21 others like this

starfavorsupport.png
My latest game and first solo effort, made in a week!Its cute and silly, I can promise that XD
hyk3l7s.png
VFl4vJK.pngIsoI_support.pngDUffFil.png

My youtube channel

Let's Plays/Try of RM games and other stuff(Lots of cursing and horrible accents ahoy)

Click here for my profile with the full list of projects and games.


#2 SolarGale

SolarGale

    Learning

  • Member+
  • 240 posts
  • LocationUnited Kingdom
  • Primarily UsesRMVX Ace
  • First LanguageEnglish

Posted 21 July 2012 - 08:28 AM

Excellent guide that really does help to bring the tileset editing concepts together. Good organisation and explanations, great work Indrah! :3
My Stuff:
Posted Image

I support:
Spoiler

#3 Irili

Irili

    Star Gazer

  • Members
  • 269 posts
  • LocationTexas
  • Primarily UsesRMVX Ace
  • First LanguageEnglish

Posted 21 July 2012 - 09:12 AM

It's amazing what a layer function in an art program allows you to do. Nice tutorial Indrah!

aiOAsFG.png

 

Succession_button_new.jpg

I support:

Spoiler

#4 Lunarea

Lunarea

    Artist

  • RPG Maker Web Staff
  • 5,867 posts
  • Primarily UsesRMVX Ace

User's Awards

     

Posted 21 July 2012 - 09:25 AM

Thanks for sharing, Indrah! I'm sure this will help a lot of developers who want to make their tiles a little more unique. :)
My blog:
DevBlogSig.png
My current projects:
TUAH-userbar.png
Userbar-ST.png

#5 TempestSilver

TempestSilver

    Wiscapalian you figure it out heehee

  • Members
  • 12 posts
  • LocationNo where
  • Primarily UsesRMVX
  • First LanguageEnglish

Posted 07 October 2012 - 08:19 PM

You saved my hide! My close friend is making me tiles and you had the sheet size, the way to do it and EVERYTHING. :D I am having her make the tiles and then I will arrange them as needed on the a tile template. :3
May all good things come to you
May nothing whatsoever harm you
May your heart be light
May your travels be safe
May your health be good
May your mind be sound
May your friendships sustain you
May you be blessed in every way

#6 Paladin-Cleric of Awesome

Paladin-Cleric of Awesome

    Writer

  • Early Adopter+
  • 884 posts
  • LocationIreland
  • Primarily UsesRMVX Ace
  • First LanguageEnglish

User's Awards

           

Posted 12 October 2012 - 01:10 PM

Yup really helped me. Finally found something I can do well. Lol.

minirescue_zpsdf09f5fb.png

http://forums.rpgmak...c/33977-rescue/

Rescue! My new WIP Game!

 

oNtIzMW.png

http://forums.rpgmak...ric-of-awesome/

Check out my Tomb of Lost Art 'Becoming Family' story.

 

My Maps of Awesome Shop (if anyone's interested)

http://forums.rpgmak...aps-of-awesome/

 

My blog charting my pet turtles

http://thenotsomutantturtles.blog.com/

 


#7 TreeTopOcelot

TreeTopOcelot

    Advanced Member

  • Member+
  • 144 posts
  • LocationSaint Louis, Missouri
  • Primarily UsesRMVX Ace
  • First LanguageEnglish

Posted 12 January 2013 - 09:31 PM

Outstanding guide! Thanks! :D

Whenever you feel alone, you're not. You've always got someone that loves you, and if you think you don't, I love you. Because the world can never have enough love. :)


#8 Slayer

Slayer

    Member

  • Members
  • 25 posts
  • Primarily UsesRMVX Ace
  • First LanguagePortugues (BR)

Posted 25 January 2013 - 06:52 AM

Thanks for sharing this.

It gonna help me a lot.

 

Does this work for Icon/Iconset too?



#9 Indrah

Indrah

    Maker of silly games

  • Member+
  • 1,122 posts
  • LocationSpain
  • Primarily UsesRMVX Ace
  • First LanguageSpanish

User's Awards

           

Posted 25 January 2013 - 07:26 AM

Yes and no. Icons have a different grid size (24*24 I think?) and they're harder to do "rough" edits for because they're pixel art. You can still try though. (Recolors and small manual edits are possible, yes).


starfavorsupport.png
My latest game and first solo effort, made in a week!Its cute and silly, I can promise that XD
hyk3l7s.png
VFl4vJK.pngIsoI_support.pngDUffFil.png

My youtube channel

Let's Plays/Try of RM games and other stuff(Lots of cursing and horrible accents ahoy)

Click here for my profile with the full list of projects and games.


#10 Indrah

Indrah

    Maker of silly games

  • Member+
  • 1,122 posts
  • LocationSpain
  • Primarily UsesRMVX Ace
  • First LanguageSpanish

User's Awards

           

Posted 25 January 2013 - 07:27 AM

Yes and no. Icons have a different grid size (24*24 I think?) and they're harder to do "rough" edits for because they're pixel art. You can still try though. (Recolors and small manual edits are possible, yes).


starfavorsupport.png
My latest game and first solo effort, made in a week!Its cute and silly, I can promise that XD
hyk3l7s.png
VFl4vJK.pngIsoI_support.pngDUffFil.png

My youtube channel

Let's Plays/Try of RM games and other stuff(Lots of cursing and horrible accents ahoy)

Click here for my profile with the full list of projects and games.


#11 Titanhex

Titanhex

    Academy Headmaster

  • Members
  • 299 posts
  • LocationIn my office.
  • Primarily UsesRMVX Ace
  • First LanguageEnglish

Posted 25 January 2013 - 09:31 AM

Amazing tutorial. Glad someone revived it. I couldn't have made it better myself. I believe this is something all game makers should read after grabbing GIMP and I'll be sure to direct graphic drawing questions here.

 

I wanted to suggest, and I hope I'm not overstepping my bounds, adding the Contrast/Brightness tool to the tutorial.

 

Brightness in particular has been useful for me. It's the difference between the pictures below:

 

24913029.png

 

As you can see under L/D (Light & Dark) there's no discrimination on what receives a whiter or blacker tint. Whereas B/C (Brightness Contrast) works together alongside color and saturation to lighten and darken smartly.

 

This is a feature in GIMP too I believe, and I think it works the same. This feature has saved my ass more than once by cutting work!


Edited by Titanhex, 25 January 2013 - 09:44 AM.

  • mbncd likes this

Ace Academy: Practice Through Roleplay
Ace-Academy.gif

Come Join!


#12 baka

baka

    Member

  • Members
  • 22 posts
  • Primarily UsesRMVX Ace
  • First LanguageEnglish

Posted 26 January 2013 - 04:12 AM

Amazing,

The clumping and Recolouring is going to help me a lot :D !



#13 Zack

Zack

    Perverted King of Demons

  • Members
  • 228 posts
  • LocationRight behind you; breathing down your neck.
  • Primarily UsesRMVX Ace
  • First LanguageEnglish

Posted 22 February 2013 - 11:04 PM

I've spent a long time creating a really nice tileset for the main antagonist's castle, but I can't figure out how to make the background invisible without those little white spots by everything in the tileset.



#14 Indrah

Indrah

    Maker of silly games

  • Member+
  • 1,122 posts
  • LocationSpain
  • Primarily UsesRMVX Ace
  • First LanguageSpanish

User's Awards

           

Posted 22 February 2013 - 11:06 PM

I've spent a long time creating a really nice tileset for the main antagonist's castle, but I can't figure out how to make the background invisible without those little white spots by everything in the tileset.

....? I'm sorry, I have absolutely no idea of what you mean. What little white spots?


starfavorsupport.png
My latest game and first solo effort, made in a week!Its cute and silly, I can promise that XD
hyk3l7s.png
VFl4vJK.pngIsoI_support.pngDUffFil.png

My youtube channel

Let's Plays/Try of RM games and other stuff(Lots of cursing and horrible accents ahoy)

Click here for my profile with the full list of projects and games.


#15 Zack

Zack

    Perverted King of Demons

  • Members
  • 228 posts
  • LocationRight behind you; breathing down your neck.
  • Primarily UsesRMVX Ace
  • First LanguageEnglish

Posted 22 February 2013 - 11:08 PM

When I export it and turn it into a png file, I'm left with a white background. I then import the file into my editor and set the white background to transparent. I'm left with little white spots by every item in the tileset and it looks really unsightly. My guess is that I need to avoid the white background, but I don't know how.



#16 Indrah

Indrah

    Maker of silly games

  • Member+
  • 1,122 posts
  • LocationSpain
  • Primarily UsesRMVX Ace
  • First LanguageSpanish

User's Awards

           

Posted 22 February 2013 - 11:17 PM

Are you using a semi decent program? I honestly dunno why that is. If you're using a normal graphic edor like gimp or similar, set an alpha layer (transparent background isntead of a color) and save it like that (so it doesn't have a background at all) and import that.

 

If you're already saving it in png format, I don't know what else it could be.


starfavorsupport.png
My latest game and first solo effort, made in a week!Its cute and silly, I can promise that XD
hyk3l7s.png
VFl4vJK.pngIsoI_support.pngDUffFil.png

My youtube channel

Let's Plays/Try of RM games and other stuff(Lots of cursing and horrible accents ahoy)

Click here for my profile with the full list of projects and games.


#17 Zack

Zack

    Perverted King of Demons

  • Members
  • 228 posts
  • LocationRight behind you; breathing down your neck.
  • Primarily UsesRMVX Ace
  • First LanguageEnglish

Posted 22 February 2013 - 11:19 PM

I've been using gimp; although I don't think that I've set an alpha layer. I'll go try that right now.

 

EDIT I've worked for a long time, and I've came out with something I love. What do you guys think of it?

 

Attached File  Evil Hand Castle 2.PNG   203.93KB   47 downloads

 

I threw the map together in a few minutes; it doesn't contain all my edits either. I edited everything in the map by myself.

This tutorial is really great. It was easy to follow and It helped me learn how to use gimp effectively in fifteen minutes. I'm

never going to have to scour the internet for graphics again. I'm so liking and following. If more people read this tutorial,

we probably wouldn't have to endure the hideous evils of the RTP as much.


Edited by Frosty Zack, 23 February 2013 - 12:24 PM.

  • servantb7, mbncd and whitesphere like this

#18 Dark_Metamorphosis

Dark_Metamorphosis

    What a horrible night to have a curse.

  • Members
  • 725 posts
  • LocationSweden
  • Primarily UsesRMVX Ace
  • First LanguageSwedish

Posted 23 February 2013 - 02:12 AM

I've been using gimp; although I don't think that I've set an alpha layer. I'll go try that right now.

 

When you create a new project, make sure to set the background as transparent instead of background. After that just insert the tileset like you normally would.

If the tileset isn't transparent to start with I can see some trouble with small color parts remaining after using the magic tool. Just make sure that you add a alpha layer and then zoom in and erase the small parts with the magic tool. That usually works like a charm.

 

Also, I love this tutorial! I'm gonna make some recolored tilesets now to break the repetitive tiles of my game. I find it hard to keep everything consistent while still not making it repetitive.. Also gonna try the clumping, and rework some of my maps :)

 

This tutorial has also helped me in the process of making my own charsets! The grid works really well for that, and I've had times where I have placed the actors outside of the grid by accident before. This tutorial will prevent that aswell, so now I use it for that too, thanks alot!


Edited by Dark_Metamorphosis, 23 February 2013 - 02:19 AM.

  • mbncd likes this

'You have been doomed ever since you lost the ability to love.'

 

Infected with the sickness..

My current project:
ViolentWhispers_zps3b2d4014.png
 
 

Some of the games I support:

Spoiler

 


#19 Tigersong

Tigersong

    Furry Fellow

  • Members
  • 305 posts
  • Primarily UsesRMVX Ace
  • First LanguageEnglish

Posted 25 February 2013 - 06:59 PM

Quick query- how does one save in the .png format instead of exporting?


"My home is not a place. It is people, sir." Aral Vorkosigan

 

"Easy isn't for Jedi." Corran Horn

 


#20 Indrah

Indrah

    Maker of silly games

  • Member+
  • 1,122 posts
  • LocationSpain
  • Primarily UsesRMVX Ace
  • First LanguageSpanish

User's Awards

           

Posted 25 February 2013 - 07:10 PM

They are unrelated. Png is a format, exporting is a function.

If you are referring to when Gimp pops up with the exporting when saving a file option:

Png format does not use separate layers, so when you select png format it will need to combine all layers for the result picture. When it asks you if you want to export as a png, just say yes.

(Basically it's warning you that it's going to save the picture and lose the separate layers).


starfavorsupport.png
My latest game and first solo effort, made in a week!Its cute and silly, I can promise that XD
hyk3l7s.png
VFl4vJK.pngIsoI_support.pngDUffFil.png

My youtube channel

Let's Plays/Try of RM games and other stuff(Lots of cursing and horrible accents ahoy)

Click here for my profile with the full list of projects and games.






Also tagged with one or more of these keywords: tiles, edits, mapping

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users