16 Couleurs

16 Couleurs – graphisme & jeu vidéo


3 Commentaires

Automatiser la création d’images avec ImageMagick et Python

Certains projets peuvent nécessiter la création d’un grand nombre d’images qui ne se différencient que par le texte ou symbole qui y est surimposé. L’exemple typique est une série d’images représentant des « achievements » ou destinées à être partagées sur les réseaux sociaux, telle que celle que j’ai réalisées récemment pour notre projet « Test your memory » chez Peak :

Images générées avec ImageMagick et Python

ImageMagick-wizardImageMagick est une sorte de couteau suisse du traitement d’image gratuit et open-source. Outre les fonctions de conversion (plus de 200 formats supportés), la modification d’images (redimensionnement, rotation, ajouts de texte ou d’éléments graphiques, modification des couleurs…) ou même leur génération complète sont les principaux usages de l’outil. On peut par exemple facilement écrire un script qui redimensionnera une image à 50%, y ajoutera un logo et sauvera le tout en JPEG de qualité 60%. Pratique pour préparer des photos pour un blog, par exemple.

Généralement contrôlé en ligne de commande, ImageMagick est ardu à l’utilisation et nécessite souvent de nombreux essais/erreurs mais la documentation très détaillée et les exemples fournis aident beaucoup. Je m’en suis ici servi pour ajouter deux lignes de texte sur une image existante.

S’il ne semble pas possible d’itérer sur du texte directement, il est par contre possible de contrôler ImageMagick directement dans Python avec une librairie dédiée (PythonMagick) mais l’installation de celle-ci semble trop complexe pour le commun des mortels. La solution que j’ai retenue a été d’utiliser Python uniquement pour générer un fichier .BAT qui permet à ImageMagick de créer les images. Quelques lignes suffisent :

# Generates a batch file for ImageMagick to create 93 FB share pictures
f = open("FBShare.bat","w")
for number in range (1,16):
   f.write('convert c:\Utils\ImageMagick\images\FBShareBG.png -font c:\Windows\Fonts\GothamSSm-Bold.otf '
   '-fill white -pointsize 168 -gravity center -annotate +0-60 "TOP ' + str(number) + '%%" '
   '-font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 120 -gravity center '
   '-annotate +0+70 "MEMORY" c:\Utils\ImageMagick\images\FBShare' + str(number) + '.png' + '\n')
for number in range (18,94):
   f.write('convert c:\Utils\ImageMagick\images\FBShareBG.png -font c:\Windows\Fonts\GothamSSm-Bold.otf '
   '-fill white -pointsize 110 -gravity center -annotate +0-72 "MY BRAIN AGE:" '
   '-font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 140 -gravity center '
   '-annotate +0+60 ' + '"' + str(number) + ' YEARS OLD" '
   'c:\Utils\ImageMagick\images\FBShare' + str(number) + '.png' + '\n')
f.write('PAUSE')

On obtient alors un fichier batch avec les instructions nécessaires à la création des 91 images :

convert c:\Utils\ImageMagick\images\FBShareBG.png -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 168 -gravity center -annotate +0-60 "TOP 1%%" -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 120 -gravity center -annotate +0+70 "MEMORY" c:\Utils\ImageMagick\images\FBShare1.png
convert c:\Utils\ImageMagick\images\FBShareBG.png -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 168 -gravity center -annotate +0-60 "TOP 2%%" -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 120 -gravity center -annotate +0+70 "MEMORY" c:\Utils\ImageMagick\images\FBShare2.png
convert c:\Utils\ImageMagick\images\FBShareBG.png -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 168 -gravity center -annotate +0-60 "TOP 3%%" -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 120 -gravity center -annotate +0+70 "MEMORY" c:\Utils\ImageMagick\images\FBShare3.png
[...]
convert c:\Utils\ImageMagick\images\FBShareBG.png -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 168 -gravity center -annotate +0-60 "TOP 15%%" -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 120 -gravity center -annotate +0+70 "MEMORY" c:\Utils\ImageMagick\images\FBShare15.png
convert c:\Utils\ImageMagick\images\FBShareBG.png -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 110 -gravity center -annotate +0-72 "MY BRAIN AGE:" -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 140 -gravity center -annotate +0+60 "18 YEARS OLD" c:\Utils\ImageMagick\images\FBShare18.png
convert c:\Utils\ImageMagick\images\FBShareBG.png -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 110 -gravity center -annotate +0-72 "MY BRAIN AGE:" -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 140 -gravity center -annotate +0+60 "19 YEARS OLD" c:\Utils\ImageMagick\images\FBShare19.png
convert c:\Utils\ImageMagick\images\FBShareBG.png -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 110 -gravity center -annotate +0-72 "MY BRAIN AGE:" -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 140 -gravity center -annotate +0+60 "20 YEARS OLD" c:\Utils\ImageMagick\images\FBShare20.png
[...]
convert c:\Utils\ImageMagick\images\FBShareBG.png -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 110 -gravity center -annotate +0-72 "MY BRAIN AGE:" -font c:\Windows\Fonts\GothamSSm-Bold.otf -fill white -pointsize 140 -gravity center -annotate +0+60 "93 YEARS OLD" c:\Utils\ImageMagick\images\FBShare93.png
PAUSE

Le gros avantage de cette méthode est la flexibilité qu’elle apporte. Jean-Christian Ranu préfère le fond en rose ? Berthier de la compta veut une version avec le texte en breton ? Inutile de commencer à transpirer à gros bouillons, en deux minutes c’est réglé.

Combiné à Python ou tout autre langage de programmation, les possibilités offertes par ImageMagick sont très vastes. On peut par exemple introduire un facteur aléatoire qui permettra par exemple d’alterner entre différentes images de fond, introduire des règles plus complexes, comme une taille de fonte différente tous les n images ou même générer des frames pour une animation.

Publicités


7 Commentaires

Jeux Android avec Python, Pygame et PGS4A : l’installation

Python PGS4A + Android Un peu plus tôt cette année, j’ai suivi un très bon MOOC d’initiation au langage de programmation Python puisque je ne désespère pas d’être un jour en mesure de créer mes propres petits jeux, dans la continuité des exactions en GFA Basic que j’avais commises  sur Atari ST il y a de cela une bonne décade.

Python m’a semblé un bon choix puisqu’outre un nom de bon goût, c’est aussi un langage de programmation assez facile à apprendre et à comprendre. Si l’utiliser pour réaliser une application complexe ou un gros jeu de A à Z n’est pas vraiment courant, mine de rien son usage est très répandu comme langage de script, en particulier dans de nombreux logiciels de graphisme (entre autres : Blender, Maya, Modo, Cinema 4D et même la dernière version de 3DS Max). De bonnes bases en Python sont donc un gros plus pour qui veut faire un peu de technical art.

Il s’avère qu’il y a même moyen d’utiliser Python pour réaliser des applications Android. Certes, c’est un peu du bricolage puisque certaines fonctions ne sont pas ou mal supportées et j’imagine sans peine qu’il y a des problèmes de compatibilité plus ou moins insolvables. D’ailleurs si le but est de réaliser des jeux mobiles sans trop se prendre la tête, il est évident que des solutions clé en main comme GameMaker ou Construct 2 sont des choix beaucoup plus sensés.

En ce qui me concerne, l’installation de l’environnement de développement Python+Android a été un peu douloureuse, au point que j’ai bien failli jeter l’éponge à un moment. Heureusement la persévérance paye parfois puisque tout a fini par se mettre en place et fonctionner correctement, sur Windows 8.1 32 bit et 64 bit du moins… J’ai donc décider de partager mon expérience dans l’espoir que ça puisse être utile à d’autres.

Je ne prétends pas comprendre les aboutissements de toutes les étapes ci-dessous et certaines d’entre elles peuvent s’avérer parfaitement inutiles (en particulier en ce qui concerne le SDK Android) mais comme la manip fonctionne, if it ain’t broke, don’t fix it 🙂

Téléchargements et installations

Pour commencer il va falloir télécharger et installer les logiciels suivants :

  1. Python 2.7 32 bit dans C:\Python27\
  2. La librairie orientée jeu PyGame
  3. L’IDE PyCharm Community Edition (ou votre IDE Python préféré, mais je ne garantis rien !)
  4. Pygame Subset For Android (PGS4A) 0.9.4, à installer dans C:\PGS4A. J’ai d’abord essayé avec la 0.9.6 mais ça ne fonctionnait pas, donc achtung !
  5. La dernière version de Java SE Development Kit (JDK) pour Windows x86

Ensuite il faut ajouter les répertoires suivants au path de Windows : C:\Python27\ et %JAVA_HOME%/bin (instructions détaillées ici).

Android SDK

Android SDK ManagerL’étape suivante consiste à installer les API nécessaires au SDK Android fourni avec PGS4A. Pour celà il faut :

  • Lancer SDK Manager.exe dans C:\PGS4A\android-sdk\
  • Effectuer une mise à jour des  SDK Tools. Fermer et redémarrer SDK Manager.
  • Installer les mises à jours Android 4.0.3 (API 15), Android 2.2 (API 8) et extras: Android Support Library.  Fermer et redémarrer SDK Manager.
  • Installer tous les extras sauf Google Play Services for Fit, Android Support Repository, Google Web Driver et Intel x86 Emulator Accelerator.

PGS4A

Enfin il faut configurer PGS4A, en exécutant android.py installsdk dans PyCharm. L’absence de message d’erreur à ce stade est bon signe puisque l’installation se termine ici !

Créer une application Android

Par la suite, pour créer une application Android à partir d’un programme Python, il faut copier tous les fichiers source (.py évidemment, mais aussi toutes les images, fontes et sons nécessaires) dans C:\PGS4A\app\ , renommer le fichier Python principal en main.py et exécuter les deux commandes suivantes dans PyCharm :

  • android.py configure app (pour configurer l’application Android)
  • android.py build app release (pour compiler l’application Android)

Si tout se passe bien, le fichier APK apparaîtra dans C:\PGS4A\bin\ . J’utilise ensuite Dropbox pour le copier sur mon smartphone, mais il existe plein d’autres méthodes. À propos, attention de bien autoriser l’installation d’applications obtenues hors de Google Play sur le smartphone ou la tablette (cocher « Unknown sources » dans Settings > Security).

Les articles ci-dessous m’ont été très utiles lors de l’installation des différents logiciels. Dans le premier on trouve également un exemple de source qui vous permettra de tester si tout fonctionne correctement.