Qué tontería, piensas. ¿Qué tipo de conjunto de palabras sin sentido? Pero, por desgracia o aplausos, alguien así, hoy esto no es una tontería, sino la realidad. El artículo tratará sobre un juego que escribí para Instagram en el que tu cara se usa como controlador, o más bien, no solo eso, sino a veces toda la cabeza. Moverse por el campo de juego se lleva a cabo girando e inclinando la cabeza, y la elección de la acción es abriendo la boca o haciendo doble clic en los ojos (parpadeando). El doble parpadeo probablemente valdría la pena llamarlo ...¡Oh, valiente mundo nuevo! Probablemente, los hipsters del futuro desarrollarán guiones para generar humo hermoso y colorido detrás de sus cápsulas espaciales livianas o escribir sombreadores para dar efectos visuales interesantes a las puertas negras de un teletransporte personal, como copos de nieve cayendo (Web 100.0) o niebla fractal (WebGL 100.0) o ... No, tal vez No tengo suficiente imaginación para imaginar qué tipo de tonterías podríamos enfrentar en el futuro: trato de pensar demasiado lógicamente. Pero hace unos 30 años, ciertamente, en ningún sueño, bajo ninguna circunstancia, podríamos haber pensado que hoy crearemos máscaras para una red social llamada Instagram. Y lo que es más, dentro de estas máscaras aparecerán juegos completos. Me asusté e interesante. En general, aterrador interesante. Y, como ya entendiste, no pude resistirme y también escribí un juego así.Por supuesto, para jugarlo, debes tener un teléfono inteligente en Android o iOS con una cámara frontal y la aplicación de Instagram instalada.Este juego es Tic Tac Toe. En general, este es uno de los primeros juegos que creé en mi vida, y tal vez incluso el primero. Simplemente no lo recordaré ahora. Pero lo volví a escribir en Pascal, luego arrastré ese viejo algoritmo a Delphi. Después de eso, el juego, por supuesto, también apareció en la web, en mi sitio web: bueno, en tu página personal sin tu propio tic-tac-toe ... Y ahora es el momento de poner este épico juego en Instagram. En general, si fuera una daga o un tac toe en este juego (más bien, probablemente un dedo del pie), podría contar mucho sobre mi larga e interesante vida ...¿Qué tipo de máscaras son estas?
Para empezar, una breve digresión histórica. Las máscaras en Instagram aparecieron gracias al equipo bielorruso que desarrolló la aplicación para selfies MSQRD. Después de que Facebook compró esta aplicación, el equipo de la corporación continuó integrando su tecnología en los productos de Facebook. Así que había una plataforma que ofrecía funciones de realidad aumentada, Spark AR. En agosto de 2019, la plataforma dejó el estado beta y estuvo disponible para todos los usuarios que ahora pueden crear contenido de realidad aumentada para Facebook e Instagram.Las máscaras fueron concebidas como filtros para dar efectos divertidos a su fisonomía con la posterior colocación de una selfie en una red social. En cuanto a los juegos enmascarados, no encontré tantos. Hay una Flying Face, un análogo de Flappy Bird, donde un pájaro vuela por la pantalla, y debes evitar que se estrelle contra obstáculos, parpadeando en los momentos correctos. También vi un juego en el que debes atrapar la comida que cae de arriba a abajo. Un tirador como Invaders. Y un corredor 3D donde un personaje corre por una calle de la ciudad y salta obstáculos. Quizás hay algunos más. En general, el tema es bastante nuevo.El proceso de creación de contenido tiene lugar en el entorno de desarrollo de Spark AR Studio, que se puede descargar para Windows de forma gratuita. Además, vale la pena descargar la aplicación Spark AR Player para probar los efectos que crea en dispositivos móviles Andrioid o iOS, para los cuales, de hecho, estos efectos están destinados. La conexión a la computadora es a través de un cable USB, al menos en mi caso con un teléfono inteligente Android. Después de descargar la máscara a través del componente Facebook / sparkarhub y pasar la moderación, su máscara (o juego) estará disponible para todos los usuarios de Instagram desde Internet. La máscara se puede obtener por enlace directo o desde la página de su creador en Instagram.Comprender cómo trabajar en Spark AR Studio no es nada difícil. No me detendré en esto en detalle, especialmente porque Internet está lleno de lecciones sobre este tema. Solo notaré que hay dos formas de desarrollar una aplicación más o menos interactiva que implique algo más que simplemente aplicar algún tipo de sprite estático en tu cara: crear los llamados parches y escribir scripts. El primer método se asemeja visualmente al trabajo con materiales en un editor 3D, y el segundo es simplemente programar en Javascript usando una API especializada. Elegí la segunda opción. Sin embargo, nadie prohíbe combinar ambos métodos: desde los scripts existe la posibilidad de acceder a todo lo que sucede en los parches.Artes graficas
Entonces, para empezar, sería bueno crear algunos elementos gráficos que se usarán en el juego. Abra su programa de modelado 3D favorito y cree. Estoy usando Blender En principio, puede crear sprites separados, y luego pedirles algo de lógica de comportamiento usando Spark AR y no usar el editor 3D en absoluto. Pero decidí hacer figuras voluminosas de cruces y dedos de los pies, por lo que no podría prescindir de tal editor.Lo primero que debe hacer es crear una textura 2D. Combina todas las texturas en un atlas.Textura satinadaAhora sobre modelos 3D. Como un espacio de juego en 3D, se usa un plano de dos triángulos, en el que se estira la marca de campo (aquí está ese gran fragmento de malla del atlas de textura). El atlas en sí es con un canal alfa transparente. Se insertarán 9 cuadrados azules, que también consisten en dos triángulos cada uno, en el campo. Además, además de los nueve azules, el modelo 3D contendrá en las mismas coordenadas 9 cuadrados verdes y rojos que estarán ocultos al comienzo del juego. El significado es que, en el estado normal, el color de todos los cuadrados del campo es azul, y el verde y el rojo se utilizan como cursor para seleccionar la posición en la que desea establecer una cruz o un cero, respectivamente. Además, el verde y el rojo se usan para resaltar la fila ganadora de tres celdas al final de cada ronda. Sería suficiente, por supuesto,usa 9 cuadrados azules y solo 3 cuadrados verdes y rojos, pero luego deberías, además de mostrar / ocultar, establecer algún tipo de lógica de movimiento. Me pareció que ocultarlos y mostrarlos sin ninguna manipulación de las coordenadas en el espacio sería más fácil, y el modelo 3D lo cargaría de manera insignificante.
Importar a Spark AR Studio
Primero, inicie Spark AR Studio e importe modelos 3D allí. Aparecerán en la lista de activos en la parte inferior izquierda. Al mismo tiempo, crearemos para nosotros una máscara temática con pintura de guerra en forma de "tatuajes" de una cruz y un dedo del pie en la cara. Puede aprender sobre cómo crear una máscara texturizada a partir de miles de lecciones en la red global o de la documentación oficial en la plataforma, no me enfocaré en esto. En resumen: descargue el "espacio en blanco", ábralo en su editor de gráficos favorito, dibuje algo en la parte superior, guarde, importe la imagen en Spark AR Studio, ajuste los parámetros de material y textura.
Programación
Al comienzo del script, conecte los módulos que necesitamos en este proyecto. Esta es una escena, seguimiento de rostros, módulos para trabajar con tiempo, sonido y animación.const Scene = require('Scene');
const FaceTracking = require('FaceTracking');
const Time = require('Time');
const Audio = require('Audio');
const Animation = require('Animation');
Hay muchas formas de implementar tic-tac-toe en Javascript. Este artículo no trata de implementar este juego en un lenguaje de programación dado, sino de administrarlo con la ayuda de una persona. Describiré los puntos clave específicos de la interacción con el sistema Spark AR para que se entienda el principio.Acceda al fragmento con nombre del modelo 3D (malla), por ejemplo, al cuadrado azul en la primera fila, segunda columna del campo de juego:Scene.root.find('b12');
(Recordemos b12: así es como llamamos a esta malla en el editor 3D).Acceda a la cruz en esta posición:Scene.root.find('x12');
Ocultando un dedo del pie (o), estableciendo una cruz (x) y coloreando en verde (g) las celdas del campo '32' (tercera fila, segunda columna):
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;
Cruz verde con luz de fondo verde en el campo '32'.Suscríbase a los eventos de giro e inclinación de la cabeza para moverse por el campo.
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;
...
});
Aquí todo es muy simple. Tomamos del evento los valores de la rotación o inclinación de la cabeza (event.newValue) y verificamos si están fuera de cierto rango. En caso afirmativo, mueva el cursor (cuadro verde) visualmente en la dirección deseada. Un valor negativo de la rotación de la cabeza corresponde a su rotación hacia la izquierda, positiva hacia la derecha. Del mismo modo, para inclinar la cabeza hacia adelante y hacia atrás para moverse a lo largo de las líneas. El rango completo es de -1 a +1. Por lo tanto, puede implementar el movimiento del cursor y ...Y luego caí en la cuenta
De repente me di cuenta de que controlar el cursor en el campo de la manera que elegí era inconveniente: debe girar la cabeza para mover una celda, luego volver la cabeza a su posición original, luego girarla nuevamente para el siguiente paso y así sucesivamente. ¿Y por qué no usar los valores fraccionales de girar la cabeza hacia los lados e inclinarse hacia adelante y hacia atrás para enfocarse inmediatamente en la celda deseada en el campo? Es decir, cómo indicarle al cursor su posición con una mirada, o más bien, con la dirección de la cabeza. Y luego, el primer método es un entrenamiento demasiado duro para el cuello. La educación física es, por supuesto, buena, pero no en la misma medida. Naturalmente, recordaremos la posición actual en algún lugar en ap.cur = {x: 1, y: 1} para borrar el cursor en la posición anterior y guardar las coordenadas de la nueva posición, que posteriormente se necesita para el "clic". Por ciertoYa no se necesitan flechas visuales para indicar la dirección del movimiento del cursor: lanzamos un modelo 3D (arrows.fbx) desde el proyecto. También puede borrar la imagen de la flecha de la textura.Doble parpadeo?
Y ahora llegamos a lo más interesante. Haga doble clic en los ojos. Admítelo, ¿querías hacer esto desde el momento en que te enteraste al principio del artículo? ¡Ahora le dirás a tus amigos que el mouse ya no está actualizado y que el doble parpadeo se usa para hacer clic hoy! Parpadeo doble ¿Por qué doble? Todo es simple: una persona soltera lo hace involuntariamente periódicamente, por lo que colgar cualquier evento en un solo parpadeo sería sadismo.En Spark AR, hay eventos leftEye.openness y rightEye.openness, al suscribirse, puede obtener el valor de apertura de cada ojo en event.newValue en el rango de 0 a 1. Consideraremos el ojo cerrado con un valor inferior a 0.1. Y llamaremos a la función de procesamiento de parpadeo ap.blink1 () (ap es un espacio de nombres, es más conveniente para mí).
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();
};
});
En la función de procesamiento de parpadeo, definimos el intervalo mínimo entre parpadeos de 200 milisegundos para que esta función no funcione inmediatamente dos veces cuando parpadea con ambos ojos, ya que su llamada se cuelga en cada ojo. Creo que está claro. Además, definimos el tiempo máximo de doble parpadeo: 1 seg. Si encajamos en este rango, la función action () funcionará, que muestra la cruz en la posición actual. Al mismo tiempo, colgaremos action () en el evento mouth.openness, para que el jugador tenga la opción de poner una cruz en doble parpadeo o al abrir la boca.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();
};
});
Suena
Los encontré en las secciones libres de regalías de varios sitios de efectos de sonido. Detalle importante: Spark AR requiere archivos de sonido de cierto formato, a saber, M4A, mono, 44.1 kHz, 16 bits. Los convertidores en línea de wav y mp3 a m4a están en stock en la red global. Agregué sonido a cuatro eventos: mover, ganar dagas, ganar tac toe y dibujar. El volumen total de todos los sonidos después de la conversión fue de 105 Kb.Para usar sonidos en un script, debe conectar un módulo de audio en el script, agregar el número deseado de altavoces a la escena por el número de sonidos (obtuve Speaker0, Speaker1, Speaker2, Speaker3), agregar el módulo Playback Controllers a Assets, crear el número necesario de subelementos de audioPlaybackController según el número de sonidos y adjunte un sonido a cada altavoz.Después de eso, puede reproducir el sonido del guión de la siguiente manera (por ejemplo, el sonido de un clic):var audioClick = Audio.getPlaybackController('audioPlaybackControllerClick');
audioClick.reset();
audioClick.setPlaying(true);
Construcción final
Para crear compilaciones para todos los dispositivos móviles compatibles (Android, iOs), simplemente haga clic en Archivo -> Exportar. El volumen del juego para cada plataforma móvil con todos los modelos y texturas 3D en mi caso fue de aproximadamente 1 Mb. Luego, debe ir a través del navegador al Spark AR Hub en Facebook / sparkarhub y cargar el archivo exportado allí. También debe completar una descripción, buscar palabras clave y descargar un video de demostración. Además, debe ser filmado en el teléfono a través de la cámara de Instagram. Para hacer esto, en el centro hay una sección "Vista previa de la cámara" que contiene un enlace. Este enlace se puede abrir en un dispositivo móvil. Se iniciará la aplicación de Instagram y se abrirá tu máscara (juego). El enlace también se puede enviar para probarlo a todos sus amigos, quienes, por supuesto, deben tener un teléfono inteligente con la aplicación de Instagram instalada.Hasta el final del proceso de moderación, la máscara no será visible para todos los usuarios y no podrán agregarla a su lista de efectos hasta que solo sea visible mediante este enlace.El proceso de moderación generalmente toma un par de días (puede tomar hasta 10 días hábiles). Según tengo entendido, al principio el efecto está sujeto a pruebas de máquina, al menos un video de demostración, seguro, porque un segundo después del envío recibí un mensaje de que la moderación no pasó. Motivo: el video contiene texto. En general, por alguna razón, el texto enmascarado no es bienvenido, como dicen las reglas. Tuve que rediseñar la interfaz del juego para que el puntaje no colgara constantemente por encima de la cabeza del jugador, como lo había hecho antes, sino que solo apareció al final de cada ronda. Y vuelva a grabar el video. Después de hacer todos los cambios, volví a presentar mi juego para moderación.Tres días después, el juego fue aprobado, luego de pasarlo a la sección "Estilos de cámara". Honestamente, no recuerdo en qué sección la puse inicialmente (y la sección, o, en otras palabras, la categoría, debía seleccionarse). Esto no es obvio, ya que no hay una sección de juegos para Instagram. Pero, bueno, ahora sabremos dónde poner nuevos juegos. Si los juegos aparecerán en el futuro, entonces, probablemente, Instagram debería agregar una nueva sección.Total
Puede probar una máscara yendo al perfil de su creador en Instagram y haciendo clic en el icono de sus máscaras a continuación (emoticón con dos más). Lo mismo se aplica, por supuesto, a los juegos enmascarados. Anteriormente, durante la prueba beta de máscaras, también era necesario suscribirse al autor. Pero ahora esta regla ha sido cancelada.No pagan dinero por crear máscaras y no hay una tienda de máscaras pagas donde se puedan vender, como aplicaciones en tiendas conocidas. Además, no necesita pagar la ubicación de la máscara que creó en su perfil. Solo es necesario esperar el paso de la moderación. Sin embargo, muchos bloggers y compañías ordenan el desarrollo de máscaras de marca para ellos mismos. Bueno, por supuesto, puedes pedirles a tus suscriptores que se prueben las máscaras que creaste y jueguen tus juegos, transmitiendo todo esto a la historia de Instagram. Tales acciones pueden producir el llamado efecto viral, especialmente si el juego es interesante. Esto puede ayudar a promocionar su cuenta. Sin embargo, ahora todos no son demasiado vagos para hacer máscaras. Pero la idea de los juegos enmascarados de Instagram todavía es bastante nueva. Además, hay un umbral de entrada más alto y menos competencia,ya que no todos los creadores de máscaras son programadores para escribir un juego completo.