Skip to content

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

10 septembre 2014

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.

L’animation HTML5/WebGL avec Flash Professional CC 2014 – la méthode officielle !

18 août 2014

Flash HTML5 (montage)Il y a 18 mois, j’avais évoqué l’extension Swiffy de Google comme étant une solution efficace pour exporter des animations HTML5 à partir de Flash. Les choses ont un peu évolué depuis : l’extension n’ayant pas été mise à jour, elle n’est plus compatible avec les dernières versions de Flash Pro, et il faut donc garder une vieille version de Flash Pro CS6 sous le coude juste pour pouvoir exporter en HTML5. Peu pratique, sans parler du risque qu’un beau jour, Swiffy finisse par ne plus fonctionner du tout.

Je viens de découvrir la nouvelle version de Flash Pro sortie fin juin (Flash Professional CC 2014, de son petit nom). Adobe s’est apparemment pas mal réveillé et s’est finalement décidé à transformer Flash Pro en un logiciel de création d’animations multiformat : SWF évidemment, mais en y ajoutant un large support du standard HTML5 et un support un peu plus expérimental de WebGL.

Concrètement, lors de la création d’un nouveau projet, on a maintenant le choix entre ActionScript 3 (le format Flash standard), Canvas HTML5 et WebGL. Si on choisit HTML5 ou WebGL, les animations sont ensuite créées nativement dans ces formats, mais avec le workflow et les outils habituels de Flash. Les rares outils qui ne sont pas supportés sont désactivés (par exemple, 3D Rotation Tool pour HTML5 et WebGL, ou toute la partie texte pour WebGL) pour éviter tout problème.

Pour convertir un document Flash existant en HTML5 ou WebGL, il y a deux solutions :

  • soit copier/coller tous les calques du fichier FLA d’origine vers un nouveau document HTML5 Canvas / WebGL
  • soit utiliser les scripts JSFL fournis (Commands > Convert HTML5 Canvas from AS3 document formats ou Commands > Convert WebGL (Preview) Canvas from AS3 document formats).

La conversion semble donner de bons résultats pour des animations pures. Le rendu des éléments textuels est généralement plus problématique : pas d’antialiasing et une seule mise en forme possible par champ. Quelques autres fonctions ne sont pas supportés du tout (Blend mode en overlay, lignes en pointillés, transformations 3D…). Le cas échéant, tout script AS3 est désactivé et devra être converti en Javascript a la main.

Animation SWF

Animation SWF

Animation HTML5 avec Flash Professional CC 2014

Animation HTML5 avec Flash Professional CC 2014

Avec mon exemple habituel, en HTML5 je note juste la perte d’antialiasing sur le masque de l’image du haut, et bizarrement un saut dans l’animation du nuage de poussière (alors que la conversion avec l’ancienne solution Adobe, CreateJS, était nickel). En WebGL, le masque de l’image du haut est complètement absent et le masque de la fumée verte du chaudron est affiché de manière incorrecte par moment. Je ne suis pas en mesure de vous montrer le résultat puisque l’animation a besoin d’un serveur web pour être affiché (intégré à Flash Pro, donc l’animation ne fonctionne plus si l’application est fermée)… "support expérimental", ils avaient prévenu !

Adobe Edge Animate HTML5

A noter aussi qu’Edge Animate, la solution d’animation 100% web d’Adobe que j’avais évoqué à plusieurs reprises par le passé (ici et ici), continue de faire son petit bonhomme de chemin et la version 2014 dispose de fonctionnalités très intéressantes, comme la prise en charge des fichiers vidéo HTML5, l’importation de spritesheets, le copier/coller d’images SVG depuis Illustrator, la mise à l’échelle réactive (responsive), les trajectoires de mouvement (similaires à Flash), etc.

Jeu : Au pays du 10 (Nintendo DS)

12 août 2014
tags: ,

Au pays du 10 (Make 10), Nintendo DS

Il ne fait pas de mystère que les jeux éducatifs traînent une sale réputation, souvent justifiée d’ailleurs : réalisation à la ramasse, thème bateau, intérêt ludique proche du néant… c’est pourquoi il est réconfortant de découvrir un titre comme Au pays du 10 : Un conte de fées décimal sur Nintendo DS, développé par un studio japonais répondant au doux nom de MuuMuu et édité en 2008 par Nintendo en personne.

L’histoire est plutôt simple : le joueur est propulsé dans le royaume de Décassum, alias le pays du 10, où les maths règnent en maître et servent à départager l’élite de la plèbe. Il va donc falloir prouver de quoi on est capable en affrontant au calcul mental une centaine de lutins décimaux répartis dans chacune des 10 sections de la carte, chacun y allant de son jeu fétiche, et surtout battre les neuf «maîtres du 10».

La trentaine de mini-jeux réussit le tour de force de proposer une grande variété de mécanismes et de gameplay, malgré des fondamentaux identiques et, somme toute, basiques : manipuler des chiffres pour obtenir 10 ou un multiple de 10. Le tout met parfaitement à profit le stylet de la DS, avec reconnaissance de l’écriture dans certains cas. Les jeux sont chronométrés et certains sont loin d’être évidents, même pour les adultes (malgré mon entraînement intensif sur 6 Numbers) !

On peut accéder aux jeux de différentes manières. La voie principale est le Royaume, sorte de story mode où les différentes sections de la carte sont débloquées les unes après les autres en case de succès. Deuxième voie d’accès, la chaîne de montagnes Juskobou, où une fois le lutin en question battu, les jeux sont accessibles librement et disponibles en différentes difficultés (10 niveaux de 3 manches à battre en tout). Enfin on peut aussi s’auto-évaluer grâce à l’Évaluation Décimale, qui est une sélection aléatoire de 3 jeux, débloqués ou non.

La patte graphique est unique et originale, avec des visuels mignons sans être mièvres, dans un style «fait à la main». L’ambiance générale est cohérente et peut faire penser à du Miyazaki un peu brouillon, avec cette histoire du petit peuple de la forêt qui se trouve soudain confronté à un humain.

Signalons aussi que les dialogues ont bénéficié d’une traduction française de grande qualité et sont relativement amusants. Inutile d’espérer de l’humour à la Desproges néanmoins, le jeu s’adressant en priorité aux enfants ! Le ton est plutôt assez proche de celui d’Animal Crossing. Même la partie sonore ne démérite pas, avec des mélodies simples mais prenantes.

Oh bien sûr, la perfection n’est pas de ce monde, même au pays du 10, et à l’usage l’interface paraît un peu lourde, parfois confuse, souvent inutilement bavarde et l’absence de sauvegarde automatique n’aide pas. Rien de rédhibitoire néanmoins.

Au pays du 10 est toujours disponible pour une dizaine d’euros dans toutes le bonnes crèmeries et c’est bon, mangez en !

Mockup de Jetpac version Thomson

16 juillet 2014

Jetpac est un jeu de Ultimate Play The Game sorti sur Spectrum, VIC-20 et BBC Micro et qui fut un gros hit en 1983. À regarder des vidéos aujourd’hui, c’est totalement justifié : le jeu est très rapide et réactif, à mille lieux de la plupart des titres 8 bit de l’époque.

Malgré son succès important, le jeu n’a pas vraiment connu de suite à proprement parler, les développeurs préférant s’essayer à d’autres genres de jeux, ce qui est tout à leur honneur. Pour la petite histoire, Ultimate Play The Game deviendra par la suite Rare, studio à la réputation assez légendaire (surtout dans sa période Nintendo du moins) qui sortira finalement en 2007  une version modernisée de Jetpac sur Xbox 360. A côté de ça, on compte bien sûr de nombreux clones et hommages sur de multiples plateformes, dont dernièrement une version Atari Jaguar par les fanatiques de Jagware et Reboot, dénommée Full Circle : Rocketeer.

Rien sur Thomson par contre, alors que d’autres succès des années 80 avaient eu droit à leur adaptation sur MO5 ou TO8, souvent un peu bâclées il est vrai : Green Beret, Arkanoid, Krakout ou Yie Ar Kung Fu II, par exemple.

Jetpac Thomson - prêt pour le multijoueur !

Armé de mes outils habituels (GrafX2 et tga2teo), j’ai voulu imaginer ce qu’aurait pu donner un portage sur Thomson TO8 exploitant le mode vidéo 160×200 en 16 couleurs. J’ai dû agrandir un peu les sprites pour pouvoir disposer d’assez de pixels pour les détails que je souhaitais, mais je ne pense pas que le gameplay en souffrirait trop. Reste à voir si les machines Thomson seraient en mesure d’offrir une vitesse de jeu similaire à la version Spectrum, mais le défi doit être de taille vu le nombre de jeux poussifs sortis sur TO8 !

Jetpac Thomson

Jetpac sur Thomson (cliquez sur l’image pour la voir en 200%)

 

 

 

Bus londonien en 3D low poly

7 juillet 2014
tags:

Voici une conversion 3D de mon bus londonien en pixel art, un petit projet rapide mais très satisfaisant.

Le bus fait tout juste 100 triangles, plus une autre centaine pour le contour type cel-shading, et utilise une texture réalisée avec Grafx2 de 64×64 pixels en 25 couleurs + transparence.

Bus londonien 3D low poly

Pour les contours autour de l’objet, j’ai eu recours à la technique utilisée par la plupart des premiers jeux en cel-shading comme Jet Set Radio : on duplique l’objet, on le gonfle un peu (Push modifier dans 3ds Max, Push/Pull dans Tools>Transform dans Blender), on lui donne une couleur sombre, on  inverse les normales et on active le backface culling, et c’est tout ! La méthode manque de finesse mais ça marche à peu près correctement :)

LondonBus3DAnimL’animation a été capturée directement dans le viewport de Blender avec Render > OpenGL Render Animation. Pour éviter que les textures en pixel art soient floues, il faut désactiver le texture filtering dans le viewport, ce qui se fait dans les Préférences (System > OpenGL > décocher Mipmaps).  Il est aussi préférable d’activer l’antialiasing dans le viewport pour un résultat plus propre, ça se règle directement dans le panneau de contrôle de la carte vidéo.

Je trouve le résultat final très sympa, particulièrement pour un projet aussi court, et à côté la version 2D du bus semble un peu plan-plan. La texture en basse résolution avec ses gros pixels bien nets donne vraiment un style à part (si tant est que ce ne soit pas que de la nostalgie !). En comparaison, ma Lada 3D avec sa texture en 256×256 fait un peu fouillis.

Voir le bus en 3D sur Sketchfab.

 

Game Boy Color avec écran éclairé

3 juillet 2014

Game Boy Color écran éclairé - Frontlit GBC

À première vue, rien ne distingue cette modeste GBC de ses congénères… Et pourtant, en y regardant de plus près, on constate la présence d’un potentiomètre supplémentaire sur le côté droit. Kézako ?

Game Boy Color écran éclairé - Frontlit GBC

La console a été modifiée pour que l’écran soit éclairé et le potentiomètre permet d’en régler l’intensité. La modification est assez connue et se réalise généralement en dépiautant une GBA SP de son élément d’éclairage (voir ici). Ayant conscience de mes limites en matière de bidouillage électronique, je me suis tourné vers Taobao, le grand bazar en ligne chinois et sorte d’Ebay à la  puissance 10, et plus précieusement vers cette annonce. Le prix demandé, une quarantaine d’euros, m’a semblé correct et j’ai décidé de sauter le pas. Quelques semaines plus tard (et accessoirement un séjour en Chine), me voici en présence de la bête.

Game Boy Color écran éclairé - Frontlit GBC

Le résultat est plutôt enthousiasmant. Je n’ai pas ouvert la console, mais le mod semble avoir été réalisé très proprement et le potard qui permet de faire varier la puissance de l’éclairage a été très bien intégré. Bonne surprise, la console semble être 100% authentique et non une rénovation chinoise plus ou moins bancale. Évidemment vu l’âge respectable de la Game Boy Color, on est en présence de matériel d’occasion, mais dans ce cas précis le tout est en très bon état. Je note juste une petite décoloration au dessus de la croix directionnelle et la trappe du compartiment à piles est un peu rayée et tâchée. La protection d’écran semble être neuve, livrée protégée par un film plastique. Si elle a été remplacée, la typographie est à tout point identique au modèle d’origine (et non pas comme ici).

Game Boy Color écran éclairé - Frontlit GBC

Niveau résultat, il faut bien avoir conscience que les smartphones récents et leurs écrans de folie ont quelque peu modifié nos attentes. Il faut plutôt avoir en tête du rendu de la Game Gear, de la Lynx ou évidemment de la GBA SP. En l’occurence l’éclairage est un peu irrégulier (plus fort en bas de l’écran), les couleurs ternes, et des bandes de lumière sont visibles sur l’écran (voir ci-dessus) si on tient la console de manière trop verticale. Pas de miracle donc, mais c’est logique vu la technique utilisée (une diode en bas de l’écran, pas du rétroéclairage). Malgré tout la magie opère : on peut jouer partout avec une GBC ! Difficile de juger de l’impact sur l’autonomie pour l’instant, mais je suppose que l’effet est important, la console n’étant pas du tout été conçue pour ça à l’origine.

 

Minivan

10 juin 2014
Minivan (mianbao che)

Petit dessin juste avant les vacances :)

Suivre

Recevez les nouvelles publications par mail.

Rejoignez 27 autres abonnés