Du pixelart sur vos écrans OLED : Différence entre versions
Ligne 1 : Ligne 1 :
 
{{ {{tntn|Tuto Details}}
 
{{ {{tntn|Tuto Details}}
 +
|SourceLanguage=none
 +
|Language=fr
 +
|IsTranslation=0
 
|Main_Picture=Du_pixelart_sur_vos_écrans_OLED_P1120656.JPG
 
|Main_Picture=Du_pixelart_sur_vos_écrans_OLED_P1120656.JPG
 
|Licences=Attribution (CC BY)
 
|Licences=Attribution (CC BY)
Ligne 12 : Ligne 15 :
 
|Currency=EUR (€)
 
|Currency=EUR (€)
 
|Tags=arduino, esp8266, esp32, oled, u8g2, pixel, pixelart
 
|Tags=arduino, esp8266, esp32, oled, u8g2, pixel, pixelart
−
|SourceLanguage=none
 
−
|Language=fr
 
−
|IsTranslation=0
 
 
}}
 
}}
 
{{ {{tntn|Introduction}}
 
{{ {{tntn|Introduction}}
Ligne 30 : Ligne 30 :
 
- Ecran OLED monochrome
 
- Ecran OLED monochrome
 
|Tools=
 
|Tools=
 +
|ExternalAttachmentsLinks={{ {{tntn|ExternalAttachmentsLinks}}
 +
|ExternalAttachmentsLinks=https://github.com/maditnerd/oled_xbm
 +
}}{{ {{tntn|ExternalAttachmentsLinks}}
 +
|ExternalAttachmentsLinks=https://create.arduino.cc/editor/madnerd/0a94bf35-ada8-4695-9f56-d62ea2ed4cff/preview
 +
}}{{ {{tntn|ExternalAttachmentsLinks}}
 +
|ExternalAttachmentsLinks=https://create.arduino.cc/editor/madnerd/f616433a-3f8a-483c-8ca2-6447dac0314c/preview
 +
}}{{ {{tntn|ExternalAttachmentsLinks}}
 +
|ExternalAttachmentsLinks=https://create.arduino.cc/editor/madnerd/b4c53d85-5579-4953-89d4-29e0a3b4228c/preview
 +
}}{{ {{tntn|ExternalAttachmentsLinks}}
 +
|ExternalAttachmentsLinks=https://create.arduino.cc/editor/madnerd/7deed5b1-6f4d-4cd6-b662-0e2a88a93974/preview
 +
}}
 
}}
 
}}
 
{{ {{tntn|Separator}}}}
 
{{ {{tntn|Separator}}}}
Ligne 120 : Ligne 131 :
  
 
Une fois l'image sorti de l'écran à droite, nous la faisons apparaitre à -36 afin de donner l'impression qu'elle apparait à gauche.
 
Une fois l'image sorti de l'écran à droite, nous la faisons apparaitre à -36 afin de donner l'impression qu'elle apparait à gauche.
 +
void loop() {
 +
  if (tick.isExpired()) {
 +
    drawAnimation();
 +
    pos_x = pos_x + X;
 +
    if (pos_x > OLED_WIDTH + cannon_width) {
 +
      pos_x = -cannon_width;
 +
    }
 +
    tick.repeat();
 +
  }
 +
}
 +
}}
 +
{{ {{tntn|Tuto Step}}
 +
|Step_Title=Animation - Images multiples
 +
|Step_Content=Une autre façon d'animer une image et d'utiliser plusieurs images.
 +
 +
Au lieu de changer la position X, nous allons utiliser une '''condition SWITCH''' et augmenter la valeur '''animation_state'''
 +
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() );
 +
}
 +
Afin que notre animation soit complète, il nous faut l'inverser, pour cela nous allons utiliser le booléen (vrai/faux) '''animation_direction''' afin que l'animation aille dans le sens inverse.
 +
drawAnimation();
 +
    if (animation_direction) {
 +
      animation_state--;
 +
    } else {
 +
      animation_state++;
 +
    }
 +
    if (animation_state == 5) {
 +
      animation_direction = true;
 +
    }
 +
    if (animation_state == 0) {
 +
      animation_direction = false;
 +
    }
 
}}
 
}}
 
{{ {{tntn|Notes}}
 
{{ {{tntn|Notes}}

Version du 27 février 2019 à 14:08

Le pixel art c'est cool ! si vous voulez le rendre encore plus retro quoi de mieux qu'un petit écran OLED. Nous allons voir comment créer nos propres images et les animer.

Auteur avatarRémi Sarrailh (µsini) | Dernière modification 9/12/2019 par Clementflipo

Du pixelart sur vos écrans OLED P1120656.JPG
Difficulté
Moyen
Durée
2 heure(s)
Catégories
Art, Électronique, Jeux & Loisirs
Coût
5 EUR (€)
Le pixel art c'est cool ! si vous voulez le rendre encore plus retro quoi de mieux qu'un petit écran OLED. Nous allons voir comment créer nos propres images et les animer.
Difficulté
Moyen
Durée
2 heure(s)
Catégories
Art, Électronique, Jeux & Loisirs
Coût
5 EUR (€)
Autres langues :
français
Licence : Attribution (CC BY)

Introduction

Dessiner sur des écrans OLED ? Ca peut paraitre compliquer, mais avec un peu d'entrainement, on peut faire un paquet de choses comme son propre logo, voir de l'animation ou même des jeux vidéos !

Video d'introduction

Étape 1 - Choisir son image

Nous allons utiliser un écran 128x32 (les écrans en 128x64 sont aussi très répandu si vous voulez plus d'espace), il nous faut donc choisir une petite image

Les sprites de la GameBoy sont très facile à convertir, mais gardez à l'esprit que nous sommes limités au noir et blanc, là ou la gameboy est capable d'afficher 4 nuances de gris.

Vous pouvez télécharger des sprites sur https://www.spriters-resource.com/ comme point de départ.

Étape 2 - Convertir des images en pixel art

Sauvegarder votre image au format XBM

Sauvegarder le aussi au format PNG, vous ne pourrez pas modifier votre fichier XBM avec Krita !

Ouvrez le fichier XBM avec un éditeur de texte et changer le nom des variables

Fichier XBM 

#define _width 128
#define _height 32
static char _bits[] = {
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00... 
};

Fichier logo.h 

#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... 
};

Étape 3 - Afficher votre image

Je vous conseille de garder le code du logo dans un fichier .h, ainsi il sera plus simple de lire votre code

Nous allons utiliser la bibliothèque U8g2 (elle est compatible avec beaucoup d'écrans) 

#include <Wire.h> //I2C
#include <U8g2lib.h>
#include "logo.h"

//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() );
}

J'ai aussi mis les fichiers PNG et XBM dans un dossier res/ dans mon code afin de savoir ce qu'il y a dans logo.h et de pouvoir le modifier ultérieurement.

Téléverser votre code et voilà !

Étape 4 - Animation - Position

Étape 5 - Animation - Images multiples

Une autre façon d'animer une image et d'utiliser plusieurs images.

Au lieu de changer la position X, nous allons utiliser une condition SWITCH et augmenter la valeur animation_state 

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() );
}

Afin que notre animation soit complète, il nous faut l'inverser, pour cela nous allons utiliser le booléen (vrai/faux) animation_direction afin que l'animation aille dans le sens inverse. 

drawAnimation();
   if (animation_direction) {
     animation_state--;
   } else {
     animation_state++;
   }
   if (animation_state == 5) {
     animation_direction = true;
   }
   if (animation_state == 0) {
     animation_direction = false;
   }

Commentaires

Draft

Récupérée de « https://wikifab.org/w/index.php?title=Du_pixelart_sur_vos_écrans_OLED&oldid=61308 »
© 2017 - 2024 Dokit, SAS.