Making Graphics for a Wireling 0.42", 0.69", and 0.96" Screen

by Laveréna Wienclaw

Making Graphics for a Wireling 0.42", 0.69", and 0.96" Screen

This tutorial will cover the basics on how to create a sprite* using a bitmap, and how to program the sprite to move around on a Wireling screen.

If you have not already, make sure to go through and follow the steps of the OLED Display Wireling tutorial that includes all the Arduino libraries you will need to download before starting this tutorial.

* Sprite - a computer graphic which may be moved on-screen and otherwise manipulated as a single entity.

Materials 

Hardware: 

Processor Adapter
* and 
*
*
Not needed
* Not needed
Arduino
Raspberry Pi

* These processors have a 32-pin connector and can have multiple Wireling Adapter TinyShields stacked to increase the number of Wireling ports up to a maximum of 32 total Wireling ports per processor.

Software: 

Step 1: Hardware Assembly 

Depending on the development system you choose, you will need to put together a TinyDuino stack using the 32-pin tan connectors, or you will just need to plug in your Wirelings using a Wireling Cable:

  • Port 0: OLED Display Wireling (any of the sizes will work as long as the screen variables are edited in the program)

You can change the port in the included Arduino Sketch using the port variable at the beginning of the program. Match the port number found on the board with the port value set in the code.

Step 2: Software Setup

To install the Tinier Screen and Graphics Buffer Arduino libraries, check out our Library Installation Page. Once downloaded from the software section above, you can navigate to the examples folder of the MAX30101 library and open the MAX30101_OLED.ino sketch in the Arduino IDE.

Step 3: The Code!

Download the Sprites for OLED program, or open it from the TinierScreen/examples folder (older versions of the library might not have the Sprite example included) and upload it to your processor.

Make the correct Tools selections for your development board. If unsure, you can double-check the Help page that mentions the Tools selections needed for any TinyCircuits processor.

animated gif on the 0.42" screen of the bunny sprite and "Bunny!" text

The program is initialized to work with the 0.42" OLED Screen Wireling. To edit this in the program, comment and uncomment the two lines that match the screen you have so that only two lines matching your screen are uncommented: 

// 0.42" Screen Variables
TinierScreen display = TinierScreen(TinierScreen042);
int xPixel = 72;
int yPixel = 40;

// 0.69" Screen Variables
//TinierScreen display = TinierScreen(TinierScreen069);
//int xPixel = 96;
//int yPixel = 16;

// 0.96" Screen Variables
//TinierScreen display = TinierScreen(TinierScreen096);
//int xPixel = 128;
//int yPixel = 64;

Once the program is uploaded, you should see a bunny sprite walking across the screen as well as the text "Bunny!" bouncing slowly around the screen. The screen may flicker slightly due to the speed of the text and sprite being drawn.

Create your own sprites!

In the same sprite example, there is an option for a different sprite and different text to display a Pac-Man *bitmap. This commented code should help you understand how to create your own sprites using the correct initializations and structures. You will just need to comment out the bunny sprite code, and uncomment the Pac-Man code.

* Bitmap - a representation in which each item corresponds to one or more bits of information, especially the information used to control the display of a computer screen.

To create your own sprites, you will need to create your own bitmaps in the exampleSprites.h file. These are 2-D arrays of 0's and 1's where the 0's represent a black or blank pixel, and the 1's represent a white pixel. The Pac-Man bitmap details a solid sprite and if you can visually ignore the zeros are there and just focus on the 1's, you can see the picture:

pacman bitmap for drawing a sprite

To visualize sprites before creating a bitmap, you may want to create a pixel drawing first using a tool like Pixilart and then creating your bitmap from there.

I hope this helps you create something awesome!

    Contact Us

    If you have any questions or feedback, feel free to email us at info@tinycircuits.com.

    Show us what Sprites and animations you make by tagging @TinyCircuits on Instagram, Twitter, or Facebook so we can feature it!

    Thanks for making with us!

    Back to Projects