BobSprite - Free Online Sprite Editor


What?

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

It also has tools and effects for normal drawing and painting.


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

Getting Started

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

And you must use an up to date *Chrome* or *Firefox* browser.

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

You need NOT to register.

Warning:   Don't let the browser translate the editor or else it may behave bad!


Click to open Sprite Editor

Click on the image above to open BobSprite Editor.

Two Layers

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

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


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

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.

Show Sprite

Clicking this button shows Sprite alone.

Hotkey:  S

Show Mask

Clicking this button shows Mask alone.

Hotkey:  M

Show Both

Clicking this button shows Sprite and Mask.

Hotkey:  B

Exchange Layers

Clicking this button exchanges Sprite and Mask.

Hotkey:  E

Zoom

Typing   -   decreases zoom.

Typing   +   increases zoom.

You can't change zoom with mouse.

Zooming respects chosen position of image!

Special Colors

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).

Roll

Clicking this button paints the whole layer.

It erases the layer before paint it.

If SHIFT is pressed the layer is erased but not painted.

Thin Pen

This tool erases the pixels before paint them.

If SHIFT is pressed the pixels are erased but not painted.

The size of this tool is always 1px x 1px.

This tool produces clean trace (no double pixels).

Its undo/redo memory works pixel by pixel. So it wastes much memory if used on big images.

Mirror Pen

This tool works exactly like Thin Pen but with parallel effect.

Line Tool

This tool erases the pixels before paint them.

It draws straight lines.

MOUSE WHEEL changes its size.

Paint Border

This tool paints the border of the clicked area.

It erases the pixels before paint them.

If SHIFT is pressed the pixels are erased but not painted.

Don't drag this tool.

Pen

This tool erases the pixels before paint them.

If SHIFT is pressed the pixels are erased but not painted.

MOUSE WHEEL changes its size.

Brush

This tool works like Pen but has no effect on blank or black pixels.

The purpose of this tool is to paint a creature or object without mess its black outline or the blank pixels outside it.

Feather

This tool does not erase the pixels before paint.

It merges the old color with the new color.

It does not change the opacity of pixels.

It has no effect on blank or black pixels.

MOUSE WHEEL changes its size.

SHIFT MOUSE WHEEL changes its intensity.

>> Must release MOUSE BUTTON to affect same pixels again!

Lighten

This tool just lightens the pixels.

It does not change the opacity of pixels.

It has no effect on blank or black pixels.

MOUSE WHEEL changes its size.

SHIFT MOUSE WHEEL changes its intensity.

>> Must release MOUSE BUTTON to affect same pixels again!

Darken

This tool just darkens the pixels.

It does not change the opacity of pixels.

It has no effect on blank or black pixels.

MOUSE WHEEL changes its size.

SHIFT MOUSE WHEEL changes its intensity.

>> Must release MOUSE BUTTON to affect same pixels again!

Color Replacer

This tool replaces the color of all pixels which color matches the color of the clicked pixel.

If SHIFT is pressed the pixels are erased only.

Don't drag this tool.

Bucket

This tool replaces the color of all pixels in the clicked area.

If SHIFT is pressed the pixels are erased only.

Don't drag this tool.

Rectangle

This tool draws an empty rectangle.

If SHIFT is pressed the rectangle is filled.

Ellipse

This tool draws an empty ellipse.

If SHIFT is pressed the ellipse is filled.

Spray

This tool erases the pixels before paint them.

If SHIFT is pressed the pixels are erased but not painted.

It has no effect on blank or black pixels.

MOUSE WHEEL changes its size.

Capture Color

This tool captures the color of the target pixel.

Hotkey:   SPACE

Scale Up

Clicking this button scales up the layer in pixelated mode, doubling its width and its height.

It is not allowed for layer which width and/or height is greater than 1000 pixels.

Micro Tutorial:

1. click the Scale Up button

2. make some changes (easily due to the higher resolution); but do not move the content of the layer

3. click theScale Down button

(pixels that were not changed in step (2) remain intact)

Scale Down

Clicking this button scales down the layer smoothly,  halving its width and its height.

It is not allowed for layer which width and/or height has odd number of pixels.

Blur

This tool blurs the target pixels (considering their neighbours).

If SHIFT is pressed the effect is the opposite of blur.

It does not change the opacity of pixels.

It has no effect on blank or black pixels.

MOUSE WHEEL changes its size.

SHIFT MOUSE WHEEL changes its intensity.

>> Must release MOUSE BUTTON to affect same pixels again!

Blur Border

This tool blurs the border pixels of the clicked area.

It does not change the opacity of pixels.

It has no effect on blank or black pixels.

SHIFT MOUSE WHEEL changes its intensity.

Don't drag this tool.

Swap Halves

Clicking this button swaps the left and right halves of the layer.

If SHIFT is pressed it swaps the top and bottom halves instead.

The purpose of this tool is help to match tile set borders.

Selection

This tool selects a rectangular part of the layer.

Mask becomes the selected part.

If SHIFT is pressed the selected part is erased.

Lasso

This tool selects an irregular part of the layer.

Mask becomes the selected part.

If SHIFT is pressed the selected part is erased.

Hand

This tool moves layer(s) on stage.

If SHIFT is pressed only Mask is moved.

If CTRL is pressed the content of layer is moved (part of it is erased!)  instead.

Don't press SHIFT and  CTRL.

You may use keyboard arrows instead of mouse. It is slower but is more precise.

Fast Move

When this button is pressed, layer(s) or content of layer moves fast.

Only works when moving by keyboard arrow(s).

Hotkey:   F

Center

Clicking this button centers layer(s) on stage.

If SHIFT is pressed it centers Mask only.

Hotkey:   C

Adjust Mask

Clicking this button adjusts Mask position to match Sprite position.

If SHIFT is pressed adjusts position and size.

If CTRL is pressed adjusts position and size and erases Mask.

Don't press SHIFT and  CTRL.

Scale

This tool scales the layer.

It is more precise with great zoom.

Rotation

This tool rotates the layer.

Drag mouse horizontally over the layer.

If SHIFT is pressed intensity is low.

It is more precise with great zoom.

Shear

This tool shears the layer horizontally.

If SHIFT is pressed it shears the layer vertically.

Drag mouse horizontally over the layer.

It is more precise with great zoom.

Lighten Layer

Clicking this button lightens the layer.

If SHIFT is pressed it darkens the layer.

It has no effect on blank or black pixels.

Contrast Layer

Clicking this button increases the contrast of the layer.

If SHIFT is pressed it decreases the contrast of the layer.

It has no effect on blank or black pixels.

Paste Mask On Sprite

Clicking this button pastes Mask on Sprite.

If SHIFT is pressed blank pixels in Sprite are preserved.

It warns when opacity (panel effect) of any layer is not 100%.

Hotkeys:   CTRL V,   CTRL SHIFT V

Special hotkey:   CTRL B   pastes  Mask  behind   Sprite

Clone Image To Mask

Clicking this button creates an image merging Mask on Sprite.

If one layer is off, the image is a copy of the other layer.

It warns when opacity (panel effect) of any layer is not 100%.

Mask becomes this image and its opacity (panel effect) becomes 100%.

Tile Set

Clicking this button creates an image merging Mask on Sprite.

If one layer is off, the image is a copy of the other layer.

It creates a 1200 x 1200 pixels tile set image that is shown in a new tab of browser.

Then you can RIGHTCLICK to save it.

Make sure the browser is not blocking BobSprite pop ups.

Load

Clicking this button loads an image from the computer.

Hotkey:   CTRL L

Save

Clicking this button creates an image merging Mask on Sprite.

If one layer is off, the image is a copy of the other layer.

It warns when opacity (panel effect) of any layer is not 100%.

Then it saves the image as a PNG  file in the computer, by a pseudo-download.

Hotkey:   CTRL S

>> In case the pseudo-download does not work, you must open the image in a new tab of browser. Then you can RIGHTCLICK to save it. Make sure the browser is not blocking BobSprite pop ups.

Special hotkey:   SHIFT S     opens the image in a new tab of browser

Undo

Each layer has its own undo/redo memory.

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.

Hotkey:   CTRL Z or BACKSPACE

Redo

Just the opposite effect of Undo.

Hotkey:   CTRL Y or SHIFT BACKSPACE

Memorize Image

Memorizes image at end of memory slots.

If SHIFT is pressed memorizes image at start of memory slots.

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

BobSprite automatically memorizes loaded and saved images in slots.

A slot can be retrieved as Sprite and as Mask.

Hotkey:   ENTER

Show Previous Image

If SHIFT is pressed shows image of first memory slot.

Hotkey:   PAGEUP

Show Next Image

If SHIFT is pressed shows image of last memory slot.

Hotkey:   PAGEDOWN

Delete This Image

Deletes memory slot that matches the image of the layer.

Hotkey:   DELETE

Color Picker

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


BobSprite - Sprite Editor

Animation

Set up the frames and frame duration in panel animation:

   -  MOUSEDRAG   swaps frames

   -  CLICK   toggles frame on/off

   -  SHIFT CLICK   clones frame to the layer

   -  CTRL CLICK   clones canvas image to frame

The frame marked as "canvas" is automatically updated with content of Sprite and/or Mask.

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

Typing   CTRL -  decreases browser zoom.

Typing   CTRL +  increases browser zoom.

Typing   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 Feather ( Brush, Spray... ) 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.

How To Paint An Android - Tutorial

How To Paint An Android - Tutorial Sprite Editor
Click the android to access a short and very useful tutorial about BobSprite.

Mosaic - YouTube Tutorial

Easily make lots of mosaics.

Choose mosaic in the monitor box of panel main.

Move the layer(s) with image(s) by keyboard arrows.

RIGHTCLICK the mosaic in the monitor box to save it.

Mosaic - YouTube Tutorial
Click the image to see the tutorial in YouTube.

Questions, Criticisms And Suggestions

Please contact us (see link in footer).