Catégories
Astuces et Design

Étude de cas, Acura: Beat That

Après avoir travaillé avec MullenLowe sur Acura: Total Control Experience, nous avons été ravis de recevoir l’appel que nous allions de nouveau collaborer avec eux pour une nouvelle expérience créative pour Acura. Cette fois, c'était très ambitieux.

Inspirés par leur publicité télévisée, nous avons été chargés de célébrant 20 ans de conduite à travers un jeu de course immersif qui a présenté six voitures différentes de l'histoire d'Acura. La torsion? Terminer chaque course débloquerait une nouvelle voiture et une nouvelle piste, chacune s'inscrivant dans une ère différente du jeu vidéo de course. Démarrez vos moteurs et préparez-vous à un peu de nostalgie. 🏎️💨

Prêt… Six voitures. Six époques. Six traitements?

Avant de plonger dans la production, nous devions nous aligner sur la mécanique du jeu. Selon le TVC, les courses tourneraient autour de battre un temps défini pour passer au niveau suivant.

En tant que fans de jeux de course, nous avons commencé avec du matériel d'inspiration qui nous aiderait à évoluer du niveau de base initial (avec un NSX de 1990) jusqu'à la course de Type S finale qui a poussé les graphismes vers quelque chose que l'on trouve sur les jeux mobiles modernes haut de gamme. .

acura-beat-that-racing-history
Histoire du jeu de course.

Pour immerger complètement l'utilisateur, nous avons décidé d'évoluer tous les aspects de chaque niveau, avec la voiture, l'environnement et l'interface utilisateur se transformant à chaque avancement de course.

Avec la narration globale en place, nous avons alors commencé à concevoir chaque race. Pour immerger complètement l'utilisateur, nous avons décidé d'évoluer tous les aspects de chaque niveau, avec la voiture, l'environnement et l'interface utilisateur se transformant à chaque avancement de course. Pour soutenir cela, nous avons travaillé sur une série de planches qui deviendraient «l'étoile du nord» pour chaque niveau, guidant la conception et le développement.

acura-beat-that-board1
acura-beat-that-board2
acura-beat-that-board3
Conseils de conception.

Et comme tout grand jeu de course, nous voulions que les joueurs puissent rivaliser avec leurs amis. Ce serait dans un style de jeu d'arcade classique, les joueurs enregistrant leurs temps de course en utilisant un nom à trois caractères, avant de les afficher dans un classement.

Le jeu serait également déployé en tant que jeu instantané Facebook, le rendant facilement partageable et promouvable sur les réseaux sociaux.

Définir … Portée et outils

Acura-beat-that-leaderboard
Conception d'écran de score.

Comme le savent tous ceux qui travaillent dans un environnement de production, la gestion de la portée est extrêmement importante. Compte tenu de la barre que nous nous étions fixée au coup d'envoi et du fait que nous avions un calendrier de deux mois (y compris les vacances de Noël), cela allait être essentiel pour nous tout au long du projet.

Pour ce faire, nous avons utilisé notre flux de travail Cinema4D étroitement intégré pour la conception des pistes, Substance Painter pour les modèles de voitures et un pipeline Figma personnalisé pour intégrer chaque style d'interface utilisateur unique directement dans le moteur à rendre avec WebGL. Nous nous sommes également appuyés sur nos outils GUI pour créer une dynamique de conduite unique pour chaque voiture en ajustant des paramètres tels que la vitesse de pointe, la courbe d'accélération, le roulis, la sensibilité de la direction et la dérive. Mais plus là-dessus plus tard…

		acura-beat-that-pipeline
Processus de conception d'écran de score.

Aller! Plonger dans la production

Création des voitures

Depuis que nous travaillions avec Acura, la façon dont nous présentions les voitures était un aspect très important du jeu. le le plus grand défi était de créer une stylisation unique pour chaque modèle, inspiré des moments clés de l'histoire du jeu vidéo, tout en s'assurant que les voitures se rapprochent le plus possible des modèles emblématiques d'Acura. Notre processus de modélisation 3D a impliqué:

Étape 1: Sourcing

La première étape a consisté à 6 voitures choisies en ligne: NSX 1990, INTEGRA 1995, RDX, ARX-05, NSX 2019 et Type S. Une fois la source obtenue, nous avons identifié tous les changements structurels majeurs nécessaires sur les modèles.

Étape 2: optimisation

Nous avons ensuite effectué des changements structurels, en supprimant les détails et en optimisant les modèles haute poly à 15-20k polys max (extérieur uniquement) pour qu'ils soient adaptés à l'environnement Web du jeu. Une fois les modèles optimisés, nous les avons déballés et exportés les cartes suivantes: Normales, Couleur de base, Rugosité, Metalness et AO.

Acura

Étape 3 Stylisation

En utilisant les modèles optimisés et leurs cartes exportées, nous avons personnalisé et stylisé les 6 voitures. Nous avons utilisé Substance Painter pour contrôler entièrement la personnalisation des textures et jouer avec les différentes cartes pour ajouter des détails, changer les couleurs, ajuster AO / métal / rugosité ou augmenter / diminuer les normales.

Acura

Nous avons ensuite exporté les textures PBR directement depuis Substance à l'aide d'une configuration d'exportation personnalisée.

acura-beat-that-car-texturing2

Pour pouvoir modifier les valeurs directement dans le jeu et permettre plus de flexibilité, nous sommes allés un peu plus loin et avons créé plus de cartes pour chaque voiture.

Nous avons d'abord attribué trois couleurs pour définir le niveau souhaité de reflets / rugosité des pièces de la voiture: blanc pour les vitres, gris pour la peinture et noir pour tout le reste. Nous avons ensuite exporté cette carte en tant que masque de peinture et l'avons utilisée dans Hydra (notre cadre interne) pour donner à la peinture une couche transparente réaliste et des reflets sur les fenêtres.

Lorsque cela était possible, nous avons exporté les cartes de couleur de base avec une couleur de peinture blanche sur la voiture. En utilisant à la fois ces cartes de couleurs de base et le masque de peinture précédemment exporté, nous avons pu modifier complètement la couleur de peinture de la voiture. Enfin, nous avons créé deux autres cartes pour les feux de la voiture. Un pour les phares et les feux arrière, et un second pour les feux de freinage.

Acura

Construire les pistes

Avec les voitures qui prenaient forme, nous devions également construire les pistes. C'est-à-dire … créer six pistes d'une durée de 30 à 60 secondes chacune et chacune dans son propre style. Pour ce faire, nous nous sommes fortement appuyés sur le placement procédural des actifs environnementaux. Nous avons commencé en dessinant la spline de piste initiale dans Cinema4D et en la testant pour nous assurer qu'elle fonctionnait bien. Nous avons ensuite introduit ces mêmes données splines dans plusieurs objets cloneurs pour générer des bâtiments aléatoires et d'autres accessoires d'environnement aux abords de la piste. Bien que cela n'ait généralement pas abouti à un environnement soigné du premier coup, il a fourni une base solide pour nos artistes sur lesquels s'appuyer. Ce fut finalement un énorme gain de temps.

Acura
Les bâtiments ont été placés de manière procédurale à l'aide d'objets cloneurs Cinema4D.

Pour extraire les accessoires d'environnement de Cinema4D et les intégrer à la build, nous avons écrit un pipeline de script personnalisé qui exporterait les données de position, de rotation et d'échelle pour chaque accessoire et les recréerait en tant qu'instances au moment de l'exécution. Nous avons également exporté des attributs supplémentaires sur chaque accessoire afin de pouvoir ajouter des variations de couleur et d'échelle dans le shader si nécessaire.

Le terrain de la plage, par exemple, a été créé en dupliquant des centaines de fois un maillage rocheux unique.

Étant donné que la réduction de la taille du fichier était une priorité, nous avons utilisé des maillages instanciés non seulement pour les accessoires d'environnement, mais pour le terrain lui-même. Le terrain de la plage, par exemple, a été créé en dupliquant des centaines de fois un maillage rocheux unique. Cette technique nous a permis de générer de grands paysages à un coût de téléchargement minimal, en tirant souvent de grandes portions de terrain sur un seul actif de 10 Ko.

Acura
De nombreuses instances d'un seul rocher peuvent créer efficacement un terrain assez convaincant

Interface utilisateur différente pour chaque niveau

Étant donné que nous étions très tôt tombés amoureux de l'idée de différents styles graphiques pour chaque niveau, au moment où il est arrivé à l'interface utilisateur, nous avions du pain sur la planche. Non seulement nous avions des ambiances différentes pour chaque piste et voiture, mais nous devions également personnaliser les traitements pour les écrans auxiliaires tels que le tutoriel, le classement, le compteur de vitesse, l'écran de pause et le partage.

grille d'acura-beat-that-ui
Différents styles graphiques pour chaque niveau.

Dans cet esprit, nous avons essayé de rester fidèles à un objectif de haut niveau de limiter le temps que les développeurs passeraient à intégrer la conception (malheureusement, ils ne voulaient pas travailler 50 heures par jour)

Heureusement, étant donné que l'expérience était plus un jeu vidéo qu'un site Web de contenu, nous n'avions pas besoin d'une approche entièrement réactive et pouvions passer à l'échelle de chaque écran, ce qui réduisait considérablement le temps passé sur eux. De plus, étant donné que notre équipe de conception utilise Figma, nous avons pu tirer parti de l'API de plug-in de Figma – un autre gain de temps.

Nous avons fini par créer un plugin Figma personnalisé utilisé pour exporter des plans de travail dans notre système de mise en page de l'interface utilisateur du moteur WebGL. Cela incluait la position et la taille de l'élément "boxes", ainsi que les paramètres de texte pour le rendu des polices MSDF.

acura-beat-that-plugin2
Plugin Figma personnalisé utilisé pour exporter la conception d'interface utilisateur dans WebGL.

Cela s'intégrait également parfaitement à notre interface graphique de scène WebGL, permettant aux développeurs et aux concepteurs de modifier et de modifier les paramètres et de gérer les shaders personnalisés de chaque composant.

aperçu-équipe-matériaux-centrale

Bien que le style soit différent, chaque piste du jeu avait les mêmes écrans d'interface utilisateur essentiels – et nous avons essayé d'en tenir compte dans notre processus d'interface utilisateur. Nous avons séparé chaque implémentation d'écran d'interface utilisateur en un contrôleur et une vue, seule la classe de vue devant être modifiée pour chaque piste (pour ajouter une logique d'animation personnalisée ou différents shaders). Le contrôleur gère toutes les interactions de la même manière, que ce soit la première ou la dernière piste.

La navigation n'a pas été facile …

Bien qu'ils contribuent souvent à l'efficacité, de nouveaux outils et workflows introduisent également naturellement de nouveaux problèmes qui doivent être corrigés. Dans un cas, nous avons dû créer des wireframes optimisés pour l'exportation pour quelques écrans complexes, où les dégradés, les remplissages et d'autres effets interféreraient avec l'exportateur.

acura-beat-that-exportateur

Un autre problème était la différence entre les paramètres de police (espacement des lettres et taille) dans Figma et leur apparence une fois rendue dans WebGL avec MSDF. Notre solution a été de créer un outil d'étalonnage des polices qui nous a permis de choisir des multiplicateurs de paramètres corrects pour chaque police. Ceci est maintenant enregistré dans notre base de données de projets, ce qui signifie que si nous avons besoin de la même solution à l'avenir, elle sera prête.

acura-beat-that-font-spacing

Propulsé par .. Notre technologie backend

Sur le backend, Google Cloud Firestore, Cloud Functions et Cloud Storage ont été utilisés pour garder une trace des temps de course et des données de voitures fantômes pour les défis virtuels, ainsi que des classements quotidiens et absolus pour chaque piste. Des images de partage personnalisées ont été générées, y compris le temps à battre. L'API Web Share a été utilisée pour partager des liens de la même manière que les applications natives.

acura-beat-that-dynamic-share

Le jeu a été déployé sur le Web et sur Facebook en tant que jeu instantané.

La ligne d'arrivée

Ce projet était difficile sur plusieurs fronts; des détails spécifiques des modèles de voitures au calendrier de production global. Nous sommes fiers d'avoir eu l'opportunité de travailler sur un concept aussi génial pour une marque passionnante, démontrant comment les personnes, les outils et les processus d'Active Theory se combinent pour mettre en valeur le potentiel de la technologie Web.

Acura

Information d'entreprise

Active Theory est un studio de production numérique créatif avec des bureaux à Los Angeles et Amsterdam. En savoir plus sur leur site ici.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *