Zoomumba Animal Previews

How to submit images for an animal

This guide covers uploading (or picking) the art for an animal that has no preview yet, cleaning it up in the built-in image editor, and making the small wish-bubble icon.

1. Log in

You can browse every animal without an account, but uploading needs a login. Click Log in in the top-right corner and enter the username and password an admin gave you. There is no sign-up page – ask an admin if you need an account.

Login page with username and password fields
Login page with username and password fields

2. Find an animal that needs art

On the Animals page, set the status filter to Missing (no submission) and search for the animal by name, alias or id. Each card shows a badge:

Badge Meaning
swf The animal already has a committed preview – nothing to do.
missing No art yet – this is where help is needed.
submitted Someone has uploaded art (or a SWF is waiting to be committed). You can still add a better version.

Click a card to open the animal's page.

Animal list filtered to "Missing", search box filled in
Animal list filtered to "Missing", search box filled in

3. The submission form

Scroll down to Submit images. There are two images per animal:

The "Submit images" form with the animal art and wish icon fields
The "Submit images" form with the animal art and wish icon fields

4. Choose the animal art

You have two ways to get a picture in:

a) Upload a file from your computer

Click Choose File next to Animal art and pick a PNG, JPG, GIF or WebP (max 10 MB).

File chooser next to "Animal art"
File chooser next to "Animal art"

b) Pick from the local image library (no upload)

Click Browse local images…. A window opens with one folder per animal:

Local images dialog: suggested folders on top, filter box, folder thumbnails
Local images dialog: suggested folders on top, filter box, folder thumbnails

Open a folder to see every image in it. The image whose number matches this animal's position (male, female, child) is highlighted as a guess, and images already used by another animal say used by #…. Click an image to select it. The form then shows Selected: folder/file.png with a clear link.

Images inside a folder, one highlighted as the suggested match
Images inside a folder, one highlighted as the suggested match

5. Edit the animal art

As soon as an image is chosen, the Edit image panel opens below the field. Everything you do here changes the picture that gets submitted – the original file is not touched.

The image editor with the toolbar, the picture and the in-game previews
The image editor with the toolbar, the picture and the in-game previews

The toolbar is grouped by task:

Group Tools
Transform ⟲ 90° / ⟳ 90° rotate, ⇆ / ⇅ flip, or type an angle and press Rotate
Crop Crop… then drag a rectangle and press Apply crop; Trim removes empty transparent borders; Pad adds transparent space
Size Type width × height (tick lock to keep the shape) and press Resize; Scale by %; Fit 225×150 shrinks to the recommended size
Transparency Remove background clears the background connected to the four corners; Pick colour… then click a colour to make it transparent. Adjust tolerance, connected and soft edge if too much or too little disappears
↶ Undo, ↷ Redo (Ctrl+Z / Ctrl+Shift+Z) and Reset to go back to the original

A typical clean-up for a picture with a white background:

  1. Remove background – the white turns into the checkerboard (transparent).
  2. Trim – cuts away the empty edges.
  3. Fit 225×150 – shrinks it to a good size.
Before and after "Remove background" + "Trim"
Before and after "Remove background" + "Trim"

Use Crop… when the picture has more than the animal in it:

Crop mode: rectangle dragged around the animal, "Apply crop" button
Crop mode: rectangle dragged around the animal, "Apply crop" button

Under the picture, How it will look in the game shows the art at the exact sizes the game uses (ObjectSPR, CircleSPR, InfoSPR). Check that the animal is not too small or cut off.

The in-game size previews under the editor
The in-game size previews under the editor

6. Make the wish icon

The wish icon is a small circle with the animal's face, 35×35 px.

Start from the animal art

Click Use animal art (circle crop) next to Wish icon. The animal picture (with your edits) is copied into the wish editor, which opens in circle mode. You can also upload a separate file or use Browse local images… for the wish icon instead.

Wish icon field with the "Use animal art (circle crop)" button
Wish icon field with the "Use animal art (circle crop)" button

Select the face with the circle

Everything outside the dashed circle is dimmed.

The small preview on the left of the circle bar shows the finished icon as you go.

Circle mode: dashed circle around the face, live preview on the left
Circle mode: dashed circle around the face, live preview on the left

Border, background and pacifier

In the Wish icon row of the toolbar:

Option What it does
border px + colour Width and colour of the ring around the icon (default 2 px, brown)
background + colour Fills the circle behind the art with the colour. Off by default (transparent background)
35×35 / 70×70 Final size. 35×35 is the WishSPR size; 70×70 is a sharper version the game scales down
pacifier Adds the baby pacifier in the bottom-right corner. Ticked automatically for child animals
% Pacifier size, as a percentage of the icon height
stick out Lets the pacifier overhang to the right of the circle (the icon becomes up to 48×35)
Add pacifier now Puts the pacifier on the current image without a circle crop
outline px + colour Draws an outline around the circle when it is applied; the pacifier is added afterwards, on top of the outline. The icon keeps its height. Default 1.5 px white, off
Add outline now Outlines the current image straight away (without a circle crop). The picture grows by the outline width; the art itself is not resampled
Wish icon options: border, background, size, pacifier and outline
Wish icon options: border, background, size, pacifier and outline

When it looks right, press Apply circle. The picture becomes the finished icon and the preview underneath shows it in the 48×35 WishSPR box.

Finished wish icon with border and pacifier, shown in the WishSPR preview
Finished wish icon with border and pacifier, shown in the WishSPR preview

Changed your mind? ↶ Undo brings back the full picture and the circle.

7. Submit

Add a Note if there is something an admin should know (for example "male and female might be swapped"), then press Submit images.

Note field and the "Submit images" button
Note field and the "Submit images" button

The page reloads with Thanks! Your images were saved. Your submission appears underneath with both images, your username and the time.

The saved submission with animal art and wish icon
The saved submission with animal art and wish icon

From there you can:

You can submit again at any time; an admin picks which submission is used.

Tips

Troubleshooting

Problem What to do
No Submit images form You are not logged in, or the animal already has a committed preview.
"Upload rejected: not a readable image" The file is not a supported image. Re-save it as PNG.
"Upload too large" Images are limited to 10 MB each. Scale it down first.
The editor does not appear Make sure JavaScript is enabled and you are using a current browser (Chrome, Edge, Firefox).
Too much of the animal disappeared Undo, lower the tolerance, or tick connected so only the background area is removed.
"MongoDB unavailable" banner The server's database is down; submissions are disabled until it is back. Tell an admin.