Blobby Image Editor

A basic tool for creating and editing 2d blobby images which can be used as assets in web apps and games.

Whats New?

v1.0.0-rc.1 (30 Jul 2024)

• Component points now encoded to ASCII string to reduce exported code size. Thanks to xem for suggesting it.

• Image dimensions also encoded into an ASCII string.

• Viewer now generates SVG image. Thanks again to xem for suggesting it.

• Viewer code grew in size but offset by size savings in exported code.

• Help dialog improved layout and also now mirrors readme.md.

• Major overhaul of the syntax highlighting so it can handle literal template strings.

History

v0.9.0 (28 Jul 2024)

• Initial public release

Getting Started

1. Click the New Image button to create a new blobby image.
   
2. Click the New Component button to add a new component to the selected blobby image.
   
3. Click anywhere in the editor pane to add points to the selected component.
   
4. Create and manipulate more components and blobby images.
   
5. Export and use the blobby images inside your game.
   

Selecting Things

• Left click a point in the editor pane to select it.
  
• Right click a component in the editor pane to select it.
  
• Press the Tilde key to select the next point in the selected component.
• Hold the Shift key and press the Tilde key to select the previous point in the selected component.
• Hold the Alt key and press the Tilde key to cycle through the components in the selected blobby image.
• Hold the Ctrl key and press the Tilde key to cycle through the blobby images.

Moving Things

• Left click and hold points from the selected component in the editor pane, and drag them about.
• Use Arrow keys to move the selected point.
• Hold Shift and press Arrow keys to move the selected component.
• Hold Ctrl and press Arrow keys to move the selected blobby image.

Deleting Things

• Press the Delete key to delete the selected point.
• Hold Shift and press the Delete key to delete the selected component.
• Hold Ctrl and press the Delete key to delete the selected blobby image.

Components

• Use the Blobbiness slider to change the blobbiness of the selected component.
• Use the Z-Index slider to change the selected components draw order.
• You can Double-Click a palette to modify its colors.
• The other controls in this pane should be self explanatory..

Uploading and Downloading Images

• Click the Download Images button to open a dialog where you can select images to download.
• Click the Upload Images button to upload previously downloaded images..

Exporting Images

• Click the Export Images button to generate JavaScript code describing the images, and copy it to the clipboard.
• Fiddle with the other controls to modify the format of the generated code.
• You can also drag the names around in the blobby image list to change the order in which the are exported.
• Note Exported images will be clipped to their bounding boxes.
• Note Exported images will be scaled according to the selected scale in the preview panel.

The exported data will be in the form of an array named blobbyImages, which contains the following data...

blobbyImages

Index	Type	Description
0	array	ImageDefs.
length - 2	number	Line width used when rendering.
length - 1	array	Palette strings, eight sets of 3 in total.

ImageDef

Index	Type	Description
0	array	Components, sorted into ascending z-index order.
length - 1	encoded array	Image width and height.

Component

Index	Type	Description
0	encoded array	Points, sorted into clockwise order.
length - 2	number	Blobbiness.
length - 1	number	Palette.

Export Caveats

• Component coordinates are encoded as whole numbers between 0 and 511. Because scaled output can result in floating point numbers, these coordinates will be rounded to the nearest whole number. To avoid image distortion, align your points with coordinates that will not result in floating point numbers.

Miscellaneous

• Everything that moves does so in 2 pixel increments to avoid floating point numbers.
• All blobby images are stored in your web browsers `localStorage`.
• Currently there is no UNDO functionality.
• Seems to work in Chrome and FireFox,

Blobby image editor is a tool created for JS13K 2024 by Cliff Earl, Antix Development.

Thanks

If you end up using Blobby Image Editor maybe you'd consider buying me a coffee ☕