Comment développer d'excellents jeux HTML5 - Explication détaillée de la technologie de jeu 'Finding Road to Oz' de Disney (1)

                                                                                                                                                                                                                                                         Cela est mentionné dans l'article "État des applications mobiles et tendances de développement", qui emprunte le décor du film "Oz" récemment sorti (le décor vient de l'histoire classique "Le magicien d'Oz", des étudiants qui J'ai regardé ce film et je serai profondément touché), construisant un grand monde de jeu équivalent. Dans le même temps, Disney a coopéré avec Google pour l'utiliser comme vitrine des performances du navigateur Chrome et de la technologie HTML5. Pour un tel jeu HTML5 qui utilise une variété de technologies avancées telles que WebGL 3D, une caméra, des effets sonores 3D, prend en charge les ordinateurs de bureau et les terminaux mobiles et offre une excellente qualité, la compréhension des principes et des techniques de mise en œuvre qui le sous-tendent doit être d'une grande importance pour nous. .

J'ai longtemps voulu traduire cet article pour aider tout le monde à mieux comprendre l'application du HTML5 dans le développement de jeux et les applications étrangères, mais cet article est trop long, donc il ne peut être publié que par tranches pour le bénéfice des lecteurs.

Ce tutoriel est considéré comme avancé en difficulté parmi mes récents articles présentant HTML5, et convient aux développeurs ayant une certaine expérience en lecture et en apprentissage.

Introduction

"Find the Road to Oz" est une nouvelle expérience apportée par Disney à Google Chrome. Il vous emmène dans un voyage interactif à travers le Kansas Circus et à travers une tempête géante jusqu'au Royaume d'Oz.

Notre objectif est de combiner les capacités techniques du navigateur pour créer une expérience amusante et immersive où les utilisateurs peuvent établir une connexion puissante avec le film Connect.

Le travail pour ce jeu est vraiment énorme, nous ne pouvons donc lister que quelques chapitres et rédiger les histoires techniques que nous pensons intéressantes. La difficulté du didacticiel augmente progressivement au fur et à mesure de votre progression.

Nous avons beaucoup de personnes qui travaillent dur pour créer une meilleure expérience, mais il y en a trop pour les énumérer ici. Veuillez visiter le site Web pour découvrir l’histoire complète sur toute la page.

Aperçu

"Looking for the Road to Find Oz" est un monde riche et immersif. Nous avons combiné les inspirations de la 3D et du cinéma traditionnel pour créer une scène avec plusieurs couches de réalité. La technologie la plus importante est l'introduction de WebGL utilisant Three.js, utilisant les fonctionnalités CSS3 pour personnaliser les shaders et les éléments d'animation DOM. En plus de cela, l'API getUserMedia (WebRTC) améliore l'expérience interactive, permettant aux utilisateurs d'ajouter leur propre image directement depuis la caméra, et WebAudio apporte des effets sonores 3D.

Mais la magie de cette expérience technologique réside dans la manière dont tout s'articule. C'était l'un des principaux défis : comment mélanger effets visuels et éléments interactifs pour créer une scène cohérente ? Cette complexité visuelle est très difficile à gérer : il est difficile de dire quelle scène nous devons développer à un moment donné. Pour résoudre ce problème de visuels et d'optimisation, nous avons largement utilisé un panneau de contrôle qui capturait tous les paramètres pertinents pour le moment que nous examinions. Tout dans la scène peut être corrigé en temps réel dans le navigateur, comme la luminosité, la profondeur verticale, le gamma, etc. Tout le monde peut jouer avec l'expérience en ajustant les valeurs de paramètres importants, en participant et en découvrant ce qui fonctionne le mieux.

Avant de partager notre secret, je tiens à vous prévenir que cela peut conduire à des crises. Assurez-vous de ne rien parcourir d'important et ajoutez ?debug=on lorsque vous visitez l'URL du site Web. Attendez que le site Web se charge. Une fois que vous y êtes, appuyez sur Ctrl I et vous verrez un menu déroulant apparaître sur la droite. Si vous décochez l'option "Quitter le chemin de la caméra", vous pourrez vous déplacer librement dans l'espace à l'aide des touches A, W, S, D et de la souris.

Nous n'entrerons pas ici dans le détail de tous les paramètres, mais nous vous encourageons à expérimenter : les touches affichent différents paramètres dans différents scénarios. Il y a un jeu de touches supplémentaire dans la scène finale de la tempête : Ctrl A, qui change l'animation en cours de lecture. Dans cette scène, si vous appuyez sur Echap (pour quitter la fonction de verrouillage de la souris), appuyez à nouveau sur la touche Ctrl I pour accéder aux paramètres spéciaux de la scène de tempête. Jetez un œil autour de vous et prenez de jolies cartes postales comme celles ci-dessous.

Pour ce faire et garantir qu'il est suffisamment flexible pour nos besoins, nous avons adopté un excellent framework appelé dat.gui (vous pouvez consulter ici le tutoriel précédent sur la façon de l'utiliser). Cela nous permet de modifier rapidement les paramètres exposés aux visiteurs.

Un peu comme la scène de la peinture

De nombreux films classiques de Disney et scènes de création d'animation nécessitent la fusion de différentes couches. Il existe des couches d'extérieurs, des couches d'animation unitaire, et des couches de décors physiques et des couches supérieures obtenues par peinture sur verre : une technique appelée matte painting.

À bien des égards, la structure des expériences que nous créons est similaire, même s'il existe certaines « couches » qui vont bien au-delà des visuels statiques. En fait, ils affectent l’apparence des choses sur la base de calculs plus complexes. Cependant, au moins au niveau global, nous traitons de points de vue qui se composent les uns sur les autres. En haut, vous voyez une couche d'interface utilisateur, et en dessous se trouve la scène 3D : elle se compose de différents composants de scène.

La couche d'interface supérieure est créée à l'aide de DOM et CSS 3. La communication d'événements utilise l'événement HTML5 onHashChange du routeur Backbone pour contrôler quelle zone répond à l'animation. (Code source du projet : /develop/coffee/router/Router.coffee).

Tutoriel : Prise en charge de la table Sprite et de la rétine Nous nous appuyons sur une technologie d'optimisation intéressante, combinons plusieurs couches d'interface d'images en un seul PNG séparé pour réduire les requêtes du serveur. Dans ce projet, l'interface est composée de plus de 70 images (hors textures 3D), toutes préchargées pour réduire la latence du site Web. Vous pouvez voir la dernière feuille de sprite ici :

Affichage normal

Affichage Retina

Ici Voici quelques conseils sur la façon de tirer parti des feuilles de sprites, de les utiliser sur les appareils Retina et de rendre l'interface aussi simple et soignée que possible.

Créez la table Sprite

Nous utilisons TexturePacker pour créer n'importe quel format de sprite dont vous avez besoin. Dans ce cas, nous utilisons EaselJS, qui est très soigné et peut être utilisé pour créer des sprites animés.

                                                                                                                                                                                                                                                          >

Où :

images pointe vers l'adresse de la table des sprites <br>

{
   "images": ["interface_2x.png"],
   "frames": [
       [2, 1837, 88, 130],
       [2, 2, 1472, 112],
       [1008, 774, 70, 68],
       [562, 1960, 86, 86],
       [473, 1960, 86, 86]
   ],

   "animations": {
       "allow_web":[0],
       "bottomheader":[1],
       "button_close":[2],
       "button_facebook":[3],
       "button_google":[4]
   },
}

les cadres sont les coordonnées de chaque élément de l'interface utilisateur

[x, y, width, height]

<br>

• les animations sont le nom de chaque contenu

• Notez que nous avons utilisé une image HD pour créer la feuille de sprite, puis nous créons simplement la version normale en redimensionnant l'image à la moitié de sa taille.

Mélangez tout

• Désormais, nous n'avons besoin que d'une section de code JavaScript pour l'utiliser.

<br> Voici le code pour la façon dont vous l'utilisez :

Téléchargez l'exemple complet ici

Si vous souhaitez en savoir plus sur la densité de pixels variable, vous pouvez lire cet article de Boris SMUS.

<br>

var SSAsset = function (asset, p) {
  var css, x, y, w, h;

  // pide the coordinates by 2 as retina devices have 2x density
  x = Math.round(asset.x / 2);
  y = Math.round(asset.y / 2);
  w = Math.round(asset.width / 2);
  h = Math.round(asset.height / 2);

  // Create an Object to store CSS attributes
  css = {
    width                : w,
    height               : h,
    'background-image'   : "url(" + asset.image_1x_url + ")",
    'background-size'    : "" + asset.fullSize[0] + "px " + asset.fullSize[1] + "px",
    'background-position': "-" + x + "px -" + y + "px"
  };

  // If retina devices

  if (window.devicePixelRatio === 2) {

    /*
    set -webkit-image-set
    for 1x and 2x
    All the calculations of X, Y, WIDTH and HEIGHT is taken care by the browser
    */

    css['background-image'] = "-webkit-image-set(url(" + asset.image_1x_url + ") 1x,";
    css['background-image'] += "url(" + asset.image_2x_url + ") 2x)";

  }

  // Set the CSS to the p
  p.css(css);
};

Pipeline de contenu 3D

<br>

<br>

L'expérience de l'environnement est construite au-dessus de la couche WebGL. Lorsque vous pensez à une scène 3D, l'une des questions les plus difficiles est de savoir comment garantir que vous créez un contenu avec le plus grand potentiel expressif dans tous les domaines de la modélisation, de l'animation et des effets spéciaux. À bien des égards, le cœur de ce problème réside dans le pipeline de contenu : utiliser un programme prédéterminé pour créer du contenu à partir d’une scène 3D.

logo = new SSAsset(
{
  fullSize     : [1024, 1024],               // image 1x dimensions Array [x,y]
  x            : 1790,                       // asset x coordinate on SpriteSheet         
  y            : 603,                        // asset y coordinate on SpriteSheet
  width        : 122,                        // asset width
  height       : 150,                        // asset height
  image_1x_url : 'img/spritesheet_1x.png',   // background image 1x URL
  image_2x_url : 'img/spritesheet_2x.png'    // background image 2x URL
},$('#logo'));

Nous voulons créer un monde passionnant, nous avons donc besoin d'un processus fiable pour aider les artistes 3D à le créer. Ils devront donner à leurs logiciels de modélisation et d’animation 3D autant de liberté d’expression que possible, et nous devrons les porter à l’écran via du code.

Nous travaillons sur ce genre de problème depuis un certain temps, car chaque fois que nous créions un site Web en 3D dans le passé, nous constations certaines limites des outils que nous utilisions auparavant. Plus tard, nous avons créé cet outil appelé 3D Librarian et étions sur le point de le mettre en œuvre. Cet outil a une certaine histoire : il a été créé à l'origine pour Flash, et il vous permettra de convertir une grande scène Maya en un seul fichier compressé optimisé pour le déballage du runtime. La raison pour laquelle cela est optimal est qu'il enveloppe efficacement la scène dans essentiellement la même structure de données qui est manipulée au moment du rendu et de l'animation. De cette façon, très peu d’analyse doit être effectuée lorsque le fichier est chargé. Le décompression dans Flash est très rapide car le fichier est au format AMF et Flash peut le décompresser nativement. Utiliser le même format en WebGL nécessite un peu plus de travail sur le CPU. Nous avons en fait dû recréer une couche de code JavaScript de données décompressées, qui décompresserait essentiellement ces fichiers et recréerait les structures de données requises par WebGL. Décompresser l'intégralité de la scène 3D est quelque peu éprouvant pour le processeur : la décompression de la scène 1 du jeu prend environ 2 secondes sur les machines milieu à haut de gamme. Donc pour cela, nous utilisons la technologie Web Workers pour l'implémenter au moment du "paramétrage de la scène" (en fait avant que la scène n'apparaisse), afin que cela n'affecte pas l'expérience utilisateur. Cet outil pratique peut importer des scènes 3D : modèles, textures et animations squelettiques. Vous pouvez créer un seul fichier de bibliothèque qui pourra ensuite être chargé par le moteur 3D.

Mais nous avons déjà rencontré un problème, et maintenant nous utilisons WebGL pour le résoudre. Par conséquent, nous avons créé une couche JavaScript spécifique qui utilise la bibliothèque 3D pour compresser les fichiers de scènes 3D et les traduire dans le format correct compris par WebGL.

Tutoriel : Il doit y avoir du vent

Un thème répété dans "À la recherche de la route d'Oz" est le vent. Le fil conducteur de l’intrigue s’enchaîne des vents faibles aux vents forts. La première scène du carnaval se déroule relativement sans incident. En parcourant différentes scènes, l'utilisateur subit progressivement des vents forts, pour finalement arriver à la scène finale, une tempête.

Il est donc important de fournir un effet de vent immersif.

Pour obtenir cet effet, nous avons rempli les 3 scènes du carnaval avec des objets mous, comme des tentes et des ballons.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!