SciCentr.org: More on Making Sprites

Note: Activeworlds now supports .png files with transparency for both textures and pictures. This means it is no longer necessary to create separate image and mask files, however parts of the process are still applicable. This method will still work, though it means extra effort.

These notes provide additional information to supplement Statia's Sprites Tutorial. Some goals and guidelines that help with inworld performance are provided, as well as an alternate set of steps for making the sprite image files in Photoshop and an overview of how to use them inworld.

Goals and Guidelines

Final Files

The sprite consists of two image files: the texture itself (a color .jpg file) and the mask (a black and white or grayscale .bmp, which must be zipped). A model file specifically designed to support sprites is also required (a zipped .rwx file); you can use an existing of appropriate size, or make a custom one.

File Naming

Naming conventions are useful for preventing filename collisions (which could cause your texture to appear unexpectedly on another model) and for making it easier to find the files associated with your model. I suggest choosing a prefix for custom files for your project and stick to it. For example, you might use an abbreviated school name, a few letters of the name of the project, or your initials, followed by an underscore ( _ ). For sprites intended for widespread use, I suggest sp_, for example a sprite of a dog might have a model named sp_dog.rwx, a texture sp_dog.jpg, and mask sp_dogm.bmp. It is also worth checking that files with those names don't already exist by appending to your world's object path url /models/MODELNAME.zip, /textures/TEXTURENAME.jpg and /textures/MASKNAME.zip and trying to download them with a web browser.

Performance Considerations

Use the lowest resolution with enough detail for your purposes, out of these choices: 32x32, 64x64, 128x128, 256x256, or 512x512 pixels. Higher-res textures look better (and should be used when necessary), but they increase load times and reduce video performance by using up video memory. Any textures that are not one of the above resolutions will be resized on the fly by the browser, increasing load time, reducing image quality, and increasing file size without gain. See the Active Worlds documentation on texture sizes.
The desired content should take up nearly the entire height OR width of the final image frame (assuming you scale the resolution down from the original). Otherwise, you are wasting video memory, and it will be harder to size the sprite model properly.
The desired content should be lined up with the bottom of the image canvas and centered horizontally, or lined up with the frame in a way that matches how it will be used inworld (e.g. things that hang from the ceiling would be lined up with the top of the canvas instead). This makes it easier to build with the sprites.
The unused (masked) portion of the image should be made a solid color (e.g. black). This helps the image compress better and thus download faster, but the sprite will still work without changing the background.
If the sprite will be applied to a non-square surface, the sprite/mask must be stretched an amount opposite to the aspect ratio of the surface, so that it looks right when stretched onto the surface.
Document the source of your image if you found it on the web. Keep the original full resolution file, source URL and source organization, and the sources of all such images should be acknowledged with the project for which they are used. The Fair Use doctrine usually permits the use of images you find on the web for our purposes, but you should check the terms of use on the source web site.

Suggested Steps for Making Sprites in Photoshop

This assumes the sprite will be applied to a square surface, and that the resolution of the usable part of the image is higher than the final resolution of the sprite.

Save the desired image locally and open in photoshop.
Crop the image around the desired feature (closely, if possible).
Change your working background color as desired. You can use a transparent background by copying the contents into a new image; you can use black or a contrasting color to make edges more obvious during the design process; or you can use a color similar to the edge of your feature to make the border less visible.
Adjust the image size, altering the greater of the cropped image’s height or width to be the desired size (e.g. 128 pixels), and keeping the existing proportions.
Adjust the canvas size, altering the other dimension to match the desired size (now you should have a square image, e.g. 128x128, with the desired feature taking up most of the height or width).
Move the desired feature so it is oriented appropriately (e.g. aligned to the bottom and centered).
Carefully select the desired feature, using the lasso tool, magic wand, or any other methods you know. You can draw around (outside) it in black if it helps. Make the selection as accurate as possible (you could do it in multiple iterations).
Right click the selection and choose "save selection." By default this will create a new channel.
Open the channels panel, and select the new channel you made. Copy its contents to the clipboard.
Create a new image, give it the same dimensions you are using (e.g. 128x128 pixels), set the mode to grayscale. Make sure the background is black.
Paste into this new image (this is your mask file). Save it as a .bmp. If your sprite filename will be sprite.jpg, name it spritem.bmp.
Go back to your original image, go to the layers panel and select the layer that contains your feature. If your selection is gone, you can right click and load selection.
Right click the image and select inverse. Double-check that your background color makes sense (e.g. black) and delete your selection (delete key). This will make the background a solid color.
Save this image as a .jpg, same name as the mask file but without the m at the end.
Zip the .bmp file (mask) and put both the final .jpg image and zipped mask files in the world object path textures folder.

Applying your texture/mask to an existing sprite model

The simplest way to use the sprite image files is to use a texture command to apply them to an existing model that was designed for sprites. There is a facer objects section in the Active Worlds online documentation that lists some of these. For example, if your sprite files are sprite.jpg and spritem.bmp, you might use the model animfcr3.rwx and the action command:

create texture sprite mask=spritem

Creating a custom sprite model

Copy and paste this sprite model template into your favorite text editor, follow the editing instructions below, and save it as a .rwx file (make sure your editor doesn't automatically tack on a .txt extension):

ModelBegin
  ClumpBegin
    AxisAlignment ZOrientY
    TextureModes NULL
    Vertex -.1  0  0 UV 0 1
    Vertex  .1  0  0 UV 1 1
    Vertex  .1 .2 0 UV 1 0
    Vertex -.1 .2 0 UV 0 0
    Surface .5 .3 0
    Color 1 1 1
    Texture TEXTUREFILENAME mask MASKFILENAME
    Quad 1 2 3 4
  ClumpEnd
ModelEnd

Inserting filenames

To apply your image files, alter the line that begins with "Texture" to incorporate the filenames of your files. Replace TEXTUREFILENAME with the filename of your texture file, and MASKFILENAME with the name of your mask file. You can leave off the extensions (.jpg/.bmp). Make sure you get both filenames exactly correct, or the model won't work at all.

Dimensions

The example above provides a 2 meter square sprite. You should determine the desired dimensions based on the scale of the content of the image, and/or the context in which it will be used. For example, a sprite of a person should be realistically sized, which means a model about 2 meters in height if the person takes up the whole height of the image. On the other hand, a sprite designed to replace a window in a house should be sized to fit the opening.

Once you know the size you want, you should edit the Vertex lines to reflect that. There are four Vertex lines, each corresponding to one corner of the sprite panel. The three values immediately after the word Vertex are the x, y, and z coordinates relative to the geometric origin of the object (in this case, the bottom-center). The scale is 1 unit = 10 meters, so .1 means 1 meter.

Edit the vertex coordinates to reflect the desired dimensions, and you will generally want to keep the signs and zero values as they are.

Non-Square Sprites

There are three main reasons to use non-square sprites: 1) you want to use an existing sprite model that is not square; 2) your image is not nearly square (e.g. a tall tree); 3) it needs to fit in a non-square space. Developing non-square sprites is slightly more complicated than square ones, involves a few modifications to the process.

First, you need to determine the desired aspect ratio (dimensions). Find or make a sprite model with those dimensions.

Next, choose a resolution that has the correct aspect ratio and has 32/64/128/256/512 pixels as the smaller dimension. During the cropping and resizing steps, work towards this resolution.

There are a few issues to consider that can make this more complicated:

If the height of the texture is an integer multiple of the width, it will be treated as an animated filmstrip. You'll generally want to avoid this.
For best performance, consider stretching your resulting texture to power-of-2 dimensions (not necessarily square). Please read the Active Worlds documentation on texture sizes. The tradeoff is possible confusion with the stretched image (the aspect ratio is obvious in the non-stretched version). Unfortunately, this doesn't work with vertical images, due to the filmstrip feature.
You can also consider splitting a rectangular sprite into multiple square images, or cutting it and fitting the pieces within a square. Then, use multiple faces and UV coordinates in the model file to apply them correctly. This is probably only worthwhile in extreme cases, or for vertically oriented figures with relatively large aspect ratios.

Troubleshooting and Development Tips

There are a few features that are very useful for testing and troubleshooting purposes.

Print object errors in chat window

This feature will give you an error message in the chat window any time a file fails to load. You can tell from the error what address it tried to download from, as well as the type of error. "File not found" means the filename is wrong or the file is in the wrong place. "Reason 1502" is generally a one-time server timeout, and will probably work if you try again. Other messages can indicate problems within individual files. This is also helpful in tracking down the causes of black triangles. Enable this feature in the "Advanced" tab of the browser settings (choose "Settings" from the "Options" menu)

Local Path

The Local Path feature allows you to test files locally before putting them in the world server (don't forget to put them on the server eventually, or nobody else will see them). When enabled, the browser will look in a folder on the local computer before downloading the file from the Object Path. This is good for development of new files, or testing ones you've found elsewhere. You set the base location in the "Advanced" tab of the browser settings (choose "Settings" from the "Options" menu). It is explained in the ActiveWorlds Help but it's a bit tricky to set up. Here's an example: if you set the local path to c:\CUni\localpath, and your world's object path is set to

host.scicentr.org/worlds/sf07.cgi?SCHOOLNAME?,

then you would put your test models in the folder

c:\CUni\localpath\host.scicentr.org\worlds\sf07.cgi-SCHOOLNAME-\models\,

and textures in

c:\CUni\localpath\host.scicentr.org\worlds\sf07.cgi-SCHOOLNAME-\textures\

Refreshing Files

Unfortunately, there's no automatic way to refresh files in CUni after you update the Object Path. One thing you can do is lower the Object Refresh limit in the World Features; this makes files expire sooner, forcing users to download them again (NOTE: this also makes users have to download files more often).

One useful thing to do when you're making changes to the OP is to clear your cache to make sure everything is still intact afterwards. Simply close CUni and delete the folder c:\CUni\cache and its contents. In some cases it might be helpful to clear your Internet Explorer cache as well. Then run CUni again. Note that users probably won't do this, so they might end up with combinations of old and new files for a while (this is a notorious problem with avatar lists).

Test Versions

It might take you several tries to get a new model file working properly, and the browser will generally cache your older attempts. An alternative to refreshing files as described above between tries is simply using a different filename for each one. For example if you're working on a file you will call object.rwx, you can make you first try object1.rwx, your second try object2.rwx, and so on. Once it is working how you want it, rename it to object.rwx and delete all the numbered copies.