Creating Sprites for the PicoNav
One of the core features of the PicoNav is customizing your Pico, so it's no surprise that the pixel art is one of the most important aspects of the device. Whether you're looking to submit a work or art officially to the project or create a custom work of art for yourself, this guide will show you the process of making a compliant sprite sheet for the PicoNav.
(Please note: This guide aims to demonstrate the tools and methodology behind creating a sprite that follows the guidelines and design language for the PicoNav. There will be another guide that demonstrates how to properly export sprites and import them into the actual device itself.)
Preparing Your Tools
The PicoNav uses a 1 inch 240x135 pixel display and as such, pixel art is the main focus of this guide. Before we go too far into this, we need to choose a pixel art software/editor. There are several to choose from, and given the size of our canvas, we don't need the most robust software out there. While technically you can use anything that lets you directly modify individual pixels like Photoshop or MS Paint (and some professionals do use both of those in their workflows), there are some dedicated tools that you can get for cheap or even for free that will suit our needs. Aesprite is perhaps the most popular pixel art option, while I personally use Pyxel Edit because I've grown too accustomed to their hotkeys and workflow over the years. There is also Pixel Studio if you're looking for a cross platform option for Windows, MacOS, and mobile devices. For the purposes of this guide, I will be using Pyxel Edit.
Understanding the Design Philosophy
In an effort to maintain the retro aesthetic of the PicoNav, sprites were created with a 4 color palette. This design trend is maintained throughout the device and for the sake of consistency we will be using the following default palette dubbed "Sunset" in our example here.
(Note that by using the PicoNav Update Tool, users may choose to create their own palettes or even create custom sprites to break the 4 color rule, but the official design philosophy will always keep to the 4 color rule).
|
Color1
|
Color2
|
Color3
|
Color4
|
|
|
Hex code
|
#E6EBC5
|
#FFCE94
|
#FF7573
|
00313A
|
|
RGB565
|
0xE758
|
0xFE72
|
0xFBAE
|
0x0187
|
As a rule of thumb, Color1 is often reserved for outlines and lighter details, while Color4 is used for background coloring and fills.
Designing Picos and Gear
By default a Pico's appearance consists of three major parts: The main body, headgear, and bodygear. The main body of the Pico does not change and is the bottom "layer" of the design. It is then followed by the headgear item, which is layered on top of the main body. Finally, the bodygear layer is placed last, making up the base design of your Pico. Below is an example:
Once the base design is completed, an outline is applied to the unit using Color1 automatically via an algorithm in the PicoNav's code. The final product for the character is 16x16 pixels with the outline included. Note that the actual sprites are scaled 3x on the device itself, making the actual sprite effectively 48x48 pixels.
Each piece of gear has 12 possible frames based on their action as shown below:
Below is a template for all of the main body sprites for you to import into your pixel editing software of your choice and design your own gear.
(Base 16x16 main body spritesheet)
(16x16 sprites with hands. Technically the hands are the default bodygear item when nothing is equipped)
The PicoNav also has sprites for various other UI elements as well, such as ability icons and consumable items, but those elements follow a similar guideline as the Pico but in different dimensions.