Eigene Sprites erstellen (Arduino Esplora, Part 3.1)

Im Internet habe ich nach einer Einfachen Lösung gesucht, wie mein ein Sprite bzw. Bild  auf seine eigenen Anforderungen erstellen kann. Damit ist gemeint, dass eine durchgehende Farbpallette für das Eigene Ziel abbilde und Numerisch bezeichnen kann. Zudem sollte dies in einer Byte Folge ausgegeben werden, so dass ich diese im Programmcode ablegen kann.

Natürlich gibt es so ein Programm nicht. Im Grunde ist die Ausgabe eines Bildes durch ein Skript zu übersetzen relative einfach oder auch mal schnell ein eigenes kleines Programm schreiben. Denn das habe ich zunächst gemacht, um schnell eigene Sprites anzulegen. Also zwei Abende dran ran gesetzt und fertig war der Bildeditor. Die Benutzbarkeit beschränkte sich auf die mehr auf die Verwendung der Funktionen.

Mit der Zeit wurden dann noch ein paar Farben hinzugefügt und neu Sortiert, ansonsten hat sich nichts weiter geändert.

  

Übung ist trainieren

Irgendwann bekam es mich doch. Ich schrieb zu Übungszwecken weiter und räumte einiges an Programmcode auf, fügte ein paar weitere Funktionen hinzu und verpasste noch ein paar Optische Verbesserungen. Da ich nicht immer Zeit hatte, verstrichen Monate und ich stellte mal wieder fest, wenn man etwas ordentlich macht, dann kann dabei schon eine Menge Zeit vergehen. Oberflächlich wird man die Mühe nicht sehen, nur die Dinge die nicht funktionieren. Schließlich sind wir in Deutschland und gemeckert wird immer. 

Wie verwende ich das Programm

Man schreibt ein Programm, kopiert sich die fertigen Code aus dem Beispiel, malt ein Bild und klickt auf Exportieren. Na gut, etwas mehr Detaillierter darf die Beschreibung dann doch sein.

Am besten verwendet ihr den folgenden Beispiel Programmcode. Je nach Größe des Bildes, müssen die Breite und Höhe angepasst werden. Das sind die Member Variablen 'pictureWidth' und 'pictureHeight', sowie auch die Array Größe und dessen eingetragenen Byte Werte. Im Beispiel ist ein Bild das 10 Pixel Breit und 16 Pixel hoch ist. Multipliziert man die beiden Werte, dann bekommen wir den Wert 160, dass hier die Byte Array Größe festlegt.

 #include <SPI.h>  
 #include <TFT.h>  
 #include <Esplora.h>  
 // zu renderndes Bild  
 int pictureWidth = 10;  
 int pictureHeight = 16;  
 byte picture[160] = {  
  0,0,1,1,1,1,1,1,0,0,0,1,3,3,3,3,3,3,1,0,1,3,3,3,3,3,3,3,3,1,1,3,3,4,4,2,4,3,3,1,1,3,5,5,2,2,5,5,3,1,1,3,4,1,2,2,1,4,3,1,0,1,2,1,2,2,1,2,1,0,0,0,1,2,2,2,2,1,1,0,0,1,8,8,3,3,8,8,6,1,1,8,8,8,8,8,8,6,2,1,1,2,1,8,8,8,8,1,1,0,0,1,1,10,10,7,7,1,0,0,0,1,9,10,1,7,6,1,0,0,0,0,1,1,1,7,6,1,0,0,0,0,0,0,1,9,11,1,0,0,0,0,0,0,0,1,1,0,0,0  
  };  
 void setup() {  
  // init display  
  EsploraTFT.begin();  
  EsploraTFT.initR(INITR_BLACKTAB);  
  EsploraTFT.setRotation(1);  
  EsploraTFT.background(0, 0, 0);  
 }  
 void loop() {  
   drawPictureArray(40, 40, picture);  
 }  
 uint16_t mapNumberToColor(byte c) {  
  uint16_t result = ST7735_RED;  
  switch(c) {  
   case(1): { result = ST7735_BLACK; break; }  
   case(2): { result = 0xF590; break; } // haut  
   case(3): { result = 0x81E1; break; } // braun  
   case(4): { result = 0xC2C2; break; } // hell braun  
   case(5): { result = 0x8300; break; } // braun gelb  
   case(6): { result = 0x5406; break; } // gruen  
   case(7): { result = 0x32A4; break; } // dunkel gruen  
   case(8): { result = 0xAE91; break; } // hell gruen  
   case(9): { result = 0x2146; break; } // dunkel grau blau  
   case(10):{ result = 0x31E9; break; } // grau blau  
   case(11):{ result = 0x84B6; break; } // hell blau  
   case(12):{ result = 0xFFE0; break; } // gelb  
   case(13):{ result = 0xFC08; break; } // orange  
   case(14):{ result = 0xFA8A; break; } // hell rot  
   case(15):{ result = 0xD759; break; } // hell gruen 2  
   case(16):{ result = 0xF800; break; } // rot  
   case(17):{ result = 0x8208; break; } // dunkel braun  
   case(18):{ result = 0xC618; break; } // grau  
   case(19):{ result = 0xF7BE; break; } // sehr hell grau  
   case(20):{ result = 0xFE97; break; } // hell haut  
   default: {  
    result = 0;  
    break;  
   }  
  }  
  return result;  
 }  
 void drawPictureArray(int relationX, int relationY, byte pictureArray[]) {  
  int index = 0;  
  for(int y = 0; y < pictureHeight; y++) {  
   for(int x = 0; x < pictureWidth; x++) {  
     EsploraTFT.drawPixel(relationX+x, relationY+y, mapNumberToColor(pictureArray[index]));  
     index++;  
    }  
   }  
 }  

Wenn ihr den Bild Editor Startet, dann wird gleich ein neues Bild von 10 mal 16 Pixel angelegt.

Über ‚Edit' kann die Größe des Pixelfeldes geändert werden. ACHTUNG: Nach Umstellung der Größe, gehen bereits eingetragene Pixel verloren.

Ist das Bild fertig, dann kann über File -> Export die Byte Kette selektiert und per STRG+C kopiert werden.

Über STRG+V wird zwischen den geschweifte Klammern der Member Variable 'picture' hinzugefügt. Ggf. Breite, Höhe und byte Array Größe anpassen und schon kann der Programmcode auf den Arduino Esplora geschrieben werden.

Sobald das Programm auf dem Arduino Esplora ausgeführt wird, sollte nun das Bild zu sehen sein, dass als Byte Kette hinein kopiert wurde.

Hinweise:

• Im Programm sind bereits mehr Farben hinterlegt, da ich zu diesen Zeitpunkt mit dem Eigentlichen Projekt weiter gearbeitet und weitere Farben ergänzt habe.
• Touch Fähigkeit wird noch bearbeitet.
• Ein Bild mit Programmcode darf nicht mehr Bytes verbrauchen als der Maximale Arbeitsspeicher des Arduinos.

Der Bildeditor ist an für sich fertig. Fehler sind nicht ausgeschlossen und können über die Kommentar Funktion des Blogs eingetragen werden.

Nächster Post: Karte anlegen (Arduino Esplora, Part 4)

Low Pixel Maker Download
Anmerkung: Ich räume noch das kleine Programm auf. Sobald ich damit fertig bin, lade ich die Solution auf Github hoch.