As you can see from the screenshots, I've took RPG Maker and I'm using that as a starting point for functionality, but the finished project will probably end up looking a little different. I've had people question the legality of that, but all the code is 100% my own so as long as I don't use any of the official assets there's no problem with legality. Adobe doesn't sue GIMP because it's similar to Photoshop. Besides, I'm adding some of my own improvements to the workflow, and adding some quality of life improvements too to allow for better flexibility. I'm actually hoping to create a better tool...

Database

Database is pretty straight forward. This is how you edit the data for the game same as RPG Maker. Similar to RPG Maker, it exports this data to JSON, then when needed, the game reads the JSON to create playable characters, items and so on. Initially, I wanted to make it compatible with RPG Maker JSON to make porting projects easier, however in all honesty, some systems have been easier to just create my own solutions for, rather than reverse engineer the RPG Maker JSON and figuring out what they're doing with it. Especially with events/visual scripting. This means, sadly, JSON isn't compatible with RPG Maker.

Only the playable character tab is complete and right now I'm just editing the JSON directly... but the core functionality is all there. It can save and load the data and you can edit but the only completed tab is the playable character tab. All that needs to be done to finish this off however is just designing the remaining tabs and any additional pop up windows for selecting graphics and stuff.

Map Editing

Features already in place

• Drawing tools (Single, square, circle, fill)
• Layers
• Autotiles
• Zoom and move map

You can set a global setting for the size of the tilesets in a project. All tilesets need to be uniform, but if you set 32x32 to be the global setting you could use XP or VX tilesets and if you set it to 48x48 you could use MV and MZ tilesets. Or... if you want you can use a competently unique size such as 64x64, that's fine too.

I'm hoping, although I need to do testing on this, that I'll be able to add unlimited map sizes for people to create open world games. I'm not actually sure how it works in RPG Maker, but I know with other game makers they tend to load the entire map into memory. To negate this, UR-RPG uses a 2D form of occlusion culling. Thats a fancy way of saying it only draws what the camera can see, and redraws the map as you move around. I'm hoping this will help with the goal of unlimited map sizes.

Tilesets will also be handled differently. This needs to be coded, but the plan is to use 'Groups' for tilesets. Every individual tileset sheet the game needs will be set in the database, as well as collision. Then similar to how RPG has it's A, B, C, D sets, a group will just be a collection of different individual tileset sheets but what I want to do differently is how they are set. You create a 'group' of tile sets and then select from the individual sheets that the 'Group' will us. This means you can use multiple autotile sheets per group as well as mix and match building sheets, decoration sheets and terrain sheets. I'm also planning to have the map editor be able to draw from any 'group' that was set in the database... again to help create open worlds but still keep things organised.

Scripting

Features already in place

• Create Global or Local scripts
• Create, save and load scripts for editing
• Around 60-70% of nodes are done
• Set conditions for scripts to be run
• Set a trigger for script to be run

Scripting is where UR-RPG completely deviates from the RPG Maker formula. As you can see, this is done with visual scripts. With visual scripts you have a start node, then add nodes for common tasks such as show message, give money, move character and so on. If you think of the options you have while creating an 'Event' in RPG Maker, this is what you're doing with Visual Scripting and you'll have all the same kinds of options. This isn't based on the new Unity Bolt feature, I've built this from the ground up specifically for UR-RPG.

As for post-release community scripting, I've given this a lot of thought. Due to the nature of just C# in general, I shouldn't have to worry much about scripters who want to code in their own functionality. They should be able to just use polymorphism to override the default functionality. I'm planning on compiling the code for the database, map editor and script editor into a DLL file. This means the core functionality can be protected. However, I'm going to document as I go and will probably put a Wiki or something up on my website so experienced coders know how to customize and extend functionality. Exposed scripts for the battle system, title and stuff won't be compiled, so for things like a custom battle system, it should just be a matter of replacing the battle scene C# script.

Publishing

As it's a Unity asset... this includes an added benefit not found in RPG Maker. The ability to export to pretty much everything. PC, Linux, XBox, PlayStation, Nintendo Switch, Android, iOS... even a standard browser using HTML5 and OpenGL.

I noticed that there weren't a lot of pixel art tutorials on this forum and considering that many people request custom sprites and say their own spriting is terrible, I decided to make a tutorial to teach you how to sprite from scratch. That’s right, I said “from scratch!†Don't worry. We'll get through this together.

Keep in mind that there are many different ways to go about spriting. I am only going to show you one method in one style. Practice and experimentation are the key for helping you discover your own methods. I learned a lot by myself from taking resource requests here on this forum. Some of the sprite requests challenged me as an artist which helped me grow.

Programs and Materials

Typically I use Photoshop and MSPaint when I create sprites. Programs that use layers like Photoshop are really useful for manipulating pixels and experimenting with different shapes before putting your sprites together. Layering programs are also useful when working with templates as you can just build on top of the pre-existing structure. But Photoshop is expensive and templates might actually hinder you in developing your own unique sprites. That is why this first tutorial is going to show you how I made a sprite from scratch using MSPaint.

You will need:

• MS Paint or any other software that lets you put one pixel down at a time.
• A reference image for the character you want to sprite.
• Other skills like patience, perseverance, etc.(which develop over time).

Tutorial Format

This tutorial is going to work like a think-aloud. Remember those “How to Draw†books in grade school? They showed a few steps that built up successively to a finished drawing of something. It looked so easy in the book but why didn't mine come out like that when I tried? Often, those books lacked a commentary from the artist at each step of the drawing. I am going to think through my process with you to give you insight into why I made the choices that I did. Okay, enough of this let’s get to the actual tutorial already. I bet you are dying to know what character I am going to sprite.

The Sprite and Sizes

I am going to create an original sprite of Spiderman. Now I need to decide what size sprite to make him. The RTP uses sprites sized at 32 pixels in width by 32 pixels in height. You may often see these referred to as “chibi sprites.†Chibi is sometimes also known as SD (super deformed), but we will get to why that is important in a little bit.

I could also make the sprite 32 pixels in width by 48 pixels in height. These dimensions are most commonly found in “Mack†styled sprites.

A sprite can be any number of dimensions width by height ,but chibi and Mack are the common standards. Since I wanted to make a sprite that most people can use I chose the RTP dimensions: 32 x 32.

I have my work cut out for me for sure. Spiderman has a detailed costume with all the webbing on it etc… How am I going to create a sprite that when someone sees it they recognize it as Spiderman? Stick with me to learn some tips that will help you on your way to creating some awesome sprites from scratch.

Step 1: Finding Your Center

First I open a new document in MSPaint and set the canvas size to 32 x 32 pixels.

Next I find the center of the square. Because each side of the square is even, it doesn't divide with only one line crossing through the center. A 33 x 33 square would allow for a single line to cut through the middle of the square with an even number of pixels on either side of that bisecting line. Sorry for this geometry stuff but it is important. Hopefully the picture illustrates what I mean.

Step 2: Choosing Your Symmetry

I want to decide on the symmetry of my sprite. Just like my square; do I want the sprite divided in the middle by two lines or by one? For Spiderman I chose to make a single dividing line so that he has an even number of pixels on each side of the division.

This does two things:

• It offsets the sprite from the center either a pixel to the left or right but seen from a farther distance that one pixel offset really doesn't matter.
• It allows me to get the detail I want from Spiderman’s costume. You’ll see that the design of the spider emblem on his chest works better this way.

Step 3: Proportioning Your Sprite

In the chibi style the character is drawn in two “head-lengths.†This means that the total height of the character is two of its heads including the actual head. To break it down even further; you have one giant head and the rest of the body (torso, arms, legs, and feet) fit into the other head length. Can you see how this style might be referred to as “super deformed†now?

Now you might be thinking “How the heck am I going to fit all that detail into this tiny sprite especially with that large head so that it looks like Spiderman?â€

Have you ever seen a caricature of someone and were like: “Wow! That really looks like (so & so)!†Let’s be realistic. It doesn't really, especially with the tiny body. The recognition comes from the enlarged face and exaggerated features unique to that individual which our brains use as clues to recognize them. Spriting in the chibi style is very similar to caricature drawing in this sense. We pick a unique feature that is an identifying cue of our subject and exaggerate it. Therefore, with Spiderman we are going to put the most emphasis and exaggeration on his iconic mask.

Getting back to the proportioning, I simply draw two ovals to get a sense of where my head lengths are.

Step 4: Defining the Shapes

Now is the time to bring in your reference image. I found an image on google that showed the detail I wanted with colors I liked (more on that later). I pasted it into my MSPaint canvas, resized it a little and moved it over next to the sprite body I was going to be working on.

First I defined the shape of the head.

Then I define the shape of the body.

I experimented with a few different body shapes. Don’t be afraid to experiment. The image on the top has a more muscular feel to it compared to the image on the bottom. I decided to go with the image on the top because I felt it was more befitting of a superhero.

 THE DOJO NINJA'S WORDS OF ADVICE:

Step 5: Picking color

Using the eyedropper tool I sample both the red and blue color in Spiderman’s costume from the reference image. These two colors will serve as my base color when I color my sprite. My base color is going to be my middle value on a scale of values. I won’t go into color theory here (also maybe another tutorial right there), but basically we want different values of our base color to show variations in depth and position to where a light source is coming from. This helps our character not look flat.

Using our base colors we make something called a ramp. A simple ramp shows variations in the lightness and darkness of your base color in order from the darkest value to the lightest value.

I made one for both my red and blue base color. I chose to have two values darker and two values lighter on either side of the base colors. You can do this by selecting your base color, going to “Colors," then "Edit Colors, and "Define Custom Colors,†and sliding the arrow higher or lower on the spectrum. We will use these values for shadows and highlights.

Selecting and Editing the Values

Completed Ramps

Step 6: Outlining Major Sections

The next thing to do is carefully look at the reference image and determine where there are major areas of color and draw in those outlines with your base colors. For example, Spiderman has red that carries from his mask to his shoulders and along the outsides of his arms. He also has red gloves, boots, belt, and chest section. Everything else is blue.

Step 7: Base Coloring

Now I use my outline as a guide to block in the base colors of Spiderman's uniform.

Step 8: Step Back and Revise

Now is a good time to zoom out and check what your sprite looks at from its actual size. Just because your sprite looks good up close doesn't mean that it looks good farther away. Too much going on in a space can make your sprite look muddy. You will see an example of that later on.

Make changes as necessary. You can change the colors, the outlines, the basic body shapes. Fix it until you like the way it looks even though it is still flat. Adding depth comes next. But from here on out you must periodically zoom out to see how your sprite looks at its real size and make adjustments accordingly.

Step 9: Adding Depth

Right now, our Spiderman sprite is looking very flat. This is where our color ramps come in handy.

 THE DOJO NINJA's WORDS OF ADVICE:

All these things take time and patience to develop. I make mistakes all the time and think “Woof that is ugly!†So then I think “What is making it ugly and how can I fix it?â€

Okay enough lecturing. I could make this tutorial into a book with all my full-sized screenshots but I’m afraid that I might lose you. So to finish this tutorial I am going to show a progression of my sprite’s designs in sequence at an expanded view culminating with the final sprite. I’ll have a comment on the design for each frame.

The Progression:

Zoomed View

1. I started by defining the head.
2. I drew an outline of the body but decided it looked weak.
3. I bulked Spiderman out a bit and outlined his the major areas of color. You may notice that I left a one pixel red line at the bottom of the frame. I find it easier to animate the character stepping forward by having the feet move down a pixel.
4. I filled in the outline color blocks with the base colors.
5. I decided that in order to fit his spider emblem in I would have to reshape his head. In doing so I lost that pixel space at the bottom, but it was necessary.
6. I added the spider emblem to the costume and added the webbing detail to his mask using the red value one darker than the base.
7. Here I was experimenting with color. I swapped out the base colors with their values that were one step lighter and brought the value of the webbing up by one step as well, and added webbing to the torso. (Basically I moved each color from step 6 up a step in their respective ramps.)
8. I brought each color back down a step in their respective ramps to the values shown in frame 6.
9. Zoomed out, frame 8 looked a little muddy. So then again I moved the colors up a step in their ramps with the exception of the webbing color which remained the same. This definitely gave some more contrast and definition. Still no depth yet.
10. I switched back to the coloring used in frame 8.
11. Using a copy I had made of my sprite with only the base colors blocked in, I started to play around with the lighting. I chose to have the light come from the top left corner. You can see that the values are lighter closer to the light and darker farther away. The effect of body contours is also being observed. I did it without the webbing pattern first to refine how I wanted to light and shade the body before adding the webbing back in. Notice that the dark value continues to form an outline around the sprite even around the lighter areas. This is a stylistic choice.
12. In this frame I take away that dark outline and replace it with values more appropriate to the location of the light source. This makes the sprite appear softer. This is another stylistic choice.
13. I decided to stick with the dark outline style and started adding in the webbing pattern. I also created a ramp of gray values to appropriately value the eyes of the mask. It looked strange that the shading was being applied to all the other parts of the costume but not the eyes.
14. The finished product after a few revisions.

View at Regular Size:

The End Result:

Final Thoughts

And there we have it! Spiderman from scratch! You did well to stay with me this far and I commend you for that. If you liked my tutorial or thought it helpful please leave a comment below. 

This tutorial is meant for newcomers to the RMVXAce community who would like to learn a little more about how Sprite Sheets work. First you need to know the lingo. Become familiar with the key terms and their definitions below.

Key Terms and Definitions

Sprite: a game object made of pictures of drawn pixels that can be moved around the screen. Sprites can be controlled by the player or by events in the game.

Pixel: Pixel is a portmanteau for “picture element.†In case you don’t know what portmanteau is, it is a combination of two words to make a new word. For example: breakfast + lunch = “brunch.†Sorry for the digression but word play is fun. Anyways the pixel is the smallest unit of an image. We often use pixel measurements to define the dimensions of a sprite.

RTP: RTP stands for "Run-time Package." The RTP is the set of pre-made resources that came with the original program including everything from the graphics, music, database items, etc.

TOU: TOU stands for "Terms of Use." When using pixel art from  pixel artists, they will often have a link to their TOU. The TOU tells you the rules for using their art in your games.

DOJO NINJA'S SPECIAL TIP:

Common Image File Types:

As you come across pixel art on the world wide web, you may find yourself confronted with different file types. If you are working on a sprite in MS Paint for example and you want to save it, but there are so many graphic file types to choose from. What should you use? Below you will see some of the most commonly used image files.

.JPG: also known as JPEG stands for Joint Photo Expert Group. The JPEG file format Uses “lossy compression†meaning to save storage it “loses†some quality. The more you compress the image the more quality you lose. Not so great for pixel art. If it helps the Dojo Ninja recommends you to remember .JPG as "Just Plain Garbage."

.BMP: This file extension is known as a "Bitmap." The number of colors that can be used depends on how many bits each pixel can store. Bitmaps usually have large file sizes and can be compressed by some methods using “lossless compression†meaning that the file size takes up less space but the image quality isn’t reduced. However, bitmaps are limited in that they can't store information about transparency layers. So for .BMP, the Dojo Ninja recommends you to remember it as “Basic Mediocre Pictures."

.PNG: This file extension stands for "Portable Network Graphic." You will often hear people refer to them as "Pings." Pings support “lossless data compression†meaning compressing the image to make it smaller doesn’t lmake the image lose quality. It also allows degrees of transparency/opacity to be saved which bitmaps can’t handle. Dojo Ninja recommends you remember the .PNG as “Perfectly Neat Graphics."

All of these image file types have their usefulness in some application or another, but for pixel art  the pixel ninja recommends .PNG as the best choice.

Anatomy of the Sprite Sheet

An individual sprite sheet for a single sprite consists of 12 frames arranged into three columns and four rows. The four rows define what direction the sprite is facing. The three columns define the foot position of the sprite.

Here is a quick example of a single sprite sheet:

Essentially, the game screen is a large rectangle with four sides. You can imagine each side as borders on a picture frame. The image of the sprite changes depending on which “border†or side of the screen the sprite is walking towards.The directions are based on the viewer’s vantage point (the person staring at the screen) and not from the sprite’s.

Explanation of the Rows:

• The first row at the top is labeled “Down.†You will see these graphics when the sprite is moving from a higher position on the screen to a lower position on the screen.
• The second row is labeled “Left†Even though the character is facing to their right it is named left because it is to the viewer’s left. You will see these graphics when the sprite is moving to the left side of the screen from the right side of the screen.
• The third row is “Rightâ€. Again, the sprite is moving from the left side of the screen to the right side of the screen, even though this is technically the sprite’s “left†side.
• The fourth and bottom row is labeled “Up". You will see these graphics when the sprite is moving up towards the top border of the screen.

Explanation of the Columns:

• The first column on your left is for when the character is taking a step forward with their right leg.
• The middle column is for when the character is standing with both feet together.
• The third column on the right is for when the character is taking a step forward with their left leg.

The two diagrams below demonstrate the directions and pattern for each column and row.

Sprite Sets

In the RTP you will see that sprites are not by themselves. In fact, eight individual sprite sheets are combined to form one larger sprite sheet. These larger sheets are two characters tall by four characters wide. See the sample below. This sprite sheet combines 7 individual sprite sheets. I just happened to use the space for the eighth sprite as a place to put my artist information.

Special Filename Symbols

But what if I wanted to import only a single character's sprite sheet? How would I do that? The solution is to use special symbols that are attached to the beginning of an images file name.

• Placing the “$†character at the beginning of the file name allows you just to upload an individual sprite sheet. It tells RMVXAce to use a mathematical operation to figure out where your 12 directional frames are. If you import a single sprite sheet without the "$" symbol in front of the file name the result is rather odd. An example of a sprite saved with the "$" symbol would be: $my_lonely_sprite.png
• The "!" symbol placed at the beginning of a file name gets rid of the four pixel float. What is the "four pixel float?" RMVXAce automatically raises your sprites by four pixels when being displayed on the screen. This helps your sprites stand out against the tiled background. It is also useful when the sprite is walking over tiles that have a rounded corner. Take a look at the sample image below.

The two sprites of Spiderman on the left are what happens normally. The "four pixel float" is in effect. You can clearly see this by looking at the edge of the autotile and the sprite on the upper left.

The two sprites of Spiderman to the right were imported under a file name that had a "!" at the beginning of it. Can you see how the pixel float is eliminated and the bottom edge of both sprites lines up with the tiles beneath them?

An example of a file saved with the "!" symbol could be: !my_grounded_sprites.png

 DOJO NINJA'S SECRET TIP:

Final Thoughts

I hope this tutorial has been helpful for you and maybe you learned something new. Leave a comment below or like. You can even offer suggestions for future tutorials. A future tutorial I have planned will talk about animating sprites including objects through manipulating the display of the 12 frames used in a single sprite sheet. Happy Spriting!

Now that we have our individual sprite in the front pose (see first tutorial), we want to be able to use it in the game. For this to happen we need to put it into the sprite sheet for all 12 frames (see second tutorial). We already have 1 pose. Now we need to make the other 11!

Seems like a lot of work, right? It is, but if we work smart we can save a few headaches.

*Note: The steps in this tutorial are all done in MS Paint. Sure I could have used Photoshop or Gimp but I wanted to show you how pixel art is done the old fashioned way without anti-aliasing brushes, layers, and a whole bunch of editing tools. You can actually learn a lot when you are forced to be creative using the tools you have. You will also develop more appreciation for the art.

This is going to be a long tutorial. I hope you stick with me until the end.

Setting Up Your Frame Template

• First we open up our single frame sprite in MS Paint. The image's size is set to 32 x 32 pixels.
• MS Paint's default primary color is black and the secondary color is white.
• Choose a new primary color that is not in your sprite's colors and is not white. I chose a light green.
• Then use the paint bucket tool to fill in the background behind your sprite. Make sure to fill in any gaps.

• Now we go to Image è Attributes  and set the image size to 96 x 128 pixels.
• Use the marquee tool and select the 32 x 32 sprite starting at 0,0.
• Then Edit è Copy
• Paste in the top right corner.

• Paste the copy into the middle column of the second row. Use the bottom corners of the two sprites we already have in the top row to align your square.

• Keep pasting by aligning the corners so you have a checkerboard pattern.
• Fill in the white squares with a different color not used by your sprite to complete your grid template.
• I also copied and pasted a sprite to the middle top row and made the background color match our checkerboard pattern.

The good news is that with a completed sprite in the middle top square we are 1/12 of the way done!

From here on out I will be using these codes to refer to specific frames within the grid. The letter represents the frame's facing direction and the number is the column the frame is in with column 1 starting at the right.

DOJO NINJA'S SPECIAL TIP:

 Next I open up the completed line art and color blocked sprite I had saved as a separate bitmap from before. Copy and paste it into your new sprite sheet at D3. Fill in the background color if it is helpful to you.

When you are working without any layering options, I've found that it is a lot easier to animate by using the base sprite without any shading or highlighting. There are a couple reasons why this makes sense and it will become clear to you shortly. (Trust me it will save you time and aggravation.)

 *Remember that there are many ways to do something. I am just showing you one of those ways.

Taking the First Step

If you read my second tutorial you will know that for each facing direction there are three postures: step forward with the right leg, both feet together, and step forward with the left leg.

Since we have the down-facing feet together posture done (D2), we are going to start animating that. I always start with the frame that puts the left foot forward. This is just personal preference.

So what happens when the character takes a step? How do we create the illusion that there is more depth?

We already know that the left leg is coming forward.

We can put the right leg back to create a sense of distance between the two.

Well wait! How do we show the difference between what is coming forwards or going backwards?

Answer: We resize and re-color. To create the illusion of depth we are going to make the foot coming towards the screen bigger and shrink the foot going away from us. We also use color values.  By making the receding leg/foot darker it creates a sense of distance between the two.

RECAP:

Going Forward = Bigger + Lighter (Occasionally)

Going Backwards = Smaller + Darker (Occasionally)

Whoa! Whoa! Whoa! What is this “occasionally†you sneaked in there?

Well the coloring also depends on where the light source is coming from remember? That’s why I told you to import a basic line and color sprite.

• Now I am going to do what I just said. I am making the left foot come forward and appear bigger, and the right foot goes backward and shrinks.
• I’m leaving the colors alone for now.
• I experiment by adjusting the pixels around and stop when I am moderately happy with what I have.

Right now it still looks a little awkward. Partly because there is no shading, but also because we now need to adjust the sprite's upper body. People don’t usually walk with their hands pinned to there sides. The arms sway back and forth. The general rule of thumb is that the hand opposite to the leg moving back is also moving back and the hand opposite the forward moving leg is also moving forward...So in this frame the left leg is moving forward; the right hand is moving forward. The right leg is moving back; the left hand is moving back.

• My next step is to create the right hand forward and left hand back, applying the same tricks we applied to the feet.
• I will also fill in the  base colors as needed.
• Because some body parts are either moving away or towards, we might not get to see all of them. 

 DOJO NINJA'S Training Exercise:

So to create the first step what I ended up doing was:

• I made the left shoulder more narrow as that part of the body is going away from us.
• I made his left arm smaller.
• I made his right hand come forward.
• I also used the marquee tool to select the right foot and flip it horizontally. I think it looks better this way.

Next we use the marquee tool to select the frame we just finished.

Copy, paste it to D1, and than flip it horizontally. Now you have both stepping frames completed! 

Back It Up

For the other directions we have to re-interpret our sprite facing different ways and scratch sprite again. But this time we can use what we learned from the original scratch as a guideline. Our reference image is also useful to have.

• The next thing I do is create the U2 frame.
• Once again I paste in my “base flat†where the U2 frame is.

I need to edit this sprite to accurately show what Spiderman looks like from the rear. I can keep a lot of what I have so far. I can keep his arms, belt, legs, and boots the same. I need to bring up the lines on his back to open up more room to add his red spider symbol. And probably the most work will go into adjusting the back of his head. I also flattened his feet by adding a pixel to indicate the back of the foot showing the heels.  However, I still don’t like his head.

Next we copy our newly made U2 sprite and paste it into the U3 position. I filled in the square dark green for my own benefit. It isn't necessary but helpful at times so you don’t get your pixels mixed up.

Now we edit our newly pasted sprite to make the left leg appear as if it is going forward and the right leg appear as if it is coming back. Same is true for the arms; left arm back and right arm forward.

Now use the marquee tool again to copy the  U3 sprite and paste it into the U1 position.

Then flip the image horizontally.

Now we have two directions done!

Is This My Good Side?

Okay translating the sprite to the profile view is also tricky. I go to L2, select it and move it over to L1. Again I re-colored the frame in to keep the pattern just as a personal preference.

Now we are going to begin translating our sprite into the L2 pose where the the character is facing left  with both feet together. First I draw some guidelines that line up with some of the major areas of the body and costume.

You may have noticed that I said I was going to make the left-facing poses, but instead the picture clearly shows my character is posing to the right. That is an error on my part which happens often but is easily fixable. Luckily I catch it later on. The final product will have the correct poses in the proper places.   

Now I start defining some of the basic shapes aligning them to where they were on the front sprite.

*Note: Not everything has to line up exactly. You may find that it looks awful. These are simply guides. I might need to change the look of the lines to fit the side view better.

Heads in profile are a little different than when viewing from the front. There is a slight curve where the base of the skull meets the back of the neck. Some people elect to do a ¾ side view. This allows you to see both feet in the image. A real profile view would only show one side of the body. You would only see one leg and one arm.

Copy and Paste U2 to L3. This way you have both the front and back feet-together sprites to work off of.

• We are not going to see much of the costumes details from the side view. I want to make sure I get the iconic eye that will help establish our sprite as Spiderman.
• I blocked in some colors and forms that I think are okay. I might revise them as I go along.
• Now I am going to copy and paste L2 to L3. I am holding off on costume details for now.
• I got rid of the guidelines and added in the dark green border again.

Following the concepts of closer is bigger and farther is smaller. And the opposite step/arm swing methods, I will start to edit the base side sprite to achieve the L3 pose.

I have the L3 pose finished. I made some adjustments to the base side sprite but I still might make more. Make sure to zoom out once and awhile to see it what your sprite looks like at its full resolution. I am not particular fond of my L3 Pose. This proved to be quite tricky. But for this tutorial I am not going to fuss with it anymore.

Next we will again copy the L2 pose and paste it into the L1 frame. This time we will create the pose for the right leg stepping forward and the left leg stepping back. This time the left arm will be swinging forward and the right arm will be swinging backward.

A few notes on the swinging arms and the distance between the legs. The further the distance between the two extremes will produce a look that the character is moving faster. In this case, Spiderman may look as if he is running.

I still do not like these step animations. Moving pixels can be very frustrating without layers, but it is an excellent skill builder. Maybe they will come together with the shading.

Okay, Now the L3 Pose is done. Now we need to add the costume’s web pattern in for all three of the poses in our facing left row. (His head reminds me of an alien for some reason…)

Now the pattern has been added to all the three poses in the left facing row.

This step wasn’t fun. Once again I think chibi sprites are difficult because you have to capture the essence of the character without being able to capture too much detail. Hmm…maybe a Mack-sized Spiderman is in order.

The headaches are almost over. The next step shows why working smarter pays off.

We are going to use the marquee tool again and select the entire row of left-facing poses.

• Then we are going to copy them and paste them into the facing right row.
• While the row of poses is still selected we rotate them horizontally.
• Take L2, highlight with the marquee tool, copy, paste onto R2, flip horizontally, and then align center. In this case, I shifted my pasted pose a pixel to the left so that the outside corners of the eyes would line up.

See picture:

• Copy L1, Paste it onto R1, and flip horizontally.
• Copy L3, Paste it onto R3, and flip horizontally.

Adding in the Light Source

We are almost done! The last part is to add the shading to all of our sprites. If it helps, have your color ramp nearby. If we did the shading step before, let’s say on the left-facing sprites, when we flipped them horizontally the light would have been coming from the wrong direction! Now that all our poses are done and flat we can add the shading. Remember, the light source is coming from the upper left. We will use the first completed pose in D2 as our guide. Let’s make some color changes and finish this sprite!

I made an adjustment to the size of Spiderman’s eye on the side poses. Now it is a little bigger and looks a little better.

I am also fixing the rear poses because the stepping animation for each one is different.

I have resisted the urge to open this up in Photoshop or Gimp.

Now that our complete sprite sheet is done, we can copy and paste the whole thing into an existing sprite sheet file or we can save it with the $ symbol in front of the filename. PHEW!

Quality Control

The next step in the process is to see how well it animates in RMVXAce.

• Import your sprite into the program.
• Set it as your main character’s graphic and test play.
• Observe how it moves around the screen. Does it jolt when way or another? Bob up and down? This helps us determine if our sprite is centered. It should look smooth.
• Revise your sprite accordingly.

The Finished Product!!!

*NOTE: I did adjust the sprite sheet's hue and brightness in Photoshop because I thought the original looked a little too drab. This sprite will be available to download soon from my graphic resource page.

Final Thoughts

Congratulations on making it through that long tutorial! Working with pixels can be difficult so don't give up. Refine, refine, and refine if you have to. Once you learn some basic principles and techniques, you too can create wonderful animated sprites! If you have any questions or comments please reply in the thread below. What kind of tutorial would you like to see next?

The purpose of this tutorial is to show you what you can do with your sprites now that you have them created. Having a sprite that can move around and interact with your world is great. You can make your game seem more alive when the characters in the game are doing something. Too often the Non-playable Characters (NPCs) are either:

Walking around aimlessly

---or---

Just standing still waiting for you to come and talk to them.

NPCs have lives of their own you know. We can make the game world come alive by eventing simple animations to spice up the humdrum lives of our NPCs. We can even do this for special actions our characters do.

This tutorial is somewhat about animation, somewhat about eventing, and somewhat about sprite editing. It is a little bit of all three wrapped into one for a singular purpose. Don't expect an in-depth study on any of the three. This is novice friendly but I highly suggest reading my prior three tutorials as this one assumes you have. Follow along with me as I take you through my process of creating simple evented animations!

Programs and Materials:

I will be making an animation showing one of the sprites from the RTP doing some bench pressing!

We will need:

• A photo editing program that allows for multiple layers and opacity changes. In this tutorial I will be using Photoshop (sorry MS Paint, layers makes life easier).
• The base RTP sprite
• Any other sprites from the RTP that has the character we want
• A little knowledge about how the RMVXAce engine animates the sprites from the sprite sheet.
• Patience

Event Animations:

There are two simple ways to animate an event. The simplest way is by using the step sequence for the sprite in the event editor. The second way involves animating the event through the use of the custom movement route function in the event editor. We will get more into the animation aspect a little later on in this tutorial and I will show you examples of both types. For now start creating our custom behavior sprite.

Creating The Custom Frames:

Animation is created by repeating frames of still images. At a high frame rate our brains can't distinguish that there are separate still images and we interpret what we are saying as movement.

With RMVXAce's sprite sheet, we are limited to how many frames we have available to animate.

Dojo Ninja's Scroll of Useful information:

I am going to make three frames:

• The first frame is for the character at rest holding the weights.
• The second frame is the lifting motion midway between rest and full extension.
• The third frame is going to be when the character has fully extended his arms with the weights.

I export all the available sprite images I have for my character. He is in Actor 3, Behavior 1, and Damage 1 in the RTP

I bring all these images into PhotoShop.

I create a new .psd project file.  I set the Canvas Size to 96 pixels wide x 128 pixels tall.

I go to  Viewè New guide

                        I add guidelines for the following:
                        Vertical: 32px, 64px

                        Horizontal: 32px, 64px, 96px

Then View è Lock Guides

(Why didn’t I just set up a 32 x 32 grid? Because I didn’t want to).

I import my images into new layers in PS. I have 12 frames from the base sprite sheet, 3 from the damage sheet, and 1 from the behavior. I didn’t want the frozen or petrified one.

*Note: There might be some steps detailing what I am doing in Photoshop but it is because it is relevant to the tutorial's content. This is not a tutorial on Photoshop. What you will be reading is a quick rundown of the process I was doing to create the frames. It may seem disjointed, but again remember that overall this tutorial is about creating animated events...I am showing you the inner workings of my process.

Making the First Frame

I want to create the first frame of him laying down on a weight bench. The first pose looks good for the upper body and the lower body I want will be for both legs.

 Dojo Ninja's Words of Wisdom:

I erased his right leg. Duplicated his left, and flipped it horizontally for his new right leg. Now it looks like both legs are going towards the floor. I copied and pasted his eyes from his base sprite’s downward facing direction on top of the current closed eyes and merged the two layers. The result is:

I get rid of his arms up to the cuff of his denim jacket. I copy and paste the hands from the damaged sprite position and paste them for the left and right hands.

I rotate each hand 90 degrees clockwise. Now his hands will match the grip for grabbing the weights. Then I merge the hand layers together into a single layer thought they are still separate from the body's layer.

Following along okay so far? We are only just beginning.

Next we draw the weights now that we have hands to hold them with. This will be done in a new layer on top of the previous layers.

Then we create the bench he is laying on. I create a new layer below the others and begin to draw in the bench, keeping in mind where his legs bend at the knee. Does he even have knees? 

Small sprites don’t give us much to work with, which is why we must simplify and exaggerate. Counter-intuitive, I know.

I don’t want to merge the layers here because I may still want to manipulate them. So what I do is select the image with the marquee tool and then do CRTL + SHIFT + C. This makes a copy of the image as it looks on your screen as if the layers were merged. I then paste this into a new layer which I name frame 1.

Frame 1 is done:

Making the Second Frame

Let’s begin Frame 2…he has started lifting. His arms are midway to full extension. Lets put a little grimace on his face. I want his eyes closed here. That is an easy edit, but lucky for us we already have an example of it from one of our imported poses.

I use the trick of foreshortening to show that the hands and the weights are getting closer by making them get bigger. We don’t need to see the arms because they are blocked from our point of view.

I know there wasn't much explanation here, but this is the result for frame 2:

Testing the First Two Frames

It's good to check the transition between the first two frames to make sure that your animation is looking decent before moving on to creating the next frame. I put the second frame on top of the first frame and click the second frame’s “eye†icon next to its layer to toggle its visibility. This allows me to quickly assess the transition from the first to the second frame and check the proportion/size of the hands and the weights. What I notice is that the hands are too square and the weights may be too big. The hands may also need to be further apart from the weights. I wasn't kidding about patience being a required resource.

Finishing the Third Frame and Testing the Animation

I finish making the third frame. This time the weights and the hands are ridiculously huge and I wanted to exaggerate a little by having the weights bending over the bar back towards the character. Exaggeration is one of the principles of animation. Although it didn't quite work out in this particular one:

Woof right? So I quickly scrapped that third frame and designed a few alternates. Once I was happy with what I had, it was time to put all three frames into a sprite sheet that could be imported into RMVXAce.

The redesigned third frame:

Adding the Frames to a Sprite Sheet

I calculate the size based on the height and width of my largest sprite. In this case it is the drawing from frame 3. For ease of use on the grid, I am going to make the new width 64 and the height 40. My individual sprite sheet should be 192 pixels wide by 160 pixels tall.

I set up my new guidelines for each row and column.

I copy and paste my frames into the new sprite sheet. I put them in the down position. The first frame goes into the left column (your left), the second frame goes in the center column, and the third frame goes into the right column (your right). Make sure the frames are centered or it look like your character is rocking from side to side when you play your animation.

I really don’t need to do anymore other than save this with a “$†in front of the filename and import it into RMVXAce.

Making the Step Sequence Event

1. Import your animation sprite sheet into the database.
2. Create a new event on the map of your choice.
3. Set the event's graphic to the first frame of your animation. Since I put mine in the Down-Stepping Right position, that is what I will choose.
4. Make sure the "Step Sequence" check box is the only one checked.
5. You are done. Easy right?

Remember this diagram?

The step sequencer starts on the frame you select and animates from left to right and then back to the left before it starts the cycle over again. Huh?

In my example, I set my event's graphic to the image at D1. This means that the animation sequence will start at D1, then go to D2, D3, and then back to D2 before the cycle starts with D1 again. This is both helpful and irritating. We are getting an extra frame (four for the price of three), however one frame will be repeated twice. Confused yet? Here are the animation cycles based on where you start your event graphic:

Starting at D1: D1-D2-D3-D2

Starting at D2: D2-D3-D2-D1

Starting at D3: D3-D2-D1-D2

This pattern hold true for the other directions as well (facing left, facing right, and facing up).

Here is the result of our labors by animating through the step sequence:

*Note: Adjust the speed of your animation when necessary. I don't think my guy will be quickly pumping out reps, so I would set this to normal or slower.

Second Simple Way to Animate: Through the Custom Move Route

I can get more bang for my buck if I have four frames to animate from and I can selectively choose what I order I want them to animate in. So what I did was create a fourth frame of animation for my sprite and re-arranged the four frames in a new sprite sheet. All four frames are now in the center column. Each frame is assigned to one of the directions: down, left, right, and up.

Again, I save this file and import it into the RMVXAce database. Let's do a simple animation first using only two frames: D2 (at rest) and L2 (pushing weights away).

I create my event and set the graphic to my first frame at D2.

Now we go to the event's movement options and select custom move route.

I want him to do some reps on the bench press so I make sure the "repeating" box is checked.

Here is what we put into the custom move route's editor:

$>Turn Left (This changes to the graphic of him pushing the weights up at L2)

$>Wait 30 frames (This is a half-second)

$>Turn Down (The graphic changes back to the rest position at D2)

$>Wait 30 frames (We wait again because it cycles back to the first command and it would be awfully fast without the wait at the end here)

This is what we get as the result:

That was too easy right? Okay, let me show you what we can do when we put our minds to it! Here is the hard one...

...go to the event's movement options again and select custom move route. Don't be alarmed but this is what I entered into the custom move route's editor:

Check the box that says "repeating" and we are done! This is the final product:

He lifts the weights, gets red in the face, takes a couple of breaths, calms down and the cycle repeats. I like it a lot better than just cycling through the stepping sequence and it allows me to control the timing between frames. Add in a grunting SE and we have it made!

Conclusion

I hoped you enjoyed the tutorial and learned something, found it useful, or maybe just amusing. I worked longer on this than I care to mention. Post a reply if you have comments or questions. Be on the lookout for my next tutorial.

Introduction

I often see resource requests where somebody has a sprite they made using the  character generator in RMVXAce and they need a "downed," "damaged," or "fallen" pose for their sprite. Unfortunately, the generator doesn't yet have the ability to make these types of poses for the sprites. Who knows? Maybe someone will be willing to work on a generator for fallen sprites...but I wouldn't hold my breath. It is easy to do it yourself and through this tutorial I am going to show you how!

So why are downed versions of your sprite important?

Why are any variations of your sprite's pose important?

Variations in your sprite’s behavior, look, or function can add a lot of depth to your game. Done correctly it will help enhance overall game-play and add more of a sense of realism to your game. If you have a character who is supposed to be dead/unconscious, shouldn't your graphic represent that? (You are probably thinking “Well that’s obvious").

It is obvious! But making downed sprites for yourself is rewarding and will help you develop your skill.

The process of making our own downed sprite is very similar to the process I used to make custom animations in Tutorial 4. There are several basic "fallen" poses. I am going to introduce them to you and then show you how to make only one of them in particular (the easiest one) for this tutorial.

Materials

We will need:

• Patience
• Time
• An eye for detail (Don’t worry, I’ll show you what to look for)
• Image editing software that allows for multiple layers and opacity changes.

I will be using Photoshop again for this tutorial but you can also do this in GIMP or other comparable programs as well.

STEP 1: Generate your Sprite

It goes without saying but you should have already used the generator to make your sprite. I am going to go out on a limb here and randomly generate one.

And I ended up with this guy…

Note: The generator does not randomly choose the clothing they wear. Isn’t that odd? I gave him the suit…that’s the only thing I changed.

STEP 2: Export

Using the RMVXAce’s resource manager or accessing your project’s graphic’s files, export your sprite sheet to your desktop or wherever you can open it with your image editing software.

STEP 3: Initial Editing Phase

Now we open up the sprite sheet in our image editing program. RMVXAce saved one sprite onto a 2 x 4 sprite sheet. I have lots of empty room. I am not going to worry about that for now. It is something I can deal with later. If you want to re-size your image to the proportions of a single sprite sheet, then go right ahead.

Now we duplicate the original layer and then make the original layer invisible by clicking on the eye icon. (Remember that it doesn’t hurt to name your layers to keep yourself organized.)

We are going to start manipulating our images and we want another copy of our original just in case we mess up.

Step 4: Pulling the Palette

• Create a new layer and name it “Palette.â€
• Zoom in close next to one of the sprite’s poses. We only need to be next to one because it has all the colors we need.
• We are going to be using the eyedropper tool to select the colors that are used in the sprite.
• Eyedropper to select the color…switch to pencil tool (set at 1px) and place the color down on your “Palette†layer.

 DOJO NINJA'S SECRET TIP:

I got a count of 25 colors in my sprite. Now, I could be wrong and miscounted but it doesn’t matter. Don’t even worry if you didn’t pull all of the colors. Just do your best to pull out most of them. A lot of colors used in my sprite are very similar. Only by putting them side by side was I able to tell that they were indeed different colors.

Then I separated my palette by region and ordered them in a color ramp. I have separate regions for the hair, eyes, skin, and suit. See the image below:

Step 5: Ripping Apart

What we do next seems barbaric, but we are going to separate the sprite into pieces. We want a layer for just the head, a layer for the torso, a layer for each arm, and a layer for each leg.

Make copies and then use the eraser tool to get rid of the parts you don’t want.

FEATURE STUDY

At this point we are going to stop  and examine what makes a sprite looks like it is "downed". In the image below I have referenced a few poses from the RTP's damage sprite sheets

Numbered are the most common poses:

1: Sprite is laying on their back.

2: Sprite is sitting on their bottom and is slouched over.

3: Sprite is laying on their stomach.

4: Sprite is laying on their stomach at an oblique angle.

5: Sprite is laying on their back at an oblique angle.

Creating sprites that have fallen at the oblique angles are the most difficult, but since the pixels are distributed diagonally across the frame, more pixels can be drawn in. Once you've finished observing the above poses, take a look at the different head shapes.

This picture shows the head positions of a fallen sprites and the base sprite.

A: Laying on back pose.

B: Base sprite pose (normal walking).

C: Sitting and slouched pose.

D: Laying on stomach pose.

What do you notice? Read the spoiler one you have finished observing the heads.

Step 7: Creating the Downed Sprite

We are going to be making the easiest downed sprite which is when the character is laying on its stomach.

• First I am going to duplicate my separate layers so I have back ups if I need them.
• Then I put my original layers in a group and name it “Spare Parts.â€
• I also imported a face-down reference graphic.
• Good news! Since the character is lying on his stomach we don’t see the torso.  So I make it invisible and drag it to the bottom out of the way for now.
• The hardest part but most crucial part to making this effect work is editing the head to get the right perspective. We are going for the octagon here. It doesn’t have to be exact but you get the idea. My sprite’s head is in good shape already.
• Select the head layer to begin working on that. You can pull up your palette layer if you want or you can use the eyedropper tool to pick the colors you want because we will be filling in some spots that we erase.
• Now let’s close his eyes.
• Luckily his eyebrows aren’t as bushy as ones from the reference sprite next to him. The width of his eye is three pixels and the height is five. To close them, all I need to do is draw a black line 1 pixel high by 3 pixels wide. Were he to close his eyes the eyelids would meet in the middle at the third pixel in the center. But since his head is coming towards us we are going to shift that line down one more pixel.
• Naturally, the shading on the face around the eyes is going to shift down as well because the forehead is coming forward, but we can worry about those details later.
• Now to add emotion, we need to slant the eyebrows. Downward slants are good for pain/anger. 

So far the head edit goes like this (from left to right):

Note: You don’t need that many copies of the head like I have. I just did it to illustrate for this tutorial’s purposes.

• Next we need to flatten the jaw line.
• I widen the jaw and bottom of the face a few pixels.
• The last thing for the head is to fix the hair. I select only the hairline where the hair meets the scalp and pull that down a few pixels.

• Next we fill in the hair on the top of the head using the existing pixels as a guide. Notice how the hair is broken up into chunks or strands and follow those lines. It may take some doing and re-doing a few times. Always zoom back out to see how it looks at its full resolution.

Step 8: Bring in the Arms

• Make both arm layers active and visible.
• Move each arm down so that they rest on the bottom of the frame. I put in a guideline at the 32px mark as a reference. The reference sprite is also there.
• Next we select the head layer. In the layer window, but we need the head layer to be positioned above both of the arm layers.
• Then we position the head right over the arms and above the hands. Check out the example:

Step 9: Arrange the legs

• Now we take both legs and rotate them 180 degrees.
• Use your best judgment to place the legs above your character’s head. Keep them evenly spaced and symmetrical. My character’s legs are a little shorter than the reference sprite’s so I brought them two pixels away from the head.
• Then we fill in the blank spaces between the legs and the head. The section we are filling in is going to be more of the legs. The legs may look longer than when the base sprite is walking but that's okay.

As it stands now, the sprite we edited is definitely passable for a downed sprite, but let’s just quickly compare our edited sprite to the reference sprite. Here are the two big differences:

1. Our sprite has his arms bent inward more at the elbows. The reference sprite has his arms less bent and more extended towards the camera. We could move pixels in the arm around to match the  reference pose but I am deciding to keep his arms where they are.
2. Our sprite’s hands are resting on fists. This would be great if you were animating your character having a tantrum. The reference sprite has hands that are flat resting on the palms. This is what I want for my sprite.

If  you know your way around Photoshop or the image editing software you are using, it should be no problem for you to perform a quick hand swap and this can be done multiple ways.

Step 10: Making Adjustments

• I erase the hands on my sprite.
• Next I copy the hands of the reference sprite (erasing unwanted pixels from the arm so I just have the flat hands) and save it to a new layer above the arm and head layers.
• Lastly, I position the flat hands to where I want them to go.
• Change the skin tone if you need to at this point. Remember that you have your palette handy. Just compare the colors in your skin ramp to the colors in the hands you are duplicating.
• Make adjustments as necessary so the bottom of the hands touch the bottom of the frame.
• Fill in any empty pixels from the hand swap and complete by adding any finishing touches to the shading or highlights.

Here is our finished sprite:

Conclusion

It may seem difficult at first and I included a lot of steps, but it gets easier with practice and the multiple steps I brought you through were for your benefit. I wanted you to clearly see what was happening at each step.

To Recap, here is a quick summary:

-Get the sprite you want edited into an image editing software.

-Pull out the colors from its palette to have on hand.

-Separate the sprite into its component body parts and make duplicate layers to have on hand.

-Flatten the head and jaw.

-Slant the eyebrows, close the eyes, and bring them down closer to the chin.

-Bring down the hairline and fill in the hair.

-Position the arms at the bottom with the head down in front and above them.

-Change the hands if you want to.

-Rotate the legs and put them above the head. Fill in the empty spaces between the legs and head.

That is it in a nutshell! Not so bad right?

Well I hope you enjoyed this tutorial of mine. Please rate, comment, or subscribe…err wait…this isn’t a YouTube video. In any case, leave any questions or comments below.

What should I do for my next tutorial?

Until then…happy spriting!

-One Cut Studio

Introduction

Welcome to the first tutorial in my Landscape Series. This tutorial will show you one method that can be used to create a grass tile. Grass tiles seem like they should be very easy to make, but ask anyone who has tried making a grass tile before and they will tell you it is a lot more difficult than it first appears. Not to worry! I am going to reveal insights into the art of creating landscape tiles through this series of tutorials so you can build your world the way you want.

Tile Study

I always like to start by examining examples of art that has been created. I try to understand the process the artist used to create his/her tile. Closely examining others' work and trying to reverse engineer the process can reveal insights into the process that will help your own creations. Let's start by looking at the standard grass tile from the RMVXAce RTP:

The default grass tile looks like a bland green carpet. At normal magnification I can see lots of green and a lot of little dots that are a little lighter than the background speckled throughout the tile. I am not able to pick out any clear shapes or structures, but it does repeat with itself nicely as a tile.

Let’s zoom in 1600% and see if we notice anything else about how this tile was constructed.

I am not going to show you how to make a tile like this one because I still find it difficult to understand how they created the tile and it lacks excitement. I will show you how to make a grass tile using simple concepts and interesting patterns.

What I do notice about this tile is that the artist used a lot of muted colors. This makes sense because we want our characters to stand out against the background textures that they are walking on.

Tiling

Let’s talk about tiling next. In order for your tile to work on the map, it needs to be able to repeat and keep its pattern consistent when placed in all directions on the map. A true tile will cover a plane from edge to edge with a repeating pattern that can go on infinitely. Now I know that games don’t have infinitely long grasslands, but I just want to illustrate the concept of tessellating before we move on to creating the tile.

DOJO NINJA'S REFERENCE SCROLL:

However, sometimes we will want our tile to interact with another tile (like when the grass comes to the edge of a wall). This is when we can break the tessellation and create a boundary between the two. I will show how this is done in another tutorial.

The Grid Effect

 We can’t escape the fact that RMVXAce uses a square grid system to lay down tiles. When creating maps we try to eliminate the Grid Effect as much as we can. We don’t want people to look at one of our maps and be able to see where the tile was placed over and over again. It makes our maps look like a cheesy copy and paste job. Effective maps conceal the grid by using well designed tiles and utilizing variations of the base tile. It will be easier for me to show you  the Grid Effect rather than tell you.

Take a look at this grass tile:

At first glance, it looks like a pretty decent tile. The contrast between the lightest and darkest colors seems good and the shapes seem to have a direction. This looks like it might be good for a leafy jungle floor. Well, let’s check and see how well it tiles. I call this the tiling test. I am going to duplicate the tile several times and create a border around my central tile.

Do you see what happened? It would be great if we wanted a field of even square patches of grass, but we don’t. We want to be able to make our field the dimensions of our choosing in a continuous manner. This is a blatant example the Grid Effect at work.

We can’t eliminate the grid effect completely but we sure can hide it. So how do we do that?

Well, if you take a closer look at the original grass tile you will see that none of the drawn pixels touch any of the borders of the tile. You may think “Oh, so I just have to draw stuff to the borders. Got it.â€

Let’s try that and see what happens.

Now that I extended some of my pixel shapes to all of the tile’s borders, Let’s see if it passes the tiling test.

Hey it got rid of those lines in the middle between the tiles! But something is still off. Can you see where the grid effect is happening? Click on the spoiler below when you think you know.

So what is the solution when bringing the pixel clusters to the borders is not enough to conceal the grid effect?

First: We need to break up the pixel clusters to cross the borders not just touch them.

Second: Whichever border your cluster crosses, it must re-emerge on the opposite border at the same position. Keep in mind that this is a general guideline because sometimes a pixel cluster can be resting against another pixel cluster instead of crossing through the border.

Let’s take a look at an example:

In the picture above I am using a pixel cluster or shape (I may use these two terms interchangeably) that goes three pixels right, two pixels up, and repeats this pattern twice. It looks like a staircase or a zig-zag. In the middle of the tile it is the regular unbroken pattern.

At the eastern edge of the tile I started my cluster at one pixel. The pattern calls for two more pixels to the right but I have hit my wall. So I must go to the opposite edge (west) and continue my rightward progression of the pattern from there. Recall that I already went one pixel left, so from the western edge of the tile I am going to finish the first row by going two pixels left and then start the rest of the pattern.

If it helps try to imagine what it would look like if an identical tile is placed next to it at that edge.

Do you see how the tile tessellates with itself?

So pay attention to the borders and intentionally draw clusters that cross through the borders., but be careful when a cluster touches or crosses through more than one border.

So what happens when our pixel cluster travels through or touches more than one border? The same rules above apply, but just make sure you stay consistent with your cluster pattern and that it won’t interfere with the placement of another cluster. Take a look at the red pattern in the following image.

It starts the at the right of the tile with two pixels in length when it hits the eastern border. The pattern continues to the western border and then heads north. It hits the northern border and the pattern continues from the same direction at the southern border. Let’s see what it looks like tessellated:

Yes! The shape tessellates perfectly, even when we have it cross multiple borders. So use this technique to help conceal the dreaded grid effect! It may seem tricky at first but practice is the key!

Picking the Color Palette

At this point I bet you are thinking: “Come on you are supposed to show us how to make a grass tile!â€

I know it’s a lot  of information but the basics are important and this knowledge will help you avoid many of the mistakes people make when they try tiling for the first time.

DOJO NINJA'S WORDS OF WISDOM:

There are many ways to achieve the same goal and this is just one way. I am using Photoshop but grass tiles can also be easily done in MSPaint.

Four our color palette we are only going to use four colors. Grass is typically green. So I am going to use a shade of green that reminds me of grass. A high intensity neon green should be avoided here, unless you intentionally want to hurt the eyes of your players. It’s best to pick muted colors if you want your characters to stick out from the background.

The easiest way is to pick a base green color and then make a very basic luminosity ramp. Think of luminosity as how much light is reflecting off of our color or how intense the light is that the color is being exposed to. The higher the luminosity, the brighter the color and the lower the luminosity, the darker the color is going to be. We could also do some hue-shifting, but that will have to be discussed in another tutorial as we are getting into color theory. Keep in mind you could also use browns and yellow-greens, especially if you are going for a dried-grass look.

Back to the palette; so I pick my base color first, then two colors darker than my base, and one color lighter than my base. From darkest to lightest I have my background color, shadow, base color, and highlight. They should all be relatively spaced apart meaning, the jump from color to color shouldn't be two extreme in value or too close in value between each color.

Take a look at the four sample palettes below (labeled A, B, C, and D). Which one do you think would be the best one for our current purpose in creating a grass tile. Consider what I told you about the differences between values and the intensity of the light. Click on the spoiler when you think you know which one is the best.

The best palette choice is:

Pixel Clusters/Shapes

Now that we have our palette set, we need to talk about those things I mentioned earlier called pixel clusters or pixel shapes. Essentially a pixel by itself is lonely…it is noise. It doesn’t do anything by itself. Ever heard of the saying “You are the company you keep?†It may not be entirely true for humans, but it works well for pixels. Pixels are defined by how they are grouped with other pixels, what pixels they are next to, and the colors of those pixels. Pixels form an identity by grouping with other pixels. Together they make a cluster. These clusters define the shapes and patterns that go into our tiles. We use these clusters to make textures.

Have you ever played Tetris? The shapes of the blocks in Tetris can be used as some of the most basic pixel clusters. Do remember what the blocks in Tetris look like? Here is a refresher:

I don’t know if they actually have names but I just labeled them to what I usually call them.

All the Tetris blocks can be used as basic pixel clusters. Some are better to use than others in certain circumstances. It is important to use each rotation and reflection of the blocks as well. Check out the image below.

Can you see which clusters might have the most flexibility? Don’t forget that we can combine clusters too.

I am also going to add a few more smaller pixel shapes that work well when making textures, again I made up the names for them.

Creating the Grass Tile (Finally!)

With all that knowledge in your head it is finally time for me to walk you through one simple process I use to create a grass tile.

First I fill in the 32 x 32 pixel area with the darkest color in my palette. This serves as the background. Pretty easy so far.

Next I start filling in pixel clusters with my base color. I could start with the shadow color, but I like starting with the base to get a sense of direction for my grass. I am only using two types of pixel clusters:

• The ZigZag
• The Corner

I draw in most shapes going the same direction. This is when we establish the directional flow for our blades of grass. Occasionally I will put some shapes facing different directions to break up the pattern and add a little random variance to the tile. Be careful not to line the clusters up with one another. I spread out my clusters evenly among the entire tile and fill it to a medium density.

Notice that I am drawing both the ZigZag and the Corner with my base color.

Now I go back and use my shadow color. I fill between the spaces of the base color with the Corner cluster shape. Again most of the clusters are facing the same direction with a few variants thrown in. I am not drawing any ZigZags with my shadow color.

Finally we add the highlight color in. This time I am going to again use both pixel cluster types: the corner and the zigzag.  I fill in the negative spaces between pixel clusters following the guideline that no clusters of the same color should touch and only allowing lighter colors to overlap darker colors.

DOJO NINJA'S WARNING:

Now let’s zoom out and take a look at the completed tile:

Not too bad right? One last test for quality purposes. Let’s see how well it tiles.

Alright! I like it. The colors look good, there is a nice direction to the grass, and even through the grid effect is still there, it is barely visible.

Conclusion

Remember that there is always multiple ways to do things. What I have below are guidelines and not necessarily rules, because exceptions always exist. These guidelines are meant to help you get started creating your own grass tile designs.

• Experiment with colors and clusters. Have fun playing tetris on your tile designs. I found out many things through experimentation this way.
• For highly used background tiles (like the grass tile), select muted color palettes so the game’s actors will stand out.
• Give your grass direction by placing your clusters in a uniform direction.
• Move across the borders to conceal the grid effect.
• Work from dark colors to light colors.
• Don't let clusters of the same color touch each other.
• Only allow lighter colors to overlap darker colors.
• Pay attention to the negative space or "empty space" between your pixel clusters as this will affect the overall look and feel of your tile.

Well, I hope you enjoyed the first tutorial in my Landscape Series. I am planning to do future tutorials about the grass tile showing you how to add variance, and create borders with other tiles.

If you used or read this tutorial I would love to hear feedback from you and see some of your own creations.

Until next time.

Introduction

In the previous tutorial I showed you one process to make a grass tile. A grass tile is great but our RPG world is probably not one giant grassy plain. We can add height and depth to our maps by creating cliffs and rock walls. In this tutorial I will show you how to elevate your game with cliff tiles and you also might learn some geology along the way.

Geology

Before we actually begin drawing our tiles, I want to give you a refresher on some geological concepts that may seem unimportant at first but will really make sense to the overall look and feel of your game world. I try to do research when ever I do graphic work on a subject. Luckily I minored in geology as an undergraduate. I am no expert, and I don’t want to bore you, so here are the basics:

Geology is the study of the earth. Most people associate geology with studying rocks.

There are three main types of rock:

• Sedimentary: Rocks made from sediment deposited in layers and built over time.
• Igneous: Rocks formed when lava or magma cools (from volcanoes and such).
• Metamorphic: Rocks formed when intense heat and/or pressure changes their characteristics.

Process Geomorphology: Process Geomorphology is a subcategory of Geology. Basically, Process Geomorphology is the study of how landforms are created. Understanding how cliffs became cliffs or how rivers run the courses they do can affect the way our maps look. I don’t expect  that your maps in RMVXAce are going to have drumlins, terminal moraines, and alluvial fans, but knowing some geological basics can make your maps more real. It will also help you plan where you place tiles. Sometimes that can be the hardest part…but not if you know how the terrain is reacting. (Okay so maybe I will have to do a mapping tutorial in the future called a Process Geomorphologic Approach to Mapping.) -"The DOJO NINJA does not like this idea."

Anyway, let me give you an example:

I use to make my cliffs out of neatly compacted, rounded stones. Why might this be wrong?

Natural Cliff or Stone wall?

One of the first things I like to do when creating new tiles is look at reference images. I can use these reference images to get information about textures, patterns, and colors. It is handy when you have geology textbooks laying around, but a google search was much faster.

In the above example where I used neatly compacted round river rocks is still good to use in mapping…just not in a natural cliff face. These types of rocks are used in man-made rock walls. These would be good to use for castles or town walls. Natural cliff faces can be made of any type of rock so don’t always assume you have to use brown or gray either. The Cliffs of Dover are white.

 DOJO NINJA'S SPECIAL TIP:

Now I will show you some pictures of various structures and beneath each are my thoughts about them. Don’t worry we will be getting to the actual creation of the tiles in this tutorial too.

These natural cliffs form a steep barrier to the sea. You can see deep grooves between sections of the rock broken into what can be seen as columns. If I were to describe the overall shape of the rocks it would be cubic or somewhat like rectangular prisms.

This picture is a nice illustration of the depth that cliff can bring to your map. Look at all the different levels of height being shown here. The waterfall works its way down eroding into the rock. Again, the rocks in this picture are blocky and angular.

This picture shows a natural rock face. The properties of the rock determine how it cracks when exposed to stress. Pay attention to the direction and spacing of the cracks. Do you see any patterns? Also notice that vegetation can grow out of cracks in the rock face. This is a little detail you can add to your tiles for variation in your landscape.

This is a man-made rock wall. It is held together by nothing more than gravity and the weight of the rocks pressing against each other. Rocks of different sizes are carefully selected to fit snugly into each empty space. This picture shows angular blocks but a dry-set rock wall can also be made using round stones as well.

This is another example of a dry-stack rock wall. This time the wall is made up of evenly sized, flat rock slabs.

This last picture is an example of another type of man-made rock wall, but it is not a dry-stack. This is a wall made when rocks are held together by a matrix. The matrix can be cement, mud, plaster, or any other material that hardens between the rocks to bind them in place.

Finally, onto making an actual tile...

A Man-made Rock Wall.

Step One:

Draw some basic round shapes of different sizes, but not perfect circles or ovals. Make sure that each shape has their own layer. Here I have drawn three different sized rocks:

Step Two:

Next were are going to pick the colors for our palette. I am using black, a darkest color, a shadow color, the base Color (Midtone), and a highlight color. You can always change the palette if you don’t like it later on. I chose pinkish gray because I didn’t want just plain gray stones.Then fill each rock with the base color.

Step Three:

Duplicate each rock layer several times. We are going to use these stones like puzzle pieces to fill in our tile. We want as little gaps as possible between our stones. For this style of wall do not overlap the layers of stones, but it is okay if they share a border with an adjacent stone.

I like to start with the larger rocks first and go in descending order. It is easier to squeeze the smaller rocks into the empty spaces. Also, I like to start at the edge of the tile. Remember it needs to repeat so we have to make sure that the edges line up seamlessly. (See tutorial 6 for more about tessellation).

*Note: There are other methods to create seamless tiles. We will explore that possibly in the future. For now develop your sense of space by manipulating the pieces manually.

In the above picture, the section of the rock with the marquee around it crosses over the eastern border of the tile. While it is still selected, I use the move tool to move that piece over to the western border of the tile so the two pieces of the rock will connect when the pattern repeats. See below:

Step Four:

Next we will fill in the rest of the border rocks, mixing between different sizes. Pay special attention to the corners because that is where a rock could be split up into multiple parts.

DOJO NINJA'S SECRET ADVICE:

Step Five:

So the border is all done. I have a few gaps but it is okay. There are naturally going to be gaps in our rock wall. In this step we are going to fill in the rest of the inside of the tile with our rocks. Remember, shared edges are okay, overlap is not.

Step Six:

Next we need to fill all those little gaps with a smaller rock. I am going to draw in some smaller round shapes between the largest cracks. I will fill in the rest of the empty spaces with white only for the time being. The white will contrast against the black outline of the stones and really help us see where our negative space is. Zoom out and adjust shapes as necessary so it doesn’t look like one rock is floating in front of another. Don't redraw the edges at this point unless you know for sure it will repeat when tiled.

Step Seven:

Now that the gaps are filled we can start coloring the rocks.

First I change the black outline of the rocks to the darkest color, but I decided that I needed a darker shade of my darkest color and the I fill the white spaces with that color. The new color has the red arrow pointing to it. To recap: the negative space is filled by the newest darkest color, while the black outline has been replaced by the previous darkest color.

 DOJO NINJA SAYS:

Step Eight:

Next we will add the shadow and the highlight color each on their own separate layer so we can erase as we please without worrying about the base color which is already applied underneath. We can merge layers when we finish.

Remember to determine the direction of your light source for the shadows and highlights. My light source will be coming from the upper left so shadows will be to the lower right. I also changed the color of my highlight color because it made the rocks look too shiny.

Here is the finished tile at actual pixel size:

Let’s see how well it tiles:

I can see a little evidence of the grid effect happening, so I would probably make some variations to the tile or modify some of the shapes, but it works well overall and I like the colors.

I can apply the same process to angular blocks as well for making cliff faces. This tile is one such example although it is still a work in progress:

Conclusion:

That is all for now. I hope you enjoyed this tutorial. There is still much to learn especially when we get to combining tiles to form walls and autotiles. Thanks for reading.

Photo Credits:

Introduction

This tutorial is going to be exactly what the title claims. I am going to show you how to create a wall autotile like the ones from the A4 tileset. I will be using the grass tile made in tutorial 6 and the rock wall tile from tutorial 7. We will look at the construction of an autotile but not go into too much detail.

Unlike regularly repeating tiles, autotiles are more complicated because they are sub-divided into mini-tiles that need to repeat with certain edges based on their location. No matter what some people say, autotiles are still confusing even to me. However, I am going to show you the easiest way to create a basic A4 wall autotile. If you want to know more about autotiles read this tutorial from Nick Palmer: http://blog.rpgmakerweb.com/tutorials/anatomy-of-an-autotile/

Nick's tutorial talks about the A2 autotile anatomy more specifically. I have found that some of the properties of the A4 tiles differ a little bit from the A2 autotiles. Still it is worth a  read. Hopefully in the future I can create a tutorial about the animated A1 autotiles.

***SIDE NOTE***

Unfortunately, the Dojo Ninja is out on a mission and won't be making contributions to this tutorial.

Materials:

For this tutorial you will need:

• Photoshop or another image editing program that allows for multiple layers and changes of opacity.
• A grass tile that can tessellate with itself.
• A rock tile that can tessellate with itself.

Studying the A4 Auto-tile

If you have read some of my previous tutorials, then you know that I like to start off by examining topics before I walk you through the process of making them. Look elsewhere if you want a recipe. Read on if you want to learn so you can apply this knowledge to your own creations.

The A4 autotile is 2 tiles wide and 5 tiles high (64 pixels w by 160 pixels h).

There are four sections to the autotile that the program uses; the display tile, the corner constructor tile, the 4 roof/top tiles, and the 4 tiles that make up the face of the wall.

A wall auto-tile doesn’t tessellate by repeating 32 x 32 pixel tiles however. In actuality these tiles are broken up into 16 x 16 pixel mini-tiles that are re-arranged into different positions creating the pattern. I created a quick graphic to demonstrate this below. I must apologize because my coding system isn't very well organized but at the time I was using this for myself. Regardless, I am going to explain what the code means for each mini-tile and provide an illustration for what it looks like in the editor.

Here is the breakdown of the 16 x 16 mini-tiles in our autotile block:

The red, yellow, green, and blue pattern is just a way to visually break up the mini-tiles. However I have found that the red, yellow, green, blue, pattern is never broken in the editor which means that a single 32 x 32 tile is made up of four 16 x 16 mini-tiles from each of the different color locations. It might not make sense yet, but it will later on.

The 4 a’s in the upper left corner show the display tile. This tile is not used at all in the physical construction of your wall. It is the graphic the tileset editor shows you so you know what tile you are choosing. The 4 e’s next to the 4 a’s show the corner constructor tile. These are used when you form corners or edges with your wall.

Letter Code Key:

r = roof

w = wall

c = corner

e = edge

i = inner (it’s i but the font I was using makes it look like an l)

t = top edge

b= border edge

d = downward edge

In retrospect those re’s should be rb’s to keep everything consistent.

Example:

wb = wall border

ri = roof inner

wd = wall’s downward edge

The two red wc’s were just a visual indicator for me.

Confused yet? Don’t let the coding fool you. Let’s take a look at it in action. It will make more sense then.

Examining the Tiles

Let’s start with just the roof tile for now. In my map editor I have my aaaa tile selected. When I put it down on my map I get four rc's! It is creating a 32 x 32 tile by combining all four of the rc mini-tiles.

What happens when I add another roof tile next to it? Do you think it will be another tile composed of all the rc's?

Did you see how it changed?  The rc's form the outer borders of each 32 pixel tile and on the inside are top edge and downward edge mini-tiles now. Our roof is currently two tiles long and only one tile high. After the initial tile, if we continue in a row, the current pattern shown in the above picture won’t change. So what happens when we add a row beneath the current one creating a roof that is 2 tiles by 2 tiles?

Does this pattern look familiar? It duplicates the exact layout of the four tiles from our original roof diagram. The edges and corners are moved outwards and the interior is formed by the four interior roof tiles. Again this same pattern repeats.

The walls also work the same way. It starts out with just the corners together. Then the corners and edges, and finally the interior mini-tiles bordered by the corners and edges.

Let's compare the roof and wall tiles below. For another comparison, I have super-imposed my diagram onto one of the existing RTP auto-tiles.

Nothing will change with the patterns already described above when we connect the roof tiles with the wall tiles to make our complete wall. A long straight row keeps the pattern the same.

However the pattern does change when we want to alter the direction of our wall. This is when those tricky 4e’s mini-tiles come into play. In all honesty, I am still having some difficulty working with the e mini-tiles. Let’s look at an example of the roof and wall altogether and changing directions:

I set the wall to a normal graphic because it doesn't affect the roof’s edges. Notice how the edges come together in relation to the other tiles. Also notice how the red, yellow, green, and blue mini-tile pattern is never interrupted.

Okay, enough of this pattern stuff. Let’s get into the easiest way to make your own A4 autotile.

Putting Together the A4 Autotile

Some of these steps might seem shortened, but that is because I don’t want to waste any time with the process. I am going to assume that you already have some ability with Photoshop or your image editing software when I say we are going to copy and paste a layer. I might say the steps but I don’t want to provide a picture for each copy and paste. Make sense?

First open up your image editing program. Set your canvas size or work area to 64 pixels wide by 160 pixels high. I added in guidelines at 32px vertical, and horizontal: 32px, 64px, 96px, and 128px. Then I locked the guidelines so they wouldn’t move around.

Next import your grass tile and your rock tile into separate layers.

Next duplicate the grass tile layer 5 times and position them across the top six 32 x 32 tiles and then merge the layers together into one layer.

Then we duplicate the rock tile layer 3 times, position them across the bottom four 32 x 32 tiles and merge them into a single layer.

The result is shown in the picture below:

This is an extremely basic A4 auto-tile. Imported into you RMVXAce and used on the map, it looks like this:

Holy sharp edges batman! I could show you how to make more rounded walls, but that would be more advanced. Making the walls rounder isn’t difficult but it is time consuming. Instead, I am going to show you some tricks to give these sharp walls a little more character.

Do you see what the RTP's A4 tiles do to make their edges look softer? The roof pattern is padded by a darker color. In our case we are going to take the darkest green from our grass and draw a one pixel width border around the roof tiles with the exception of the edges where the roof and wall meet. (That’s next).

The red overlay shows the one pixel border I drew with the darkest color of the grass tile.

For the next step we need to make sure the rock wall layer is beneath the grass roof layer in our image editing program.  Turn off the visibility of the grass layer and select the rock layer.

Use the rectangular marquee tool, start from the bottom of the tiles and select 64 pixels wide and roughly 16 pixels high. Copy the selection and paste it above the previous later and then merge the two layers together. See the pic below:

Turn the the grass roof layer's visibility on and select it. Because this layer is above the rock layer, it will look like we didn't do anything to it, but there is still about 16 pixels worth of rock underneath the grass at the edge where the rock face meets the grass roof.

We are going to take our eraser tool, set it to 1px, and start erasing jagged clumps of grass out of the bottom edge of the roof layer.

The area highlighted in red are the pixels I erased from the grass roof layer. The rock we placed underneath in the previous step now shows through from where those pixels were removed.

Now we need to add some definition so the grass pops. Essentially the grass is hanging over the wall so we will add shadows underneath the grass and highlights on top of the grass at the edge. This will give us the depth we need and add some visual interest. I am going to tell you the process for each the shadows and highlights but show you only one picture of the combined result.

Shadows:

Create a new layer for the shadows. Place it below the grass roof layer but above the rock wall layer.

I used the pencil tool at 1 px and with the color black. I drew black lines 3 pixels down from each hanging strand of grass; just following the jagged grass lines. Then I set the opacity of the shadow layer to 50%.

Highlights:

Create a new layer for the highlights and place it above the grass roof layer. Use the pencil tool at 1 px and select the lightest color from the grass tile. Then draw short random strokes that indicate where the grass starts to drape over the edge of the rock face. I set the opacity of the highlight layer to about 75%.

Additional techniques:

Just for the heck of it I decided to throw in some additional techniques you could use and experiment with.  You can also use the dodge tool to create highlights and the burn tool to create shadows. Another way to add depth is to overlay a gradient that goes from darkest at the sides to lightest in the middle.

In the final version you will see, I have used the burn tool a little bit on the edges of the rock wall and the dodge tool to go over my highlights. Experiment with different settings to get the result you want.

Check out the original on the left with the new version on the right:

The question is how well does it work on the map? Let’s take a look:

I think it looks pretty good although I still see areas where I can make it look better. Rounding out the corners would really help as well as repeating the highlight on the edges to define the roof top better. Maybe, just maybe I might make a follow up for this tutorial on rounding out the walls. But for now I am sick of walls. So with that said I hope you enjoyed this tutorial or found it useful in some way. If you have questions, comments, or suggestions for future tutorials feel free to post it in this thread.

Thanks,

-One Cut Studio

Materials:

• Image editing software that allows for multiple layers and opacity changes.
• A grass tile.
• A dirt tile.
• A water tile.

Introduction:

In this tutorial I will be showing you how to make an animated water auto-tile. In the previous tutorial we talked about making an auto-tile, so if you don’t know too much about the auto-tile process I suggest reading that one first. I will need to show you how to make a water tile and how to animate it as well. Keep in mind that there are different types of water tiles and different ways to animate them. A calm pool is going to be animated a lot differently from a choppy sea.

In fact animating might be the easiest part of this build. The actual construction of the auto-tile is a lot more intensive.

Water auto-tiles are used to create ponds, lakes, rivers, oceans, and pools. Pools are usually less organic and have harder defined edges than the tiles used in ponds, lakes, rivers, and oceans.

I have identified two ways to animate water tiles. Keep in mind that there may be more and I only offer these two as a simple way to convey the basic idea. I call them the:

Border-Changing Method (Used for calm bodies of water.)

--and--

Cell-Changing Method (Used for choppier bodies of water.)

The auto-tile basic:

The water auto-tiles are composed of 6 32 x 32 pixel tiles in total. The auto-tile is 2 tiles wide by 3 tiles high. The top left tile is the display tile (only shown in the map editor), the top right tile is the edges tile (draws the edges) and the bottom four tiles define the borders.

Animated water tiles also have three separate frames of animation. Each frame is a variation of the 2 x 6 tile image. The animation cycle is performed very much like the walk cycle for sprite animations. It will start with A then go to B, then C, back to B, before returning to A.

Animation pattern: A-B-C-B (repeats)

Border-Changing Method:

This method is probably the more complex of the two as it involves manipulating multiple images to achieve the final effect. I like to think of the animated water-tile in this example containing four main components:

-The water overlay

-The crust

-The  wall

-The grass

In Photoshop, I set my canvas size to the area of the auto-tile I am making. In this case I set the canvas size equal to 64 pixels wide by 96 pixels high.

 DOJO NINJA'S WORDS OF WISDOM

We are going to make the outer crust of the auto-tile first. I call it the crust but it is basically the grass bordering the water. It is very helpful to display a grid at this point that marks increments for every 8 pixels. Using the marquee tool, I select the a square area inside the grass tile that is 8 pixels in from all the sides and delete it. (Basically remove the center of the tile). See picture.

The result is a small grass frame. We are going to use that small frame to piece together the larger crust of the auto-tile. Next we select 16 x 16 pixel boxes with the marquee tool and move the corners outward to the locations where they would be for the crust (the edge tiles). Picture will clarify.

We are going to use another grass tile to complete the outer edges but we have to make sure it tiles properly. Remove the center 16 x 16 square with the 8 pixel border again. To create the corners we divided the tile in half. We can think of one half as A, and the other as B. The pattern is such that A lies next to B. Since the 16 pixel-half tile in the upperleft corner is A, the 16 pixels next to it should be B. We need to select the top 8 x 16 pixels and position them to the order of an AB pattern.

Repeat the process for the bottom edge. It’s exactly the same process. Select the 8 x 16 A or B with the marquee tool and move it to the correct position keeping the AB pattern.

Get rid of the excess bits from the grass tile we just manipulated and then bring up a new grass tile. (So far this is the third time we've use our grass tile…see why the Dojo Ninja said to have copies). Remove the center like before. We are going to do the exact same thing for the left and right edges as we did for the top and bottom. We are going to select the 8 x 16 border and move them outwards into position keeping the AB pattern.

Remove the excess grass tile pieces again, merge all the separate edge pieces together into one layer and now we have our outer edges complete. If we were making an inorganic pool where the borders are brick then our work would be done. However a perfectly square border for a pool in nature is hardly natural. So now we need to round out the edges a bit.

We are going to use the pen tool. Click on the option for paths, select the rounded rectangle tool with a radius of 8px. I am going to create a path from the center of the upper-left 8 px by 8 px corner to the center of the bottom-right 8 px x 8  px corner.

DOJO NINJA'S SECRET TIP

Then we go to the Paths tab, right click on the window for the path we just created and from the menu pick “make selection†and Ctrl + X to cut out the pixels.

Our next step is to draw in the wall that we can see from the game’s perspective. This is the wall on the bank farthest from the viewer. We can see only a glimpse of the side walls and rarely see any of the wall that is closest to us. You can draw the wall in like I am going to do or you can edit an existing wall tile placed underneath the pond’s edges.

Make sure your wall follows the contours of the path that you cut out. Because it is organic a little variation is fine. It is okay to break up the straight lines. The level of detail you put into your wall is up to you. I decided to just haphazardly draw some muddy rock shapes. Choose your colors carefully.

I also fill in the dirt at the bottom of the pond. Again, you can use a dirt tile if you like. I simply filled in a base color with some noise. I really don’t care about the detail here because I am going to be overlaying this with a color for my water layer.

Next we create the water for our auto-tile on a separate layer. The layer should be above the dirt and wall layers but below the grass edge layer. I use the marquee tool to select an area that will fill up the inside of the pool and rises partially up the wall.  I select a blue that I like and fill the selected area. See picture.

I set the opacity of the water layer to 50% so I can see the wall through the water. Unfortunately this also decreases the brightness and saturation of my water’s color. I end up with a very murky water layer. If you like that look then you don’t need to do anything else. Instead, I make some adjustments to the image to get the water where I want it before moving on. What I did was select a more saturated blue and then increased the light exposure. The result is shown in the picture below:

Creating the Animation

Now for the sake of my own sanity I am going to get into animating the tile now. What I probably would do as an additional step is create overlap with the grass edges to make them seem more organic. This would involve a very similar process to the overhanging grass I made in the previous tutorial on the rock wall.

We only have three frames of animation to use with one frame being repeated twice. My middle frame {frame B} is going to be the most important frame because it’s action is linked to frames A and C. The key here is to produce small, subtle changes. Our brains interpret movement as the pixels change. If the changes are drastic than we get choppy, jarring, or jerky animation.

First I want to make a composite of the entire tile as we have it so far. So I ctrl + A to select the entire workspace, then use ctrl + shift + c to copy all the layers as if merged together and then paste it into it’s own layer which I name “composite.â€

I will create a new layer above my composite image for my first frame’s animation. I select a lighter blue color closer to white. What I will be using for my animation is the reflection on the water’s surface. It’s movement will indicate that the water is moving.

Now I draw a rough border where the water meets the grass edges or the wall. See picture.

Now I will create a new layer for the highlights in the second frame. Put this layer above the first frame’s highlight layer. I also set the opacity of the first highlight layer to 50% just for the time being. Within the second frame highlight layer, I draw a different highlight border than the first. I am going to fill in where there weren’t pixels before, erase, leave space empty where there were previously drawn pixels, and add some thickness to some areas. This is where the subtle changes come in. Since I am above the first highlight layer but the opacity is reduced, I can still see it and the new lines I am drawing over it.

I will repeat the process for creating the third frame. This time however, I change the opacity of the second highlight layer to 50% and turn the visibility of the first highlight layer off. I draw in a third variation of the highlight using the previous frame as a guide.

Now I want to test the animation. I bring all the highlight layer opacities to 100% again. I simply create a composite for each of the three frames. So frame 1 will be a composite of the water tile composite and the first frame’s highlight layer and so on for all three frames. I then use the animation window to display frame 1, frame 2, frame 3, and then frame 2 again. This is what it looks like:

I think it looks passably decent. Of course we only added in highlights to the water. Don’t forget that you could also add a separate layer for shadows and animate those as well. The amount of detail, color and blending you add to your tiles is up to you...so experiment and have fun!

So what’s left?

We need to create the corner tile and the least important display tile.

The Display Tile

To create the display tile, since it isn’t animated I just select the four 16 x 16 corners from our first frame’s auto-tile and bring them together to form the display. See picture. Then I duplicate the display tile twice and merge them with each of the frames.

The Corner Tile

The corner tile is different because it needs to be animated unlike the display tile. So each frame is going to have its own slightly different corner tile. I wish there was an easier way of making these darned corner tiles. I constantly struggle with these ones the most. If anyone has any tips for creating these I’d be most appreciative. The corner tile really could have its own separate tutorial. I get the results I want typically through trial and error here.

Okay, well here is my process. Let’s start with the construction of the corners. Get your handy grass tile out again and put it into where the corner tile is supposed to be.

I am going to remove the area shown here in red. It makes a cross-shaped cut-out.

The minimum width of my grass border is 4 pixels wide. In order to avoid having large protrusions at the corners of my tilings, I need to remove 4 more pixels from each corner. (Displayed in yellow).

Now I copy a 32 x 32 px square of the water pattern and paste it underneath the corner’s layer.

The next step is to detail the corners. The top two corners are actually for drawing the wall's edges connecting. So I draw in the walls underneath the top two corners and round out the bottom two corners a little bit.

We are almost done. What we need to do now is draw in our highlights. Use separate layers to draw highlights for each of the three frames like we did in the previous steps. It is the same process as before. Create new highlight layers for each of the corner tiles for each frame and draw in the variations. Then save your composites and you should have three complete frames!

Lastly copy and paste your three frames in the proper sequence on the auto-tile tile sheet to be imported into RMVXAce and you are finished!

Phew!

Cell-Changing Method:

I am not going to go into too much detail about how to do the cell-changing method, but I will give you the basics:

The actual construction of the auto-tile part is the same as above. The differences are the pattern of the water and the animation of the pixels. This type of water tile is composed of what I like to call “cells.†I create movement by expanding and contracting the cells. Making this type of water pattern could also be another tutorial in itself. But the basics are moving the cells while keeping their edges pinned. See if you can understand what I mean by taking a look at the example:

Even though it isn’t perfectly tiled, you can see how the changing cell shape adds movement to the water without being too drastic. Also this is not a finished tile. It only consists of two colors. This is just a demonstration of the changing cell method.

Conclusion:

Well I hope you either enjoyed this tutorial or found it useful in some way. It takes a lot of time to write one of these and put a polished piece together for all of you. Please reply with comments, questions, or suggestions. I very much would like to hear feedback from the community. Thanks for reading.

-One Cut Studio

Tutorial 10: Creating RTP-Compatible Face Portraits

Materials

Pencil

Eraser

Sketchpad

Image editing software that can create multiple layers, blending modes, and opacity changes. I will be using Photoshop.

Graphics tablet

Introduction

The Pixel Dojo is not just for pixel art tutorials. Art will be covered here as well! This tutorial is about how to achieve a balance with the RTP faceset when designing facesets of your own. It is not a step by step tutorial on how to draw a face. You can find tutorials on face drawing all around the internet. Also, please keep in mind that there are many ways and preferences people have when drawing faces.

Many people can agree that custom graphics can really help the overall aesthetic of a game. The RTP that comes with Ace has some really well done art. Unfortunately many developers feel limited in their choices when creating characters for their unique worlds. Original characters are great, especially when you have the custom portrait to match. Unfortunately not everyone is a skilled artist and mixing the RTP with unique characters can cause a discontinuity in your games.

I have been closely studying the RTP faces and I will reveal some of my observations in this tutorial as a way to teach you how you can go about creating your own faces in a way that allows them to be used alongside the RTP and not look completely out of place. Even the faces generated by the character generator have a different look to them than the RTP.

In my opinion there are two ways to achieve this goal:

1.)    Replicate the art style of the drawn RTP faces.

2.)    Use the color palette of the drawn RTP faces.

Sounds easy right? But replicating an art style is quite difficult especially if you’re art skills aren’t developed or you want to stick to your own style. The easier of the two above options is creating your characters with the same color palette as used in the RTP.

RTP Study

Take a look at this faceset sample from the RTP. What do you notice?

Here are my observations:

You may have even noticed other details from your observations, but the biggest clues to me are the clean lines and variable pixel opacities. This suggests the mathematical involvement of a computer program! What does it mean?

Basically, we are going to start out big and then resize it smaller.

NINJA TIP

Drawing the Face:

Not all portraits have to be in ¾ view.  Case in point: the character generator faces are drawn straight on. For this tutorial I also chose to draw a full frontal view for my face as it is the easiest to draw and if using colors from the RTP palette should look perfectly natural when used alongside other RTP faces.

The biggest tip I can give you is to draw loose and light. Practice drawing circles. Use your whole arm to draw. Loosen up first to get ready to draw.

The final size for our single face graphic is going to be 96 x 96 pixels at a resolution of 72 dots per inch (dpi).

I am going to double the size and resolution of my canvas to start drawing the face and then reduce it to the final resolution and size after it is completely drawn. I also want to add a nice buffer of pixels around my drawing area so I can fit the whole head in which I can crop later.

Therefore the initial document settings are:

Size: 242 x 242 pixels (192 + 50 pixel buffer x 192 + 50 pixel buffer)

Resolution: 144 dpi

Draft and Ink Layer

The final result will be a composite of many different layers. The first layer will be the drawn outline of the face. I actually drew my face on paper and scanned it into the computer. From there I inked over the lines I wanted to keep as my ink layer. I used my graphics tablet to draw my lines for a more organic feel. Keep in mind that even if you don’t have a pen and tablet, you could still use the “pen†tool to create and stroke “paths.†Stroking paths will give you a more uniform looking graphic.

Base Skin Layer

I create a new layer for the base skin color. Its position will be above the ink layer. I also set the layer’s blending mode to “multiply.†The “multiply†blend mode is a darkening blend mode which means that colors placed on top of it will be mathematically darkened. The mode also allows for black to show through.

Using the eyedropper tool I select the color of a skin tone from the RTP faces. In this case, I am using the same skin tone as the character in the RTP example from the section above (top row, second from the left).

Color the skin like you would in a coloring book. Going slightly over the black lines of the outline layer below won’t make too much of a difference. Stay in the lines as much as you can without going out of the lines.

Base Hair Layer

We are going to do the same thing for the base hair color. We create a new layer above the skin layer and set its blending mode to multiply. The color I selected for the hair is the same color as character’s hair from the portrait I pulled the skin color from. You will notice that I have only colored the hair in the foreground.

Background Hair

Another new layer (blend mode is multiply) is created for the background hair and placed above the base hair layer. I am using the same dark purple used in the RTP to fill in this area.

Base Eyes

The next step was filling in the eye color and drawing in the base for the irises. (I think I mislabeled my layer as pupils but whatever…) The whites of the eyes are a separate layer from the irises. The blend mode for the whites of the eyes is normal, while the iris layer has a multiply blend mode. It should make sense that the iris layer is placed above the eye white layer.

Pupils and Eye Reflections

Next I drew the pupils in with a darker color of the iris’ base color. Something that is very characteristic of the anime style is the highlights added to the eye. In order to create this effect, I made a new layer above the irises and pupils. This layer was set to the “color dodge†blend mode. Color dodge is a lightening blend mode that mathematically lightens the colors it is drawn over the top of. I drew the little reflected spots of light with the same color used in the iris, but because of the blend mode it appears lightened.

Giving the Face Depth

There are many different blending mode options in Photoshop and other graphics programs. I would suggest experimenting with the different blend modes to achieve the effect that you are going for. Sometimes I like using the color burn or multiply blending mode to create shadows. In the first image below you will see that I used multiply to make shadows on the face. The result is that the shadows are a darker tone of the base skin color. This gives my overall image a “warmer†feel. However, I wanted to stick close to what the RTP did so I had to change my method. As mentioned before, shadows on the RTP faces are done in a dark purple color. I once again created a new layer, sampled the purple color from the RTP and drew in the shadows on my character’s face.

Blush and Shine

Another thing I noticed about the RTP faces is that most characters have a small amount of blushing around their eyes/cheekbones. Again I sampled the blush color from the RTP (make sure you pick the one that matches the skin tone you used) and created a new layer for the blush. Then I used a combination of the blur tool and the smudge tool to even out the blush and feather it into the color of the face. I didn’t want my blush to look like little pink ovals (although some styles do that). The blush highlight is its own separate layer above the blush color. I simply added a little dab of white to each blush patch with the layer’s blend mode set to normal.

Hair Strands and Shadows

From my observation the hair in the RTP faces is often drawn with thick solid clumps of hair that separate out different strands. The strands are a drawn in with a darker color than the hair’s base color. So for this layer I set the blend mode to linear burn which makes the color darker. Then using the base color I draw in my strands. In retrospect I probably would’ve changed my blending mode or used a different color but the result is adequate.

Hair Highlights

Shiny hair is also another hallmark of the anime style. Again, I make a new layer above all the others for the hair highlights. Like the highlight layer for the eyes, this layer is also set to color dodge mode. Then I draw in my highlights. If you want a more intense shine you could also create a new layer with a normal blend mode above this one and add streaks of white.

Done?!

We are almost there. I noticed while I was working on the hair highlights that I left out a crucial facial element…eyebrows! Also some of the lines defining the face needed a little cleaning up. Therefore I created a final layer above all the others to fix these problems. I quickly added in some eyebrows and thickened some of the ink lines.

Done

The last step is putting the image into its final size and resolution.

• Press Ctrl + A to select everything.
• Press Ctrl + Shift + C to Copy Merged (creating a composite of all the visible layers)
• Press Ctrl + V to paste the composite.
• Turn off all the other layers but keep the newly pasted composite layer visible.
• Remove the 50 pixel buffer by changing the canvas size to 192 x 192 pixels.
• Use the move tool to move the layer around in the frame to where you want the face to be cropped.
• Press Ctrl + A to select everything again.
• Press Ctrl +Shift + C to Copy merged again.
• Then create a new document with a canvas size of 96 x 96 pixels and set to a resolution of 72 dpi.
• Press Ctrl + V to paste the composited image as a single layer.
• Press Ctrl + T to call the transform tool on the image.
• Click the “chain†icon to link the height and width settings together and then simply reduce the size of the layer by 50%.

And there you have it! The RTP compatible face is done.

The image below is a visual summary of the face’s construction:

I hope you liked this tutorial or found it useful in some way. Check out my free resource thread for free graphic resources. Thanks for reading!

-One Cut Studio

Materials

You will need:

• An image to pixel over.
• Image editing software that allows for multiple layers and opacity changes (I will be using Photoshop).

Introduction

Sometimes we want to create graphics of something for our games, but feel that our artistic ability is lacking. We may try as hard as we want but still not get the result we are looking for. Maybe we can’t get the shapes just right, or the colors seem a little off. Whatever the case, the pixel-over technique may be useful for you to help achieve your goal.

I caution you that the pixel-over technique should be used sparingly and is no substitute for spriting skill developed over time. I offer it here as just another technique to add to your pixel art toolbox.

So what is pixel-over?

The pixel-over technique is very similar to what tracing is in drawing. Let’s say that I wanted to draw a cartoon character but I wasn't a very good artist. I could find an image of that character, and using tracing paper make a complete copy of the image. Just don't pretend like you drew it by yourself!

Pixeling-over is the same concept. Essentially we take an image and use a new layer in our image editing software as tracing paper to draw pixels over the original image.

Pixel-Over Technique Pros and Cons:

Pros:

• Very little artistic skill is needed.
• It is an easy technique to do.
• It is quicker than drawing from scratch.

Cons:

• Your finished product is not original work.
• You won’t get to practice actual drawing skills by noticing the relationships between lines and shapes.
• The final image most likely won’t match the proportion or perspective of your game.

Starting with the Technique

For the purposes of this tutorial, I am going to make a pixel-over sprite of Ironman.

First I find a picture from the internet and copy it.

Next I create a new photoshop document with the following settings:

height: 64 pixels

width: 32 pixels

resolution: 72dpi

color mode: RGB 8-bit

I chose to make my sprite 32 x 64 because the ratio is 2:1 and matches my chosen image's ratio a lot closer in terms of width and height.

Then we paste the image into the project as a new layer.

Because I have a white background, I select the white color range (adjusting the tolerance as necessary) and remove it with ctrl + x.

Now we call up the translation tool by pressing ctrl + t. Lock the aspect ratio by clicking the chainlink icon between the height and width parameters. Then resize the image to fit within the boundaries of the canvas.

Then I create a one pixel stroke on the inside or center of the image. Here is the image resized an stroked in a zoomed view:

And at 100%:

Doesn't it look like an Ironman sticker? Anyways, now is when we are really going to pixel-over and change some lines to suit our needs.

Pixel-Over the Resized Image

First we want to duplicate our resized base layer and make it invisible while keeping the duplicate visible and actively selected.

Next we are going to pull some of the colors out of the image to make our palette. Since there are a lot of colors, we want to narrow it down to the most important colors. I like to pull a solid midtone, shadow, and highlight for each hue.

Since the base image reduced the opacity of some pixels when we resized, we will fix that when we pixel-over them with our newly picked colors. A solid character will stand out better from the background than one with fading edges.

So what I am doing now is refining the shapes to eliminate hard edges that don’t make sense with the human form. I am also outlining the sprite with a darker color pulled from the suit. At the same time, I am erasing or covering over translucent pixels.

To make both sides symmetrical, I duplicated the side I liked the most so far and pasted it as two new layers. I horizontally flipped one of those layers, lined up the two identical halves and merged them into one layer.

I create a new layer that I completely fill with black and put this behind my sprite layer. This will allow me to see if I missed any translucent pixels. It will show me where to erase pixels on my sprite layer and where to fill in with areas of color.

Another way to check if your outline is clean is by using the magic wand tool. In the picture below it is very clear that there are some pixels that need to be erased even if I can’t see them. You’ll be all set when the magic wand selects around the figure in a solid outline.

Even though you can't see the pixels, they are still there!

With the outline cleaned up and some of the color fixed, I could possibly keep Ironman as he is now. If you like the outcome and you intend to make it a game character the next step would be to start creating the different walking poses. This could be my final:

However, I want to continue pixeling-over and refining my Ironman. I feel like he needs some more solid blocks of color that I can add my own shading and highlighting to.

Blocking in Color

So what I do now is create a layer on top of this one and start filling in areas of color with the palette that I pulled to make the areas consistent. I still can use the original image that I resized as a reference for details and if I don’t like how my pixel-over turns out, I can just delete the layer and still have the other Ironman from the previous step to use.

After blocking in solid areas of color the result is a somewhat flat looking character:

At 100%:

Applying Shadows and Highlights

The last step is adding in shadows and highlights to my sprite where I think they should go.

After refining Ironman this is the result:

At 100%:

As you can see by adding in the shadows and highlights were I wanted them creates a sprite that is more robust.

Conclusion

You can use the pixel-over technique for just about anything, but to truly get better at spriting you will need to carefully observe objects and understand their shapes and lines. While the pixel-over technique may come in handy from time to time, it is no substitute for skill  earned through practice and persistence.

Bonus

Using the same Ironman image as a reference, here is a 32 x 32 (RTP-sized) Ironman sprite I made from scratch:

That's all for now. Until next time, happy spriting!

-OCS

Introduction:

Welcome to the first part of my texture series. Initially I was going to make one long tutorial incorporating all the textures but I decided that shorter, focused tutorials dedicated to each texture would be better.

These tutorials take a long time to produce and it probably would’ve taken a lot longer to create a tutorial with all the textural elements I want to cover.

With that said, the ability to create texture is an important part of any pixel artist’s repertoire. Textures help convey the material we are trying to depict. Textures are used in both sprites and tiles.

When creating texture, we are trying to show our viewers what the image would “feel†like if they were to touch it. Replicating this sensation given only two dimensions and a very small image size can be tricky.

It comes down to the smart use of color and pattern.

This tutorial will explore how to render a metallic texture. Metal is an important texture in the RPG world as many game elements contain metal  ranging from tools, armor, weapons, buildings,  and etc.

The Metal Basics

 = "Headbanging?"

No, Dojo Ninja. You are thinking of a different type of metal altogether.

= "Oh. I must meditate on this."

There are so many types of metals, alloys, and metal finishes that we would be hard pressed to make a texture for each one of them. Some common metals found in RPGs might be aluminum, steel, copper, iron, brass, silver, gold etc.

Know that every metal has different characteristics which affect their overall appearances. The best suggestion I have is to study samples of these textures. Perform an image search and find a sample of the metal you are looking to replicate.

But here are some general guidelines:

• Metal is often highly reflective, which means that the highlights will be bright.
• The shadows and highlights follow the underlying form to indicate the shape underneath.
• The key to representing most metallic finishes is creating high contrast between tones. This is why smart color choices are so important.
•  To suggest a sharp bend in the metal add a faster transition between the light and dark tones.
•  Most pixel artists will say to avoid using black and white but it is okay to break the rules sometimes. Experiment to get the look you want.
• Again most pixel artists will tell you to avoid using gray to make metal. Metals are colored and reflect the light of their surroundings, but this doesn’t mean you can’t start off working with a grayscale palette to get your contrast right and then apply a hue to add the color in.

This is example is a sprite of a train engine I made:

Two metal textures should stand out: painted steel and brass. In both cases the colors change rapidly from their darkest tones to lightest tones. The shading and highlighting also follow the form of the underlying shapes.

Let’s Try Making a Texture

It would be better to bring you through the process so I am going to show you how to make a metallic copper orb.

First I create a basic outline of my orb and using an image search pull up a sample copper texture. I pick one that has the colors of the finished product I want. I often pull colors from pictures of items rather than stock photo textures but in this case I used a stock photo.

Next we bring the sample image into our editing program and pull a palette for the orb.

I will be picking five colors. I usually choose the midtone first and then two levels higher and two levels lower than the midtone. If I want my metal to appear shinier, the “jumps†in the color ramp can be more drastic (by “jumps†I mean the difference in contrast between tones).

Just to clarify I will be showing a progression of the shading here but you would be doing this over the same orb. The steps are pretty simple:

• First fill the basic outline in with the midtone.
• Next pick the direction of your light source. I am partial to the light coming from the upper left (the orb’s upper right side…my upper left as I am facing the screen).
• Following a curve to indicate the spherical nature of the orb, draw in the darkest color farthest from the light source. The transition from dark to light can happen quite quickly.
• Following the same curve of the previous color, now we draw in the second darkest tone.
• Add the second brightest highlight which rounds out into a small oval shape.
• Add the brightest highlight.
• Lastly we color the leftover black outside edge with the color that is one step darker than the color it is sitting next to.

Our orb looks pretty decent and it looks like copper. We can leave it at that but…

But what about dithering?

(Read in your most annoying I-know-you-are-but-what-am-I? voice)

Ha, you got me! Well, dithering is a technique used to blend tones together tricking the viewer’s eye into thinking that a midtone exists between the two tones being meshed together. A 50 percent dither uses each color in the midtone equally.

This is a 50 percent dither of our color palette:

Same palette but at normal size:

And here is my dithered orb:

Here’s the thing though: dithering the orb doesn’t create the sharp jumps in contrast that is characteristic of the metal we want. Dithering does come in hand and is very useful tool in any pixel-artists toolbox but for my purpose with this orb; I am leaving it out.

But what about Anti-aliasing?

Okay, okay, you got me again. Anti-aliasing, also known as “AA,†is a technique used to soften hard edges and make lines look crisper. AA is great for pixel art, but is it right for RPGMaker?

Remember that background elements need to blend in so characters can stand out. Characters, drawn as sprites are created with solid lines to help separate the sprite from the background.

Isn’t AA supposed to do that?

Yes and no. Yes AA does smooth images out and helps them blend better, but only if you are working on a piece of pixel art and the object you design is AA’d to that specific background. In RPGMaker, we use graphics for everything and objects can be put in front of any number of backgrounds.

Take a look. On the right is my AA'd orb and on the left is something I did to the orb that I will reveal to you shortly:

The AA'd orb doesn't look half-bad against a white background. But what if the background changes? Let's say...pink:

Yuck! My AA is no good against a background. Now I know why the RTP objects are all fuzzy.

= "Fuzzy? Like the fuzzy orb on the right side of your image? What black magic is this?"

Not black magic...image editing. Hardcore pixel-artists will tell you that this is where the pixel-art stops. If it isn't drawn by hand pixel by pixel then it isn't pixel art. Who cares? I'm looking for results. If you zoom in very closely to the RTP’s tilesets of objects you will see that the pixels around the edges are fuzzy. And by fuzzy I mean that the opacity changes.

Don’t believe me? Check out the pot from the RTP set:

It took me forever to try and figure out how they did that? Did they draw these items at larger resolutions and then scale them down? That’s a possibility. Blur tool? Another possibility. Then one day I had an epiphany.

The Secret Black Magic...err...Image Editing Technique to replicate the RTP:

But blurring does come with its own problems. Remember that I want a shiny, metallic look for my orb; not a dirty mud ball. Luckily you can experiment with different filters and effects to achieve the result you are looking for. The final image below illustrates some of those different techniques and adjustments:

Altogether, here are the final renderings:

Top row, left to right:

• This is the basic colored orb we created with no AA
• This is the basic colored orb with AA
• The dithered orb  with no AA
• The dithered orb with the Gaussian blur applied

Bottom row, left to right:

• Basic colored orb + Gaussian Blur
• Basic colored orb + Gaussian Blur + Exposure Adjustment
• Basic colored orb + Gaussian Blur + Brightness/Contrast Adjustment
• Basic colored orb + Gaussian Blur + Levels Adjustment

Conclusion

Which one outcome would you choose for your copper orb? I think that the last three on the bottom row are my favorites. Out of all of them I would probably pick the orb that has the Gaussian blur applied and the brightness/contrast adjustment. That is the one which seems most "copper-like" to me. Remember to experiment and try new things.

Thanks for stopping by the dojo today and hopefully more tutorials will be on the way.

-One Cut Studio

Introduction

This tutorial aims to explain how to render fur textures through pixel art. To accomplish this, we will be using a technique called “selective outlining†also known as “sel-out.â€

But first, think about this question:

What is the difference between fur and hair?

(Click the spoiler when you think you know.)

How does this help me when creating pixel art?

We can apply this knowledge to our character designs.

The BFG

We need to be aware of something that I’ve termed the “Basic Fur Gradientâ€, or “BFGâ€. Defining the fur we want to create on the BFG will help us decide how to plan our pixel art.

Basic Fur Gradient

Strand Thickness:

coarseß---------------àfine

Strand Length:

shortß---------------àlong

Coat Finish:

matteß---------------àglossy

The texture we want to render will fall somewhere along a gradient for each of those attributes. The attribute choices we make will affect what we do to achieve that look. For example, a coarser fur texture will feature thicker clumps of fur than a fine fur texture.

We can indicate the length of the strands by drawing a few strands over our main clumps. The length of those individually drawn strands will show if the fur is short or long.

The coat finish is tied to the color choices made when selecting colors for the fur. Glossy fur will have a color ramp with more contrast between the darkest and lightest values. This is very similar to the color jumps I talked about in the metal texture tutorial. Fur with a matte finish will have less contrast between the darkest and lightest values, and neighboring values.

Those three attributes are the foundation for the BFG. Other attributes are the fur’s color, direction, length variation, and volume (think how “poofy’ or “flat†it feels).

A quick word on color:

Choose colors that make sense for the animal’s environment. Fur is a survival adaptation. A lot of animals’ fur functions as camouflage with their surroundings. I am not saying an alien planet would not have an animal with bright green/pink fur, but if the planet doesn’t readily contain those same greens/pinks in the surroundings, the design starts losing credibility. I like to stick to earth-tone colors: whites, blacks, grays, tans, beiges, and browns.

The Technique: Selective Outlining (Sel-out)

The technique is basically how it sounds. We are selecting values from our palette and breaking up a solid-looking, single-value outline. The variations in the outline mimic the haphazardness of fur and how it reflects light. Even when fur is clumped together, individual strands making each clump can be skewed in different directions.

Drawing the Fur

Instead of a long-winded tutorial, hopefully it will be easier to show you and provide a commentary for each step. This tutorial will probably be easier to understand if you’ve read my previous tutorials. I am going to start off with a round shape and turn it into a furry creature. A hairy, err, furry-eyeball?

The steps:

1. Here I have a circle with a black outline and filled with the base color.
2. Using the darkest color, two values darker than the base color; I roughly draw in the clumps of fur. They are originating from the center of the circle.
3. Add in the first highlight one value above the base color. Indicate the direction of the fur by drawing strands that follow the clumps. At this point I also refined the outline for the clumps of fur.
4. Next we draw strands with the value one below the base. This is the first shadow color. Follow the direction of the fur, just like with the highlight.
5. The brightest highlight value is added to where the fur “peaks†or catches the light. I start doing some selective outlining here. In picture 4, you can see that the figure is outlined with the darkest color. In picture 5, our brightest value starts breaking up that outline.
6. In this step, the values one darker, and one lighter than the base are added to the outline.
7. Now I bring the darkest value back into the clumps of fur to better define their masses. Areas where the darkest value “pools†together is where the fur has become pushed down under other fur.
8. I could have left my texture at step 7, but I was inspired to make this mass of fuzz into a creature so I drew in an eye.
9. Lastly, I give my furry sprite a little more dimension by using the dodge and burn tools to create some cheap, quick shading and lighting effects.

Voila!

Okay, so remember the BFG? Where do you think the fur rendered in the above example falls on the gradient?

Conclusion

Try creating different types of fur along the BFG. Experiment until you can make glossy, short, and fine fur...or coarse, matte, long fur...or semi-gloss, variable-length, semi-fine hair...etc. You get the idea. Thanks for stopping by the Pixel Dojo!

---"FUR REAL!"

At the end of the game, the Zambonis die, but not before they learn that life is fickle and even the best intentions can end up with no winners.