Convertissez des jeux Flash en HTML5

Sep 14, 2025

Comment

[dix] [dix] [dix]

[dix]

Le flash est lentement abandonné par Adobe en faveur de HTML5 et JavaScript; Son fin de vie officiel est fixée pour l'année 2020. Et c'est là que cet article sera utile.

[dix]

Reconstruire un site Web Flash de 2004 pour 2018

Les conseils décrits ci-dessous visent à aider les développeurs de jeux HTML5 à éviter les erreurs courantes lors de la conversion de jeux flash à JavaScript, ainsi que de rendre tout le processus de développement aller aussi bien que possible. Tout ce dont vous avez besoin est la connaissance de base de JavaScript, WebGL et le cadre Phaser.

Changer votre conception de jeu de SWF vers JavaScript peut donner un meilleur expérience utilisateur , qui lui donne un look moderne. Mais comment le faire? Avez-vous besoin d'un convertisseur de jeu JavaScript dédié pour vous débarrasser de cette technologie obsolète? Eh bien, Flash to HTML5 Conversion peut être un morceau de gâteau - voici ce qu'un développeur expérimenté JavaScript a à dire sur la question.

J'aime garder votre processus de conception simple? UNE Générateur de site Web et la droite hébergement Web Le fournisseur peut le garder de cette façon.

01. Améliorer l'expérience du jeu HTML5

Conversion d'une partie à une autre plate-forme est une excellente occasion de l'améliorer, de résoudre ses problèmes et d'augmenter le public. Vous trouverez ci-dessous peu de choses qui peuvent être facilement faites et méritent d'être envisagées:

[dix]

Soutenir les appareils mobiles
Conversion de Flash à JavaScript permet d'atteindre un public plus large - les utilisateurs de la prise en charge des périphériques mobiles aux contrôles à écran tactile doivent généralement être mis en œuvre dans le jeu. Heureusement, les appareils Android et IOS supportent désormais WebGL, donc 30 ou 60 FPS Le rendu peut généralement être facilement atteint. Dans de nombreux cas, 60 FPS ne proviendront aucun problème, ce qui ne s'améliorera que avec le temps, car les appareils mobiles deviennent de plus en plus performants.
Améliorer les performances
Lorsqu'il s'agit de comparer ActionScript et JavaScript, ce dernier est plus rapide. Autre que cela, la conversion d'un jeu est une bonne occasion pour revisiter les algorithmes utilisés dans le code de jeu. Avec JavaScript Game Development, vous pouvez les optimiser ou supprimer complètement le code inutilisé qui reste par des développeurs originaux.
Fixer des bugs et apporter des améliorations au gameplay
Avoir de nouveaux développeurs à la recherche sur le code source du jeu peut aider à réparer les bugs connus ou à découvrir de nouvelles et très rares. Cela rendrait la lecture du jeu moins irritant pour les joueurs, ce qui les ferait passer plus de temps sur votre site et les encouragerait à essayer vos autres jeux.
Ajouter des analyses Web
En plus de suivre le trafic, Web Analytics peut également être utilisé pour recueillir des connaissances sur la manière dont les joueurs se comportent dans une partie et où ils sont bloqués pendant le gameplay.
Ajout de la localisation
Cela augmenterait le public et est important pour les enfants d'autres pays jouant à votre jeu. Ou peut-être que votre jeu n'est pas en anglais et que vous souhaitez soutenir cette langue?

02. Atteindre 60 fps

En ce qui concerne le développement de jeux JavaScript, il peut s'empêcher de tirer parti de HTML et de CSS pour les boutons de jeu, les widgets et autres éléments d'interface graphique. Notre conseil est de faire attention ici. C'est contre-intuitif, mais en tirant réellement des éléments DOM est moins performant sur des jeux complexes et cela gagne plus de signification sur mobile. Si vous souhaitez obtenir une constante 60 FPS sur toutes les plates-formes, vous devez vous démissionner de HTML et de CSS.

Les éléments d'interface graphique non interactifs, tels que les barres de santé, les munitions de munitions ou les compteurs de score peuvent être facilement implémentés dans des images phases à l'aide d'images régulières (la classe 'Phaser.Image'), en tirant parti de la propriété "Croprop" pour la rognage et le 'Phaser. Classe de texte pour les étiquettes de texte simples.

Des éléments interactifs tels que des boutons et des cases à cocher peuvent être mis en œuvre à l'aide de 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.

03. Chargement de polices personnalisées

Si vous souhaitez rendant du texte avec une police de vecteur personnalisé (par exemple, TTF ou OTF), vous devez vous assurer que la police a déjà été chargée par le navigateur avant de rendre n'importe quel texte. Phaser v2.6 ne fournit pas de solution à cette fin, mais une autre bibliothèque peut être utilisée - Chargeur de polices Web .

En supposant que vous ayez un fichier de polices et incluez le chargeur de polices Web de votre page, vous trouverez ci-dessous un exemple simple de la manière de charger une police. Faites un simple fichier CSS qui sera chargé par le chargeur de polices Web (vous n'avez pas besoin d'y inclure dans votre HTML):

 @ font-face {
  // Ce nom que vous utiliserez dans JS
  Font-famille: 'Gunplay';
  // URL au fichier de polices, peut être relatif ou absolu
  SRC: URL ('../ Fonts / Gunplay.ttf') Format ('TrueType');
  Poids de la police: 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,
  'actif': fonction () {
  // la police a chargé avec succès ...
  },
  'Douane': {
  "Familles": [Gunplay '],
  // URL au CSS mentionné précédemment
  'URL': ['Styles / Fonts.css']
  }
};

N'oubliez pas de mettre votre code dans le rappel «actif» indiqué ci-dessus. Et c'est tout!

04. Sauvez le jeu

Maintenant, nous sommes au centre de notre flash à la conversion JavaScript - il est temps de prendre soin des shaders. Pour stocker de manière persistante les données locales dans ActionScript, vous utiliseriez la classe 'SharedObject'. En JavaScript, le simple remplacement est le API localStorage , qui permet de stocker des chaînes pour obtenir des recharges de page survivants ultérieurs.

Sauver les données est très simple:

 var progrès = 15;
localtstorage.settitem ('mygame.progress', progrès);

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

Le chargement est simple aussi, mais rappelez-vous que les valeurs récupérées seront des cordes ou des nuls s'ils n'existent pas.

 var progrès = parseint (localStorage.getem ('mygame.progress')) || 0;

Nous assurons ici que la valeur de retour est un nombre. Si cela n'existe pas, il sera attribué à la variable «Progrès».

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

 var statistiques = {'buts': 13, 'gagne': 7, "pertes": 3, "tire": 1
};
localtstorage.settitem ('mygame.stats', json.stringify (statistiques));
...
var statistiques = json.parse (localstorage.getem ('mygame.stats')) || {};

Il y a quelques cas lorsque l'objet «localStorage» ne sera pas disponible. Par exemple, lors de l'utilisation du fichier: // Protocole ou lorsqu'une page est chargée dans une fenêtre privée. Vous pouvez utiliser l'instruction «Essayez et attraper» pour vous assurer que votre code continuera à fonctionner et à utiliser les valeurs par défaut, qui est affichée dans l'exemple ci-dessous:

 Essayez {
    var progrès = localStorage.getem ('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 enregistrées par domaine et non par URL. Donc, s'il existe 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 préfixe et vous voulez généralement le remplacer par le nom du jeu.

Si votre jeu est intégré dans un iframe, LocalStorage ne persiste pas sur iOS. Dans ce cas, vous auriez besoin de stocker des données dans le parent iframe.

05. Shader de fragment par défaut

Convert Flash games to HTML5: Custom default shader — Un shader par défaut personnalisé peut être utilisé pour remplacer la méthode de teinture dans Phaser et Pixijs. Les réservoirs flash blancs quand frappé

[dix]

Lorsque Phaser et Pixijs rendent vos sprites, ils utilisent un simple shader interne. Il n'a pas beaucoup de fonctionnalités car il est adapté à la vitesse. Cependant, vous pouvez remplacer ce shader à vos fins. Par exemple, vous pouvez le tirer parti d'inspecter la découverte ou de la prise en charge de plus de fonctionnalités pour le rendu. Vous trouverez ci-dessous un exemple de la manière de fournir votre propre fragment par défaut Shader à Phaser V2.

 Fonction précharge () {
  ceci.load.shader ('FileName.frag', 'Shaders / FileName.frag');
}
fonction créer () {
  var rendu = ceci.render;
  var batch = renduer.spritTBatch;
  batch.defaultshader =
  nouveau pixi.abstractfilter (ce.cache.getshader ('FileName.frag'));
  Batch.setContext (rendu.gl);
}

06. Modifier la méthode de teinture

Un shader par défaut personnalisé peut être utilisé pour remplacer les méthodes de teinture par défaut dans Phaser et Pixijs. Tinting dans Phaser et Pixijs fonctionne en multipliant les pixels de texture par une couleur donnée. La multiplication sombre toujours des couleurs, ce qui n'est évidemment pas un problème; C'est simplement différent de la teinture flash. Pour l'un de nos jeux, nous devions mettre en œuvre une teinte similaire à Flash et ont décidé qu'un shader par défaut personnalisé pourrait être utilisé. Vous trouverez ci-dessous un exemple d'un tel shader de fragment:

// Variante de teinte spécifique, similaire à la teinture flash qui ajoute
// à la couleur et ne se multiplie pas. Un négatif de couleur
// doit être fourni pour ce shader fonctionner correctement, c'est-à-dire ensemble
// sprite.tint à 0 pour tourner toute la sprite en blanc.
float de précision lowp;
Vec2 VTexturecoord;
variant Vec4 vcolor;
Sampler2D uniforme USampler;
vide principal (void) {
  VEC4 F = Texture2D (Usampler, VTexturecoord);
  flotter a = pince (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 éclaire des pixels en ajoutant une couleur de base à la teinte une. Pour que cela fonctionne, vous devez fournir des négatifs de la couleur que vous souhaitez. Par conséquent, afin de devenir blanc, vous devez définir:

 sprite.tint = 0x000000; // cela coulent le sprite au blanc
Sprite.tint = 0x00ffff; // cela donne rouge

07. Inspecter la découverte

Convert Flash games to HTML5: Overdraw shader — La photo de gauche montre comment un joueur voit le jeu, tandis que celui de droite affiche l'effet d'appliquer le shader sur la même scène

Le remplacement d'une shader par défaut peut également être exploité pour aider au débogage. Ci-dessous nous avons expliqué comment le découvert peut être détecté avec un tel shader.

La découverte se produit lorsque beaucoup ou tous les pixels de l'écran sont rendus plusieurs fois. Par exemple, de nombreux objets prennent le même endroit et sont rendus un sur un autre. Combien de pixels qu'un GPU peut rendre par seconde est décrit comme un taux de remplissage. Les GPU de bureau modernes ont un taux de remplissage excessif à des fins de 2D habituelles, mais les mobiles sont beaucoup plus lentes.

Il existe une méthode simple pour déterminer le nombre de fois que chaque pixel sur l'écran est écrit en remplaçant le shader de fragment global par défaut dans Pixijs et Phaser avec celui-ci:

 vide principal (void) {
  gl_fragcolor.rgb + = 1,0 / 7,0;
}

Ce shader éclaire des pixels qui sont en cours de traitement. Le numéro 7.0 indique combien d'écritures sont nécessaires pour transformer les pixels blancs; Vous pouvez accorder ce numéro à votre goût. En d'autres termes, des pixels plus clairs à l'écran ont été écrits à plusieurs reprises et des pixels blancs ont été écrits au moins sept fois.

Ce shader aide également à trouver à la fois des objets «invisibles» que, pour une raison quelconque, sont toujours rendus, et des sprites qui ont des zones transparentes excessives qui doivent être dépouillées (GPU doit encore traiter des pixels transparents dans vos textures).

08. Pourquoi les moteurs de physique sont vos amis

Convert Flash games to HTML5: Phaser physics debug — La partie gauche de l'image est une scène d'une partie, tandis que le côté droit montre la même scène avec la superposition de débogage de la physique phaser affichée sur le dessus.

Un moteur de physique est un middleware responsable de simuler des organismes de physique (généralement une dynamique corporelle rigide) et de leurs collisions. Les moteurs de physique simulent des espaces 2D ou 3D, mais pas les deux. Un moteur de physique typique fournira:

Mouvement d'objet en définissant des vitesses, des accélérations, des articulations et des moteurs;
Détecter les collisions entre divers types de forme;
Calculer les réponses de collision, c'est-à-dire comment les deux objets devraient réagir lorsqu'ils entrent en collision.

Il y a un plugin phaser qui fonctionne bien à cette fin. Box2D est également utilisé dans le moteur de jeu Unity et Gamemaker Studio 2.

Alors qu'un moteur de physique accélérera votre développement, vous devez payer un prix: réduit les performances d'exécution. Détecter les collisions et le calcul des réponses est une tâche intensive de la CPU. Vous pouvez être limité à plusieurs dizaines d'objets dynamiques dans une scène sur les téléphones mobiles ou les performances dégradées par la face, ainsi que la vitesse de trame réduite au-dessous de 60 fps.

09. Exporter des sons

Si vous avez un jeu de jeu de jeu flash à l'intérieur d'un fichier .fla, les exporter de GUI n'est pas possible (au moins pas dans Adobe Animate CC 2017) en raison du manque d'options de menu servant cet objectif. Mais il y a une autre solution - un script dédié qui fait que:

 Fonction normaliséefileName (nom) {
  // convertit un nom de camelcase en nom de Snake_Case
  nom de retour.replace (/ (a-z]) / g, '_ $ 1'). Remplacez (/ ^ _ /, '') .tolowercase ();
}
Fonction displaypath (chemin) {
  // rend le chemin de fichier plus lisible
  Renvoyer unescape (chemin) .replace ('Fichier: ///', '') .replace ('|', ':');
}
fl.outputpanel.clear ();
Si (fl.getdocumentdom (). Bibliothèque.getselectedems (). Longueur & GT; 0)
  // Obtenir uniquement les éléments sélectionnés
  var bibliothèque = fl.getdocumentdom (). Bibliothèque.getselectedems ();
autre
  // obtenir tous les articles
  var bibliothèque = fl.getdocumentdom (). Bibliothèque.items;
// demander à l'utilisateur du répertoire de destination d'exportation
var root = fl.browseforforfolderurl ("Sélectionnez un dossier");
erreurs de var = 0;
pour (var i = 0; i & lt; bibliothèque.length; i ++) {
  item var = bibliothèque [i];
  Si (item.itemType! == 'Sound')
  Continuez;
  chemin var = root + '/';
  if (item.originalcompressiontype === 'cru')
  chemin + = normaliséfileName (item.name.split ('.') ) + '.wav';
  autre
  chemin + = normaliséfileName (item.name);
  Var Success = item.exporttofile (chemin);
  Si (! Succès)
  erreurs + = 1;
  fl.trace (displaypath (chemin) + ':' + (succès? 'OK': 'Erreur'));
}
fl.trace (erreurs + 'erreur (s)');

Comment utiliser le script pour exporter des fichiers son:

Enregistrez le code ci-dessus en tant que fichier .jsfl sur votre ordinateur.
Ouvrez un fichier .fla avec Adobe Animate.
Sélectionnez Commandes et GT; Exécutez la commande dans le menu supérieur et sélectionnez le script dans la boîte de dialogue qui s'ouvre.
Maintenant, un autre fichier de dialogue apparaît pour la sélection du répertoire de destination d'exportation.

C'est fait! Vous devriez maintenant avoir des fichiers WAV dans le répertoire spécifié. Ce qui reste à faire est de les convertir, par exemple, mp3, OGG ou AAC. (Si vous avez des fichiers de jeu pour rester en sécurité, effectuez une mise à niveau vers une décente stockage en ligne .)

10. Comment utiliser des mp3

Le bon vieux format MP3 est de retour, car certains brevets ont expiré et que chaque navigateur peut maintenant décoder et jouer des mp3. Cela rend le développement un peu plus facile, car enfin, il n'est pas nécessaire de préparer deux formats audio distincts. Auparavant, vous avez besoin, par exemple, les fichiers OGG et AAC, tandis que MP3 suffira maintenant.

Néanmoins, il y a deux choses importantes que vous devez vous souvenir de mp3:

Les MP3 doivent décoder après le chargement, qui peut consommer du temps, en particulier sur des appareils mobiles. Si vous voyez une pause après que tous vos actifs ont été chargés, cela signifie probablement que les MP3 sont décodés.
Jouer sans succès Les MP3 en boucle sont un peu problématiques. La solution consiste à utiliser mp3loop, En savoir plus dans cet article Publié par Compu Phase.

Cet article a été publié à l'origine dans le numéro 277 de Creative Web Design Magazine Web Designer. Achetez le numéro 277 ici ou Abonnez-vous à Web Designer ici .

Articles Liés:

5 Jeux occasionnels pour designers
Construisez votre propre jeu de physique WebLL
Comprendre le pipeline d'importation d'actifs de l'unité

[dix] [dix]

[dix]

Convertissez des jeux Flash en HTML5

01. Améliorer l'expérience du jeu HTML5

02. Atteindre 60 fps

03. Chargement de polices personnalisées

04. Sauvez le jeu

05. Shader de fragment par défaut

06. Modifier la méthode de teinture

07. Inspecter la découverte

08. Pourquoi les moteurs de physique sont vos amis

09. Exporter des sons

10. Comment utiliser des mp3

Comment - Most Popular Articles

Commencez avec Express.Js

Conseils de conception pour artistes

Faites de l'herbe dans un moteur irréel

Comment gérer les classes CSS avec JavaScript

Comment se déplacer entre Daz Studio et Zbrush

Construire une interface maya personnalisée

Top astuces pour sculpter une créature à Zbrush

Créer un caractère avec réalisme stylisé

Catégories