This is a write up on what goes into making a Sprig. It doesn't cover every detail of the design, prototyping, and manufacturing a complete Sprig device but it will give you a good idea of the skills and tools used to do such a project. It's mostly written in a tutorial style with a scaled-down Sprig project used as an illlustrative example.
When you design a Printed Circuit Board (PCB) the first step is to create a schematic.
The schematic basically tells you how things are logically connected but it’s just an abstract representation of the board. In order to turn this into a circuit board you can hold you have to create a wiring diagram.
The wiring diagram shows us how things are physically laid out and wired together. Here you’ll find the footprints, or the real life shapes, of the components we picked out in the schematic.
The Sprig has a number of components. The bill of materials is:
| Name | Quantity | Function |
|---|---|---|
| Raspberry Pi Pico (RP2040) | 1 | Microcontroller |
| Adafruit_TFT_ST7735 | 1 | Screen |
| MAX98357AETE+ | 1 | Audio Chip |
| CVS-1508 | 1 | Speaker |
| Slideswitch | 1 | Power Switch |
| 12mm square tactile buttons | 8 | Buttons |
| 1020 battery holder | 1 | Holds Batteries |
| 10uF Capacitor 1206 | 1 | Passive Component |
| 1uF Capacitor 1206 | 2 | Passive Component |
| 0.1uF Capacitor 1206 | 1 | Passive Component |
| 1M Resistor 1206 | 1 | Passive Component |
| 1k Resistor 1206 | 2 | Passive Component |
| LED 1206 | 2 | Passive Component |
| 100V 1A Schotky Diode Mini SMA | 1 | Works as Power Gate for Batteries |
| 1x10 5mm (short) female header | 1 | Attaching Screen |
| 1x? 7mm (regular) female header | 1 | Attaching Pico |
The Sprig also uses some additional hardware.
| Name | Quantity | Function |
|---|---|---|
| acrylic back covers | 4 | to protect your fingers from pointy bits |
| m2 10mm socket head screw | 10 | fastens backcovers to board |
| m2 16mm socket head screw | 2 | for attaching screen |
| m2 nuts | 12 | for keeping screws on |
| 7.4mm black acetal spacers | 2 | for lifting the screen |
| micro usb cable | 1 | |
| 2m allen key | 1 | |
| aaa batteries | 2 | |
| carrying box | 1 | |
| adapter from male micro usb to female usb c | 1 |
We’ll talk about designing and making some of these mechanical parts in a moment but for now let’s focus on the electrical portion.
Boards are normally designed in Electronic Design Automation (EDA) programs. We used an open-source tool called KiCad to design the Sprig. Let’s get to know KiCad a bit by designing a simple board with a microcontroller, an input (button), and an output (LED).
First create a new project and save that project in a folder.
After that you’ll see project files like those below:
The "_pcb" file is the layout and the "_sch" is the schematic.
Let’s import some symbols and footprints we can use in our design. In our project folder we can add some components which we will then reference in our symbol and footprint libraries. I often use components from an inventory for a digital fabrication class called how to make (almost) anything.
Next let’s go to preference and “Manage Symbol Libraries”.
You’ll be presented with this menu:
In the above shot I’ve already got the sprig library. If you don’t you can add it by clicking the “+” button. Then filling out the new entry.
You can link the symbols by clicking the directory when you edit the line
And then navigating to the “fab.kicad_sym” file in the fab directory.
Next let’s do the same for footprints.
In this case we will select the “fab.pretty” folder.
Seen here
Do the same with the sprig library to get a few more components specific to our use case. Now let’s make our schematic!
Go back to the project and select “Schematic”
We’ll be presented with a window like this
We can add components with the tool that looks like a triangle with some symbols written on it (it’s an op-amp). It’s the top symbol in the image below.
Next we have to choose the component we want to add.
Search for a pico, this is a wonderful microcontroller made by Raspberry Pi and its the heart of our device. Here is the symbolic representation once we’ve placed it.
Next let’s get our button and our LED, we’ll also need a resistor for our LED. When placing components you can press “r” to rotate them. All together the symbols look like this:
The 1206 in “LED_1206” means it’s a surface mount device (SMD) of a certain size.
Now that we have our components we need to wire them together logically. We can do that in a few different ways.
We can drag our components to overlap connection points.
We can draw wires.
Or we can add labels.
Let’s see the whole board wired together.
Now that we have a complete schematic let’s do the layout.
Go back to the project menu and select “PCB Editor”
That will open up this screen.
To bring in footprints from the schematic press the button you see below.
You will now have the components but they’ll be un-routed (not wired).
To start routing click the “Route Tracks” button.
After routing our board it looks like this.
We need to add some edge cuts to define the outline of our board. Let’s use the rectangle tool.
Then select the rectangle and move it to the “Edge.Cuts” layer.
First right click, select “Properties”.
Then select the right layer in the menu and hit okay.
You can see the final result below.
The back covers of the Sprig are laser cut. To produce them we designed the components in a parametric CAD program, Fusion 360, and then export them to a format suitable for laser cutting.
When we open up Fusion we are confronted with a blank project.
Let's insert a reference image of the Sprig into the program.
We have to set the proper scale of the reference image. I do this by first drawing a reference rectangle to scale.
Then scale the canvas to fit inside the rectangle.
We can now sketch out the backplate.
Then extrude it.
Add some fillets so we don't cut our fingers.
And mirror it to have the complimentary piece.
For the firmware we're using a modified version of Kaluma. Kaluma is a JavaScript runtime which can fit on a RP2040. To create SprigOS we added the ability to draw to the screen, make music efficiently, and the Sprig game engine.
To load firmware onto the Pico depress the white button on the Pico and plug it into your computer while holding the button down. This will put the Pico in Bootload mode.
The Pico will show up as a USB device.
Download the UF2 of our SprigOS from GitHub and drop it onto the RPI-RP2.
We can now load games onto our Pico from the serial port.
We manufactured our board by sending Gerber files to a PCB fabrication house along with information about how to "stuff" the board (or add components to it). Hugo Hu helped coordinate the production and did a nice write up on some of the sourcing details which you can find here.
Lot's of what makes Sprig "Sprig" is the game engine to help you make charming tile-based games.
This engine evolved from a more traditional "game-engine" we called Game Lab.
Game Lab had a physics engine which handled moving things with velocity and collisions between objects.
We found that people would make one game mechanic but never finish games so we decided to developed a simplified engine.
We made everything tile based. That means everything moves discretely on a grid. It's accommodates making puzzle games.
It's really important to be able to see what you are doing.
It's just programming in the sense that the entire game can be represented as a text file.
The editor adds tools for graphically editing with embedded asset editors.
Use CodeMirror. Analyzing the syntax tree.
custom footprints