The glasses have two different NeoPixel areas: an 18x5 more-or-less rectangular grid across the panel for the eyes, and a 24 pixel ring around each eye. This guide ignores the rings and focuses on the grid, since the rings don't lend themselves well to grid-shaped sprites.
The main matrix on these glasses is 5 pixels high and 18 pixels wide. This encompasses both eyes and the nose bridge. This means each eye graphic should be no more than 5 pixels high and 5-7 pixels wide.
Making art at this size is not easy. Luckily, there is a lot of inspiration available online. I did a Google image search for "sprite 5 pixels high" and found a wealth of ideas and graphics that are surprisingly good. This set is from Andrea Quaro.
Google Image Search has a few tools available to make finding these easier. Click on More.. and then Size and select Icon to dial in your search to tiny graphics.
Piskel -- Animate your Sprite
I used the free Piskel website to build my sprite sheet. This is a great resource with tools that are easy to use, and an animation preview so you can see what your final animation will look like. You can control the size and playback speed as well. It's really fun to draw these images -- there is an artistry to low-resolution images that is mind blowing when you delve into it.
Head to the Piskel site and click Create New Sprite. There are graphics tools on the left side of the screen and settings tools on the right. Find the Resize tool and resize your workspace to 18 x 5 pixels.
Draw the eyes using the graphics tools. Piskel gives you standard editing tools like a pencil and fill bucket, but there are also some unique tools ones that make your job easier:
- Vertical Mirror Pen. Select this and whatever you draw will be mirrored on the other side of the screen. This is useful if you want to make two eyes that are the same.
- Lighten tool: Lightens or darkens each pixel by just a little bit. This helps you get fine shading, which is definitely needed at this tiny resolution.
I started by using the circle tool, then colored and lightened or darkened each pixel as needed. Having a reference image was a lot of help!
I had the most success when I kept my eyes 5x5 pixels and centered them in the workspace with 2 blank pixels on each end and 4 blank pixels in the middle. This gave me room to move the eyes back and forth by 1 or 2 pixels when I added animation.
Once you're happy with your eyes, you can make them move, blink, or flash! Piskel's tools make it easy.
Mouse over the first frame in the upper left corner and choose "Duplicate Frame" (the icon in the lower right). This makes a copy of your eyes, so you can make subtle changes to create animation. Add as many frames as you like. The more frames, the longer the animation sequence.
With frame 2 selected, use the Select tool to draw a box encompassing both eyes, then hold down "shift" and drag to move them one pixel to the left.
On the right side of the page there's a preview window, where you can see the result of your animation. The eyes will appear to jump to the left, then move back to the center.
Move the FPS (frames per second) slider until the frames change at a speed you like -- I set mine to 2. A slower speed means you need fewer frames to make the animation a satisfying length.
Add more animation frames and move the eyes around to see what happens. Each frame of animation will become one line on your sprite sheet. Mine has 16 frames total.
Things to Try
- Move the eyes one pixel to the left, then center, then one pixel to the right
- Use the Transform tools to flip the eyes horizontally. I liked having the "highlight" side facing to the left when the eyes were moving left, and facing right when the eyes were moving right.
- To make the eyes hold still for a bit, duplicate a frame one or more times with no changes.
- Use the "lighten" tool to brighten up the highlight pixels for one or two frames to make the eyes appear to twinkle
- Make the eyes appear to "blink" by erasing the upper half of both eyes for one frame, or one eye for a "wink"
When you're happy with your animation, grab the "fill" bucket and select black. Fill in any transparent pixels on every frame of your animation, so your eyes are floating in a sea of black.
Some image converters will turn transparent pixels white by default, which will tell the glasses software to turn each of your unused pixels to bright white. This will ruin your image (and annoy people who are looking at you). Filling with black will eliminate this confusion.
Export and Convert Your Sprite Sheet to .BMP
Click the Export button and select the PNG tab. Set your sprite sheet settings to 1 column. The rows will update to reflect the number of frames you've made. Click Download under Sprite Sheet File Export.
The file will download as a .png. Open it up and take a look at it. If you've done it correctly, you'll have a tall skinny image with all your frames stacked on top of each other.
We need a 4 or 8 bit indexed .bmp image to work with our code. This .png file can be converted easily using a free online conversion tool. Just be sure you can convert to 8-bit -- a 16 bit .bmp will not work.
I used https://online-converting.com/image/convert2bmp/
Scroll down and find the "Color" setting, and change this to 8 (indexed), then upload and convert your image. This will make an 8-bit .bmp that will work with the code.
Text editor powered by tinymce.
