+ Gaming World Forums > Creativity > Game Design > Resources
+ Tileset tutorial
GWRadio
Username: Password: Duration:
 
Page 9 of 9
« First<789
Topic: Tileset tutorial  (Read 44558 times)
Print
Ocean's Dream #321 May 02, 2009, 06:17:17 pm

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
I've been posting in my blog updates on this and have forgotten to post them here as well. I did some basic tutorials like going over "8 bit color depth issue" which I assume people here already know, so I'll leave that in the blog if you want to check it out.

This is based on a doorway in Summon Night. I was going to go try a similar doorway but change up the patterns and stuff so it doesn’t seem like a direct rip. It’s not exactly the same but it’s close.


I think the hardest part of this is the lighting for the spiky parts of the doorway. Why isn’t it all a flat color, why is the highlight right below the middle but it’s dark just above the middle? Well, we’ll have to go to the previous tutorial on coloring protruding shapes. I can’t even remember the name of it, but it has a bunch of curves in it. Basically, when a part protrudes most, that is the part that is brightest. That’s why it looks like it sticks out. Think of this shape as a 3, but you’re looking at it from in front of the 3. The pointy parts that stick out most are going to be brightest.

The easy part was that I only had to do one side. So I did half of the image, then mirrored it (Copy/paste and flip to make the other side). Then you see the result when I stick the 2 wall parts together on the bottom.
__________________

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!
Ocean's Dream #322 May 02, 2009, 06:19:20 pm

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Here is the recording

Final result:
http://oceansdream.deviantart.com/art/Factory-2-71473097

This is a recording of me pixelling the bg shown above. The original video length was 2 hours and 10 minutes or so, I had to speed it up so I could fit it on youtube. So no, I’m not that crazy fast, in fact, it’s amusing watching it. I don’t think it’ll be too helpful process wise at this stage, but I already had this video so I might as well.

I should have done more hue shifting with the colors, yellower for highlights and purpler for shadows makes a big difference. This was recorded for a class, so I was on a tight deadline and it’s an earlier work. So yes, feel free to say it wasn’t helpful or that the result isn’t good or whatever, I’ll try to do better next time.

I plan to do some in the future of smaller things, so the process is clearer and I don’t have to speed it up 3200000x. I need a better video editting program too.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
SW #323 May 05, 2009, 02:44:00 pm

Croquette LawnChair
*****
Group: Member
Posts: 1220
Joined: December 15, 2006
 
That door looks awesome. Glad you still keep this going.
__________________
Sprites and Stuff
   
pm
Zatham #324 May 08, 2009, 05:57:02 am

My Opinion
***
Group: Member
Posts: 465
Joined: June 08, 2003
 
Yeah, that looks incrediberry.
   
Send E-Mailmister_styles@hotmail.comZatham pm
Ocean's Dream #325 June 11, 2009, 07:04:01 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
May 2nd is the last time I did something here?

I need to update it more. Are there any suggestions for me on what I could do for this?
__________________

Last updated 1/11/09
   
Ocean's Dream pm
King of Spooks #326 June 11, 2009, 07:15:16 am

Tiger Style!
******
Group: Premium member
Posts: 2792
Joined: August 30, 2004
 
I don't think you've done tech base yet, maybe some futuristic tiles to contrast all the flowers and trees and stuff.
__________________

   
Send E-MailKing_of_Games363@hotmail.comGakaya363 pm
Ocean's Dream #327 June 14, 2009, 11:32:41 pm

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
I've done some, but they were a few tile pieces for RM2k3s resolution. That's a good idea, I'll give it a shot after I finish up this cave tileset that I've been asked to do earlier.



I started with the basic shape that I wanted. I didn’t the ceiling to feel too squarish so I wanted to have some variation there.

I started with the color red. I actually took the 4 colors I was using at first off of a Sword of Mana tile. I had saved a bunch of those and a Seiken Densetsu 3 one for reference. More on that later. But yeah, I just wanted something to work off of, I wasn’t going to keep those colors.

I wanted a stalagmite type of formation on the bottom of the cave wall. Then little stalactite like formations around, you can probably see that most on the right/left side walls. As in the Cliff tutorial I posted before, you’ll want the tops of them to be lightest. I could have simply made one tile for the front and one tile for the right side cliff which then I could mirror, but I figured I’d have some variation. For reference on the side walls, I looked at Seiken Densetsu 3 cliff sides. So no, I didn’t just imagine it up.

For the ceiling, I’m using one color. Then one color to basically outline it. I could make the outline thicker if I want.

For the floor, I tried to make it look rocky, so I scattered a few light pixels here and there, and some dark pixels for depth. You’ll want to test how it tiles so that it doesn’t look like a bunch of connected squares. You could even make multiple types for variation, which will make the tiling even less obvious. For floors, try not to make the contrast too high. I did at first only to show where I put the shades/highlights, but you’ll want them just slightly visible without sticking out too much.



The next part is adding some stalagmites, and some other objects around the cave. I have HW to do so I'll leave that until I'm done with it.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Ocean's Dream #328 June 16, 2009, 09:16:53 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
OK, onto part II of the caves. Here, I'll be doing these things: Adding new side walls so I can hang stalactite supports on them, changing the floor color to match the cave, making an alternate version of the floor tile, cutting out a part of the walls at the edges so it looks more natural,adding some ambient lighting to the walls, adding a plant, and stalactite supports going horizontal and vertical. Sounds like a lot, but a lot of them are simple and can be done in a few minutes.



So here's the whole sheet. I'll post a testmap shortly.

1) On top left, I have the original brown floor tile. It didn't quite match the cave very well, so making it the same color as the cave helped it out a bit. Wasn't quite a 3 step process, but character Maker has a color slider to the left of the palette, so I was just adjusting the colors around until I liked it. I wanted it overall blue/purple, had to make sure there wasn't too much contrast either.

2) K-hos told me to add another floor tile for variety. So I made it with bigger rocks. I started with circle shapes and made the highlight areas bigger. Cleaned up the lineart, and added another highlight on top to make it stand out a little more. Had to tone it down because it was too much.

3) To the right of that, there's a side wall that has a straight edge. We'll need that for the stalactite connection, if not it'll look like it's floating.

4) Cutting out from the side walls. This part should be a seperate side wall, so don't cut into the only side walls you have. You'll want those to tile. Only the side wall at the end should be cut, so it looks more natural. Usually what I'd do is cut most from the middle, and mostly leave it alone near the top/bottom. This can be applied to both sides. If you have cave walls that tile vertically, make sure that cutting the side walls still has it tile.

5) This is the ambient lighting part. This is not necessary, but can have interesting results. So if you don't do this on the walls, then don't do it on the other objects either. I took the side wall on the right (and only that one), and colored with a reddish purple on the edges of the mini rocks on the wall. You can see on the tiles that are 2x bigger the process I did on it. Then, I did a yellowish highlight. Pink could work too.

6) This part wasn't hard, I just replaced the highlight on the side wall on the left with a lighter more saturated blue/cyan. It looks like it sparkles a lot more now. I'm not going to do this with the middle wall so that should be left alone.

7) Horizontal stalactite support. Basically, the player will go under this, and it will connect from one part of the ceiling to another. It's best to get the shape down first. The ambient lighting here will work in the same way that it does for when you do the side wall. So for the front, I just decided to make some stalactite formations, sort of like what you see on the top part of the walls.

8) Plants! This one was a bit of a pain, as I had to constantly adjust the colors on it. For objects like this, it's good to check out how it looks on a floor tile. After it's all done, I put a shadow. I added some small patches of grass next to it, so that could also add some variety to the map. Only 2 colors for the grass itself, and you could use 1 if you wanted.

9) Stalactite support, going up and down. The middle part will tile, the top and bottom will connect to the ceiling. Getting the shape right is probably the most time consuming part of this one, although it's not that bad. Make your stalactite formations on the top part. Since the reddish lighting that we've been using has been on the right side of the wall, we'll continue it here too. Don't go switching it, if it's blue on the left sidewall, don't forget to do the same on the objects.



Result! 20 colors total.

I think there may be a short tutorial to finish this off and then I'll get working on the tech base. I'll be looking for good pics for inspiration. If anyone has any pics they think will help, feel free to show me them and I'll work off of that.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Megollyen #329 July 31, 2009, 07:53:11 am
***
Group: Member
Posts: 446
Joined: September 19, 2004
 
You are amazing. I have been working on my spriting lately. I hope that I can get as good as you one day. :P

I have a quick question, how can I save my chipset so it is 256 colors? Character Maker won't let me save and my only other option is paint, which if I save it messes up. I used to do it through photoshop but I dont' have that anymore. What should I do?
   
Send E-Mail pm
Ocean's Dream #330 July 31, 2009, 08:05:19 am

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
I like to have irfanview around for something like that (not a spriting program though)
http://www.irfanview.com/

Then go to decrease color depth and go to 256 colors.

I think Graphics Gale can do that too and that's a free spriting tool too.
http://www.humanbalance.net/gale/us/

Need to do Tech base, haven't had time for the tutorials recently.
__________________

Last updated 1/11/09
   
Ocean's Dream pm
Megollyen #331 July 31, 2009, 08:17:07 am
***
Group: Member
Posts: 446
Joined: September 19, 2004
 
Thanks.  Smile


I have grass and a stone path thing.




Advice?
   
Send E-Mail pm
Rockman #332 July 31, 2009, 08:18:41 am

oh no !!
******
Group: Premium member
Posts: 3995
Joined: October 21, 2005
 
those are some smooth tiles, megollyen. we need some buildings or something!
__________________
if you can read this turn off signatures you crazy
   
Send E-Mailrockman_neo@hotmail.comhoratioxgeodudeConnect to IRCrockman @ facebook pm
Megollyen #333 July 31, 2009, 08:40:32 am
***
Group: Member
Posts: 446
Joined: September 19, 2004
 
I am having trouble with making boxes.   Sad






What do I need to do?
   
Send E-Mail pm
Pipcaptor Hatsuya #334 July 31, 2009, 08:46:07 am

Psychedelic Rider?
****
Group: Member
Posts: 1182
Joined: August 06, 2004
 
I know this isn't for a Tileset tutorial but I would like to learn how to work on mechanical monsters or likes for RPG Maker XP, maybe something like this:
__________________

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
SupremeWarrior #335 July 31, 2009, 11:44:50 am
*****
Group: Member
Posts: 1524
Joined: September 18, 2004
 
I hope I'm good enough to make tutorials so I'll try by showing how to draw a house hold fuse box!



In-game Example


Before I start drawing I always look on google for a picture to reference to, this is a habit of mine. I use the reference picture to compare with what I'm drawing to see if it looks similar to whatever I'm drawing.

Reference Picture




1. I started by drawing a rectangle roughly the about 3/4 of two of the 16x16 grids.

2. I coloured it blue-ish, I took some colours off of the reference picture to help me make up a palette. I added little nail like pixel dots to each of the four the corners.

3. I shaded it in by shading the top of the inner rectangle and the left of the inner rectangle a light blue-ish colour, I shaded the bottom inner of the rectangle and the right of the inner rectangle the darkest shade of blue-ish colour I had in my palette.

4. I added the door by using the previous shade of blue-ish colour to shade in the bottom inner of the rectangle, I didn't want the door to be entirely square so I rounded off the four corners.

5. I drew a little grey outlined, white rectangle on the top of the blue-ish rectangular door, this was going to be my kind of warning sign.

6. By adding a lightning symbol, I took three shades of yellow, from light yellow, normal yellow and the darkest yellow. The way I see it is that the lightning symbol is essentially two 20 degree angles, approx 20 degrees I know that isn't exactly 20 degrees.

Lightning Symbol is made up of two 20 degree angles!


Now my fuse box was finished I decided to add an open door variation to it.

7. I shaded the inside of the fuse box a dark shade of grey and added a rounded off door, you can cheat by copy and pasting the rounded off door shape.

8. No fuse box is complete without some fuses, so I added little lines that made it look like fuses were inside it.

9. On most fuse box doors the reference picture there was a little piece of paper on the inside of the fuse box door so I decided to add a little piece of paper also, by using a  very light shade of grey.

10. Added some writing by using three shades of grey, light grey, normal grey and a darker shade of grey. Remember when trying to draw writing or little text on pixels, always use lines, mix it up a bit by using different variations of lines, short lines, long lines, little dots, it all looks fine because it's too small to actually see some writing so don't be silly by trying to draw actual letters or words.

Wires and Power Lines

1. I started by using two shades of colours for the power lines, one light red colour and one dark red colour, I did the same for the blue power line and the thick dark power line. You can make the power lines any colour you want, as long as you use two shades of the colour, one light and one darker.

2. Using the dark red colour I added a line on the top.

3. To finish my red power line I added one more line on the bottom by also using the dark red colour. I also did the same process for the blue power line and the thick dark power line.
__________________
   
Send E-Mailhttp://supremewarrior.blogspot.com/ pm
Nessiah #336 July 31, 2009, 11:58:04 am

You're not man enough to make the algorithms to satisfy me
*******
Group: Premium member
Posts: 4114
Joined: March 18, 2007
 
@Supremewarrior the only thing I don't like about it is the color choices and the black outline, it clashes so much on the the tileset you chose haha
__________________
   
Division Heaven pm
SupremeWarrior #337 July 31, 2009, 12:01:41 pm
*****
Group: Member
Posts: 1524
Joined: September 18, 2004
 
Oh, darn!
__________________
   
Send E-Mailhttp://supremewarrior.blogspot.com/ pm
Nessiah #338 July 31, 2009, 12:03:21 pm

You're not man enough to make the algorithms to satisfy me
*******
Group: Premium member
Posts: 4114
Joined: March 18, 2007
 
Well I suggest getting the color palette of the chosen tileset and use those colors instead
__________________
   
Division Heaven pm
SupremeWarrior #339 July 31, 2009, 12:06:37 pm
*****
Group: Member
Posts: 1524
Joined: September 18, 2004
 
Do you mean the red and blue power lines? I mean I realize they are a bit too bright now...
__________________
   
Send E-Mailhttp://supremewarrior.blogspot.com/ pm
Nessiah #340 July 31, 2009, 12:12:17 pm

You're not man enough to make the algorithms to satisfy me
*******
Group: Premium member
Posts: 4114
Joined: March 18, 2007
 
well for things like the fuse box and stuff I'll take the colors of the computer+desk palette.
__________________
   
Division Heaven pm
K-hos #341 July 31, 2009, 06:19:58 pm

Subs not dubs
**
Group: Member
Posts: 190
Joined: August 24, 2008
 
may I also suggest adding a one or two pixel strip to the top of the box to add perspective?
__________________
If an image says a thousand words, and a video shows 24 images each second, then why couldn't they condense everything I needed to learn at school into one hour long video :V
   
Kotholos_at_gmail_dot_com pm
SupremeWarrior #342 July 31, 2009, 06:31:52 pm
*****
Group: Member
Posts: 1524
Joined: September 18, 2004
 
What do you mean?
__________________
   
Send E-Mailhttp://supremewarrior.blogspot.com/ pm
Megollyen #343 July 31, 2009, 06:34:09 pm
***
Group: Member
Posts: 446
Joined: September 19, 2004
 
Okay, so I have been having a lot of trouble with shading and such. I am trying to make a building but I can not figure out the right way to shade and add texture to it. Can someone please help?




   
Send E-Mail pm
K-hos #344 July 31, 2009, 07:23:02 pm

Subs not dubs
**
Group: Member
Posts: 190
Joined: August 24, 2008
 
Just like this dood;

gives it depth :3
__________________
If an image says a thousand words, and a video shows 24 images each second, then why couldn't they condense everything I needed to learn at school into one hour long video :V
   
Kotholos_at_gmail_dot_com pm
SupremeWarrior #345 July 31, 2009, 07:52:25 pm
*****
Group: Member
Posts: 1524
Joined: September 18, 2004
 
Oh I see what you mean! I'll remember that next time I sprite something rectangular!
__________________
   
Send E-Mailhttp://supremewarrior.blogspot.com/ pm
Ocean's Dream #346 July 31, 2009, 10:04:44 pm

Heart of Ice
******
Group: Premium member
Posts: 3289
Joined: August 09, 2005
 
Yeah, thanks K-hos! Pictures are a good reference, I use them all the time but you just have to remember that the game (if it's an RPG anyway) is a top down perspective. You should be able to see the top, and usually the top is the lightest part of the object.

@Megollyen: I'd start with just getting the shape of the building down first. Put a wall, a ceiling, maybe windows and a door. Then after that's done, you can worry about the texture. Also, you can tile it. So if you want a brick building, you can make a 16x16 brick, and tile that for the wall. If you can, see if you can find a reference pic for the type of building you want. But again, make sure you remember the ceiling and not just have a side view building if you're doing RPG perspective!
__________________

Last updated 1/11/09
   
Ocean's Dream pm
aspire5051 #347 July 31, 2009, 10:48:06 pm

Samantha! Cast a spell!
*
Group: Member
Posts: 43
Joined: July 29, 2007
 
I gave a shot at a tutorial too.



The grid at the right: I divide the 16x16 tile in 4, and i make the first row (down > up) the dark one, and the other ones I shadow. It really depends on the tallness of the object AND of the chars, tough. ;-D

I began by molding it. You know, if you stop in step 2 it still looks nice. And simple. I think of it as a RPG cavestory. Anyways, I proceeded on the table, then on the flower jar. I made flowers after making the vase, and i made the vase EMPTY, to show how to create multiple flowers, economizing tile Slots.

Well... Oh, also, the last step (vase shadow) is totally optional, and it may make your tile be unfitting. (by having a weird sized shadow. I mean, different plants produce differently sized shadows, etc.)

Nothing more to say :x

EDIT: Oh, i almost forgot. Can we submit non-tileset tutorials? (judging by your blog, we can, but that is not your blog :p)My strength are chars, monsters and faces >.o
__________________
Baaaaack! i´m JOSEPHSERAPH, and this is The Oprah Winfrey show.
   
pm
 
Page 9 of 9
« First<789

« Previous Thread | Return to Forum | Next Thread »
Currently active: 0 members and 1 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.372 seconds with 22 queries.