Posted by: Ocean's Dream | June 2, 2009

Wallpaper

OK, I was asked by Holder to make some wallpaper wall tiles. I figured I’d do a simple one for now, feel free to ask me anything or to show more examples or whatever.

Wallpaper

I did a few simple step by steps. You can certainly add on to this and add more colors rather than 2 for the wall, vary the patterns a little, and things like that.

Basically, you want to have an idea for your wall, if you have floors you need to make sure the wall isn’t too close in color unless there’s a clear division, and the general style for your game. You can certainly do a flat color wall, but if your game looks like Chrono Trigger, that’s harder to pull off than it is for something like Zelda.

The first row is showing the differences of floor colors compared to the walls. Since the floors were light in the 2nd example, I added a division which I’ll later make wooden. This is also good for general divisions of rooms and such.

The next row I make a simple pattern on one column and copy it/flip it. You just need to make sure it tiles. Since it’s a wall, try not to make the pattern stand out too much, as you need objects such as paintings, windows, torches, lights, Haruhi wall scrolls and stuff to put on it.

The second is adding a simple texture to it. I just placed some pixels to make it look random, and then really toned down the color so it’s pretty close in color. You want to be able to see it, but just barely. You can include multiple colors here too, especially for rougher looking walls.

The third wallpaper style: A single image repeated. You’ll want the image to be split at the corners so it tiles correctly, and that they all match up in the end. You can certainly vary it a little, just make sure the sides meet like they should. I used some references for this wall, you can look at this site for the inspiration.

Then, if you want just a regular wall with no patterns, you could do something like this. I didn’t show the lamp and I should have, but basically this is what the wall would be if lit by a light right near the middle. Then the area around that lamp would be brightest.  You could also have it going from light on the top to dark on the bottom especially if it’s ceiling lit, or you could make the reverse and go from light to dark on top. It’d be good to keep the middle tile flat so you can extend it if necessary. Also, I wouldn’t just slap a gradient tool on it and call it a day, that’s lazy.

Lemme know if this helps!

Posted by: Ocean's Dream | May 13, 2009

Crystal tree

This tutorial is by K-Hos. Thank you for this!

crystaltreetut

Click the thumbnail for this.

I love how the tree came out. I asked him a question about this as well:

“Ocean: When making the tree, did you have a clear picture on what you wanted, or did it come about through experimentation?”

“K-hos: I knew I wanted a glass look, but not the clear picture. That did come about through experimentation”.

You know, an interview with a fellow pixel artist would probably be a pretty cool idea. I should do that sometime.

Posted by: Ocean's Dream | May 2, 2009

Cliffs

This is something simple I made for Skie. I’d like it if you didn’t use this as is, and only use it as a tutorial reference.

summonstuffs

This is another way of making cliffs. FF6 does something similar, but the whole top of a protrusion is light, and there are more colors used. Also, they’re diamond shaped rather than circular. So basically, I go through the process on the bottom right for the cliff walls, varying the size of them, then I just fit them into a tile (or multiple tiles which could add variety) and make sure it tiles. I usually put 4 or more of the same tile to test to see if it tiles well, then edit it if it doesn’t  tile well.

Posted by: Ocean's Dream | April 25, 2009

Pixel Video recording try 1

Here is the recording:

Final result which is on DA

Here it is! 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.

As a note, I just added Pixel Mirage into the pixel tutorials links, it’s new and some of the tutorials are nice. It may repeat some that are covered in other tutorials but I think it’s still worth a look.

Posted by: Ocean's Dream | April 22, 2009

Remaking existing sprites

The biggest block for a blog poster: Coming up with a title for every post. I’d love to be able to just write “GENERIC POST # 320129” but then people wouldn’t click on it because they wouldn’t know what to expect or something.

Tutorial suggestion by Joseph S.

So, this isn’t a tileset tutorial but it doesn’t matter, it’s a tutorial of some sorts and kinds. Basically, we’ll use an old school NES sprite, make it bigger to match the 32×32 tiles of RMXP/RMVX/Most engines and programs instead of the 16×16 tiles of the ancient cultures.

I’m starting with an NES sprite for this one. You could also make your own NES sprite… but then you could also just skip the process and make yourself a bigger sprite instead. Here’s FF1 fighter. I did the resizing already. Make sure you’re doing a nearest neighbor conversion or a direct pixel scaling.

fightersprite1

There it is. Each frame here is 48×64, and the sprites are about 26×34 each. There are really 4 frames you have to worry about working on, everything else can be flipped/copied to make.

Here is the process I’m going to use:

  • Making the outline 1 pixel
  • Defining the new colors I’ll use
  • Improve the new outlines and define the new shapes
  • Shading
  • Copy/Flip to complete the spritesheet

So let’s go with # 1 on our to do list. Chopping off the outline to give us much more space to work with. I’ll sidetrack for a bit. When working on Paradise Blue, the enemies had to be of a certain size (32×32, 48×48, 32×64 or 64×32). I got concept art for the monsters, so I had to make it so that it fit in the space with as much detail as possible. I made the outlines, usually found that the sprite didn’t fit, then cleaned up the outlines and then realized that it was possible to fit the sprite in there then. In small sizes, sometimes these things make a big difference.

fightersprite2

This is a rough thinning of the outline. Now instead of all that black, we have more space for colors! Tsugumo has a nice tutorial on color division in sprites which I may also do in this sprite later, you could check it up here. It’s a good read.

So, now what do I want to do with this sprite? We used an FF1 fighter so we might as well make a fighting class. If you have an existing character, you can make the sprite with the attributes of your character. Well, I’ll try this for the design. FF1 Fighter will be a purple haired girl, dark red armor, brown shoes, a belt, and a flower in her hair. At this point I’m not going to stick with NES colors so if your palette only has those, feel free to start adding more colors. If you feel like you’re not good at picking colors, try getting them from a commercial sprite for now.

fightersprite3

This is what I have. I made some small changes to the lineart in the bottom row standing still one, but I’ll get to actually remaking the outlines and stuff soon. But yes, these are the colors I’m going to use now, I’ll modify them as I sprite. I use Character Maker so there’s a slider in the palette, so you click on a color and you can adjust the color and every time it’s used in the sprite it’ll be changed. Saves time.

fightersprite5

There. You might have more outlines than you need or more than I have right now, but that’s ok, we could handle that at the shading stage. I don’t have as much of a color variance to demonstrate this, but say if her sleeves were a different color, instead of outlining the sleeve where it meets the rest of the clothes, you could just have no outline there. If the color is different enough, you’ll still be able to tell that it’s a sleeve, and save yourself a pixel line for some other detail.

Now for shading. A lot of tutorials show lighting on the top left side or something, and a lot of people copy that when making their RPG sprites. This is not necessary, and it actually looks odd in game if you have a light source different than what is shown on the sprite (like if there’s only torches on the right side), and you’d have to make sure that everything in game is lit on the top left side. This doesn’t mean going back to pillow shading though.

For shading a sprite in RPG perspective, think of it this way. First, whatever sticks out most will be brightest, and whatever goes in or behind will be darker. Then, you have a top down perspective, so the top will be brighter than the bottom. Also, it’s not cheating to have a commercial sprite nearby for a reference, it’s good to learn from, especially if you realize why they do what they do. Zoom in or enlarge it too.

Don’t be afraid to make mistakes. Have backups and copy the current sprite on to a new file so you can work on it without worrying about “ruining” it. Don’t worry about it, just experiment. You’re not going to get it done if you constantly worry about messing up.

fightersprite6

The back of the hair tends to be hard to sprite. I usually go for lighter on top and dark on the bottom. I can add any additional highlights and details in now. For this sprite, I used a base color and a shadow color for the skin (make sure it’s visible when you zoom out of the sprite too!), a base hair color and a highlight color, a highlight red (use pink if the red you have isn’t that dark), and an extra color for the shoe. Then I worked on the outline colors, so it’s no longer black. Dark purple is used for most of it (Dark grey works fine too and was done in FF5/6), but dark red was used to outline the armor.

fightersprite8

Added some highlights around, and a blue armband. At this point I’ll go and copy the poses to the other frames before I continue. Something assymetrical shouldn’t be copied to both sides. So for the front frame, I copy it, then I flip her body horizontally. I position it back if it’s not aligned, and do any fixes.

fightersprite10

There we go. Now to add a flower…

fightersprite9

Again, keep backups around so you can copy/paste stuff and not lose the originals if you need them again.

I’m thinking of video recording one of these tutorials in the future. I thought I had one but I don’t remember what happened to it.

Posted by: Ocean's Dream | April 13, 2009

RM2k3 auto-tiles

I think I did something on auto-tiles before, but I’ll explain how they work so you could make your own. This is for RM2k3.

rm2k3auto1

These are from the RM2k3 RTP. I didn’t make them but they’ll be good to use.

The top 3 are the auto-tiles, and the row on the bottom is the first row of the auto-tiles.

rm2k3auto2

There are 3 tiles in a row. The first one is circled here. Basically, this tile doesn’t show up on the map but is used as a reference.

The 2nd tile shows what terrain it’s based off of. So, in the snow ground, it is surrounded by grass, so I post the 1st tile of the grass auto-tile there. For the snow forest, we don’t want the grass to be around it, but rather the snow. So, post the 1st tile of the snow auto-tile there.

The 3rd tile here is for the corners. I’ll go over this in a bit.

rm2k3auto3

For making the auto-tile, there is a 48×48 space for it. Each tile is 16×16 pixels, so I would set a grid to that. So there’s the corner tiles, the side tiles that can extend out, and the center tiles which you want to make sure tile correctly. I posted a few examples there.

rm2k3auto4

The 3rd tile on the first row is for connecting corner pieces together. I set up the corner pieces like in #1. Then I put a center tile piece in the middle of the 2 as shown in step 2. Then, make the connection. The connection part shouldn’t be more than 8×8 pixels. There are 4 8×8 pixel pieces for the 3rd tile in the 1st row. I posted a 3x version of it on the bottom. Sometimes you can just get away with placing a corner tile up there, like how they did with the ice forest.

If there’s anything here you’d like me to go over more or show more examples of, feel free to let me know!

Posted by: Ocean's Dream | March 28, 2009

Tileset questions

So I’ve been looking at my blog stats (I’m always curious about them). I haven’t really gone over too much on how to do some of the basic stuff as some people have been searching here for, so I figured I’d give it a shot and hope it helps someone.

Question: “When I import a file into RPG Maker 2000/3, it tells me “Invalid color depth”. How do I fix that?

Answer: There are a few programs that allow you to change the color/bit depth. Graphics Gale, Photoshop, and Irfanview are ones I own. Graphics Gale and Irfanview are free, so I’d recommend grabbing them for this purpose. I tend to do this stuff in Irfanview.

In Irfanview: Go to Image in the menu bar -> Decrease color depth -> 256 Colors (8 BPP)

In Graphics Gale: Go to All frames in the menu bar -> Color depth -> 8 BPP (256 colors)

In Photoshop: Go to Image in the menu bar -> Mode -> Indexed color -> Palette (Local Perceptual) and 256 colors.

Doing the reverse, changing the color/bit depth to 24 bit (full color) is pretty much the same. In Irfanview, you just go to Increase color depth instead. In Photoshop, just change mode back to RGB.

Question: How do I combine 2 tilesets?

Answer: A bit different depending on which Maker.

For RPG Maker 2003: I would set a grid to 16×16. Open up your 2 tilesets in Graphics Gale, and set the color depth to full color (24 bit). If you keep it at 256 colors, then you may lose color or information if you copy from one to another. Graphics Gale also has a nice grid which you can use to copy, so set it to 16×16. Then just select each tile or block of tiles, and copy it over. Save the result as a 256 color PNG.

For RPG Maker XP: You can make the image size as big as you want, as long as the width is 256 pixels. It probably should be at 24 bit color depth, but I’d just check to make sure. Set a grid to 32×32, then select the tiles from the other sheet and copy them over.

For RPG Maker VX: Be aware that nearly all of the Tileset A’s are auto-tiles. Set a grid to 16×16 or 32×32, I would alternate between the two personally. Tileset B to E should be no real problem as there are no auto-tiles there. I went over making auto-tiles in RMVX for a post, I may do another one in the future.

Then go in your maker, and import it. You will be asked to click the background to set it as the transparent color, and in RPG Maker XP, a different color to be semi-transparent.

Question: I want my sprites to be double the size, but they end up blurry.

Answer: Probably using Photoshop, although using Paints Stretch/Skew option does that too (so avoid that in Paint). When resizing in Photoshop:

-If you are resizing the image size as a whole: In Image size, there will be an option on the bottom that says “Resample image”. For this, it defaults to Bicubic. You’ll want Nearest Neighbor instead. Then resize it.

-If you are using a transform tool on a selection, then go to Edit -> Preferences -> General. There will be an option on top that says something like “Image interpolation”. Change that to Nearest Neighbor.

Question: I want to start from scratch but I don’t know where to place things in the tileset.

Answer: You’ll want to get some templates for that. Once you understand what the color coded sections represent, then you’ll be able to figure out where everything should go. I did this for RM2k3 chipset templates already, I cannot remember which post but you may want to go back a few pages.

You can find them at these places. I don’t want to post the pics here as it’s already pic heavy.

Gaming World and just in case GW is down: RRR

If you have any troubles understanding what the templates are for, feel free to let me know by a comment or something, I check my e-mail frequently and I get notified of comments by e-mail. Looking at other tilesets like the default RTP ones can also help you too, feel free to check them out too.

Question: The first color in the palette of my image is not the background color.

Answer: No one really asks this but it’s good information for the following question. There are multiple programs that show the palettes. IDraw should, Graphics Gale does, and Character Maker 1999 does. Check there and see if the first color is the same as the background color. If it is not, then replace the 1st color in the palette to the one you want for your background. It’s pretty simple to do in Character Maker if you know what you’re doing. I’ll post it here:

staff

This is my image. It’s got a white background. But when I look at it in Character Maker, this is the palette.

initial-palette

What I’ll do is go to an empty color space in the palette, and make the same color as the first color in the palette. You could try eyeballing it and adjusting the sliders on the side. But it also has a number on the bottom, so you could just match those up.

palette2

Then right click and drag out your selection in the image. It should show up in the preview box on the side. Then, drag the new color onto the 1st color of the palette. Left click your selection onto the image to save the change. Now, drag the 1st color of the palette onto the current background color, which in this case is white. Now, my background will be a different color. You could always adjust the sliders and change it. Be aware that you may have to edit the image if there were other places on the sprite itself that used white, but you’ll notice that.

You could also just grab the first color, take the paint bucket tool and color over the previous color too. As long as you make sure that the background color isn’t present in the sprite itself, or if it is, then edit it.

Question: My picture or panorama is too big for RPG Maker 2003, it won’t let me import.

Answer: It won’t let you import it, but there is another way. First, since importing lets you pick to make the background color transparent, that’s an issue we’ll have to deal with. By default, the first color in the palette for a resource will be the transparent one. We don’t have to worry about this for the panoramas, but we will for pictures.

The above question goes about how to solve this.

Now, the easy part. Once that’s all set, you just open the picture or panorama folder, and save or copy the file onto there. Don’t import, but just copy it there. Then, you’ll be able to use this in game.

In RPG Maker XP, I would cut up the panorama once you make it and place it onto a tileset. Just remember that the width is 256, the height can be anything.

In RPG Maker VX, it’s well suited for panoramas so feel free to drop them in, that shouldn’t give you problems.

Question: How do you pick your colors?

Answer: Since Character Maker lets me adjust the colors on the spot, I can easily use a pre-existing palette and then just change it whenever I want. But let’s say I’m using MS Paint. I would think of what colors I need to use for my image. Enlarge the area so I can put the colors I’m using off to the side. Since MS Paint doesn’t remember the palette you use for a piece, I instead place the colors on the working area so I can use the eyedrop tool to get them.

For the colors itself, that’s a bit tricky. Colors are influenced by the colors around them. It’s generally a good idea to stay away from oversaturated colors, but all too easy to do that. Double click a color in the palette below to create a custom color. For blue, I know people are going to go to a deep blue color. But before you do, check the value called SAT right under HUE. If it’s something like over 200, then it may be too saturated. Staying at 125 or less could be helpful, but don’t take that as a rule. Generally just stay in the lower half of the color chooser for most of them. There are exceptions, like a bright yellow, or highlights, but then I would keep them with a high saturation and a lightness that is near or even above 200.

I made a post on the color wheel, but I’ll repeat it. Usually, the brighter the object, the more yellow it goes, and the darker, the more blue it goes. This changes depending on the color of the light, but in natural (sun) lighting, it’s yellow light. So don’t just change the brightness, but start moving your hues/colors over from yellow to a bit bluer (they don’t need to end up blue). So for example, for purple, you may want pinks for your highlight, but a bluish violet for your shadows.

That’s it for now, if I think of more, or if anyone has other questions, let me know and I could add it.

Posted by: Ocean's Dream | March 21, 2009

Summon Night doorway tutorial

OK, I think I tortured the people looking for Summon Night stuff enough with that last post, so here’s an actual tutorial. 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.

doortutorial

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.

Here are 2 tutorials for how to represent curves well in pixel art. It can be easy to just make it a diagonal, but not then it looks straight edged rather than curved how you want it.

Sprite Art

Derek Yu tutorial

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.

Anyway, I apologize for sticking too closely to the source material for this.

EDIT-

I added a few pixel art community links here. Pixel Joint, Pixelation and Tigsource, though Tigsource is more general indie game making, but there’s a big pixel art community there as well. If you know of any others, feel free to let me know. Same with spriting tutorials, if you find any good ones, I could post them on the side links.

Posted by: Ocean's Dream | March 16, 2009

Making a monster sprite from a sketch

OK, not exactly a tileset tutorial, but neither were the character maker ones. This idea came from Ceric.

I am using this sketch, provided by Skie Fortress.

First off, check to see what sizes would work with your game. Working with the 320×240 resolution for RM2k3 and the default side view battle system there is different than the 640×480 resolution and front view system for RMXP or the weird resolution that I don’t remember for RMVX.

When working from a sketch, keep in mind that a small sprite (particularly anything below 100×100) may not be able to have all the details that the sketch does. Nor is it necessary to replicate every line. It’s just a reference after all.

For my game, since it’s RM2k3 resolution and side view, I decided on these values. 32×32 pixels for tiny monsters, 48×48 for generally larger monsters, 32×64 for tall monsters, and 64×32 for wide monsters. You do not need to have it so rigid, but it can be a good guideline to start from. Since the monster is taller than it is wide, I was thinking 32×64. But it seemed like it wasn’t skinny enough to fit in there, so I made it 48×64.

I’ll use 48×64 to start. If I run out of space and shrinking it isn’t a good idea, then I will add a few pixels more. I try to add by multiples of 16, though something like 8 would be okay.

monstar

There are 2 methods you can use to start. Personally, I like going with step 2 and do a rough sketch, rather than going with step 1 and blocking out areas by color. I may do a combination of both if the sketch would get confusing.

When I sketched, I took note of the midway point in the actual sketch. The top seemed too big and the bottom too small, so I just adjusted and made the top part not go below the middle of the drawing area. At the start of the drawing, I use an existing palette and do not care if the colors even match or not, so long as I have enough colors to start with.

Don’t get discouraged if it doesn’t look good at first. It rarely does, and sometimes it’s only in the last parts where it starts looking good. I don’t really like how I did the face at the end, I think I should have gotten rid of those lines as well. I ignored the lines for the body because the sprite is too small for me to be able to put that much detail into it.

Posted by: Ocean's Dream | February 24, 2009

Fireplace

You could save it and zoom in to check what I added/changed in each step. I would have posted the zoomed in version here but the blog has a fixed width so I don’t want it to be cut off.

tut

« Newer Posts - Older Posts »

Categories