Pixel Art on OLED Display

Monochrome 128x32 I2C OLED graphic display

Arduino Web Editor

Arduino UNO

Arduino IDE

Krita

<div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/JfFld6lq_7o" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div>I love pixel art and OLED display makes it even cooler!It may seem really hard to draw on this type of display, but with some practice you can make your own logo, even animation!<h3 >Choose your image</h3>We will use a 128x32 display (128x64 are also really common if you want more space) so it's best to choose a small image.GameBoy sprites are the easiest to work with but keep in mind we are limited to black/white while the GameBoy can display 4 shades of gray.You can download sprites from <a href="https://www.spriters-resource.com/">https://www.spriters-resource.com/ </a>to get you started.<figure><img src=https://projects.arduinocontent.cc/e5cf89a6-6d19-4cb8-a9e5-e543fa03065c.png /><figcaption>Super Mario Land Sprites</figcaption></figure><h3 >Convert images to pixel art</h3>In our first example we will use the <a href="http://hackster.io/">hackster.io</a> logo.<figure><img src=https://projects.arduinocontent.cc/10510171-3a1c-4664-89ac-71a2b2b31763.png /><figcaption> </figcaption></figure>We need to :<ul ><li >resize our image to 128x32</li><li >redraw the image to use two colors</li><li >converts it to XBM (Arduino code)</li></ul>You can use any software to make your images, but I recommend Krita. <a href="https://krita.org/en/">https://krita.org/en/</a><ul ><li >Resize the image to the nearest size of your screen (128x32) : Image --&gt;Scale to New Size</li><li >Increase the canvas size : Image --&gt; Resize Canvas</li></ul><figure><img src=https://projects.arduinocontent.cc/0ede4583-cdc9-4959-976f-a5471e0fb5c2.png /><figcaption>Delicious pixels !</figcaption></figure>In brush presets, choose Pixel Art<figure><img src=https://projects.arduinocontent.cc/5fcc26c9-f074-45d1-a3df-3721812136d6.png /><figcaption> </figcaption></figure>Then redraw your image:White will be no color (black) and black will be color (Blue / White depending on your screen).Press X to switch between color on Krita <figure><img src=https://projects.arduinocontent.cc/814a8a5b-fe11-41cc-aee3-b945a6721cee.png /><figcaption>It's called pixel art for a reason, it will probably take you some trial and errors before you get a good result!</figcaption></figure><h3 >Convert your pixel art to Arduino code</h3><ul ><li >Save your image as XBM</li><li >Also save it as PNG, you won't be able to edit the XBM file!</li></ul>Open the xbm file with a text editor and change the variable nameOriginal file<pre ><code >#define _width 128 #define _height 32 static char _bits[] = { 0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00... }; </code></pre>Readytousefile<pre ><code >#define logo_width 128 #define logo_height 32 static const unsigned char logo[] U8X8_PROGMEM = { 0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00... }; </code></pre><h3 >Display your logo</h3>It's best to keep the logo in another.hfile, so it will be easier to read your code.We will use U8g2 library (which supports a LOT of screens)<pre ><code >#include &lt;Wire.h&gt; //I2C #include &lt;U8g2lib.h&gt; #include &#34;logo.h&#34; //I2C SSD1306 128x32 (search U8g2 examples for other display) U8G2_SSD1306_128X32_UNIVISION_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE); void setup() { u8g2.begin(); //Start Screen drawLogo(); } void loop() { } void drawLogo() { u8g2.firstPage(); do { u8g2.drawXBMP(0, 0, logo_width, logo_height, logo); } while ( u8g2.nextPage() ); } </code></pre>I also put the png and xbm files inside a res/ folder in my code, so I can remember what was my logo.h file.<figure><img src=https://projects.arduinocontent.cc/f8fc6e97-3dde-4f4f-8772-f4c31e0454d2.png /><figcaption> </figcaption></figure>Upload your code, and voilà!<figure><img src=https://projects.arduinocontent.cc/251a26d4-672d-494e-bb9c-8db296b31ebf.png /><figcaption> </figcaption></figure><h3 >Animation - position</h3>You can animate your pixel art in two ways:<ul ><li >Change his position</li><li >Use multiple images</li></ul>So if we want to move your sprite from left to right, we just have to change his x position right?<figure><img src=https://projects.arduinocontent.cc/67d86b4e-d578-4b57-94ea-a859d28d4ec5.png /><figcaption> </figcaption></figure>If you use an Arduino Uno, this will work but with more powerful boards (like the Arduino MKR1010) your animation will go too fast!We need to limit the refresh rate of our animation, of course, we could simply use a delay but it will not allow us to do other things at the same time.So we will use AsyncDelay library to manage this efficiently<pre ><code >#include &lt;AsyncDelay.h&gt; const int FPS = 1000 / 30; //30 FPS AsyncDelay tick; void setup(){ tick.start(FPS, AsyncDelay::MILLIS); } void loop(){ if(tick.isExpired()){ //ANIMATION HERE tick.repeat(); } } </code></pre>Last thing, we want our image to go outside the screen at the right and slowly appears on the left.So we reset the position at the size of the OLED Width (128) with the width of the image (128+36).<figure><img src=https://projects.arduinocontent.cc/00273d93-5f69-4695-962e-b11b976cc059.JPG /><figcaption> </figcaption></figure>And set the position to -36 so the image appears to be coming from the left.<figure><img src=https://projects.arduinocontent.cc/92a03cdf-3d04-4067-9796-58bf04c48efc.JPG /><figcaption> </figcaption></figure><pre ><code >void loop() { if (tick.isExpired()) { drawAnimation(); pos_x = pos_x + X; if (pos_x &gt; OLED_WIDTH + cannon_width) { pos_x = -cannon_width; } tick.repeat(); } } </code></pre>And here is the result !<div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/1zds44isPXk" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div><h3 >Animation - multiples images</h3>Another way to animate image is to use multiple images.Instead of changing the X position, I make a switch conditionand increase the value animation_state.<pre ><code >void drawAnimation() { u8g2.firstPage(); do { switch (animation_state) { case 0: u8g2.drawXBMP(0, 0, logo_width, logo_height, logo_1); break; case 1: u8g2.drawXBMP(0, 0, logo_width, logo_height, logo_2); break; case 2: u8g2.drawXBMP(0, 0, logo_width, logo_height, logo_3); break; case 3: u8g2.drawXBMP(0, 0, logo_width, logo_height, logo_4); break; case 4: u8g2.drawXBMP(0, 0, logo_width, logo_height, logo_5); break; case 5: u8g2.drawXBMP(0, 0, logo_width, logo_height, logo_6); break; } } while ( u8g2.nextPage() ); } </code></pre>Since I want to reverse the animation I used a boolean (animation_direction) so the animation will go backward.<pre ><code >drawAnimation(); if (animation_direction) { animation_state--; } else { animation_state++; } if (animation_state == 5) { animation_direction = true; } if (animation_state == 0) { animation_direction = false; } </code></pre>Here is the result: <div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/DALdShW_gdQ" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div>If you combine these two techniques, we can make complex animation:<div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/iB52FujIK-A" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div>I hope this tutorial will be useful and you will have as much fun with your OLED screen as I have.If you made some pixel art please share them in the comment or mention me on twitter <a href="https://twitter.com/m4dnerd">@m4dnerd</a>.

Pixel Art on OLED Display

Make your pixel art look delightfully retro using an OLED display. We'll see how to make your own image, and animate it.