Quelle absurdité, pensez-vous. Quel genre de mots insignifiants? Mais, hélas ou acclamations - quelqu'un comme ça, aujourd'hui ce n'est pas un non-sens, mais une réalité. L'article portera sur un jeu que j'ai écrit pour Instagram dans lequel votre visage est utilisé comme contrôleur, ou plutôt non seulement, mais parfois toute la tête. Se déplacer sur le terrain de jeu se fait en tournant et en inclinant la tête, et le choix de l'action consiste à ouvrir la bouche ou à double-cliquer (clignoter) des yeux. Un double clignotement mériterait probablement de l'appeler ...Oh brave nouveau monde! Les hipsters du futur développeront probablement des scripts pour générer une belle fumée colorée derrière leurs capsules spatiales légères ou écrire des shaders pour donner des effets visuels intéressants aux portes noires d'un téléport personnel, comme des flocons de neige qui tombent (Web 100.0) ou du brouillard fractal (WebGL 100.0) ou ... Non, peut-être Je n'ai pas assez d'imagination pour imaginer à quel genre de bêtises nous pourrions faire face à l'avenir: j'essaie de penser de manière trop logique. Mais il y a une trentaine d'années, nous n'aurions certainement pas pensé, en aucun cas, que nous créerions aujourd'hui des masques pour un réseau social appelé Instagram. Et en plus, à l'intérieur de ces masques, des jeux à part entière apparaîtront. Je suis devenu effrayé et intéressant. Dans l'ensemble, effrayant intéressant. Et, comme vous l'avez déjà compris, je n'ai pas pu résister et j'ai également écrit un tel jeu.Bien sûr, pour y jouer, vous devez disposer d'un smartphone sur Android ou iOS avec une caméra frontale et l'application Instagram installée.Ce jeu est Tic Tac Toe. En général, c'est l'un des premiers jeux que j'ai créés dans ma vie, et peut-être même le tout premier - je ne m'en souviens plus maintenant. Mais je l'ai écrit en Pascal, puis j'ai glissé cet ancien algorithme dans Delphi. Après cela, le jeu, bien sûr, est également apparu sur le Web, sur mon site Web: eh bien, où sur votre page personnelle sans votre propre tic-tac-toe ... Et maintenant, il est temps de mettre ce jeu épique sur Instagram. En général, si j'étais un poignard ou un tac toe dans ce jeu (plutôt, probablement un orteil), je pourrais en dire beaucoup sur ma longue et intéressante vie ...De quel genre de masques s'agit-il?
Pour commencer - une brève digression historique. Les masques sur Instagram sont apparus grâce à l'équipe biélorusse qui a développé l'application selfie MSQRD. Après le rachat de cette application par Facebook, l'équipe de la société a continué d'intégrer sa technologie dans les produits Facebook. Il y avait donc une plate-forme offrant des fonctionnalités de réalité augmentée, Spark AR. En août 2019, la plateforme a quitté le statut bêta et est devenue accessible à tous les utilisateurs qui peuvent désormais créer du contenu en réalité augmentée pour Facebook et Instagram.Les masques ont été conçus comme des filtres pour donner des effets amusants à leur physionomie avec le placement ultérieur d'un selfie sur un réseau social. Quant aux jeux masqués, je n'en ai pas trouvé autant. Il y a un Flying Face, un analogue de Flappy Bird, où un oiseau vole à travers l'écran, et vous devez l'empêcher de s'écraser sur les obstacles, de clignoter au bon moment. J'ai également vu un jeu où vous devez attraper la nourriture qui tombe de haut en bas. Un tireur comme Invaders. Et un coureur 3D où un personnage court le long d'une rue de la ville et saute par-dessus les obstacles. Il y en a peut-être d'autres. En général, le sujet est assez nouveau.Le processus de création de contenu se déroule dans l'environnement de développement Spark AR Studio, qui peut être téléchargé gratuitement pour Windows. En outre, il vaut la peine de télécharger l'application Spark AR Player pour tester les effets que vous créez sur les appareils mobiles Andrioid ou iOS, auxquels ces effets sont, en fait, destinés. La connexion à l'ordinateur se fait via un câble USB, du moins dans mon cas avec un smartphone Android. Après avoir téléchargé le masque via le composant Facebook / sparkarhub et passé la modération, votre masque (ou jeu) sera disponible pour tous les utilisateurs d'Instagram depuis Internet. Le masque peut être obtenu par lien direct ou depuis la page de son créateur sur Instagram.Comprendre comment travailler dans Spark AR Studio n'est pas du tout difficile. Je ne m'attarderai pas là-dessus en détail, d'autant plus qu'Internet regorge de leçons sur ce sujet. Je note seulement qu'il y a deux façons de développer une application plus ou moins interactive qui implique quelque chose de plus que simplement appliquer une sorte de sprite statique au visage: cela crée les soi-disant correctifs et écrit des scripts. La première méthode ressemble visuellement à l'utilisation de matériaux dans un éditeur 3D, et la seconde consiste simplement à programmer en Javascript à l'aide d'une API spécialisée. J'ai choisi la deuxième option. Cependant, personne n'interdit de combiner les deux méthodes: à partir des scripts, il est possible d'accéder à tout ce qui se passe dans les correctifs.Arts graphiques
Donc, pour commencer, ce serait bien de créer des éléments graphiques qui seront utilisés dans le jeu. Ouvrez votre programme de modélisation 3D préféré et créez. J'utilise Blender. En principe, vous pouvez créer des sprites séparés, puis leur demander une logique de comportement à l'aide de Spark AR et ne pas utiliser l'éditeur 3D du tout. Mais j'ai décidé de faire des figures volumineuses de croix et d'orteils, donc je ne pouvais pas me passer d'un tel éditeur.La première chose à faire est de créer une texture 2D. Combinez toutes les textures dans un seul atlas.Texture satinMaintenant sur les modèles 3D. En tant qu'espace de jeu 3D, un plan de deux triangles est utilisé, sur lequel le marquage de champ est étiré (voici ce grand fragment de maillage de l'atlas de texture). L'atlas lui-même est doté d'un canal alpha transparent. 9 carrés bleus, composés également de deux triangles chacun, seront insérés dans le champ. De plus, en plus des neuf bleus, le modèle 3D contiendra dans les mêmes coordonnées 9 carrés verts et rouges qui seront cachés au début du jeu. Cela signifie que dans l'état normal, la couleur de tous les carrés du champ est bleue et que le vert et le rouge sont utilisés comme curseur pour sélectionner la position dans laquelle vous souhaitez définir une croix ou un zéro, respectivement. De plus, le vert et le rouge sont utilisés pour mettre en évidence la rangée gagnante de trois cellules à la fin de chaque tour. Il suffirait, bien sûr,utilisez 9 carrés bleus et seulement 3 carrés verts et rouges, mais alors vous devrez, en plus de montrer / masquer, leur donner une sorte de logique de mouvement. Il me semblait que les cacher et les afficher sans aucune manipulation des coordonnées dans l'espace serait plus facile, et le modèle 3D le chargerait de manière insignifiante.
Importer dans Spark AR Studio
Tout d'abord, lancez Spark AR Studio et importez-y des modèles 3D. Ils apparaîtront dans la liste des actifs en bas à gauche. Dans le même temps, nous créerons pour nous-mêmes un masque thématique avec de la peinture de guerre sous la forme de «tatouages» de croix et d'orteil sur le visage. Vous pouvez apprendre comment créer un masque texturé à partir de milliers de leçons dans le réseau mondial ou à partir de la documentation officielle sur la plate-forme, je ne me concentrerai pas sur cela. En bref: téléchargez le "vide", ouvrez-le dans votre éditeur graphique préféré, dessinez quelque chose sur le dessus, enregistrez, importez l'image dans Spark AR Studio, ajustez les paramètres de matière et de texture.
Programmation
Au début du script, connectez les modules dont nous avons besoin dans ce projet. Il s'agit d'une scène, d'un suivi de visage, de modules pour travailler avec le temps, le son et l'animation.const Scene = require('Scene');
const FaceTracking = require('FaceTracking');
const Time = require('Time');
const Audio = require('Audio');
const Animation = require('Animation');
Il existe de nombreuses façons d'implémenter tic-tac-toe en Javascript. Cet article ne concerne pas l'implémentation de ce jeu dans un langage de programmation donné, mais la gestion avec l'aide d'une personne. Je décrirai les points clés spécifiques à l'interaction avec le système Spark AR afin que le principe soit compris.Accès au fragment nommé du modèle 3D (maillage), par exemple, au carré bleu de la première ligne, deuxième colonne du terrain de jeu:Scene.root.find('b12');
(Rappel b12 - c'est ainsi que nous avons appelé ce maillage dans l'éditeur 3D.)Accès à la croix à cette position:Scene.root.find('x12');
Cacher un orteil (o), mettre une croix (x) et colorier en vert (g) les cellules du champ '32' (troisième rangée, deuxième colonne):
Scene.root.find('o32').hidden = true;
Scene.root.find('x32').hidden = false;
Scene.root.find('b32').hidden = true;
Scene.root.find('g32').hidden = false;
Scene.root.find('r32').hidden = true;
Croix verte avec rétro-éclairage vert dans le champ «32».Abonnez-vous aux événements de rotation et d'inclinaison de la tête pour vous déplacer dans le champ.
FaceTracking.face(0).cameraTransform.rotationX.monitor().subscribe(function(event) {
var v = event.newValue;
...
});
FaceTracking.face(0).cameraTransform.rotationY.monitor().subscribe(function(event) {
var v = event.newValue;
...
});
Ici, tout est très simple. Nous prenons de l'événement les valeurs de la rotation ou de l'inclinaison de la tête (event.newValue) et vérifions si elles sont hors d'une certaine plage. Si oui, déplacez visuellement le curseur (case verte) dans la direction souhaitée. Une valeur négative de la rotation de la tête correspond à sa rotation à gauche, positive - à droite. De même - pour incliner la tête d'avant en arrière pour se déplacer le long des lignes. La plage entière va de -1 à +1. Ainsi, vous pouvez implémenter le mouvement du curseur et ...Et puis il m'est apparu
J'ai soudain réalisé que contrôler le curseur sur le champ de la manière que je choisissais n'était pas pratique: vous devez tourner la tête pour déplacer une cellule, puis remettre votre tête dans sa position d'origine, puis la tourner à nouveau pour l'étape suivante et ainsi de suite. Et pourquoi ne pas simplement utiliser les valeurs fractionnaires de tourner la tête sur les côtés et d'incliner d'avant en arrière afin de se concentrer immédiatement sur la cellule souhaitée sur le terrain? Autrement dit, comment indiquer au curseur sa position avec un regard, ou plutôt, avec la direction de la tête. Et puis la première méthode est un entraînement trop dur pour le cou. L'éducation physique est bien sûr bonne, mais pas dans la même mesure. Naturellement, nous nous souviendrons de la position actuelle quelque part dans ap.cur = {x: 1, y: 1} afin d'effacer le curseur à la position précédente et de sauvegarder les coordonnées de la nouvelle position, qui est ensuite nécessaire pour le «clic». Au faitles flèches visuelles pour indiquer la direction du mouvement du curseur ne sont plus nécessaires: nous lançons un modèle 3D (arrows.fbx) du projet. Vous pouvez également effacer l'image de la flèche de la texture.Double clignement?
Et maintenant, nous sommes arrivés au plus intéressant. Double-cliquez sur les yeux. Avouez-le, vous vouliez le faire à partir du moment où vous en avez eu connaissance au début de l'article? Vous allez maintenant dire à vos amis que la souris est déjà dépassée et que le double clignotement est utilisé pour un clic aujourd'hui! Double clignotement. Pourquoi doubler? Tout est simple: une seule personne le fait périodiquement de manière involontaire, donc suspendre tous les événements en un seul clin d'œil serait du sadisme.Dans Spark AR, il existe des événements leftEye.openness et rightEye.openness, en vous abonnant, vous pouvez obtenir la valeur d'ouverture de chaque œil dans event.newValue dans la plage de 0 à 1. Nous considérerons l'œil fermé avec une valeur inférieure à 0,1. Et nous appellerons la fonction de traitement des clignements ap.blink1 () (ap est un espace de noms, c'est juste plus pratique pour moi).
FaceTracking.face(0).leftEye.openness.monitor().subscribe(function(event) {
if (event.newValue < 0.1) {
ap.blink1();
};
});
FaceTracking.face(0).rightEye.openness.monitor().subscribe(function(event) {
if (event.newValue < 0.1) {
ap.blink1();
};
});
Dans la fonction de traitement des clignotements elle-même, nous définissons l'intervalle minimum entre les clignotements de 200 millisecondes afin que cette fonction ne fonctionne pas immédiatement deux fois lors du clignotement avec les deux yeux, car son appel est suspendu sur chaque œil. Je pense que c'est clair. De plus, nous définissons le temps maximum de double clignotement - 1 sec. Si nous nous situons dans cette plage, la fonction action () fonctionnera, qui affiche la croix à la position actuelle. Dans le même temps, nous accrocherons l'action () à l'événement bouche.ouverture - afin que le joueur ait le choix de mettre une croix en double clignotant ou en ouvrant la bouche.blink1:function () {
var tmNew = Date.now();
if (tmNew - ap.blinkStart > 200) {
ap.blinkCount++;
if (ap.blinkCount > 1) {
if (tmNew - ap.blinkStart < 1000) {
ap.action();
};
ap.blinkCount = 0;
ap.blinkStart = 0;
} else {
ap.blinkStart = tmNew;
};
};
},
action:function() {
if (ap.fProc == false) {
ap.fProc = true;
xo.putx();
};
},
FaceTracking.face(0).mouth.openness.monitor().subscribe(function(event) {
if (event.newValue > 0.2) {
ap.action();
};
});
Des sons
Je les ai trouvés dans les sections libres de droits de divers sites d'effets sonores. Détail important: Spark AR nécessite des fichiers audio d'un certain format, à savoir M4A, mono, 44,1 kHz, 16 bits. Les convertisseurs en ligne de wav et mp3 en m4a sont en stock dans le réseau mondial. J'ai ajouté du son à quatre événements: bouger, gagner des poignards, gagner du tac toe et tirer. Le volume total de tous les sons après conversion était de 105 Ko.Pour utiliser des sons dans un script, vous devez connecter un module audio dans le script, ajouter le nombre souhaité de haut-parleurs à la scène par le nombre de sons (j'ai obtenu Speaker0, Speaker1, Speaker2, Speaker3), ajouter le module Playback Controllers aux actifs, créer le nombre nécessaire de sous-éléments audioPlaybackController en fonction du nombre de sons et attachez un son à chaque enceinte.Après cela, vous pouvez lire le son du script comme suit (par exemple, le son d'un clic):var audioClick = Audio.getPlaybackController('audioPlaybackControllerClick');
audioClick.reset();
audioClick.setPlaying(true);
Version finale
Pour créer des versions pour tous les appareils mobiles pris en charge (Android, iOs), cliquez simplement sur Fichier -> Exporter. Le volume du jeu pour chaque plate-forme mobile avec tous les modèles et textures 3D dans mon cas était d'environ 1 Mo. Ensuite, vous devez passer par le navigateur pour le Spark AR Hub sur Facebook / sparkarhub et y télécharger le fichier exporté. Vous devez également remplir une description, rechercher des mots clés et télécharger une vidéo de démonstration. De plus, il doit être filmé au téléphone via la caméra Instagram. Pour ce faire, dans le hub il y a une section "Aperçu de la caméra" contenant un lien. Ce lien peut être ouvert sur un appareil mobile. L'application Instagram démarrera et votre masque (jeu) s'y ouvrira. Le lien peut également être envoyé pour test à tous vos amis, qui, bien sûr, doivent avoir un smartphone avec l'application Instagram installée.Jusqu'à la fin du processus de modération, le masque ne sera pas visible par tous les utilisateurs et ils ne pourront pas l'ajouter à leur liste d'effets tant qu'il ne sera visible que par ce lien.Le processus de modération prend généralement quelques jours (cela peut prendre jusqu'à 10 jours ouvrables). Si je comprends bien, au début, l'effet est soumis à des tests de machine, au moins une vidéo de démonstration - bien sûr, car une seconde après l'envoi, j'ai reçu un message indiquant que la modération n'a pas réussi. Raison - la vidéo contient du texte. En général, pour une raison quelconque, le texte masqué n'est fondamentalement pas le bienvenu, comme le disent les règles. J'ai dû repenser l'interface de jeu afin que le score ne pende pas constamment au-dessus de la tête du joueur, comme je l'avais fait auparavant, mais n'apparaisse qu'à la fin de chaque manche. Et reprenez la vidéo. Après avoir fait tous les changements, j'ai soumis à nouveau mon jeu pour modération.Trois jours plus tard, le jeu a été approuvé, après l'avoir déplacé dans la section «Styles de caméra». Honnêtement, je ne me souviens pas dans quelle section je l'ai placée initialement (et la section, ou, en d'autres termes, la catégorie, devait être sélectionnée). Ce n'est pas évident, car il n'y a pas de section de jeux pour Instagram. Mais bon, maintenant nous saurons où mettre de nouveaux jeux. Si les jeux apparaissent à l'avenir, alors, Instagram devrait probablement ajouter une nouvelle section.Total
Vous pouvez essayer un masque en allant sur le profil de son créateur sur Instagram et en cliquant sur l'icône de ses masques ci-dessous (émoticône avec deux plus). Il en va de même, bien entendu, pour les jeux masqués. Auparavant, lors des tests bêta des masques, il était également nécessaire de souscrire à l'auteur. Mais maintenant, cette règle a été annulée.Ils ne paient pas d'argent pour créer des masques et il n'y a pas de magasin de masques payés où ils peuvent être vendus, comme les applications dans les magasins bien connus. De plus, vous n'avez pas besoin de payer pour le placement du masque que vous avez créé dans votre profil. Il suffit d'attendre le passage de la modération. Cependant, de nombreux blogueurs et entreprises commandent le développement de masques de marque pour eux-mêmes. Bien sûr, vous pouvez demander à vos abonnés d'essayer les masques que vous avez créés et de jouer à vos jeux, en diffusant tout cela sur Instagram. De telles actions peuvent produire un effet dit viral, surtout si le jeu est intéressant. Cela peut aider à promouvoir votre compte. Cependant, maintenant tout le monde n'est pas trop paresseux pour faire des masques. Mais l'idée des jeux masqués Instagram est encore assez nouvelle. De plus, il y a un seuil d'entrée plus élevé et moins de concurrence,car tous les fabricants de masques ne sont pas programmeurs pour écrire un jeu à part entière.