https://github.com/antix-development/blobby_image_editor

https://github.com/antix-development/blobby_image_editor

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/antix-development/blobby_image_editor
• Owner: Antix-Development
• License: mit
• Created: 2024-07-29T09:09:41.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-31T01:55:55.000Z (almost 2 years ago)
• Last Synced: 2025-01-07T21:51:57.842Z (over 1 year ago)
• Language: HTML
• Size: 85 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          

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](https://github.com/xem) for suggesting it.

- Image dimensions also encoded into an ASCII string.

- Viewer now generates SVG image. Thanks again to [xem](https://github.com/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




  
Click the New Image button to create a new blobby image.




  
Click the New Component button to add a new component to the selected blobby image.




  
Click anywhere in the editor pane to add points to the selected component.




  
Create and manipulate more components and blobby images.




  
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](https://www.buymeacoffee.com/antixdevelu) :coffee: