POWER's Guide to Posting and Editing Sprites


#1

Hello all,

I noticed that many great ideas are posted with sprites that don’t really match up with Realm’s visual design: I thought it would be helpful to post a guide on how to properly format sprites. Here, I don’t assume access to Photoshop: if you do have access, chances are you already know how to use it and how to format sprites.

Also, I’m not sure where this post should be under, but I posted under Ideas because it is most applied there.

Step 1: create your pixel art!

This is pretty self explanatory. I’ll use this green blob for this tutorial.

Step 2: edit the art into realm format

First, screenshot your art. On Windows, this is done through the prntscrn button (the screenshot is saved to your clipboard), and on mac, this is done through shift-cmd-4 (the screenshot is saved to your desktop). I am going to focus on three applications of pixel art: items, objects, and projectiles, which each have different styles.

The image editor I will use in this tutorial is https://pixlr.com/editor/, which is freely available to anyone freely.

Items

Take a look at any item in ROTMG: you’ll notice that it has a shadow around it. In the following tutorial, I’m going to be teaching you how to format an item sprite. For the correct scale, you want it to set the right-hand side image to 100% (do as I say, not as I do).

Upload your screenshot onto pixlr:

Use the magic wand tool on the left with tolerance 100 and anti-alias off (important) and click on a grey section. The following should happen:

IMPORTANT: after this step, double click on your layer in the layers panel to unlock it. If it is not unlocked, you will end up with a white background.

After doing this, simply press backspace and you should get a clear background:

The next step is adding the shadow. Click on layer styles for your layer (the icon with the floaty text box in the image) and select drop shadow. Change the settings to those below (you can experiment on this):

After that, just save it as an image! Make sure to enable transparency and make it a PNG.

Below is my result:

A word of caution: if you crop too much, you might get something like this:

Ew, those borders! Make sure you leave lots of blank space: the shadow is bigger than it looks.

If you’re really picky about image size and want your image to start exactly where the shadow ends, then make a new white layer behind your main layer, use Photoshop’s magic eraser to erase white sections with sample all layers on, and crop to the border of the white layer. Then delete the white layer.

Objects/Characters

The format for objects/characters and items are very similar in Realm. If you want to post an object/character sprite, do so in the same way as the item. However, when editing screenshots, there is one crucial difference:

Note that, in addition to the shadows SURROUNDING most objects (except the guild hall, for some reason), there is also a shadow UNDER the object. Below is a tutorial on how to compensate for this:

Open the screenshot in Pixlr and choose open image as layer and select the image you want to put in:

IMPORTANT: CREATE A NEW LAYER HERE

Make sure your color is set to black (left, near bottom). On your new layer, select a large, soft brush. You should experiment on the size of this brush: it’s not rocket science.

Click once and only once to make something like this.

Use edit -> free transform and flatten your brush spot.

Put your brush layer behind your object layer.

Adjust the opacity of your brush layer to about 50%.

Below is my result:

Projectiles

Projectiles in ROTMG are quite different. They don’t have outlines, much less shadows. To edit projectiles, use the magic wand to select the body (not including outline) of your sprite:

From there, you can literally copy and paste your selection. If you want to post a projectile sprite, however, Realm has yet a different format. Use this as your base:

And then simply add your new projectile on here with Pixlr. Below was my result:

Notes for Advanced Users

There are a few more subtleties to formatting sprites.

First and most problematic is resizing the sprites. When stretching or shrinking sprites, the normal algorithm is something called ‘bicubic,’ which blurs everything. For pixellated games like Realm, we don’t want this, so we use the setting ‘nearest neighbor.’

Furthermore, resizing item/character/object sprites will also cause the size of the stroke to change. In Realm, the stroke is ALWAYS the same size (1 pixel), so make sure to take that into account.

Speaking of the stroke, Realm understandably uses a square stroke. (square around the corners). However, Photoshop only allows round strokes for raster images–the way the stroke is computed is similar to Huygen’s principle in physics, with circular wave-fronts extending from the border. If you do not use the art maker and/or need to edit the stroke, make sure to MANUALLY edit the stroke using the pencil tool to trace the border. (For those more familiar with photoshop, you can also use the default stroke, create a new layer with no layer style, and use the fill tool set to “sample all layers”, anti-alias off, and contiguous off). Note that the stroke is not actually completely black but RGB 18, 18, 18 or #121212 in hex.

On the left: ROTMG stroke. On the right: Photoshop stroke

Another thing to keep in mind is that the ROTMG art maker applies a slight gradient that is darker at the bottom to its images. You can see it below:

This same gradient is applied to items, characters, and objects; however, it is NOT applied to projectiles. Thus, it is preferable to use the ROTMG art maker for items, characters, and objects and an external program for projectiles. If you do want to create the gradient, it is a linear, vertical black gradient with opacity 0% on top and opacity 14% on the bottom.

As a last note, I’d like to explain the difference between image formats. For static images, you should use the PNG format, which preserves every aspect of the image and allows for transparency and partial transparency (like shadows). There’s a meme about the JPEG format making terrible quality images, and that’s not completely fair: it only does so if you turn compression on. If you don’t, the quality is still good, but it’s important to note that, unlike PNG, JPEG does not support full or partial transparency.

If you want to create a dynamic image, you’ll want the GIF format. Doing so is quite simple in Photoshop with the “create frame animation” option, but it’s a bit beyond the scope of this guide. The GIF format isn’t ideal: it supports full transparency but not partial transparency (which is why GIFs do not have shadows), and if there are too many colors (not a problem for realm sprites), GIFs add dithering, which is annoying. Thus, you should either not add a shadow to your gif or place a white background on it, which is fine on RealmEye but perhaps not for other sites. Also be sure to crop your frames in the same way, or your result would look weird. I could go on and on about how GIFs are very inefficient compared to the CSS step() function or HTML5 video, but those are impractical on this site.

Hope this helps!

~POWER


How do I Make a dungeon map? How do I make enemy sprites that don't hvae the gray background in the back?
New Cass: Hobbit (good class name?)
Samurai
Dust Bunny - Pet
Some Items that I made >:O
Sprite Making: Beginner's guide
Software for sprite making
The Ranger, a Close-Quarters Bow Class
Necromancer Set Sprites
New Void Fang Dagger from the depths of the Void
#2

Nice guide, pixlr is a great tool

moved to #academy:Guides


#3

so much to read just for a border and some other vanity-related things :confused:

try shortening it please


#4

My personal method:

  • Open GIMP
  • Make Sprite in 8x8 Canvas
  • Scale image to 64x64
  • Resize Canvas to 70x70 (centred)
  • Select all non-blank pixels and stroke around selection in a new layer (2px)
  • Duplicate and Blur stroke layer

Creates something like this:


#5

Very nice! I like that it’s easily resizable. Does GIMP automatically produce square outlines? I can’t seem to get the same in Photoshop. There’s no gradient, but that’s just splitting hairs.


#6

Thank you for your feedback! I don’t think it’s vanity, but attention to detail. I agree that the guide’s a bit too lengthy, though: I’ll try shortening it.


#10

OoOooo thanks a bunch for this… looking forward to using pixlr :smiley:


#11

The brush around selection creates an outline.


#12

You. Are. Amazing.


#13

This was nice to read just because of the little things and details that really make an item or image great!

Have a :heart:


#14

Man, excellent guide! Just saying, if those ants are pissing you off and you can’t get them away, press Ctrl-D or CMD-D on a Mac.


#21

Hey, that’s pretty good! :grinning:


#23

Incredible effort! Very helpful :slight_smile:


#24

I can’t get the shadow. How can I get off the wand tool? It’s still having that dotted line around in.


#25

This is how mine turned out.

https://docs.google.com/document/d/1raT4ZO7HEKrj95S4pyEiswJeBKHWY20MrjNnQQRBMJQ/edit

look on this


#26


#27

Hi MeteorMons!

I’d imagine that the issue you are having is very common. First off, you don’t need to get off of the wand tool to do the rest of the editing. If you do want to get off the wand tool, or any other selection, click the regular selection tool (the box with the dashed line) and click anywhere on your image to deselect.

Below is the relevant fix your shadow problem:

If I’m not mistaken, you probably didn’t double click on your layer to unlock it (lock icon next to the layer is still there). Deleting sections from a locked layer on Pixlr leaves a square image with a white background: if you try to apply a shadow, it’s going to be outside of the range of the image even though it technically exists. Make sure that, after you press delete, you see a checkerboard of white and light grey instead of just white for your background. That means that the background is transparent.


#28

Ok, thank you so much. I got so scared.


#29

wow gimp on vista is so complicated


#30

Never thought making a sprite would be so complex.