| Ligne 90 : | Ligne 90 : | ||
Téléverser votre code et voilà ! | Téléverser votre code et voilà ! | ||
| + | }} | ||
| + | {{ {{tntn|Tuto Step}} | ||
| + | |Step_Title=Animation - Position | ||
| + | |Step_Content=Pour cette partie nous allons utiliser le boulet de cannon de Super Mario Bros. | ||
| + | |||
| + | Il est possible d'animer votre pixel art de deux façons : | ||
| + | * Changer sa position | ||
| + | * Utiliser plusieurs images | ||
| + | Donc si nous voulons déplacer une image de gauche à droite, il suffit juste de changer la position X non ? | ||
| + | |||
| + | Si vous utiliser un Arduino Uno, ça va marcher mais avec des cartes plus puissantes (comme ESP8266) votre animation '''va aller beaucoup trop vite!''' | ||
| + | |||
| + | Nous avons besoin de limiter le taux de rafraichissement de notre animation, nous pourrions utiliser un delay mais nous ne pourrions plus faire d'autres choses en même temps. | ||
| + | |||
| + | Nous allons donc utiliser la bibliothèque '''AsyncDelay''' pour gérer cela plus efficacement. | ||
| + | #include <AsyncDelay.h> | ||
| + | const int FPS = 1000 / 30; //30 FPS | ||
| + | |||
| + | AsyncDelay tick; void setup(){ | ||
| + | tick.start(FPS, AsyncDelay::MILLIS); | ||
| + | } | ||
| + | void loop(){ | ||
| + | if(tick.isExpired()){ | ||
| + | //ANIMATION ICI | ||
| + | tick.repeat(); | ||
| + | } | ||
| + | } | ||
| + | Un dernier point, si nous voulons que notre image sortent de l'écran à droite et apparait lentement à gauche, nous devons aller plus loin que la largeur maximal de l'écran (128) , plus exactement (128+36), 36 étant la largeur de notre image. | ||
| + | |||
| + | Une fois l'image sorti de l'écran à droite, nous la faisons apparaitre à -36 afin de donner l'impression qu'elle apparait à gauche. | ||
}} | }} | ||
{{ {{tntn|Notes}} | {{ {{tntn|Notes}} | ||
Version du 27 février 2019 à 13:00
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 (€)
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 !
Youtube
Matériaux
- Microcontrôleur compatible avec u8g2 (arduino / esp8266 / esp32 etc...)
- Ecran OLED monochrome
Outils
É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
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
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
Draft
Français
English
Deutsch
Español
Italiano
Português