Cobalt is a painting program for creating textural and expressive pixel art. It’s small, fast, and easy to use, but still has all of the features you need for creating bold and evocative images.
A live demo running in the browser can be trialed on the demo page, and demos for every platform can be downloaded for free from the itch.io store page.
Cobalt is distributed as a single executable file on each platform, which doesn’t need to be installed. It will run from your computer, from a flash drive, or from cloud storage.
Cobalt for Linux is distributed as a single executable file, just double-click to run. It has been tested on Ubuntu and Arch Linux, using both X11 and Wayland.
On most Linux distributions, executable files will need to be given permission to run. This can sometimes be done by right-clicking on the file, selecting ‘Properties’, and checking a box. Otherwise, you can use the command chmod +x <path-to-file> to achieve the same task.
You might run into difficulties on more exotic distributions, such as NixOS or Alpine, due to the file being dynamically linked or using glibc. If this is you, send an email to support@derelict.engineering for help with compiling from source.
Cobalt for Nintendo DS is distributed as a single .nds ROM file, just load it onto your flashcart of choice. It has been tested on a DS Lite.
It will also run on a Nintendo DS emulator, although most emulators lack filesystem support so you might not be able to open or save your images. It has been tested on the DeSmuMe emulator without filesystem support.
Cobalt can run in a web browser, although this isn’t currently an official platform due to the lack of filesystem support in the bedrock-js emulator. See the bedrock-js project page for more information.
Cobalt is built on Bedrock, a thin virtual machine that is straightforward to port to new platforms. Cobalt is distributed as a single .br Bedrock program, and will run on any Bedrock emulator.
If you’re an experienced programmer and want to run Cobalt on a platform that isn’t listed here, you could consider writing a Bedrock emulator for that platform, taking perhaps two weeks to complete. A specification and many exemplar emulators can be found on the Bedrock project page. For full functionality, the emulator will need to implement the system, memory, math, input, screen, and file devices.
You can use a keyboard, mouse, touchscreen, or game controller to navigate menus, but you’ll need a mouse or touchscreen to be able to draw on the canvas.
When selecting an item from a list, you can often reach additional settings by clicking on the active item.
Clicking on the title bar of a screen will take you back you to the previous screen.
On the Nintendo DS, the A button acts like the enter key, B acts like escape, and X, L and R act like tab. Tapping a text or numeric input will open an on-screen keyboard for entering a value.
On Windows or Linux, press F5 or F6 to change the scale of the user interface, and press F11 to toggle fullscreen mode.
When you launch Cobalt, you’ll be taken to the splash screen. This screen shows you the version of Cobalt that you’re currently using, and allows you to create a new image or open an existing image.
If you’re using the demo version of Cobalt, the ‘Open image’ button will be replaced with an ‘About demo’ button instead. You’ll be able to open saved images after purchasing the full version of Cobalt.
To create a new image, click the ‘New image’ button from the splash screen. This will take you to the new image screen, where you can choose how large you want your image to be (in pixels). The size cannot be changed once the image has been created.
You can change the width or height by clicking the left and right arrows, by dragging the values left and right, or by typing a new value on the keyboard. Clicking the ‘Create’ button will create a new image, taking you to the canvas screen.
The maximum area of an image is 131,072 pixels, which allows for sizes such as 650x200, 400x320, or 360x360. A warning message will be shown if this limit is exceeded.
To open an existing image file, click the ‘Open image’ button from the splash screen. This will take you to the open image screen, where you can browse your computer to find an image to open. This feature isn’t available in the demo version.
The right-hand panel of the file browser shows the contents of the current folder, and the left-hand panel shows the contents of the the parent folder. The icon to the left of each entry indicates whether it’s a folder (has a folder icon), a Cobalt image file (has a textured square icon), or an ordinary file (has no icon). Only image files created by Cobalt will be able to be opened in Cobalt.
Clicking anywhere in the left-hand panel will ascend to the parent folder. Clicking on an entry in the right-hand panel will enter that entry, either descending into a folder or opening a preview of an image file.
When clicking on a file, a preview will show the image dimensions, the colour palette used, and a preview of the image itself. If the image is larger than the viewport, dragging on the image will move it around inside the viewport. Clicking the ‘Open’ button will open that image, taking you to the canvas screen.
The canvas screen is used to draw the image. You’ll spend most of your time here.
The framed rectangle in the center of the screen is the canvas, which holds the current image. Clicking or dragging on the canvas with the left mouse button will draw with the selected tool (shown highlighted in the tool palette to the left).
Right-clicking anywhere on this screen will open the tool settings screen, allowing you to change the settings used for each tool, and right-clicking again will take you back to the canvas screen. You can also change between the tool settings and canvas screen by pressing the TAB key.
Pressing the [ and ] keys will change the brush shape used by the selected tool. If the brush shapes are arranged in order of ascending size, this will simulate changing the brush size.
The vertical panel extending from the left edge of the screen is called the tool palette, and is used to select a drawing tool. You can switch between tools by clicking on a new tool, by pressing numbers 1 through 7 on the keyboard, or by pressing the up and down arrow keys. Clicking on the selected tool will open the tool settings screen, and clicking on the small arrow at the top will hide the panel.
Hovering over the tool palette will temporarily show the settings used for each tool.
The large icon indicates the tool mode, and the items in each bubble from left to right indicate the colour, shape, pattern, and spacing and scatter (top and bottom slider, respectively) of that tool.
The left-most group of buttons along the top edge of the screen is used to navigate around the canvas.
The left and right buttons (with plus and minus icons) are used to zoom out and zoom in, making individual pixels easier to see. These buttons will be disabled if the canvas is already zoomed all the way in or out. You can also zoom the image by scrolling with the mouse, or by pressing + and - on the keyboard.
The middle button (with a drag icon) is used to pan the canvas, allowing you to see different parts of the image. Clicking on the button will temporarily enter pan mode, and dragging with the left mouse button will pan the canvas. You can also pan the canvas by dragging with the middle mouse button, or you can enter pan mode by pressing SPACE on the keyboard.
The middle group of buttons along the top edge of the screen is used to revert changes to the canvas. This will only revert draw operations, not changes to the palette, shapes, patterns, or tool settings.
The left button (with a backward arrow icon) is used to undo the most recent change to the canvas, and the right button (with a forward arrow icon) is used to redo that change. These buttons will be disabled if there is no change to undo or redo. You can also undo a change by pressing Z or the left arrow key on the keyboard, and redo a change by pressing SHIFT+Z, Y, or the right arrow key.
The maximum number of undo levels is determined by the size of the canvas and the platform used to run Cobalt. Using the default image size of 200x120, the Nintendo DS will provide 255 undo levels, and Windows/Linux will provide 1394 undo levels.
The right-most button at the top edge of the screen (with a floppy disk icon) is used to save the image.
Saving the image for the first time will open the save image screen, allowing you to choose a name and folder for the image. Subsequent saves will be fast, saving the image to the same location. You can also save the image by pressing the S key on the keyboard.
The icon in the right half of the save button indicates the save state. A filled circle indicates that all changes have been saved, a hollow circle indicates that there are unsaved changes, and a cross indicates that the file could not be saved.
The left-most button at the bottom edge of the screen (with an eye icon) is used to toggle the sketch layer, and will reveal three more buttons to the left when active. You can also toggle the sketch layer by pressing the / key on the keyboard.
The sketch layer is a special single-colour layer that will be displayed over the top of the canvas. It can be used to sketch out a rough draft before you start drawing, and won’t be overwritten as you work. It starts off empty.
The revealed left button (with a pencil icon) toggles sketching mode. When this button is active, the drawing tools will draw on the sketch layer instead, and a two-colour palette will be revealed to the left. If the colour on the left side of the palette is selected, the drawing tools will erase from the sketch layer instead.
The revealed middle button (with a half-shaded square icon) temporarily hides the canvas while the sketch layer is visible. This can be used to work on the sketch layer without being distracted by the canvas underneath.
The revealed right button (with a slider icon) opens a colour picker screen, which will set the colour of the sketch layer.
The right-most button at the bottom edge of the screen (with a menu icon) is used to open the menu. You can also open the menu by pressing the ESCAPE key on the keyboard.
Tool settings opens the tool settings screen, allowing you to change the drawing tools.
Save image... opens the save image screen, allowing you to save the image to a different location.
Export image opens the export image screen, allowing you to export the image as a GIF file.
Close image closes the image without saving, returning to the splash screen.
The tool settings screen is used to customise the settings used for each of the seven different tools.
Clicking on an icon in the tool palette will select that tool. The window in the center of the screen shows the settings currently being used by that tool, and allows you to change them. Any setting can be combined with any other setting, allowing for complex and interesting effects to be created.
The shape setting determines the shape of the brush, with a larger shape drawing a thicker line. The brush shape can also be changed from the canvas screen by pressing the [ and ] keys on the keyboard. Clicking the selected shape will open the edit shape screen.
The pattern setting determines the pattern used by the brush. The pattern is used as a mask while drawing, with only the pixels that belong to the pattern being drawn. This allows you to add texture to the image and layer up colours. Clicking the selected pattern will open the edit pattern screen.
The spacing setting determines the distance between each impression of the brush (in pixels). Setting this to 1 will draw the brush on every pixel of a line, and setting it to 10 will leave gaps that are 9 pixels wide along the line. Increasing this value will make rectangle drawing smoother with large brushes.
The scatter setting determines the distance to scatter each impression of the brush (in pixels). Setting this to 1 will draw the brush exactly where it was clicked, and setting it to 10 will move it up to 9 pixels in any direction from where it was clicked (following a binomial distribution).
The fine brush strokes toggle has a subtle effect on thin freehand lines, making them appear finer and more even. This is done by eliminating all pixels of the stroke that are bordered by 3 or more pixels on sides or corners. This setting is applied to all tools.
Each image has a colour palette containing up to eight different colours. Clicking on the current brush colour on the tool settings screen will open the edit palette screen, allowing you to change the colours in the palette. When a colour is changed, all pixels of that colour in the image are changed to the new colour.
The colour selector at the top of the window is used to select a colour to edit. Clicking on the current colour will open the reorder palette screen, allowing the colours in the palette to be rearranged without affecting the allocation of colours in the image.
Underneath the selector is the hexadecimal colour code of the current colour.
The three sliders in the middle of the window are used to change the red, green, and blue channels of the current colour. There are 16 possible values for each colour channel, making for a total of 4096 unique colours. The ‘Random colour’ button will randomise the colour, rolling a random value for each channel (following a uniform distribution).
The preview toggle selects the type of preview to use for the background. ‘Colour’ fills the background with the current colour, drawing a colour swatch down the right-hand side to visualise the relative brightness of each colour. ‘Image’ replaces the background with the canvas, allowing colours to be balanced against one another in context.
The reorder palette screen is used to rearrange the colours in the colour palette without affecting the allocation of colours in the image. This operation will clear the undo history of the image.
The left-hand column represents the current order of the colour palette, the eight selectors in the middle of the window are used to remap the colours, and the right-hand column represents the new colour palette. Each colour in the current palette must be represented exactly once in the new palette.
Clicking ‘Confirm’ will perform the operation, returning to the edit palette screen.
Each image file contains seven different brush shapes to choose from. Clicking on the current brush shape on the tool settings screen will open the edit shape screen, allowing you to change the available brush shapes.
The shape selector at the top of the window is used to select a shape to edit.
The grid in the middle of the window represents the pixels of the current shape. Clicking on a pixel will toggle it on or off.
The ‘Clear shape’ button will toggle off every pixel in the shape. The ‘Random shape’ button will randomise each pixel in the shape, with a 25/75 chance of each pixel being set on or off (the final row and column will always be kept blank).
Each image file contains seven different brush patterns to choose from. Clicking on the current brush pattern on the tool settings screen will open the edit pattern screen, allowing you to change the available brush patterns.
The pattern selector at the top of the window is used to select a pattern to edit. The background of the screen shows a preview of what the current pattern will look like when tiled.
The grid in the middle of the window represents the pixels of the current pattern. Clicking on a pixel will toggle it on or off, with the background being updated to reflect your changes.
The ‘Clear pattern’ button will toggle off every pixel in the pattern. The ‘Random pattern’ button will randomise each pixel in the pattern, with a 50/50 chance of each pixel being set on or off.
The save image screen is used to choose a name and folder to save the image to. This screen can be reached by clicking ‘Save image...’ on the menu screen, or otherwise when saving an image for the first time.
The top text input is used to enter the path of a folder to save the image to. The icon to the right will indicate whether the folder already exists (a folder icon) or will be created (a sparkle icon). The folder path must be absolute (starting from the root directory or a drive letter), and cannot contain relative components.
The bottom text input is used to enter a filename for the image. If the file already exists, the save button will change to ‘Save over’, and the existing file will be overwritten. The .co file extension can be used for Cobalt image files.
Clicking the save button will save the file to the chosen location, returning you to the canvas screen. Check the icon in the right half of the save button on the canvas screen: a filled circle indicates success, and a cross icon indicates that the file could not be saved.
Images can be exported as GIF files so that they can be opened in other programs. This screen can be reached by clicking ‘Export image’ on the menu screen.
The destination text inputs are used in the same way as on the save image screen. The ‘Include sketch layer’ checkbox will overlay the sketch layer when exporting the image.
This section contains a technical description of the image file format used by Cobalt. It is aimed at programmers who want to work with Cobalt image files.
This section contains eight pairs of bytes in big-endian order.
The highest four bits of each pair contain the file identifier. When concatenated, these 32 bits have the value 0xc0bal700, which identifies the file as being a valid Cobalt image file. This is used by the file browser on the open image screen.
The remaining twelve bits of each pair represent one of the eight colours of the image colour palette. Each colour is encoded using a 4-bit red, green, and blue colour channel.
Each byte represents the index of the mode used by the corresponding tool. 0 is freehand mode, 1 is line mode, 2 is rectangle mode, and 3 is fill mode.
There are three packed colour bytes. When concatenated, the first 12 bits encode the colour of the sketch layer, and the next 12 bits encode the colour of the backdrop. The colours are encoded using a 4-bit red, green, and blue colour channel.
This section contains eight groups of eight bytes each.
Each eight-byte group represents the sprite data used by the corresponding brush shape, with the eighth sprite unused. Each byte of a sprite represents a row from top to bottom, and each bit of a byte represents a pixel in the row from left to right.
This section contains eight groups of eight bytes each.
Each eight-byte group represents the sprite data used by the corresponding brush pattern, with the eighth sprite unused. Each byte of a sprite represents a row from top to bottom, and each bit of a byte represents a pixel in the row from left to right.
The remainder of the file contains the pixel data of the image.
The number of pixels in each row of the image is padded to be a multiple of four. Pixels are then stored in blocks of four, with each block encoded as a pair of bytes in big-endian order. Each group of four bits in the block represents a single pixel, with pixels ordered in the block from left to right (highest group to lowest). The high bit of each pixel represents the state of the sketch layer (set if drawn on), and the lower three bits represent the canvas colour as a palette index. Blocks are stored from left to right, and then top to bottom.
