+ Gaming World Forums > Creativity > Game Design > Resources
+ Tileset tutorial
GWRadio
Username: Password: Duration:
 
Page 1 of 9
123>Last »
Topic: Tileset tutorial  (Read 44565 times)
Print
Ocean's Dream #1 August 04, 2007, 08:46:00 pm

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Tileset tutorial time! I encourage others to give tips on how they do tilesets too, so feel free to take over the topic with your own tileset tutorials.

First, you'll want to download the template chipset.
The pink parts are the upper tile section, and the browns are the lower tile section. The green/yellow areas are for auto-tiles, and the blues are for water tiles. The pink section in the top right is for animated tiles.


So, let's start working on something! I like to use Character Maker 1999, but you can use whatever program you want. I recommend one with a grid. Set the grid to 16x16. (In Character Maker, go to View->Character size, and set the values to 16x16).


Determine what area the tileset is going to be for. No need to make one tileset that works for every location, unless you're doing an NES style game. So, for this tutorial, we'll do a small town. Starting with the basics, just grass and crates.

Let's start with grass. You'll probably think: Put some green on a tile and I'm done! You actually could do that, there are games that do. Depends on what style you want. Grass is green, but you don't need to use just green to make it. More on colors later.

Do you want tall grass or short grass? There are many ways to draw grass. I'm going to do the blades of grass approach. First, I lay down the mid tone. I'll add shadows and highlights to it afterwards. Since the grass sticks out, I'll make the blades lighter. Then, I'll add a few shadowed areas to it. I think the blades of grass are too bright, so I'll make the bottoms of them a bit darker. For this, I'll work in 12x zoom so I can see what I'm doing. A lot of the times, you'll want to work in 6-12x zoom. I'm using only 4 colors for this. I won't go into tiling right now, but try putting a bunch of the tiles next to each other. If you see that it looks squarish, modify it (especially the sides) so that it looks more natural.


Zoomed in version:


Let's go to colors. People will sometimes talk about Color theory. So, let's bring up the color wheel.


So, it's a circle with colors, what's so special about it? It shows the complementary colors for each color, and colors in between the primary colors. Complementary colors is just the color opposite a color. So, the complementary color of green is red. The complementary color of Blue is orange. The complementary color of Violet is yellow. Look on the wheel.

How is that going to help us? Well, a lot of people just use a lighter version and darker version of the same color when shading. It can get pretty boring like that! Determine what color your light source is. If it's the sun, then it'll probably be yellow, unless it's a sunset or something. If it's at night, perhaps the street lights may give off a red or orange light. Once you know what color your light source is, use that color to help you pick out your highlights. Once you know your highlight color, you can pick your shadow color. The shadow color should be the opposite color of the highlight. Confusing yet? I'll give an example.

Look at the color wheel again. If your grass is green, and you have a Yellow light, you should make the highlights Yellow green or even Yellow. What's the opposite color of Yellow? Violet. So you would move the green over to the Violet side for the shadows, and maybe pick blue green, blue, or even Violet.

That's pretty much what we need for now. Contrast is another big issue. A lot of people tend to pick colors that aren't contrasted enough. You'll want your colors to be visible. Try not to take small steps when choosing a shadow color or a highlight (There are times when it's fine, so don't take it as a rule). Zoom out of your drawing, every once in a while to see if you can notice your shadows and highlights. On the left is an example of low contrast, which you can barely tell the difference between tones. On the right is an example of high contrast. I prefer to test contrast on a middle grey background (128R, 128G, 128B), rather than a white or black background.


One last thing about grass before we get to crates. Grass, roads, and other floor tiles shouldn't stand out too much, so try to make them about a medium green, medium grey, or any other colors that aren't too bright. If they're dark, you'll have to make the characters a bit brighter so they could stand out. Characters and objects should stand out, floors shouldn't.

Now, let's make an object, a crate. For starters, don't worry about shading in the beginning. Just draw it out. I'll start with a brown color, and use black as outlines. I like dark colored lines, but black will work fine for now. Remember to keep in mind the view point. Unless the game is side view, don't draw crates in flat side view, but rather have some of the top showing. I find commercial game chipsets a good reference, so I recommend you have one open to see while you're working on your own. Pictures can also be a good reference.

For objects, make the parts that stick out the brightest, and the parts in the back the darkest. For metal, you'll want bright highlights. For dull objects like wood, you'll want highlights that aren't as saturated. You don't have to use black to outline everything. You can start with it, but then use colors to make divisions. You don't need a black line to divide a bright color from a dark color, you can already tell the difference.





Okay, I'm running out of time (I'm almost off of work), so let me know what I could fix here, any info that I could elaborate on or that I didn't get right, or whatever! Feel free to plug in your own tutorials, continue this one, or outside links.

Walls are next.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Remove These Ads And More
A one time payment of $15 removes ads, and gets you premium membership features. Learn more!
Albelnox #2 August 04, 2007, 09:09:09 pm

Burn My Dread
***
Group: Premium member
Posts: 689
Joined: December 01, 2006
 
bravo! lovely tutorial =) i look forward to the rest of it.
__________________
   
Send E-Mail pm
King of Spooks #3 August 04, 2007, 09:22:38 pm

Tiger Style!
******
Group: Premium member
Posts: 2792
Joined: August 30, 2004
 
Lol character maker? The onyl way to roll is in ms paint.  Rite
Never really thought about the color wheel. But usually what I do is get a lot of colors and try to make textures by breaking down big spaces into smaller parts. This works well for dirt, grass, and cliffs. Once something is broken down and small it becomes easier to shade and will look good when it all comes together.

Another thing I do a lot is once I make a tile that's going to be repeating, I test how it will loop by pasting it into a 2x2 tile square so you can see all sides. Sometimes it's better to make a 2 by 2 texture to begin with so you have more variation. With color matching, I'll either look at some reference material or steal colors or something. :o

This seems like a dandy tutorial, but we all have our different styles and ways of doing things.
__________________

   
Send E-MailKing_of_Games363@hotmail.comGakaya363 pm
TFT #4 August 04, 2007, 09:30:14 pm

iam ghost ntyping
*******
Group: Premium member
Posts: 5577
Joined: April 27, 2004
 
It's been helpful to me so far, because I just now started spriting chipsets. But, I really need a wall tutorial. Hurry!
__________________
   
Send E-Mailpawpower@hotmail.comTwinFoxTailsConnect to IRChttp://www.myspace.com/myspaceissoscene pm
Ocean's Dream #5 August 04, 2007, 10:20:37 pm

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Quote
This seems like a dandy tutorial, but we all have our different styles and ways of doing things.
Yeah, and I encourage other people to post their styles and methods too. It's good to learn the shortcuts and things that people do. As you said before, taking colors from another source can be helpful to learn from.

Okay, I'll explain a bit about dithering and tiling. I'll show you how this relates to walls soon.

Since I started with coloring, I'll continue on with that before I go into tiling. Dithering is a way of blending 2 colors together without using a 3rd color. The most common type is a checkerboard pattern of pixels. It can also help to create some texture. However, do not overdo dithering!

Here are some dithering examples. You have a Red color and a Blue color. Instead of making a Purple color, I'll make a checkerboard pattern with both of them to make a Purple looking box. Also, I made some dithering between the blue and the red in the bottom to kinda blend them together without using another color.


You don't need to use checkerboard patterns for dithering either. Here are some other examples, and there are plenty more which you can do.


In Character Maker 1999, you can use these for dithering:


-Tiles-

Tiling is very important for chipsets. You don't want your grass to look boxy, and you would want bricks to look right. I like making a 16x16 tile, then using a 32x32 square, and placing 4 tiles in it to see how it tiles. You can also subdivide the grid, so you can work with 8x8 squares, or 4x4 or even smaller. Test it out, see which one of these 2 tiles correctly, and which one doesn't:


Remember, each tile has 16 pixel height and width. So if you divide a tile by 3, you'll get 5 pixels, 5 pixels, and 6 pixels, so you'll want to be careful with that. Also, be aware of the edges. That's frequently where you'll have to make sure it tiles from. Try not to outline the whole thing, because then it looks boxy, and when you tile them, the lines will be 2 pixels thick rather than 1. For reference, NES games and Gameboy games rely on tiles, because they can't do it from shades. They are good to learn from, so I suggest you check them out! Try not to make the floor tiles and the wall tiles look the same. Either make the wall tiles bigger than the floor tiles, or the floor tiles bigger than the wall tiles. If not, it'll just look like a recolored floor.

Walls will usually go from light (on top) to dark (on the bottom). They may also have a base which you may want to include. Here's a simple example wall. Flat light color on top so I can increase the height to however amount I want it to be. Then, the middle is a blending from light to dark. The bottom is the base. Unless you want all the walls to be the same height, you'll want one tile of it to tile correctly vertically. And the wall should tile horizontally as well. You might want to vary the shadows, so it's not just in a straight line. Be sure to check to see if it tiles correctly!


So after tiling them, I've made a set of walls like this:


I didn't get to draw them, but you may want edges for the walls too. This can be in the form of columns, straight lines, or another pattern at the edges of them so the wall doesn't just cut off.

Some wall tiles I've done in the past: (These are for Excalistia, so please don't use them in your project!)


I'll continue with this at another time.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
King of Spooks #6 August 05, 2007, 12:48:36 am

Tiger Style!
******
Group: Premium member
Posts: 2792
Joined: August 30, 2004
 
Alright, I'll share my 2 bit piece:
I look at Theo for inspirational, he uses all sorts of crazy shading or texturising of his buildings and stuff that blend like crazy. I try to take after that, using lot of colors to blend to try and get away from dithering. I know MnB uses dithering a lot and sometimes it's not always the best option. Also some of the gba sonic games use dithering in their panos but I prefer multiple colors coming together and blending Because it usually looks smoother. But it's funny, sometimes I make my rocks and cliffs too smooth lol.

I don't want to show any of my secret chips or panos so I'll show this ambiguous piece that I did for fun, it's half of the last supper:



Now I usually tend to work pretty messy especially when making the outline/line art aspects of a piece. This was definitely a challenge for me because I'm more used to nature than interiors and there was a lot space to fill up, but I think it came out pretty nicely, definatley good practice for textures and stuff. Do take note of the blending colors and stuff. I think I did use a bit of dithering on the table to contrast with the smooth floor and walls.

I find that cliff wall you did pretty interesting because I'm always trying to think of new ways to sue cliffs and that is def a diff appearance, which is refreshing to see.

For ref, I tend to look at a lot of snes games, like CT, SD3, what have you because I like the style and such, and also gba because they're a bit more complicated and detailed. Also you can see how they construct their maps by removing certain layers. it's cool because you can make something not look tiled by breaking something crazy down into little parts.

One thing I never understood is how some things, like LoG3 for gba and Theo and some SD3 use outrageous colors like purple to shade brown on some of their cliffs, very crazy how they make it work so I've kind of always wanted to do something like that. The way I see it, any color can shade any other color, what matters is the transitioning colors. If they blend well then it will work. that's why I like to try and blend 2 outrageous colors that you wouldn't think would look good.
__________________

   
Send E-MailKing_of_Games363@hotmail.comGakaya363 pm
Nessiah #7 August 05, 2007, 01:36:02 am

You're not man enough to make the algorithms to satisfy me
*******
Group: Premium member
Posts: 4114
Joined: March 18, 2007
 
I've been searching for ones like this *_*
Thank you ocean :D will you teach us the water tile too?
__________________
   
Division Heaven pm
Ocean's Dream #8 August 05, 2007, 01:38:44 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Nessiah #9 August 05, 2007, 01:40:45 am

You're not man enough to make the algorithms to satisfy me
*******
Group: Premium member
Posts: 4114
Joined: March 18, 2007
 
Yey!! I can't wait ^^
__________________
   
Division Heaven pm
Pipcaptor Hatsuya #10 August 05, 2007, 01:46:26 am

Psychedelic Rider?
****
Group: Member
Posts: 1182
Joined: August 06, 2004
 
Yah! I can't wait for more! I would like to make my own futuristic chipsets for my FotU and FRL (Faint Red Light) RM games!
__________________

In the Works:
[RM2K3::SFF-RPG] Wailing Mongooses in Gildepazzo

Under Hiatus/Literary Work mode:
[Lit/Rm2k3 :: Interactive Drama] NetGame Saga PROTOTYPE
[RMXP :: RPG] NetGame Saga
   
NetGame Crisis Saga PV pm
Ocean's Dream #11 August 05, 2007, 02:12:11 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Quote
I look at Theo for inspirational, he uses all sorts of crazy shading or texturising of his buildings and stuff that blend like crazy. I try to take after that, using lot of colors to blend to try and get away from dithering. I know MnB uses dithering a lot and sometimes it's not always the best option. Also some of the gba sonic games use dithering in their panos but I prefer multiple colors coming together and blending Because it usually looks smoother. But it's funny, sometimes I make my rocks and cliffs too smooth lol.
I'm not really a fan of Theo's stuff. I think they're pretty nice, but not my style, not bright and cheerful enough. I do get what you're saying though, and I'm not a fan of much dithering either.

I put some outside tutorial links in my previous post.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Kitsune Inferno #12 August 05, 2007, 08:03:47 am

Self-Proclaimed Sexy Beast
****
Group: Member
Posts: 1174
Joined: March 04, 2005
 
Ocean you godly person you! :o *inspired to make FFCC chips*
__________________
[insert something here]
   
Send E-Mailmaesteraleo@hotmail.comKILL JEFF Productions pm
Ocean's Dream #13 August 06, 2007, 03:36:13 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Okay, time for auto-tile fun!

So far we've made a grass tile, a crate, and some walls. I went ahead and made a dirt tile. I used some browns that weren't too dark or bright. The lighter browns are to make a rocky looking dirt, and the darks to be like little holes to give it some depth. You do not need to make it pure brown, use dirt path pictures or tiles as a reference. I also made some columns to be the sides of the building. I will go over rounded objects in the future. The base of it wasn't meant to be rounded.


We're still going to need plenty more if we want a tileset that isn't plain and boring to work with. How about some ceiling auto-tiles, dirt path auto-tiles, roads and such? Since there are 12 auto-tile sets, sometimes you may have more auto-tile sets available than you need, and if you're running low on space in the lower tiles, you can put some in the auto-tile section. All you have to do is copy the one tile to all of the tiles in that auto-tile set, like so:


Let's start with the ceiling auto-tiles, as they tend to be pretty simple. Then, by example, I'll show you what goes where in the auto-tiles. There are 4 rows of 16x16 tiles per auto-tile. The 1st row is for when you place only 1 of the auto-tile (The tile on the left), and for the corners of the auto-tiles (The tile on the right). The bottom 3 rows are for the corners, sides, and the middle of the actual auto-tile.

Let's start with a pure black. You may use a dark unsaturated color instead of black, it's up to you. Fill the bottom 3 rows with that black. For the top row, fill only the tiles to the left and right, leave the middle one empty. The middle tile in the top row is useless, so you'll frequently see it empty.


We're going to outline the auto-tile. You can put any design you like, but we'll keep it simple for now. Just a 3 pixel wide line around it. How about a blueish color for it? A solid color will do for now. Leave the top row alone for now. You can make the line thicker or thinner if you'd like, but try not to go over 8 pixels wide. For shading it, ceiling auto-tiles usually go from light to darkest near the middle of it. So I'll color the inner most line a darker blue, and the outermost line a light blue. This is the easy part.


There are 9 tiles total in this bottom section. The 4 corners are only use at the edges, obviously. The 4 sides (Excluding the corners) will be tiled when you want to make it longer or wider. The middle 16x16 tile is the one that will fill up all the space in the middle, the other 8 tiles are just an outline for it.

In the top section, the top left tile is how it would be if you only place one tile of the auto-tile on the map. Make it like a mini version of the bottom 3 rows. Shouldn't be too tough, especially if it's just a rectangle.


Now, let's go with an 8x8 grid. Go to the top right tile that's still plain black. In an 8x8 grid, there will be 4 parts of the 16x16 there that can be used to make the corners. Here's what I got for mine (Zoomed in), I'll show you how to do yours. Testing this out in RM2K3 while working on it would be helpful.


I recommend making a new file, a small one, like 96x96 or something. It's time to work on the corners. Here's something which could help you avoid the guesswork. Take the black tile, place it in the middle. Take 2 corner tiles (The same corners), and place them as you see in the picture.


Notice how there is a gap between the 2 corner tiles? Your task is to connect them together. (You can also make other designs there, but let's keep it simple for now). Once you've done that, unless your other corner tiles have very different designs and aren't the same when rotated, you can just use that tiny corner piece and copy it over and rotate it to fit the other sides. Like so:


This resulting tile will be placed in the top right tile of the auto-tile. You're set, try it out! One last auto-tile and I'll call it a night.

I'll work with the dirt auto-tile this time. Let's put some grass around it so it isn't square when you place it on the map. Since grass can cover other auto-tiles as well (Like taller grass, roads), I recommend making a new auto-tile with just grass tiles. We're going to work off of that, and leave it so we can copy it over other tiles and reuse it.

Similarly to the previous auto-tile, we're going to go to the bottom 3 row section. Determine what you're going to use for the background color when you import the chipset. With the chipset template, it'll be pink, so use that pink. As in the previous auto-tile, you do not want the grass to be over 8 pixels wide for each tile. To save time, once I finish one side, I'll just flip it over and copy it to the other sides, and make the middle tile a flat pink.


For the top section, do a similar thing for the top left tile as you did for the previous auto-tile. You'll want the grass on the outer edges of the 16x16 tile, and the pink in the middle.


Now for the corners for the top right tile. Remember what we did for the previous auto-tile? Again, repeat the same process. Place 2 corners together with the pink in the middle. Connect the 2, and copy over and rotate that piece in the tile.


So now, you should have a grass auto-tile that's ready to be copied over to whatever you want. I suggest that unless you already have the grass auto-tiles you need and need the auto-tile space, to keep it as is. Go back to the dirt auto-tile. Make sure the pink is selected to be a transparent color before you copy it. Then, paste it on top. All you'd need to do then is make the shadow colors for when the grass/dirt meet.


So, this is the resulting chipset!


And a sample silly map:


I'll go over water tiles another day, I got home late today. I hope it isn't too complicated! Let me know if you have any questions.

Hint 1: As I said before, you can use auto-tiles if you run out of room in the lower layer. Either put single tiles and make it as an autotile, or if you have a set of tiles that are meant to just be made in a square (Stairs are actually a pretty good example of this), you can use that too.

Hint 2: If you hold shift while placing auto-tiles, you'll just place the middle tile of the bottom section of it, like if you were placing a regular tile. It could be very useful, so try it out!
__________________

Last updated 1/11/09
   
Ocean's Dream pm
SW #14 August 06, 2007, 03:44:15 am

Croquette LawnChair
*****
Group: Member
Posts: 1220
Joined: December 15, 2006
 
Nice tutorial Ocean. *saved*

__________________
Sprites and Stuff
   
pm
Ocean's Dream #15 August 06, 2007, 05:33:40 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Thanks! I hope it ends up being helpful.

For those who aren't using RM2K3, but are using another maker, talk to the person who's coding the game for them to give you info on how auto-tiles will work in their game. It may not be the same as in Rm2K3/RMXP (They may only need 9 tiles instead of 12 for example), and sometimes there is no auto-tile support and you have to consider the corners and everything into each tile. I believe Isometric games usually don't have auto-tiles.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Kitsune Inferno #16 August 06, 2007, 06:57:54 am

Self-Proclaimed Sexy Beast
****
Group: Member
Posts: 1174
Joined: March 04, 2005
 
Great job! All I need now is trees and I can begin my forest chipset :D
__________________
[insert something here]
   
Send E-Mailmaesteraleo@hotmail.comKILL JEFF Productions pm
ImmortalDreamer #17 August 06, 2007, 07:07:35 am

Guilty By Design
****
Group: Premium member
Posts: 897
Joined: September 10, 2006
 
This is definately helpful as I've been doing a lot of editing on the GS chipsets I'm using.
__________________
   
Send E-Mailimmortaldreamer17@hotmail.comMortalDreamscapeDark Matter Studios pm
tsimehC #18 August 06, 2007, 07:32:06 pm

***
Group: Member
Posts: 353
Joined: May 20, 2007
 
Very helpful. I got a bit confused on the colour wheel and some of the dithering aspects. I don't tend to make chipsets as I only rip and edit. Thanks for the tips though, very useful.
   
pm
Ocean's Dream #19 August 06, 2007, 08:10:56 pm

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Hmm. Well, for the color wheel, all you really need to know is what color light is lighting the object/wall/whatever. So if it's the sun, it'll be a yellowish light. The opposite color of that in the Color wheel is what should be used for the shadows. So if you look that up, it'll be Violet. So objects outside will generally have yellow highlights and violet shadows.

If you're inside, and the lamps give off green light, look up the opposite color of green. Red, so you can use red shadows and green highlights. Similarly for blue light, you'll have blue highlights and orange shadows. You do not need to follow this exactly, but it could be helpful and make your colors more interesting than just a lighter or darker version of the same color.

As for dithering, it's just a pattern of pixels in between 2 colors so you don't need to make a new color to blend them.
http://en.wikipedia.org/wiki/Dithering#Digital_photography_and_image_processing
http://acadies-art.sparrowzworld.net/tut-pixel-project003/tut-pixel-art-3dsphere.html

And I'm sure you can find plenty more dithering tutorials/explanations around, as it's pretty widely used. As I said before, try not to overuse dithering.

I'll start water tiles later tonight.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Klean #20 August 06, 2007, 10:35:22 pm
*****
Group: Premium member
Posts: 1421
Joined: November 07, 2003
 
There is a thread in graphic arts for tutorials, maybe you should post a link to this thread in there so this thread is always remembered.
   
pm
Ocean's Dream #21 August 07, 2007, 12:29:19 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Okay, I did that! I have a few other pixel tutorial links that I post every now and then so I've placed those there too.

Time for water tiles. There are actually 2 ways to go about this, I'll go over the first method before I do the second.

Method 1:

We'll need to go to the upper left corner of the tileset, where the blues are. Those sections are the same size as auto-tiles, but for method 1, they do not work exactly the same as auto-tiles. The lightest blue section is for one terrain meeting the water, the one next to it is for another terrain meeting the water. The darkest blue section is for varying the types of water tiles, so you can go from light to dark.

First, let's ignore terrain and just concentrate on making a water tile. Now, what you're probably thinking of is BLUE. Well, you very well could use blue. However, consider what type of world your game takes place in. A more realistic world may use more browns and dull blues or greens in it rather than a bright blue.

For puddles, I recommend you use a dirt tile and make a transparent layer above it, and color it in a slight blueish or brownish. It should be darker than the original tile, though. (For reference, check out the Rudra forest chip). Photoshop or Graphics Gale are good for those layers, just make sure you first put it on RGB mode first, put a transparent layer above it, merge the layers, then put it on indexed (8 bit) mode.

For the Ocean, it tends to be more blue. Google up some pics of the Ocean. Here's an example one: http://www.bigfoto.com/sites/galery/photos14/croatia-ai5_primosten.JPG
See the area with light lines on the bottom right side of the picture? That's generally what's use as a reference when making water tiles. Let's start here:


Quite honestly, for some games you can get away with having a flat blue that doesn't animate for a water tile, or maybe one that just has a sparkle animation on only a few of the water tiles. Other tiles have a very simple animation that consists of moving some pixels slightly. Try out the tiles in RPG Maker to see if they flow well.

However, I'll do a water tile kind of like the RTP one. The RTP water tile is the only one I know of that has the water go brighter when it animates, so usually I'll just have the water move and not change color. I'll go with 2 blues for now, when I need more I'll add some more. Put down the base color (Which should probably be the darkest) first and leave it as a flat color.

We have to treat the water tile like a tile. So when placed together, they should fit together right without looking odd. So, I made a first pass water tile with only 2 colors. I mainly made circles within the tile, so use the circle tool if you'd like. Here's the tile, the zoomed in version, and an example of how it tiles on the bottom, I recommend you do something like that to test how a tile tiles, and pay attention to the edges of the tiles too. The lines on the bottom of the tile should match up to the ones on top, the top left corner should match up to the bottom right corner, etc.


I'll place some highlights to make it look bright. Try not to make it too bright as you don't want the water to stand out that much.

Now to animate it. You have one tile already, you need 2 more. The animation works like this (Unless you specifically tell it not to in the RM2K3 tileset section): 1st tile, 2nd tile, 3rd tile, 2nd tile, and back to first tile where it can repeat. You could try redrawing them so it looks like it moves. There's 2 shortcut methods you can use also, though they might not always give the best results. First one is to flip the water tile vertically for the 2nd tile, flip it vertically again but then flip it horizontally for the 3rd tile.

The second method is to move it either up and right/left a few pixels for each tile, or down and right/left for a few pixels. This will make it look like it's flowing in a certain direction. I don't have a gif maker here, so I just made a sheet with all 3 methods here:


You can take the darker water tile, use the circle tool, take a transparent color, and get rid of the middle of it. Take a look at the image so you see what I mean.


So the first row in that section is the lightest water, the second row is the dark water with the light water in a circle in the middle, the third row is light water with the dark water in a circle in the middle, and the 4th row is for dark water.


Method 2 of making water tiles:

Now that we covered animating water tiles, and we covered auto-tiles, we can combine them. This has the benefit of making a more natural looking water boundaries, plus you can it animate for however many frames you'd like. Do not post all the frames of the animated water in the auto-tile, you only need one water tile.

We'll do the animation by making multiple tilesets that are exactly the same, except for this water auto-tile. Make as many tilesets as you want frames of animation. So if you have enough for 6 frames, then make 6 tilesets.

Use a parallel process event to change the tileset, and a wait command of about 0.1 seconds, with maybe another 0.0 seconds or so. Have it cycle through all the frames of animation so that it loops correctly. I do not have an example of how this works, but look at DE's site, and look at the Seiken Densetsu 3 tilesets. Some of them are meant to be used in this way. Check out the Sub-Zero snowfield chipsets, and while they look the same at first, if you use them to do the animation you'll realize that they aren't.
http://members.lycos.co.uk/lune/tilesets/Seiken%20Densetsu%203/

That's all for now, the water meeting the terrain may take up some time so I'll cover that another day. Let me know if you have any questions, tips, feedback, or whatever!
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Ocean's Dream #22 August 09, 2007, 12:01:38 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Okay, now for the continuation of the water tiles!

We need to make the water tiles work with the terrain edges, otherwise it will look very boxy instead of natural. We're going to work with the top left 2 sections that we have ignored in the previous post. These 2 sections are for the water meeting a terrain, so that means we can only have 2 of them. Pick which 2 would suit your map best, usually it'll be grass and dirt, though you can have it meet with rocks or a man made boundary.


So, we'll do a sand one, and then a grass boundary. Set your grid to 16x16. While you don't really need to do this for a sand boundary, usually grass boundaries have a bit of height over the water, so you'll see a bit of brown right under the grass. Take a look at the RTP.

We'll focus on only 1 column for now, as the rest would be copy and paste. Ignore the water for now, all we're going to be doing is the boundary. Taking a look at the RTP again is a good reference for how you should be setting it up. The circle in the middle is for the top row, the vertical lined ones are below it, the horizontal lined ones are below that, and in the bottom is either the corner parts, or just plain water, you may not even need to put the corners.

This is how mine looked like, with the tiles shown seperately in the middle, and enlarged ones to the side.


You'll want the vertical lined ones to tile vertically, and the horizontal ones to tile horizontally, if not, it'll look odd.

Copy this column over to fill the section. I recommend placing a copy of the whole thing off to the side somewhere, either in a new file or in an unused part of your chipset.


Now, fill that whole light blue section with the animated first row of water. The first frame of the water should always be in the left side, the 2nd frame in the middle, and the 3rd frame to the right. Copy over the section of grass you made before and place it over the water (Obviously making sure the area in the middle is transparent). Giving us this:


Now that the grass is complete, let's do the dark sand beach terrain. Since I already have the grass part still to the side somewhere, I just make all of the grass into one shade of brown. If you notice beaches, the sand that meets the water is flat.


But let's make a white foamy line around it, and animate it so it looks like waves are going on the beach. So I'll make a blueish/white line around it. For the 2nd column, I'll move that line back 1 pixel, and I'll push it back furthur for the 3rd column. I did vary the pixels a bit because I didn't really like how it looked if it all went back a pixel.


As you did before, copy it onto the animated water onto the dark blue section that's left. So for this corner, the only things left should be the animated tile pink section. Here's our chipset so far.


Trees will be next. Take a look at some trees, either around you or in Google images and see which ones you like. If there's anything in specific you want me to cover (Either of what I already said, or something I haven't done), let me know.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
King of Spooks #23 August 09, 2007, 12:07:43 am

Tiger Style!
******
Group: Premium member
Posts: 2792
Joined: August 30, 2004
 
Make a post about cliffs. I'm a cliff specialist, and I would love to see your method and style of cliffing.
__________________

   
Send E-MailKing_of_Games363@hotmail.comGakaya363 pm
Ocean's Dream #24 August 09, 2007, 12:11:35 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Sure, I'll do that after I do the trees, then. Cliffs are a tough one. I don't claim to be a cliff specialist so anyone who's worked with them before should also give their tips on doing them. If you can, KoG, it'd be good to hear how you do them as well.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
King of Spooks #25 August 09, 2007, 02:13:08 am

Tiger Style!
******
Group: Premium member
Posts: 2792
Joined: August 30, 2004
 
Trust me homie, I could write a book on cliffs. *cracks knuckles*

Ok, the basic and most fundamental part to cliffing is to know what kinds of cliffs there are. We'll use MnB for examples.
There are 3 types, they are:

1.)Grass Cliffs: The standard cliff with a grass ground to form the ledges, the most common kind of cliffs.
Example:


2.)Dirt Cliffs: Less common than grass cliffs but use a dirt base type ground to form ledges.
Example:


3.)Cliff Cliffs: Yeah laugh at me for my terminology. I only ever seen cliff cliffs used in pokemon, it's like a rare lost form of cliffs. It's when the  ground that forms the ledges are not dirt or grass but rather more cliff, like a rock floor.
Example:

Notice how the roof of the cliff isn't ground? It's made of more rock, genius! Rite

Ok. Moving on to cliff formulas. There are about 3. They are:
1.)Round: When the ledges of the cliff form a circle.
Example:


2.)Diagonal Cliffs: The ledges are still straight but the corners flow in a diagonal formation.
Example:


3.)Square Cliffs: All sides and corners use straight line. I haven't seen this used outside rtp, though the MnB cliffs used as examples for grass and dirt cliffs follow a more rounded square ledge,so it would still be categorized here.
Example:


Each formula comes equipped with cliff ends, which are the parts that connect corner tiles to corner tiles and/or straight ledge pieces.

Ok, so those are your basic formulas. You can do some cool stuff with them like mix-matching diagonal and circle or whatnot. In fact SD3 chips use both like that. However these formulas are limited, so you need to take it to a whole 'nother level. How?

Well, with rough edges extensions of course. There are 3 ways to do this. They are:
1.)(I don't have a term for this one.): Basically it's like you continue the rock pieces that make up the cliff and close them off so that the cliff isn't just a straight line done because of the tile.
Example:

Not the best example, but you should get the idea.

2.)Hourglass indentations: Cliffs are curved inwards.
Example:

I love SD3 cliffs, they've been a main source of inspiration for me.

3.)Also nameless: Basically it's a far extension that looks like a triangle, plus 2 downward diagonal wall corner pieces. What on earth do I mean? Uhm, example:
----I.)Formula:

------II.)Example of formula applied to cliff:

Notice how the pieces can warp the cliff into an hourglass-esque effect or protrude like to our right. It's more flexible than the hourglass form and open up new opportunities for cliff shape making.

If you put these techniques together, oh boy, you can get some crazy shaped cliffs that don't look as tiled as they are. So when making or editing chips for cliffs, take these various formulas into consideration and apply them accordingly.

Well who cars aout this junk, ur a freak. What about spriting, this is a spriting topic.
--Yeah well before you start making your own cliffs, you have to understand your options to design them well.

As for techniques that can be used by applying these formulas, I leave that to you. Tomorrow I''ll post about actually spriting cliffs, because this took 13+ yrs to write.
__________________

   
Send E-MailKing_of_Games363@hotmail.comGakaya363 pm
Ocean's Dream #26 August 10, 2007, 12:56:44 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
While KoG takes care of the cliffs, I'll go over the trees.

We've been mostly working with the left side of the chipset. Now we're going to jump over to the right side of the chipset, with all the pink. First, you'll want to determine how big your trees are. If it's an NES style chipset, a 16x16 tree could work. Otherwise, you'll usually want it to be at least 3 tiles tall, I go for around 4 or 5, and 3 tiles wide. It's all up to you, really, you could even do just 1 tile wide, like FF6.

Before we actually start going into trees though, we'll go over curves. Curves aren't exactly easy to pull off in pixel art, especially if you're not using a circle tool. Usually you end up making diagonals instead of the curves you want.

For curves, think about slopes. In this example, I made a 16x16 curved line that I enlarged to 96x96. So, it starts off with a 4 pixel line. Then a 2 pixel line. Then goes all the 1 pixels in between. At the end of the slop, 2 pixel line, then a 4 pixel line.


Another example. Looking at the circle tool is actually helpful for learning how to make curved lines.



Before I go into Tree tutorials, here's one by East in a topic long time ago:
http://www.gamingw.net/forums/index.php?topic=38160.msg561539#msg561539

Now, I'm going to use up a 3 tile width and 5 tile height for the tree. You can experiment with any height, though I'd recommend you don't go too tall because of the limited tile space. Feel free to experiment with horizontal trees as well, it is after all only limited by what you think up (And the tileset restrictions again).

You are free to make whatever design you want for them. I recommend going to Google images and looking up various trees. Try looking up a Baobab Tree for fun. There are plenty others too. Here's another thing to consider: What colors will you use? You may be thinking brown and green. Well, you could for some trees. Try going outside and observing various trees. You'll notice that some of them don't even really have brown trunks. You don't have to stick with green leaves either. You could even do Purple if you want.

I'll start with the tree trunk first. I'm taking the pencil tool and just drawing out the basic shape. I'll fill it in with one dark brown color, the same I'm using for the outline. In the bottom of the trunk, I'll put in some transparent pixels. This is so that it looks like the trunk isn't completely going over all of the grass. You could also just draw the grass directly on there if you'd like. If you're wondering about the detached part, it's because roots sometimes go under the ground and back over again.


There are a few ways to do the leaves. First, as it is done in the East tutorial, make one batch of leaves that will be tiled over. I have one made here:


And then tiled onto the tree. I made some of the branches stick out a bit.


Or you can draw the leaves in kinda like how you did the trunk, with one flat color.


In this case, remember that it's not really a good idea to draw out every single leaf. It's unnecessary. Also, the trees tend to go from light at the top to darkest at the bottom. The middle of the tree should be the brightest, because it sticks out most. The make the tree have more depth, you should have the middle the brightest while the sides would be darker. I skipped a few steps here because I forgot to save them, but I think you get the point.


Take a look at this tree so you see what I mean: (Not made by me)
http://www.seremeres.com/uploads/images/Portfolio/Pixel/tree_sheet.png

Add a midtone to the trunks. Check out tree textures, or make your own. I encourage you to play around with making textures with the colors, you can make horizontal stripes, vertical stripes, diagonal stripes, curved lines, whatever! There are 2 curved lines in here that were based on the slope thing I did earlier.


Then, adding a highlight.


Here's the resulting map and chipset:


__________________

Last updated 1/11/09
   
Ocean's Dream pm
Ocean's Dream #27 August 14, 2007, 12:02:02 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
This isn't dead, I was just working on my ALEX III entry!

So now, it's off to do canopies. They're very nice things to use for forests. So, how about we get started on that?

We'll start with a 3 tile x 3 tile box. You don't have to, but I'll do it here so that we can take a look at the whole canopy section at once. I colored it a dark green, it could be any dark color you want, including black. It doesn't even need to be a solid color, you could have a leafy texture to it if you'd like.


I'm starting with the lower middle tile. Here's a step by step picture:


There are 2 versions there. The top one is smaller, and I was playing around with the bottom to get a more leafy version. With these, you'll see that it generally goes from light to dark. Make sure they tile horizontally! (For the tiles on the sides, they need to tile vertically)

Now, once you've done that, you can go ahead and copy it and rotate it 90 degrees. Copy it again, rotate 90 degrees. Copy it one last time, rotate again. That way, you have all 4 sides without having to redraw them.


We have the corners to worry about now. Let's go ahead and take care of those. Take a corner part, and the sides that are next to it. We have to make sure the corner fits well with them. The sides will be a reference so you can connect them. I didn't number the steps, but I'm pretty sure you know the order.


Go ahead and do the rotation thing with them too so you don't have to redraw them 4 times.


Looks done, right? Wrong! Check this out:


We need to fix that. We'll need 4 more tiles, but as before, you can copy/rotate a tile, so you only really need to do one. Put two of the same corner tiles together, and put the tile in between so you can work on it. Here's another step by step thing:


Copying/rotating... you'll want to have it seperate from the section we did before. There should be only 4 tiles in this one.


Then, place it on the tileset. If you have transparent parts (Which you should have), then it'll go on the upper layer side. Then we're done with that. You may want to make some new tree trunks for it as well, so follow the previous tutorial post for that.


So here's an example map. I used the same tree trunk as I had in the tileset, due to laziness and the fact that I'm at work.


And we're done! Let me know what you want to have covered next.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Casey and His Brother #28 August 14, 2007, 12:17:24 am
... why we still got monkeys?
******
Group: Premium member
Posts: 2566
Joined: January 26, 2005
 
after you officially complete this tutorial I will probably compile your posts into a single downloadable file if I'm not too lazy
__________________
   
Send E-Mail pm
Ocean's Dream #29 August 15, 2007, 12:07:23 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Thanks Nerdo!

Flower power! Yes, this tutorial will be about flowers.

You might think "But flowers are easy! Just draw some dots on a tile and you're done!". Sure  you can. Drawing flowers isn't really going to be the main focus of the tutorial, it's more going to be about color division.

I'll ignore the putting dots on an upper tile part because you shouldn't need a tutorial for that. Let's get to some actual flowers! I recommend looking up google or taking a look at chipsets like Seiken Densetsu 3 for inspiration.

We will be using the pink upper layer side for most of these. However, you don't need to, and there are a few alternatives. You can place them directly on a grass tile and put them on a lower layer to save upper layer space. You can place them in an animated tile space so they can animate. You can also put them on a characterset sheet so that you don't use up the upper layer, and you can use the flowers anywhere without needing to add them to another tileset.

Let's start a flower. Since 16x16 would be too easy, I'll go for 2 tile height instead. I looked up some flowers on google, and found this. This is what I'll use: http://emiliewood.com/photos/june2005/7-june-05-flower.jpg

So, I'll start with the stem. I don't care that I'm not seeing the whole flower, I'm not going to dedicate that much space for it. If I find that I need more, I'll edit it later. Solid color, I'll worry about the shading later.


The flower itself is pinkish/purplish. Ignore the lines and lighting, just get the basic shape down. You DON'T need to put in all the details, even in the finished sprite, so feel free to simplify it. I thought Pink was going to be a bit harder to use as a background if the flower is pink, so I changed it to medium grey. It's my preferred background.


I'll take a lighter pink and outline the different petals.


Before I go on with the flower, I'll talk a bit about color divisions. This means that instead of putting black outlines, you just use different colors to show the divisions. This is very useful in regular sprites since you have a 24x32 limit. An example sprite to show what I mean. Outlines everywhere in the first version. You don't need an outline if the colors are different enough! If the characters pants are green and the shirt is blue, players aren't going to mistake them just because they don't have an outline! I'm not saying never to use outlines, but sometimes they aren't needed, and could allow you to put in more pixels.


Back to the flower. I added some highlights to the stem, and to the left side of the flower. Since I had the tree lit from the left side, I want to keep that the same. I put some grass tiles on the side and placed the flower on top. The stem needs to be brighter for it to stick out, as it blends in too much.


So, added some highlights. I put the place on the grass tile to test it out. We're pretty much done with this flower. Forget all the lines and stuff the flower had in it. The flower isn't 640x480, it's 16x32. You don't want to over detail something, especially at that size.  I could have used a darker outline as well, but I didn't feel like it.


And the resulting chipset:


Yay! That's all I managed to get in today, I'll start a tutorial on Roofs and Fountains next.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
tsimehC #30 August 15, 2007, 02:01:34 am

***
Group: Member
Posts: 353
Joined: May 20, 2007
 
Yay! I eagerly await your fountain tutorial.

Was the tree made from scratch? It's colours look perfect.
   
pm
Ocean's Dream #31 August 15, 2007, 02:08:15 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Yeah, the tree was made from scratch. I put the 4 colors I was going to use on the palette, and just modified them a bit as I went along. Since the grass isn't very bright, it was pretty easy to make the tree stand out by having a higher contrasted colors.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Ocean's Dream #32 August 16, 2007, 12:15:51 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Fountains are nice for decoration in a town. Let's try one!

First, you should have in mind what type of fountain you want. Some can get really ornate, others are like round pools with water shooting up in the middle.

The water animation can be done with charactersets, I would recommend that. For right now, let's focus on just the shape of the fountain. Simple and round, star shaped, triangle, multiple levelled, want it to be a sculpture? You have many options.

But since it's more or less an introductory lesson, let's leave the cool designs for another time. We'll do a simple round one and see if I have time to do another one.

I made a new file that's 48x64. So, 3 tiles wide, 4 tiles tall (Remember, each tile is 16x16, so you'll want to have multiples of 16). Usually I don't make the base of the fountain very big, I'll make it 2 tiles tall. You can certainly change it, but I wouldn't make it too tall as you'll want the characters to be able to at least see the water.

The circle tool will be useful here. Try not to make the circle too tall, as this circle is for the bottom and you'll need one for the top. My circle that I made was 48 pixels wide, and 20 pixels tall.


Copy that circle, and place it above. How high you place it will make the fountain seem taller or smaller. You can continue a process like this if you want to make the fountain have multiple layers, but we'll ignore that for now. I recommend making the space between the bottom and the top an even number, it's better for tiling purposes. 4 in particular is a good one.


Connecting the sides... We'll have to remove the parts that will not be seen. That's next.


Since we want water to be in this part, we'll get rid of the line that was there. Still ignoring the shading, that we'll do after we're done with the basic shape.


Use the circle tool, and draw a circle right in here. This is for the top part of the fountain, where some people sit on. You can make it wide or narrow. Don't worry too much about getting a perfect circle. You can copy one side and flip it over so it matches on both sides:


We have a few options now. We could make the fountain taller by adding another level in a similar way (But smaller), we could make the water completely still and place it directly on there, we could put the parts that will overlap the water into a characterset, or build the fountain into the ground, and make the circle in the middle transparent so you can put the water tiles underneath:


Let's do the last one that I said. So for now, all I did was place flat colors on the fountain. Each of them different so I don't get them mixed up. The water one and the ground one will later be transparent, but I'll deal with that once I get there.


I made myself a floor tile. You can check it out here, I made a zoomed in version to the right. I will go more into floor tiles and bricks another time. In the mean time, just try to divide the tile into equal sections. You can make 4 squares inside the 16x16 tile if you want to try out a floor tile for now.


I will place the fountain on top of this floor tile, because I figure that I will only use the fountain when it's on that floor tile, and it will make my life easier when it gets up to water. This step could be left until later if you don't feel like having the floor tile distract you.


I'll use a dark grey for the fountain, and change the outline color to a dark purple. I tend not to like black outlines, if you like it, keep it.


I was looking at a fountain picture on google. So I'll use lines going around the whole fountain. The floor tile is removed here because I wanted to do some mirroring (Copying the left side and flipping it over)


The lines on top are straightest in the middle, then they get more diagonal, then end up horizontal at the sides. Ignore the back, you don't really need them there, though you could follow the same thing for that.


I made the lines anyway:


I thought the dark purple was too strong, so I made it a lighter gray. This is the same gray that's used for the fountain base.


Remember what I said about color divisions? Yeah, we'll use white instead of the dark purple to make the distinction between the top and bottom.


Making the back of it darker... still using the same dark color as the base.


I used the dark purple in the outline and made some pattern at the very bottom of the base. The light gray on top I used as highlights for the top of the base. The middle part should be brightest, the sides should be least bright so it looks curved.


Now, to put a place where water will come out from.


Filling it in with a solid color. This pole is closer than the back of the fountain, but not as much as the front of the fountain. Also, it doesn't need too much shading because there will be water coming out of it.


I put a highlight in the center of the pole.


Now, to worry about the floor. Do what I told you before, put the floor tile down, then copy the fountain on top, making the green the transparent color.


So, make that blue center into the transparent color. You'll place this fountain on top of water, so you don't have to worry about animating that yourself. If any of the waters boundaries show up (Like say, grass), then place the water while pressing Shift.


Use charactersets to make the water animate. Try putting a few blue and white dots and spraying them around. You could also do a waterfall type thing instead. I won't help with this part because I'm out of time.

Here's an example map:


And here's our chipset:


These are all the colors I used for the fountain:


And the colors in the whole tileset (Some are still from those boxes that the template chipset came with)
__________________

Last updated 1/11/09
   
Ocean's Dream pm
King of Spooks #33 August 16, 2007, 01:19:41 am

Tiger Style!
******
Group: Premium member
Posts: 2792
Joined: August 30, 2004
 
Alright I'm ready for part 2 of cliff making.

Now that you know the basic formulas and structures and kinds of cliffs, it's tyme to make thy own, ya digg? How to do this, aye? Well step one is line izart, you could stroll up right in there with straight white and black to keep it simple as.

Here is a small sample:


Alright, lemme break it down like this. This is a sample of a cliff pano I did that shows you the technique and my style of working.

1.)This is a sloppy as sketch to show you the idea of what you want. Basically scribbles that are subject to change but get the thoughts and positions out there.

2.)Step is pretty sloppy also, but it's like you add vertical lines because that's the style cliff it is. Just more outline scriblles.

3.) this is our final line art. This is what we do when we revisit the messes of step 2, you erase and draw lines for realez and clean it up to add definate and more fine details. Also layout colors for grass/ground and maybe whatever color you want the cliff to be.

4.)This is where we add the shading and whatnot. Go ahead, say it's pillow shading :'(. Naw, the the idea is to come back to this central theme that I mentioned before, which is breaking things down into smaller sections to make them easier to shade. With cliffs it's incredibly easy because they're rock formation walls that are broken into little rock sections that are shaded individually so when it all comes together it looks real smooth. Also notice how I threw in some horizontal  lines to break the basic shading pattern.

That's free-form straight up pano, a bloody beatuiful thing.
Now when thou art making chips, it's a bit different. Basically what you have to do is the method above, though maybe reduced since it's smaller like not as much planning and work is involved. The difference is, you need to:
1.)Apply the texture and technique to a cliff forumla.
2.)Check to see if your tiles loop, you know, like they're seamless.

One neat trick to throw in is to make :O 2 tiles of vertical straight cliff wall to add some variation. That way instead of rapidly repating one tile, you can have it like 4 tiles to make the repeating pattern. The beauty is, you can just keep expanding the pattern size to as many tiles as you want to make some unique not repating and interesting cliffs.

Also you can add things into the cliff wall to break the pattern like platforms or pillars, or such of the like.

That's just about everything I can really think of for cliffs. Oh actually, it's a fabulous idea to look at irl pictures to get a feel for how rocks are and how real cliffs can look mad crazy. A lot of pictures I've found inspire me to make cliffs in similar patterns for a realistic and unique look, ya feel.

Also cliffs don't always have to be brown, that's like the default color for them. I'm a big fan of white cliffs, but you can also get crazy with like blue or purlple or whatever color. Is like I said before, you can mix any colors and make any colors work so make some wacky epurrments and try something funak-a.

Some of these are some real mouth-hangers:
http://images.google.com/images?q=cliff&ie=utf-8&oe=utf-8&rls=org.mozilla:en-US:official&client=firefox-a&um=1&sa=N&tab=wi

So that's my 2-cent 2 part guide to cliffing. Hit me back with questiones if ya gut 'em.
-Peace.
__________________

   
Send E-MailKing_of_Games363@hotmail.comGakaya363 pm
Quickening #34 August 16, 2007, 01:36:48 am

So... do we have a deal?
***
Group: Member
Posts: 501
Joined: March 06, 2005
 
Oh crap, you guys are good...
And I've got an idea for a oval-ish diamond shaped fountain all of a sudden. Happy
__________________
   
Send E-Mail pm
Ocean's Dream #35 August 17, 2007, 12:58:19 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Okay, my version of the cliff tiles:

First off, I think it's important that it tiles, moreso than any other factor. Cliffs need to be of mapped in various heights, so you need to take that into account.

Cliffs tend to have horizontal lines. Strata. So, you can decide how you will have your cliffs. Boulders stacked on top of each other, sharp pointy rocks, cylinder rocks, or just layers of rocks (Strata, again). You could even have it be natural looking and resemble intertwining tree trunks.

Obviously we'll take the easier ones for this tutorial. We could go Zelda style and have just stripes around, but that's a bit too easy. Let's try boulders stacked on top of each other. I was going to go with a Cylinder rocks like Secret of Mana, but you need a 32x32 tile for it to go well, and I want just a 16x16 tile.

Actually, I'll go ahead and say it, very frequently you may need more than 1 tile for cliffs. Adding some hanging vegetation, rocks sticking out or even just to tile better for bigger rocks.

What color shall we use? Brown tends to be common, so I'll use that. As KoG said, you don't have to stick with that! Color the whole tile in with a fairly dark brown. I set 4 colors aside this time, it's what I'll use for the cliffs. The dark brown, 2 medium-ish browns, and a light color. Look at the Contrast thing in the first post to get an example of what type of contrast to use.


Now, I've been kinda avoiding tiling, but it's really going to be necessary here. Here's what I think you should worry about first with tiling: The edges. Take a look at this example tile (And the 32x32 version). The light blue lines would connect with each other (Top and bottom), and the light green lines would connect with each other (Left and right). Test it by placing that same tile to the left, right, above, and below the tile.


Keeping that in mind, time to start working on the boulders. They should be fairly big, not like little bricks (Which is why 4 16x16 tiles for it might work better). But 16x16 will be fine for now. Use the 2nd darkest tone to draw the outlines for the rocks. As we did for the previous one above, let's focus on the edges first. You can make half boulders so that it tiles more naturally. Here's an example (Normal tile, double sized, and showing it tiled):


Focus on first having it tile before you go making it looked cracked and like real boulders. Make them of varying sizes to make it interesting. It's actually a similar approach to how I did the water.


Trying to make it more irregular looking rather than nice round smooth rocks. Also, try not to have the line width be too wide. Keep it at a pixel width. I thought the rocks were too small. I looked at the tile I had before, and tried to find some interesting looking rocks there, and just make them bigger. Had some tile issues dealing with too many straight lines, so I worked on that too. It could take some erasing and redrawing so don't get worried if it doesn't look right on the first try.


I think I'll use this. Shading time! Base of the rocks should be darker, and consider both light sources, cracks, and overlapping rocks. Rocks in the back will be darker. I'll use a lighter brown this time, not the lightest yet. This can be a bit tough as you have to remember about the half rocks around the edges and the corner ones in particular. Just tile them, check it out and experiment with that. You don't have to do smooth shading, you can experiment with patterns, dithering, and cracks.


I'll add the highlights now. If I don't like the colors, I could always modify them later.


I didn't like how flat it looked, so I brightened up the highlight and the 2nd tone.


Okay, so I'll place it on the tileset. There's lots more to be done, so I'll cut it here and continue another time! I need to make the sides, the part on top, and work on the horizontal banding I see.


Map:


EDIT- As I see now at my home computer, the tiling is worse and more obvious than I thought it was, so I'll go around and fix it up a bit.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Ocean's Dream #36 August 17, 2007, 06:51:11 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Part 2 of Cliff tiles!

Okay, this took a bit of time. I spent 10-20 minutes trying to make this tile work well. Keep looking at the tiles as a group, and see if you find a horizontal band, or something that sticks out badly. (I do not have the tilesets or tiles already made, I make them and work on them as I go)


Perhaps it would have been easier to make a 32x32 pattern that tiles. Well, learned the hard way! Now, we have the front part of the tiles. What's next... we could do the sides.  You can redraw the tile if you'd like. You have to make sure it tiles diagonally. I rotated my center tile, and I think it works well enough. You might want to give that a shot, or just editting your front tile. Once I have one side, I just flipped it and got the other side.


Determine your light source. If you have an extreme left light, you might want the left side to be lightest, and the right side to be darkest. If it's a center light source, you could have both sides be of either a normal color or have them both darker. Purples and blues are a good shadow color to use, but check the color wheel first!


Now to chop off the bottom sides. You can do it in a diagonal way, or in a more curved way. Remember the curved lines tutorial I did above. I did diagonal because the rocks ended up working well like that. Obviously these will go on the upper layer instead of the lower layer.


Now, take a tile that you'll use for on top. Usually it'll be grass. We're going to have to cut a diagonal out of it. I think you know where they belong, especially based on this image:


I tried tiling the side diagonally, and discovered that the bottom side tile didn't work well. So, make sure that they end up at the top or bottom most corner. Look at the blue arrows in the bigger 32x32 version:


Take half off of the grass tiles on top for the sides. Diagonally of course.


Problem we have right now is that if we put that on grass tiles, no one will be able to tell what the top is. We need some dividing sections between the normal grass and this one on top. I made one, a repeating pattern. You can experiment with different types of dividers, you can even use a line if you'd like. 2x zoom version in the right:


For the sides, I made a pattern that works with the diagonal one I made. Here's a 2x version of that too. I made a 2 pixel tall rock, then repeated it throughout. For the top, simply rotate the side.


To save space on the upper tile area, we'll put just the bottom parts of the cliffs, and the very top row there. Everything else will go in the lower layer.


Test map:


Not truly perfect, but with some more editting it can get better. This one was a tough one, so expect to spend some time on it!
__________________

Last updated 1/11/09
   
Ocean's Dream pm
K0LE #37 August 17, 2007, 02:04:32 pm

PROrea isseo?
*****
Group: Premium member
Posts: 1223
Joined: January 23, 2004
 
Why hasn't this been stickied yet?!

good stuff Ocean!
__________________
   
Send E-Mail pm
SpyFox #38 August 17, 2007, 02:54:47 pm

***
Group: Member
Posts: 556
Joined: September 12, 2006
 
This tutorial is awesome Ocean! And yes it should get stickied.
__________________
My WII GH3 friend code: 189104287923
Brawl code: 193-2113-7169

PSNAccount: spyfox45(also my youtube account)

   
kalle.ljungdahl@hotmail.com pm
ImmortalDreamer #39 August 17, 2007, 04:17:03 pm

Guilty By Design
****
Group: Premium member
Posts: 897
Joined: September 10, 2006
 
Why hasn't this been stickied yet?!

good stuff Ocean!

Jeff & ATARI are being slack. :gwa:
j/k guys...
__________________
   
Send E-Mailimmortaldreamer17@hotmail.comMortalDreamscapeDark Matter Studios pm
Ohlichris #40 August 17, 2007, 05:29:49 pm

Mistery Solving Musician
*****
Group: Member
Posts: 1412
Joined: July 29, 2005
 
This really is a useful thread! I made both a grass tile and a dirt tile.



That's my grass tile.
__________________
   
Send E-Mail pm
 
Page 1 of 9
123>Last »

« Previous Thread | Return to Forum | Next Thread »
Currently active: 0 members and 3 guests are viewing this topic
0 Members
Jump to:  

Gaming World Forums | Powered by SMF 1.0.6.
© 2001-2005, Modification by leafo & ramirez. All Rights Reserved.

Page created in 0.564 seconds with 22 queries.