📡 📄 📡 Máscaras de jogo voltadas para o rosto no Instagram ou clique duas vezes nos olhos ⭐️ 👏🏽 🚶🏾

Que bobagem, você pensa. Que tipo de conjunto de palavras sem sentido? Mas, infelizmente ou felicidades - alguém assim, hoje isso não é bobagem, mas realidade. O artigo será sobre um jogo que escrevi para o Instagram no qual seu rosto é usado como um controlador, ou melhor, não apenas ele, mas às vezes toda a cabeça. Mover-se pelo campo de jogo é realizado girando e inclinando a cabeça, e a opção de ação é abrir a boca ou dar um duplo clique (piscando) nos olhos. Provavelmente valeria a pena piscar duas vezes ...

Oh admirável mundo novo! Provavelmente, descolados do futuro desenvolverão scripts para gerar bela fumaça colorida por trás de suas cápsulas espaciais leves ou escrever shaders para dar efeitos visuais interessantes aos portões negros de um teleporte pessoal, como flocos de neve caindo (Web 100.0) ou neblina fractal (WebGL 100.0) ou ... Não, talvez Não tenho imaginação suficiente para imaginar que tipo de absurdo poderíamos lidar no futuro: tento pensar muito logicamente. Mas cerca de 30 anos atrás, certamente, em nenhum sonho, sob nenhuma circunstância, poderíamos até pensar que hoje criaremos máscaras para uma rede social chamada Instagram. E além do mais, que dentro dessas máscaras os jogos completos aparecerão. Fiquei assustado e interessante. Em suma, assustador interessante. E, como você já entendeu, eu não pude resistir e também escrevi esse jogo.Obviamente, para reproduzi-lo, você deve ter um smartphone no Android ou iOS com uma câmera frontal e o aplicativo Instagram instalado.

Este jogo é Tic Tac Toe. Em geral, este é um dos primeiros jogos que criei na minha vida, e talvez até o primeiro - não me lembro agora. Mas eu escrevi de volta em Pascal, depois arrastei esse antigo algoritmo para o Delphi. Depois disso, o jogo, é claro, também apareceu na web, no meu site: bem, em sua página pessoal sem seu tic-tac-toe pessoal ... E agora é hora de colocar esse jogo épico no Instagram. Em geral, se eu fosse um punhal ou um tac toe neste jogo (provavelmente um dedo do pé), poderia contar muito sobre minha longa e interessante vida ...

Que tipo de máscaras são essas?

Para começar - uma breve digressão histórica. As máscaras no Instagram apareceram graças à equipe bielorrussa que desenvolveu o aplicativo selfie MSQRD. Depois que o aplicativo foi comprado pelo Facebook, a equipe da corporação continuou a integrar sua tecnologia aos produtos do Facebook. Portanto, havia uma plataforma que oferecia recursos de realidade aumentada, Spark AR. Em agosto de 2019, a plataforma deixou o status beta e ficou disponível para todos os usuários que agora podem criar conteúdo de realidade aumentada para o Facebook e o Instagram.

As máscaras foram concebidas como filtros para dar efeitos engraçados à sua fisionomia com a subsequente colocação de uma selfie em uma rede social. Quanto aos jogos mascarados, não encontrei tantos. Existe um Flying Face, um análogo do Flappy Bird, onde um pássaro voa pela tela, e você precisa impedir que colidir com obstáculos, piscando nos momentos certos. Eu também vi um jogo em que você precisa pegar comida caindo da boca de cima para baixo. Um atirador como Invaders. E um corredor 3D onde um personagem corre ao longo de uma rua da cidade e pula obstáculos. Talvez haja mais um pouco. Em geral, o tópico é bastante novo.

O processo de criação de conteúdo ocorre no ambiente de desenvolvimento Spark AR Studio, que pode ser baixado gratuitamente no Windows. Além disso, vale a pena fazer o download do aplicativo Spark AR Player para testar os efeitos que você cria em dispositivos móveis Andrioid ou iOS, para os quais esses efeitos são, de fato, destinados. A conexão com o computador é via cabo USB, pelo menos no meu caso com um smartphone Android. Depois de baixar a máscara através do componente Facebook / sparkarhub e passar a moderação, sua máscara (ou jogo) estará disponível para todos os usuários do Instagram da Internet. A máscara pode ser obtida por link direto ou na página de seu criador no Instagram.

Não é difícil entender como trabalhar no Spark AR Studio. Não vou me debruçar sobre isso em detalhes, principalmente porque a Internet está cheia de lições sobre esse tópico. Observo apenas que há duas maneiras de desenvolver um aplicativo mais ou menos interativo que envolve algo mais do que apenas aplicar algum tipo de sprite estático no rosto: isso é criar os chamados patches e escrever scripts. O primeiro método se assemelha visualmente ao trabalho com materiais em um editor 3D, e o segundo é apenas a programação em Javascript usando uma API especializada. Eu escolhi a segunda opção. No entanto, ninguém proíbe combinar os dois métodos: a partir dos scripts, existe a possibilidade de acessar tudo o que está acontecendo nos patches.

Artes gráficas

Então, para iniciantes, seria bom criar alguns elementos gráficos que serão usados no jogo. Abra seu programa de modelagem 3D favorito e crie. Estou usando o Blender. Em princípio, você pode criar apenas sprites separados e perguntar a eles alguma lógica de comportamento usando o Spark AR e não usar o editor 3D. Mas eu decidi fazer figuras volumosas de cruzes e dedos do pé, para que eu não pudesse prescindir desse editor.

A primeira coisa a fazer é criar uma textura 2D. Combine todas as texturas em um atlas.

Cetim de textura

Agora sobre modelos 3D. Como espaço 3D do jogo, é usado um plano de dois triângulos, no qual a marcação de campo é esticada (aqui está aquele fragmento de malha grande do atlas de textura). O atlas em si está com um canal alfa transparente. 9 quadrados azuis, também constituídos por dois triângulos cada, serão inseridos no campo. Além disso, além dos nove azuis, o modelo 3D conterá nas mesmas coordenadas 9 quadrados verdes e vermelhos que estarão ocultos no início do jogo. O significado é que, no estado normal, a cor de todos os quadrados do campo é azul e verde e vermelho são usados como cursor para selecionar a posição em que você deseja definir uma cruz ou um zero, respectivamente. Além disso, verde e vermelho são usados para destacar a linha vencedora de três células no final de cada rodada. Seria o suficiente, é claro,use 9 quadrados azuis e apenas 3 quadrados verdes e vermelhos, mas você precisará, além de mostrar / ocultar, definir algum tipo de lógica de movimento. Pareceu-me que apenas escondê-los e exibi-los sem nenhuma manipulação das coordenadas no espaço seria mais fácil, e o modelo 3D o carregaria de forma insignificante.

O campo de jogo

No jogo, as posições de três quadrados em cada um dos nove grupos, é claro, coincidem. Aqui, eu apenas os espalhei verticalmente em uma das células para demonstrar claramente em que consiste o modelo 3D como um todo. Observe que as caixas recebem nomes (na figura à direita) de uma certa maneira: de b11 a b33, de g11 a g33 e de r11 a r33, em que cada dígito muda no intervalo de 1 a 3. Em outras palavras, a letra indica uma cor, e os números são a linha e a coluna. É necessário acessar as caixas (malhas, na terminologia 3D) pelos nomes do script, para que seja conveniente ocultá-las e exibi-las.

Depois modelei as figuras das cruzes e dos dedos, colocando-as também em pares em cada célula. (Para maior clareza, ele elevou um dos zeros.) Não olhe para o fato de que sua textura é tão "alegre" até agora. Fiz isso pela conveniência de aplicar uma varredura UV. Então, no atlas de textura, substituí as texturas das figuras por mais calmas, que você pode ver no próprio jogo.

Peças do jogo

Finalmente, eu modelei 4 setas planas que indicarão a direção o cursor se move no jogo. Apliquei uma textura em sua geometria: na folha de sprite, esta é uma seta triangular branca em um traço.

Exportamos todos os modelos 3D (todos os três, isto é, o campo, as formas e as setas) para o formato FBX, que requer o Spark AR Studio.

Importar para o Spark AR Studio

Primeiro, inicie o Spark AR Studio e importe modelos 3D para lá. Eles aparecerão na lista de ativos no canto inferior esquerdo. Ao mesmo tempo, criaremos para nós uma máscara temática com tinta de guerra na forma de “tatuagens” de uma cruz e um dedo no rosto. Você pode aprender sobre como criar uma máscara texturizada a partir de milhares de lições na rede global ou da documentação oficial da plataforma. Não vou me concentrar nisso. Resumindo: baixe o "espaço em branco", abra-o no seu editor de gráficos favorito, desenhe algo em cima, salve, importe a imagem para o Spark AR Studio, ajuste os parâmetros de material e textura.

Arraste nossos modelos de Ativos para a lista de cenas acima. Além disso, precisamos que eles sejam renderizados em uma determinada ordem: primeiro o campo (field.fbx), depois o modelo das figuras (fieldxo.fbx) e, finalmente, as setas (setas.fbx). Além disso, na camada inferior também haverá faceTracker com faceMesh - essa é uma máscara para o seu rosto. Você provavelmente pode lançar modelos no palco em qualquer ordem, no entanto, pretendo desativar a classificação de profundidade para todos os materiais (exceto figuras) - Teste de profundidade e Buffer de gravação para profundidade (nas propriedades do material), para que sejam renderizados na ordem que eu defino manualmente: máscara - campo - figuras - setas.

Nos materiais de cada camada, defina Blend Mode = Alpha para que os objetos fiquem transparentes nas partes em que isso é especificado na textura. E definiremos as texturas Filtering = Medium para suavização. (Se você selecionar um material ou textura na lista à esquerda, todas as propriedades disponíveis serão exibidas no lado direito da janela.)

Por fim, adicione o elemento Script ao elemento Ativos (clicando no elemento esquerdo + Adicionar ativo). E além dos modelos 3D, o script.js aparecerá na lista, clicando no qual seu editor de texto externo será aberto. Quando você salva no editor, seu programa é reiniciado no Spark AR Studio.

Programação

No início do script, conecte os módulos que precisamos neste projeto. Esta é uma cena, rastreamento de rosto, módulos para trabalhar com tempo, som e animação.

const Scene = require('Scene');
const FaceTracking = require('FaceTracking');
const Time = require('Time');
const Audio = require('Audio');
const Animation = require('Animation');

Existem muitas maneiras de implementar o jogo da velha em Javascript. Este artigo não é sobre como implementar este jogo em uma determinada linguagem de programação, mas sobre como gerenciar com a ajuda de uma pessoa. Descreverei pontos-chave específicos da interação com o sistema Spark AR, para que o princípio seja entendido.

Acesso ao fragmento nomeado do modelo 3D (malha), por exemplo, ao quadrado azul na primeira linha, segunda coluna do campo de jogo:

Scene.root.find('b12');

(Lembre-se de b12 - foi assim que chamamos essa malha no editor 3D.)

Acesso à cruz nesta posição:

Scene.root.find('x12');

Escondendo um dedo do pé (o), colocando uma cruz (x) e colorindo em verde (g) as células do campo '32' (terceira linha, segunda coluna):

// figure
Scene.root.find('o32').hidden = true;
Scene.root.find('x32').hidden = false;
// background
Scene.root.find('b32').hidden = true;
Scene.root.find('g32').hidden = false;
Scene.root.find('r32').hidden = true;

Cruz verde com luz de fundo verde no campo '32'.

Inscreva-se nos eventos de rotação e inclinação da cabeça para se movimentar pelo campo.

//vert: fov+ back-
FaceTracking.face(0).cameraTransform.rotationX.monitor().subscribe(function(event) {
	var v = event.newValue;
	...
});

//hor: rt+ dn-
FaceTracking.face(0).cameraTransform.rotationY.monitor().subscribe(function(event) {
	var v = event.newValue;
	...
});

Tudo é muito simples aqui. Retiramos do evento os valores da rotação ou inclinação da cabeça (event.newValue) e verificamos se estão fora de um determinado intervalo. Se sim, mova o cursor (caixa verde) visualmente na direção desejada. Um valor negativo da rotação da cabeça corresponde à sua rotação para a esquerda, positiva - para a direita. Da mesma forma - inclinar a cabeça para frente e para trás para se mover ao longo das linhas. Todo o intervalo é de -1 a +1. Assim, você pode implementar o movimento do cursor e ...

E então me dei conta

De repente, percebi que controlar o cursor no campo da maneira que eu escolhi era inconveniente: você precisa virar a cabeça para mover uma célula, retornar a cabeça à sua posição original, girá-la novamente para o próximo passo e assim por diante. E por que não usar apenas os valores fracionários de virar a cabeça para os lados e inclinar-se para frente e para trás para focar imediatamente a célula desejada no campo? Ou seja, como indicar ao cursor sua posição com um olhar, ou melhor, com a direção da cabeça. E então o primeiro método é um treino muito difícil para o pescoço. A educação física é, obviamente, boa, mas não na mesma medida. Naturalmente, lembraremos a posição atual em algum lugar em ap.cur = {x: 1, y: 1} para apagar o cursor na posição anterior e salvar as coordenadas da nova posição, que é subsequentemente necessária para o "clique". A propósitoflechas visuais para indicar a direção do movimento do cursor não são mais necessárias: lançamos um modelo 3D (flechas.fbx) do projeto. Você também pode apagar a imagem da seta da textura.

Piscar duas vezes?

E agora chegamos ao mais interessante. Clique duas vezes nos olhos. Admita, você queria fazer isso a partir do momento em que aprendeu sobre isso no início do artigo? Agora você dirá a seus amigos que o mouse já está desatualizado e que o piscar duplo é usado hoje por um clique! Piscar duas vezes. Por que dobrar? Tudo é simples: uma única pessoa involuntariamente periodicamente, portanto, pendurar eventos em um único piscar de olhos seria sadismo.

No Spark AR, há eventos leftEye.openness e rightEye.openness, assinando o qual, você pode obter o valor de abertura de cada olho em event.newValue no intervalo de 0 a 1. Consideraremos o olho fechado com um valor menor que 0,1. E chamaremos a função de processamento de piscada ap.blink1 () (ap é um espaço para nome, é apenas mais conveniente para mim).

//leftEye
FaceTracking.face(0).leftEye.openness.monitor().subscribe(function(event) {
	if  (event.newValue < 0.1) {
		ap.blink1();
	};
});

//leftEye
FaceTracking.face(0).rightEye.openness.monitor().subscribe(function(event) {
	if  (event.newValue < 0.1) {
		ap.blink1();
	};
});

Na função de processamento de piscada propriamente dita, definimos o intervalo mínimo entre as piscadas de 200 milissegundos para que essa função não funcione imediatamente duas vezes ao piscar com os dois olhos, pois sua chamada está pendurada em cada olho. Eu acho que está claro. Além disso, definimos o tempo máximo de piscar duplo - 1 segundo. Se nos ajustarmos a esse intervalo, a função action () funcionará, o que exibirá a cruz na posição atual. Ao mesmo tempo, penduraremos action () no evento mouth.openness - para que o jogador tenha a opção de colocar uma cruz em piscar duas vezes ou em abrir a boca.

blink1:function () {
	var tmNew = Date.now();
	if  (tmNew - ap.blinkStart > 200) {
		ap.blinkCount++;
		if  (ap.blinkCount > 1) {
			//action
			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();
	};
},

//mouth
FaceTracking.face(0).mouth.openness.monitor().subscribe(function(event) {
	if  (event.newValue > 0.2) {
		ap.action();
	};
});

Sons

Encontrei-os nas seções livres de royalties de vários sites de efeitos sonoros. Detalhes importantes: O Spark AR requer arquivos de som de um determinado formato, a saber, M4A, mono, 44,1 kHz, 16 bits. Conversores online de wav e mp3 para m4a estão em estoque na rede global. Eu adicionei som a quatro eventos: mover, ganhar punhais, ganhar tac toe e empatar. O volume total de todos os sons após a conversão foi de 105 Kb.

Para usar sons em um script, você precisa conectar um módulo de áudio no script, adicionar o número desejado de alto-falantes à cena pelo número de sons (eu tenho Speaker0, Speaker1, Speaker2, Speaker3), adicionar o módulo Playback Controllers ao Assets, criar o número necessário de subitens audioPlaybackController nele de acordo com o número de sons e conecte um som a cada alto-falante.

Depois disso, você pode reproduzir o som do script da seguinte maneira (por exemplo, o som de um clique):

var audioClick = Audio.getPlaybackController('audioPlaybackControllerClick');
audioClick.reset();
audioClick.setPlaying(true);

Construção final

Para criar construções para todos os dispositivos móveis suportados (Android, iOs), basta clicar em Arquivo -> Exportar. O volume do jogo para cada plataforma móvel com todos os modelos e texturas 3D no meu caso foi de cerca de 1 Mb. Em seguida, você precisa acessar o Spark AR Hub no Facebook / sparkarhub no navegador e fazer upload do arquivo exportado para lá. Você também precisa preencher uma descrição, pesquisar palavras-chave e baixar um vídeo de demonstração. Além disso, deve ser filmado no telefone através da câmera do Instagram. Para fazer isso, no hub, há uma seção "Visualizar câmera" que contém um link. Este link pode ser aberto em um dispositivo móvel. O aplicativo Instagram será iniciado e sua máscara (jogo) será aberta nele. O link também pode ser enviado para teste a todos os seus amigos, que, é claro, devem ter um smartphone com o aplicativo Instagram instalado.Até o final do processo de moderação, a máscara não estará visível para todos os usuários e eles não poderão adicioná-la à sua lista de efeitos até que seja visível apenas por este link.

O processo de moderação geralmente leva alguns dias (pode levar até 10 dias úteis). Pelo que entendi, a princípio o efeito está sujeito a testes de máquina, pelo menos um vídeo de demonstração - com certeza, porque um segundo após o envio recebi uma mensagem de que a moderação não passou. Razão - o vídeo contém texto. Em geral, por alguma razão, o texto mascarado não é fundamentalmente bem-vindo, como dizem as regras. Eu tive que redesenhar a interface do jogo para que a pontuação não caísse constantemente acima da cabeça do jogador, como eu havia feito antes, mas aparecesse apenas no final de cada rodada. E volte a gravar o vídeo. Depois de fazer todas as alterações, reenviei meu jogo com moderação.

Três dias depois, o jogo foi aprovado, depois de movido para a seção "Estilos de câmera". Sinceramente, não me lembro em qual seção eu a inseri inicialmente (e a seção ou, em outras palavras, a categoria, precisava ser selecionada). Isso não é óbvio, já que não há seção de jogos para o Instagram. Mas tudo bem, agora vamos saber onde colocar novos jogos. Se os jogos aparecerem no futuro, provavelmente o Instagram deve adicionar uma nova seção.

Total

Você pode experimentar uma máscara acessando o perfil de seu criador no Instagram e clicando no ícone de suas máscaras abaixo (emoticon com duas vantagens). O mesmo se aplica, é claro, aos jogos mascarados. Anteriormente, durante o teste beta de máscaras, também era necessário assinar o autor. Mas agora esta regra foi cancelada.

Eles não pagam dinheiro para criar máscaras e não há loja de máscaras pagas onde possam ser vendidas, como aplicativos em lojas conhecidas. Além disso, você não precisa pagar pelo posicionamento da máscara criada no seu perfil. Só é necessário aguardar a passagem da moderação. No entanto, muitos blogueiros e empresas ordenam o desenvolvimento de máscaras de marca para si. Bem, é claro, você pode pedir aos seus assinantes que experimentem as máscaras que você criou e joguem seus jogos, transmitindo tudo isso para a história do Instagram. Tais ações podem produzir o chamado efeito viral, especialmente se o jogo for interessante. Isso pode ajudar a promover sua conta. No entanto, agora nem todo mundo tem preguiça de fazer máscaras. Mas a ideia dos jogos mascarados do Instagram ainda é bastante nova. Além disso, há um limite de entrada mais alto e menos concorrência,já que nem todo criador de máscaras é um programador para escrever um jogo completo.

Máscaras de jogo voltadas para o rosto no Instagram ou clique duas vezes nos olhos