Import / export of files

Listing all you need to know about importing and exporting images and documents, as well as file handling advice in general.

Loading and saving

Loading files

BitMappery supports the following file formats:

  • Image files (JPEG, PNG, GIF, WebP*)
  • Photoshop documents (PSD**)
  • Portable Document Format files (PDF)
  • BitMappery documents (BPY)

With the following caveats:

  • WebP is not supported in Safari
  • Imported PSD files will not contain adjustment layers, though the original representation of the adjusted layers will be respected. Text layers will be available as both editable text- and rasterized layers (maintaining the original representation in case the original fonts are unavailable).

You can load any of these files using the File > Open-menu or by simpling dragging the files from your computers file browser into the BitMappery window (or copy pasting them).

Saving files / the BPY format

You can export your documents into any of the aforementioned image - but not third party document! - formats. Saving a project is restricted to the BitMappery BPY-format. BPY files are lossless, meaning that all your source content is saved within the BPY document in its original quality. Subsequent saves will never degrade the original content.

A note on saving: as BitMappery runs in your browser it cannot access your device storage. As such, saving a BPY document triggers a file download.

However, you can connect BitMappery directly to Dropbox or Google Drive*, allowing you to store projects in your online storage. This keeps your projects available across devices while also allowing you to share these with others (when using shared folders).

*Your browser will connect to these services directly, keeping your data private at all times.


Exporting images

Export window

Using the File > Export Image-menu you can access the export window.

The export window will provide you with the option to select the desired file type as well as further options depending on the chosen file type. The tweaks you make are visible in the preview pane of the window.

  • JPEG and WebP are known as lossy image formats. They provide compression to shrink the file size, at the expense of quality. WebP is of higher quality, but less widely supported as JPEG. Use these for photos.
  • PNG is a lossless image format. It provides the highest clarity, though at the expense of a larger file size. PNG's are used best for graphics.
  • GIF is a lossy image format that supports a maximum of 256 colors. GIF works best for low color graphics, and for...
Image export window

Animated images

Despite their low color count, GIFs are still of interest as they can contain animations. If your document contain multiple layers or is of the timeline type, you will be presented with the option to export an animation.

For default documents, each layer will be converted into a frame, whereas for timeline documents each tile is represented as a frame. You can specify the delay between successive frames to control animation speed.

Note that animated GIFs are NOT supported for documents wider / taller than 1920 pixels as GIF files are not efficient for large image content. You can always resize your document before exporting to find a suitable middle ground between fidelity and file size.


Spritesheets

BitMappery is well equipped to those looking to create 2D game art. BitMappery natively supports importing and export of spritesheets, converting the grids into layers and vice versa for easy management. Pro tip: create a timeline type document with one of the pixel art presets and for razor sharp pixel art, disable Anti-aliasing in the view-menu.

Importing a spritesheet

If you have a spritesheet in any of the supported image formats, you can load it like any other file and then navigate to the Document > Slice Grid To Layers-menu.

Here you can specify the width and height of each tile in the spritesheet (as is good practice, all tiles in a sprite sheet should be of equal size).

The application will then take a block of the given width and height and slice the contents of each block into a new layer, column by column and row by row until all blocks are converted to layers and the document size is cropped to the same grid size.

You can optionally specify whether all generated layers should be visible or only the top one.

grid slicing window
spritesheet to layer editing

Exporting a spritesheet

Happens in the File > export image-menu. Select your destination image type as before and activate the Merge into sheet-toggle.

You will now be presented with the option to specify the column amount. As most spritesheets separate actions into new rows, you can specify the column amount to define the splitting point. All layers are aligned bottom up from left to right in columns. When the total amount of columns is reached, the next sequence of layers is appended in a new row.

In the example provided here, the actions are split into four columns (e.g. four frames per action). The generated rows represent:

  • Walking upwards
  • Walking downwards
  • Walking left
  • Walking right

The source document can remain a BitMappery BPY with multiple layers, meaning there is no need to convert back and from spritesheet based layout when continuing your work.

The spritesheet provided is 16x16 Dragon by Chasersgaming.

exporting a spritesheet