BobSprite - Free Online Sprite Editor

excelent for pixel art




Click to open Sprite Editor


What?

BobSprite is a browser based free online sprite editor excelent for pixel art.


BobSprite - Sprite Editor
The sprite above is a remake of the dragon from game Tibia.

This Guide

This guide that you are reading was made small and simple.

And shall be considered with the help and tooltips in the editor.

You will learn how to use BobSprite by... using it!

Getting Started

You must have a computer (keyboard, mouse, big screen).

And you must use an up to date Google Chrome browser.

If your browser is in incognito mode, it will not memorize your preferences (size, grid, colors...).

You need NOT to register.

Click on any screenshot to open BobSprite Editor.

Two Layers

BobSprite has two layers: Sprite (main layer) and Mask (helper layer placed over Sprite).

Pressing  S  shows layer Sprite alone.

Pressing  M  shows layer Mask alone.

Pressing  B  shows both Sprite and Mask.

BobSprite - Sprite Editor
This image shows the Sprite (fully painted in orange), partially covered by Mask (dragon on transparent background).


Both layers have transparent background.

The background color that you may choose in panel other is about the display screen, NOT about the resulting image.

Exchanging

Pressing  CTRL  E  exchanges Sprite and Mask.

BobSprite - Sprite Editor
This image shows the Sprite (dragon on transparent background), partially covered by Mask (fully painted in orange).

Zoom

Pressing  -  decreases zoom.

Pressing  +  increases zoom.

You can't change zoom with mouse.

Zooming respects chosen position of image!

Blank

Blank (0,0,0,255) is not white (255,255,255,255)!

Sprite and Mask start fully transparent (only blank pixels).

Most effects and some tools preserve blank pixels.

Black

Black (0,0,0,255) is considered the color for oultine.

Most effects avoid change (or consider) black pixels or turn pixels to black.

They change pixels to almost black (1,1,1,255).

Soft Painting (tool Feather)

Soft painting does not replace the original pixels. It paints over them.

Soft painting does not change the opacity of pixels.

Soft painting has no effect on blank or black pixels.

Hard Painting

Hard painting does not paint over original pixels. It replaces their RGBA values.

Tool Brush and Spray do hard painting but respect blank and black pixels.

Color Picker

Click on color sample inside frame selected in panel color to open color picker.


BobSprite - Sprite Editor

Rotating and Scaling (by mouse)

Most of the times you use tool (mouse) to rotate or scale, the resulting image gets a bit distorted.

So, the best result happens when you rotate or scale in a single step.

Moving Layers

Pressing  C centers Sprite and/or Mask.

Pressing  ARROW(s)  changes position of Sprite and/or Mask.

Moving Mask Only

Pressing  SHIFT C centers Mask only.

Pressing  SHIFT ARROW(s) changes Mask position only.

Moving/Deleting Layer Content

Pressing  CTRL ARROW(s) moves Sprite or Mask content inside its frame.

The layer pixels moved away are all DELETED!

Memory - Slots

BobSprite automatically memorizes loaded and saved images in slots.

A slot can be retrieved as Sprite and as Mask.

A slot is never duplicated:
    - the old slot is automatically deleted
    - the new slot may use the name of the deleted slot

All slots are erased when browser is refreshed or closed.

Memory - Undo / Redo

This memory is erased when browser is refreshed or closed.

In fact, there are two separate undo/redo memories. One for Sprite and other for Mask.

Each memory has a maximum limit of 50.000.000 pixels. Examples:

   -  50 images of 1000 pixels each side

   -  5000 images of 100 pixels each side

With Thin Pen and Mirror Pen, this memory is very precise and lets you retrieve any small change that you make.

Animation

Set up the frames and frame duration in panel animation:

   -  MOUSEDRAG   swaps frames

   -  CLICK   toggles frame on/off

   -  SHIFT CLICK   clones frame to active layer

   -  CTRL CLICK   clones canvas image to frame

The frame marked as "canvas" is automatically updated with canvas image.

Monitor Box in panel main shows the animation (must select option "animation").

Connection

No data is sent to server.

After load the page, you may work offline.

Some Browser Hotkeys

Pressing   CTRL -  decreases browser zoom.

Pressing   CTRL +  increases browser zoom.

Pressing   F11  toggles full sreen mode.

Failure?

Often you will try to paint or apply some effect and nothing will happen.

This is not a bug:

Maybe you are using tool Feather (or Brush) on blank or black pixels.

Change the selected color.

Remember that some effects need blank area to work.

Others need homogeneous colored area.

And some need transparent and/or black pixels.

Questions, Criticisms And Suggestions

Please contact us (see link in footer).