Spriting with Aseprite

Introduction

Aseprite is one of the best tools available for making pixel art and animations. More importantly, it's one of the few modern programs which can save files with the palette that CC requires. It has lots of features (don't worry, nothing crazy like Photoshop or GIMP), but you'll only need to know a few basics to start working on Cortex Command graphics.

You can buy it from Itch.io, Humble Bundle, or Steam, or from the Aseprite website (which includes a Steam key). It's also on Github if you'd like to compile it yourself.

All hotkeys in this tutorial are the defaults; they be changed in Edit > Keyboard Shortcuts (Ctrl-Alt-Shift-K).

Setup

After installing Aseprite, you'll need a copy of the game's palette. Download this file and extract it to Aseprite/data/palettes/: Cortex Command Palette for Aseprite.zip

You may also want to check Edit > Preferences to configure things to your liking. Lots of settings in there, such as changing your background colors:

Editing a sprite

Editing an existing sprite is easy since they already use the right palette. Most sprites have a transparent background which the game represents with color #0 (magenta). For sake of convenience (and less eye strain), you can work with real transparency in Aseprite and put the magenta back when exporting. Start by hitting TAB to bring up the Timeline (the layers/frames panel, at the bottom by default), right-click the layer that says Background and click Layer from Background. Now you can use the erase tool, layers, etc. like you'd expect in a normal graphics application.

Aseprite has a few handy tools that you may find useful for editing sprites:

• Edit > Replace color (Shift+R) replaces every pixel of a given color with another color. It can be used on multiple layers/frames at the same time by selecting them in the Timeline.
• Edit > Adjustments > Hue/Saturation and Color Curve (Ctrl+U and Ctrl+M) can be used to adjust the color of all pixels at once. If you don't want the entire image adjusted, you can select the area you want (with the Rectangular Marquee Tool, etc.) and pixels outside the selection will be unchanged.

One thing I find convenient is leaving a copy of the original sprite as a layer (you can click the tiny lock icon next to a layer's name to prevent any accidental changes) and putting my new pixels in a new layer. Shift-N is the hotkey to add a layer (Alt-Shift-N for a new layer group), or you can right-click on a layer in the Timeline and Duplicate it.

See Export Checklist below when you're ready to save your edited sprite.

Making a new sprite

1. File > New (Ctrl-N) New images can have whatever settings, since size / color mode / etc. can all be changed later. (I'd recommend giving yourself way more room then you think you'll need and cropping when you're done.)
2. Click the little folder icon above the palette (upper-left) and double-click the _CortexCommand palette (make sure you downloaded/extracted it, see #Setup above).

3. Switch to indexed color withSprite > Color Mode > Indexed if it isn't already. This tells Aseprite to ONLY use colors that are in the palette. (Ie., this sets the image to 8-bit color mode)

4. You can press TAB to bring up the Timeline and Shift-N to add new layers, or right-click on a layer for more options.

Aseprite has a convenient tool for automatically adding outlines, Edit > FX > Outline (Ctrl+O). This can work across multiple layers/frames if selected in the Timeline. Note that CC's graphic style uses shaded outlines instead of a flat color. If you're having trouble matching CC's shading, here's a style guide:

See Export Checklist below when you're ready to save your new sprite.

Shading tool basics

Shading is a fancy mode for the Pencil Tool (B) which gives you complete control over the gradient ramps you're shading with. The normal drawing mode is Simple Ink, which draws your selected color on any pixel. In Shading mode, it only effects colors which are part of the current gradient and ignores other colors. Left-clicking and right-clicking pushes colors up or down your gradient, making it quick and easy to shade your sprites.

You'll likely be switching between Simple Ink and Shading often enough to make it worthwhile to give them some good hotkeys. Press Ctrl-Alt-Shift-K to bring up the window, use the search bar in the top-left to search for Shading and assign it S for "shading", then search for Simple Ink and assign it D for "drawing". You can also change the Pencil Tool mode by clicking the little inkbottle icon in the top bar (next to brush size/shape).

In Shading mode you first need to pick multiple colors from the top-left palette (not the image!) by holding Ctrl and clicking them (you'll see them being added in the top bar). It's OK if you pick them in the wrong order or picked one you don't want, since you can click and drag them to rearrange/remove them in the top bar (not the palette!). Arrange them from lightest to darkest (or the other way around if that's easier), then you can click the little ▼ icon and Save Shade for later use.

Having difficulty choosing colors for your Shading tool? Here are some gradients that include most of the game's colors:

Animation basics

Aseprite is great for making animated sprites, and is capable of saving them in different formats (including animated .gif, spritesheet, or individual files like CC uses). Press TAB to toggle the Timeline which shows the sprite's layers (vertically) and frames (horizontally). Right-clicking the frame number brings up a menu for animation tasks like adding a New Frame (Alt-N).

Use your ← or → arrow keys change to the previous or next frame, or click on the frame you want in the Timeline. You can play/stop the animation by pressing Enter, or you can View > Preview (F7) and click its tiny play/stop button. View > Show Onion Skin (F3) may also be useful.

Most animated sprites in CC (like arms and legs) have only 1 pixel of movement each frame, more than 2 pixels of movement tends to start looking bad. Instead of redrawing everything every frame, I suggest using tools like Rectangular Selection Tool (R) or the Lasso Tool (Q) to select parts and Move Tool (M) them slightly (with something selected, the arrow keys ← → ↑ ↓ will move the selected part by 1 pixel in that direction, or you can click and drag). You can also rotate, stretch, and skew them depending on where you click and drag.

See Export Checklist below when you're ready to save your animation.

Export Checklist

1. Save the original as .aseprite to preserve your layers and other fancy stuff.
2. Make sure you're still using original _CortexCommand palette (just load it again if you're not 100% sure).
3. Make sure the image is still using Indexed color (Sprite > Color Mode > Indexed).
4. Make sure you have a magenta background layer (If not: right-click color 0 (magenta) in the palette, press Shift-N to make a new layer, right-click the new layer in the Timeline and choose Background from Layer. It should be get filled with magenta and moved to the bottom)
5. Make sure magenta background layer is visible (the little eye icon left of the layer's name toggles visibility; you can hide it again after exporting).
6. Put the sprite back to its normal orientation if you've been editing it rotated/flipped around.
7. File > Export (Ctrl-Alt-Shift-S) as .png. The default settings (100%, Visible layers, All frames, Forward) are correct in 99% of cases, otherwise you're probably doing something very strange.
8. If your sprite is animated, name it something like "MyThing000.png". (The "000" at the end tells Aseprite to name your frames as MyThing000.png, MyThing001.png, etc. the way Cortex Command needs them, saving you from having to do any manual/bulk renaming).