Que devezvous savoir lors de la conversion d'un jeu Flash en HTML5?

Les astuces présentées dans cet article visent à aider les développeurs de jeux HTML5 à éviter les erreurs courantes lors de la conversion de leurs jeux Flash en JavaScript, ainsi que le processus de développement. lisse comme possible. Une connaissance de base de JavaScript, WebGL et du framework Phaser est requise.

Avec l'augmentation de l'utilisation de HTML5, de nombreuses entreprises commencent à refaire leurs titres les plus populaires pour se débarrasser de Flash obsolète et faire correspondre leurs produits aux dernières normes de l'industrie. Ce changement est particulièrement visible dans les industries du jeu, des casinos et des divertissements et se produit depuis plusieurs années maintenant, donc une sélection décente de titres a déjà été convertie.

Malheureusement, lorsque vous naviguez sur Internet, vous tombez souvent sur des exemples d'un travail apparemment hâtif, ce qui entraîne la qualité d'amant du produit final. C'est pourquoi c'est une bonne idée pour les développeurs de jeux de consacrer une partie de leur temps à se familiariser avec la conversion Flash vers HTML5 et d'apprendre les erreurs à éviter avant de se mettre au travail.

Outre les problèmes techniques évidents, le fait de changer la conception de votre jeu de SWF en JavaScript peut améliorer l'expérience utilisateur, ce qui lui donne un aspect moderne. Mais comment le faire? Avez-vous besoin d'un convertisseur de jeu JavaScript dédié pour se débarrasser de cette technologie obsolète? Eh bien, la conversion Flash vers HTML5 peut être un jeu d'enfant – voici comment s'en occuper

Recommended reading : Principes de la conception de jeux HTML5

Comment améliorer l'expérience de jeu HTML5

Convertir un jeu en une autre plate-forme est une excellente opportunité pour l'améliorer, résoudre ses problèmes et augmenter l'audience. Voici quelques éléments qui peuvent être facilement réalisés et méritent d'être pris en compte:

• Prise en charge des périphériques mobiles
  La conversion de Flash en JavaScript permet d'atteindre un public plus large (utilisateurs d'appareils mobiles); la prise en charge des commandes tactiles doit également être implémentée dans le jeu. Heureusement, les appareils Android et iOS prennent désormais en charge WebGL, ce qui permet généralement d'obtenir facilement un rendu de 30 ou 60 images par seconde. Dans de nombreux cas, 60 FPS ne causera aucun problème, qui ne fera que s'améliorer avec le temps, car les appareils mobiles deviennent de plus en plus performants.

• Amélioration des performances
  Pour comparer ActionScript et JavaScript, ce dernier est plus rapide que le premier. Autre que cela, la conversion d'un jeu est une bonne occasion de revisiter les algorithmes utilisés dans le code du jeu. Avec le développement de jeux JavaScript, vous pouvez les optimiser ou supprimer complètement le code inutilisé laissé par les développeurs
• Corriger des bugs et améliorer le gameplay
  Avoir de nouveaux développeurs dans le code source du jeu peut aider à corriger les bogues connus et très rares. Cela rendrait le jeu moins irritant pour les joueurs, ce qui les inciterait à passer plus de temps sur votre site et à encourager vos autres jeux.
• Ajouter des analyses Web
  En plus de suivre le trafic, les analyses Web peuvent également être utilisé pour rassembler des connaissances sur la façon dont les joueurs se comportent dans un jeu et où ils sont coincés pendant le jeu.
• Ajouter une localisation
  Cela augmenterait l'audience et serait important pour les enfants d'autres pays. Ou peut-être votre jeu n'est pas en anglais et vous voulez soutenir cette langue?

Pourquoi sauter HTML et CSS pour l'interface utilisateur en jeu va améliorer les performances du jeu

Quand il s'agit de développement de jeux JavaScript, il peut être tentant CSS pour les boutons dans le jeu, les widgets et autres éléments de l'interface graphique. Mon conseil est de faire attention ici. C'est contre-intuitif, mais en réalité tirer parti des éléments DOM est moins performant sur les jeux complexes et cela gagne plus d'importance sur mobile. Si vous voulez atteindre 60 FPS sur toutes les plates-formes, vous devrez peut-être quitter HTML et CSS.

Les éléments GUI non interactifs, tels que les barres de santé, les barres de munitions ou les compteurs de score peuvent être facilement implémentés dans Phaser. images régulières (la classe Phaser.Image ), tirant parti de la propriété .crop pour le découpage et de la classe Phaser.Text pour les étiquettes de texte simples.

Les éléments interactifs en tant que boutons et cases à cocher peuvent être implémentés en utilisant la classe Phaser.Button intégrée. D'autres éléments plus complexes peuvent être composés de différents types simples, tels que des groupes, des images, des boutons et des étiquettes de texte.

Note: Chaque fois que vous instanciez un objet Phaser.Text ou PIXI.Text, un nouveau la texture est créée pour rendre le texte sur. Cette texture supplémentaire rompt le vertex batching, donc attention à ne pas en avoir trop

Comment s'assurer que les polices personnalisées sont chargées

Si vous voulez rendre du texte avec une police vectorielle personnalisée (par exemple TTF ou OTF), alors vous devez vous assurer que la fonte a déjà été chargée par le navigateur avant de rendre le texte. Phaser v2 ne fournit pas une solution à cette fin, mais une autre bibliothèque peut être utilisée: Web Font Loader .

En supposant que vous avez un fichier de police et incluez le Web Font Loader dans votre page, alors ci-dessous est un exemple simple de comment charger une police:

Faire un simple fichier CSS qui sera chargé par Web Font Loader (vous n'avez pas besoin de l'inclure dans votre HTML):

 @ font-face {
    // Ce nom que vous utiliserez dans JS
    famille de polices: 'Gunplay';
    // URL du fichier de police, peut être relative ou absolue
    src: url ('../ fonts / gunplay.ttf') format ('truetype');
    font-weight: 400;
}

Définissez maintenant une variable globale nommée WebFontConfig . Quelque chose d'aussi simple que cela suffira généralement:

 var WebFontConfig = {
   'classes': faux,
   'timeout': 0,
   'active': function () {
       // La police a été chargée avec succès ...
   },
   'Douane': {
       'familles': ['Gunplay'],
       // URL du CSS précédemment mentionné
       'urls': ['styles/fonts.css']
   }
}

A la fin, n'oubliez pas de mettre votre code dans le rappel 'actif' montré ci-dessus. Et c'est tout!

Comment faciliter l'enregistrement du jeu par les utilisateurs

Pour stocker de manière persistante des données locales dans ActionScript, vous devez utiliser la classe SharedObject. En JavaScript, le remplacement simple est localStorage API qui permet de stocker des chaînes pour une récupération ultérieure, en conservant les rechargements de page.

Sauvegarder des données est très simple:

 var progress = 15;
localStorage.setItem ('myGame.progress', progression);

Notez que dans l'exemple ci-dessus, la variable de progression qui est un nombre, sera convertie en chaîne.

Le chargement est également simple, mais rappelez-vous que les valeurs récupérées seront ] null si elles n'existent pas.

 var progress = parseInt (localStorage.getItem ('myGame.progress')) || 0;

Ici, nous nous assurons que la valeur de retour est un nombre. S'il n'existe pas, alors 0 sera affecté à la variable progression .

Vous pouvez également stocker et récupérer des structures plus complexes, par exemple, JSON:

 var stats = {'goals ': 13,' gagne ': 7,' pertes ': 3,' dessine ': 1};
localStorage.setItem ('myGame.stats', JSON.stringify (stats));
...
var stats = JSON.parse (localStorage.getItem ('monGame.stats')) || {};

Il y a des cas où l'objet localStorage ne sera pas disponible. Par exemple, lors de l'utilisation du protocole file: // ou lorsqu'une page est chargée dans une fenêtre privée. Vous pouvez utiliser l'instruction try and catch pour vous assurer que votre code continuera à fonctionner et utilisera les valeurs par défaut, ce qui est montré dans l'exemple ci-dessous:

 try {
    var progress = localStorage.getItem ('myGame.progress');
} catch (exception) {
    // localStorage non disponible, utilisez les valeurs par défaut
}

Une autre chose à retenir est que les données stockées sont sauvegardées par domaine et non par URL. Donc, s'il y a un risque que de nombreux jeux soient hébergés sur un seul domaine, il est préférable d'utiliser un préfixe (espace de noms) lors de l'enregistrement. Dans l'exemple ci-dessus 'myGame.' est un tel préfixe et vous voulez généralement le remplacer par le nom du jeu.

Note : Si votre jeu est imbriqué dans un iframe, localStorage ne persistera pas sur iOS. Dans ce cas, vous devrez stocker les données dans le cadre iframe parent .

Comment tirer parti du shader de fragment par défaut

Lorsque Phaser et PixiJS affichent vos sprites, ils utilisent un simple fragment interne. Il n'a pas beaucoup de fonctionnalités, car il est conçu pour une vitesse. Cependant, vous pouvez remplacer ce shader pour vos besoins. Par exemple, vous pouvez en tirer parti pour inspecter ou prendre en charge plus de fonctions pour le rendu.

Voici un exemple de la façon de fournir votre propre fragment shader par défaut à Phaser v2:

 function preload () {
    this.load.shader ('filename.frag', 'shaders / filename.frag');
}

function create () {
    var renderer = this.renderer;
    var batch = renderer.spriteBatch;
    batch.defaultShader =
        nouveau PIXI.AbstractFilter (this.cache.getShader ('filename.frag'));
    batch.setContext (renderer.gl);
}

Note: Il est important de se rappeler que le shader par défaut est utilisé pour TOUS les sprites ainsi que pour le rendu d'une texture. Gardez à l'esprit que l'utilisation de shaders complexes pour tous les sprites dans le jeu réduira grandement les performances de rendu

Comment changer la méthode de teinte avec un shader par défaut

dans Phaser et PixiJS.

Teinter dans Phaser et PixiJS fonctionne en multipliant les pixels de texture par une couleur donnée. La multiplication assombrit toujours les couleurs, ce qui n'est évidemment pas un problème; c'est simplement différent de la teinte Flash. Pour l'un de nos jeux, nous devions implémenter une teinte similaire à Flash et avons décidé qu'un shader par défaut personnalisé pouvait être utilisé. Voici un exemple de fragment shader:

 // Variant de teinte spécifique, similaire à la teinte Flash qui ajoute
// à la couleur et ne se multiplie pas. Un négatif d'une couleur
// doit être fourni pour que ce shader fonctionne correctement, c'est-à-dire
// sprite.tint à 0 pour transformer le sprite entier en blanc.
flotteur bas de précision;

variant vec2 vTextureCoord;
variant vec4 vColor;

échantillonneur uniforme 2DdSampler;

void principal (vide) {
    vec4 f = texture2D (uSampler, vTextureCoord);
    float a = clamp (vColor.a, 0,00001, 1,0);
    gl_FragColor.rgb = f.rgb * vColor.a + pince (1.0 - vColor.rgb / a, 0.0, 1.0) * vColor.a * f.a;
    gl_FragColor.a = f.a * vColor.a;
}

Ce shader éclaircit les pixels en ajoutant une couleur de base à la teinte. Pour que cela fonctionne, vous devez fournir le négatif de la couleur que vous voulez. Par conséquent, pour obtenir du blanc, vous devez définir:

 sprite.tint = 0x000000; // Ceci colorie le sprite en blanc
Sprite.tint = 0x00ffff; // Cela donne du rouge

Le résultat dans notre jeu ressemble à ceci (remarquez comment les chars clignotent en blanc quand ils sont touchés):