PATCH EDITOR

FINO EM TELA CHEIA FALANDO PARA A CÂMERA PRINCIPAL

Uma das ferramentas mais poderosas do Spark AR é o Editor de Patches.

Esse recurso é fantástico porque simplifica muito a criação de interações complexas.

A melhor maneira de aprender mais sobre ele é usando e explorando essa poderosa
ferramenta.

E é isso que nós vamos fazer nesta lição. Vamos lá?

FINO NAVEGANDO NA JANELA DE BOAS-VINDAS DO SPARK

Vamos criar um novo projeto para começar a brincar com o Editor de Patches.

Então, vamos clicar aqui em Blank Project

FINO NAVEGANDO NA INTERFACE DO SPARK E APARECENDO NO SIMULADOR

Agora que já estamos dentro do nosso projeto em branco, vamos adicionar um Face
Tracker.

Para fazer isso, a gente vai clicar nesse sinal de + aqui, selecionar Face Tracker
(Rastreador Facial) e clicar em "Insert" (Adicionar)

Vamos trabalhar num projeto de rastreamento facial para aprender como mostrar
esse tipo de rastreador, e também os outros tipos rastreadores, no Editor de Patches.

Aqui, a gente vai pegar o “Face Tracker” e jogar esse rastreador no Editor de
Patches… pra gente começar a brincar com alguns gestos faciais.
A primeira coisa que você vai precisar fazer é clicar na Biblioteca de RA, em seguida
em 3D Shapes, e depois rolar para baixo.

Eu vou escolher essa estrela aqui, porque eu adoro estrela.

Vamos clicar em Import free, done, e vamos fechar a Biblioteca de RA.

Agora, a gente vai selecionar a estrela e arrastar para baixo do rastreador facial .

Observe que ela rastreia meu rosto imediatamente.

Agora, vamos definir as configurações do material da nossa estrela.

Então a gente vai escolher uma cor, a partir da paleta de cores aqui no painel de
propriedades…eu vou escolher o rosa.

Eu também vou deixar o material mais metálico, arrastando esse controle aqui na
opção "Metalic" e…. também vou deixar um pouco mais brilhante…ajustando esse
controle aqui, o Roughness.

Outra coisa que eu vou definir é o Blend Mode, vou mudar para Multiply , e assim a
gente vai conseguir ver através do material.

Agora, para ajustar o tamanho da nossa estrela, a gente vai selecionar o objeto aqui no
painel de cena…. e vamos mexer na escala… no painel de propriedades….. Tá ótimo.

Bom…como você pode notar …a estrela ainda tá aparecendo na ponta do meu nariz,
mas eu quero que ela apareça um pouco mais pro centro da minha cabeça.

Então …eu vou jogar a estrela um pouco mais para trás….

Mas, eu quero garantir que ela vai estar no ponto certo! E um truque que pode ajudar
com isso é adicionar uma malha facial.

Vamos adicionar aqui no sinal de mais….escolher Face Mesh…. e arrastar essa malha
para debaixo do nosso rastreador…para usar de referência. Assim a gente consegue
ver exatamente onde o nosso rosto se encontra dentro da cena.

Eu gosto sempre de pausar o vídeo aqui no botão de pausa, pra evitar que o
movimento do face tracker atrapalhe o ajuste.

Então, eu vou mover a minha estrela um pouco para trás. Hum…acho que ficou bom, tá
bem próximo. Eu diria que tá quase no centro. Ótimo!

Agora eu vou deletar a malha facial, porque eu não preciso mais dela…e eu vou
despausar o vídeo aqui no botão play também.

Beleza, temos a nossa estrela definida e agora a gente precisa jogar ela no Editor de
Patch, pra gente poder continuar brincando com ela.

Pra isso, você pode acessar o menu View aqui em cima e escolher a opção Show/Hide
Patch Editor.

Ou, você pode clicar na sua Área de Trabalho e depois em Show/Hide Patch Editor.
Você pode ainda utilizar as teclas de atalho mostradas aqui.
Depois que você se acostumar com o programa, talvez você prefira usar os atalhos.

Com o Editor de Patches aberto, a gente só precisa selecionar o rastreador facial e

arrastar aqui para baixo…para dentro do editor.

Agora que arrastamos o rastreador facial pro editor, apareceram essas caixinhas aqui
e vou explicar o que cada uma delas faz…

Bom…cada um desses quadradinho que estamos vendo aqui é chamado de patch e,

juntos, eles formam o que chamamos de gráfico.

Conforme você vai criando esses patches, o que você está fazendo, de fato, é
construir um gráfico.

Esse conceito pode ser um pouco confuso agora no começo, mas logo logo você se
acostuma com essa forma de programar.

Então…vamos lá…

Esse primeiro patch aqui se chama Face Finder e ele reconhece todos os rostos na
cena.
Como podemos ver aqui, esta porta está mostrando todas as informações sobre
todos os rostos, e a outra porta apenas conta quantos rostos aparecem na cena.

O próximo patch é o Face Select que basicamente diz o seguinte: ‘Quero escolher um
rosto específico da cena’.

Em programação, a maioria dos índices ou a maioria das listas numeradas começa

em zero. Portanto, em programação zero equivale a “primeiro”.

Isso significa que esse índice definido como zero está procurando o primeiro rosto na
cena. E aqui, nesse caso, já tá tudo definido para reconhecer esse primeiro rosto.

E esse último patch que vemos aqui, é o patch do Rastreador Facial (facetracker0),
que mostra como o meu rosto tá se movendo na cena e o que eu tô fazendo.

Vamos supor que a gente tá criando um efeito e a primeira coisa que a gente quer
fazer é que a estrela não cubra o meu rosto. Eu quero fazer um gesto facial para que
ela desapareça.

Bom…vamos começar ajustando a dimensão da estrela…a idea é fazer um aceno de

cabeça, tipo um "sim", para mudar o tamanho dela, e essa será a primeira interação
que a gente vai fazer.

Para isso, basta dar um duplo clique em qualquer parte do Editor de Patches, ou no
botão direito, e isso vai abrir o Menu de Patches.

Ou você também pode clicar em Add Patch aqui embaixo. Você faz da maneira que
achar melhor, beleza?

Com um duplo clique fica fácil realizar uma busca, pois todos os patches estão
listados de acordo com cada categoria que aparece aqui. Na categoria Interaction
temos várias interações possíveis.
Então…eu vou digitar aqui no campo de pesquisa "Head Nod" (Aceno de Cabeça) e vou
clicar nesse patch para adicionar essa interação no editor.

Observe que esse novo patch de "Head Nod" tem uma porta chamada Face), e que
também temos no nosso patch do Face Tracker uma porta com o mesmo nome.

Então, se arrastarmos essa linha aqui e conectarmos essas duas portas...

Olha só, elas se conectam perfeitamente. Lembrando que se você tentar conectar no
lugar errado, não vai funcionar, ou seja…não tem como errar.

Beleza! Então, temos o nosso movimento de "aceno de cabeça" certo? Essa conexão
que fizemos entre os patchs significa que, quando eu acenar, movimentar minha
cabeça para baixo - como seu eu estivesse dizendo "sim" - um sinal será enviado para
cá.

O que a gente quer é executar uma animação que basicamente diga ‘expanda a
estrela’. Quando eu fizer "sim" com a cabeça, uma animação será acionada e a estrela
mudará de tamanho de 0 para 1.

Vou mostrar essa parte de redimensionamento mais pra frente, não vamos ainda
mexer nessa porta, porque só é possível acessá-la uma vez sem uma lógica complexa.
Então, eu vou mostrar aqui um jeito rápido de fazer isso.

Basta utilizar o recurso Null Object. Vamos adicionar esse Null Object e colocá-lo
debaixo do nosso rastreador facial.

Em seguida, vamos colocar a estrela debaixo deste objeto nulo.

Em web design , um objeto nulo é muito parecido a um contêiner. Parece com as
camadas em programas de edição de foto ou Collections em programas de edição 3D.
E ele afetará tudo o que estiver debaixo dele.

Isso significa que eu posso dimensionar esse objeto nulo de 0 para 1 sem ter que me
preocupar em dimensionar esses valores, que só vamos ver mais pra frente.
Bom…deixa eu traduzir isso que eu acabei de falar…
O objeto nulo serve pra organizar e categorizar seus objetos. É um lugar onde você
pode colocar vários objetos e manipular todos de uma vez. Curtiu a dica? Te convido a
seguir explorando para saber mais sobre ele!

Vamos voltar e seguir trabalhando na construção da nossa animação.

Vou clicar nessa flecha aqui em Scale, pra jogá-la aqui no editor e vou adicionar um
patch Animation também.

Relembrando que o que eu quero é que a estrela aumente de tamanho quando eu

acenar com a cabeça.

Vamos adicionar também o Transition Patch , porque o Patch de Animação

basicamente dá o comando para animar, e o Patch de Transição é o que mostra o que
animar. Está como padrão de 0 para 1, e vamos deixar como está!

Note que assim que eu conectei o Patch de Animação com o Patch de Transição, a
estrela desapareceu do meu rosto!
Calma… Isso significa que a escala está agora definida para 0, ou seja, que nunca
registrou um aceno de cabeça.

Eu vou resetar tudo aqui. Pra ter a cena totalmente zerada….e Vou acenar a
cabeça….. … ótimo. Funcionou!
Pronto! Temos o nosso aceno de cabeça que expande o objeto.

Agora, e se eu quiser que a estrela desapareça?

Ela está aqui ampliada, certo? Digamos que eu queira que ele desapareça quando eu
balançar a minha cabeça.
Ou seja, quero que ela apareça quando eu acenar com a cabeça e quero que ela
desapareça quando eu balançar a cabeça.

Pra isso a gente vai precisar adicionar mais um patch.

Então…vamos lá…botão direito para abrir o menu, vamos digitar Head Shake (Balanço
de Cabeça), clicar nele e dar ok.
Agora vamos conectar o mesmo patch do rastreador facial aqui.

Digamos que, quando eu balançar a cabeça, eu quero que a estrela faça o movimento
contrário, ou seja, desapareça…então eu vou conectar o patch Head Shake com a
porta "Reverse" do patch de Animação.

Bora lá experimentar pra ver se funciona…… Beleza. Funcionou!

Vamos dá uma brincada aqui e mudar para o efeito Overshoot Out, para ficar mais
bacana.
Vamos resetar e experimentar mais uma vez, ok?
Então …vou acenar com a cabeça para a estrela aparecer ….e Balançar a cabeça pra
ela sumir! .... Tá ficando massa isso aqui!

Essa é uma maneira bem fácil de usar gestos faciais para controlar os efeitos na sua
cena.

Agora, antes de qualquer outra coisa, vamos fazer nossa estrela aparecer. Certo!
Nossa estrela está aqui e o que queremos fazer é o seguinte: quando eu falar, quando
minha boca abrir e fechar, eu quero que a estrela expanda um pouco para parecer que
ela tá brilhando .

Lembra que eu falei lá no começo da aula que eu ia falar da escala mais frente? Pois
então…a hora é essa!

Bom…o que eu quero é que a estrela mude de tamanho quando minha boca abrir e
fechar, certo?

Vamos dar uma olhada aqui no menu de patches para ver o que a gente tem
disponível para mouth (boca).
E olha só…temos esse patch chamado Mouth Open (Abertura de boca…em bom
português)

Vamos adicionar esse patch no nosso editor e vamos conectá-lo ao facetracker.

Repare que o Mouth Open tem duas portas ou saídas : a de cima mostra se a boca
está aberta ou fechada, 0 ou 1. E também tem essa outra saída, que se chama
Openness (Abertura).

Vamos ver como funciona…. vamos clicar em cima para ver a opção Openess …. E ela
vai de 0 a 1 quando eu abro a boca, então a gente pode considerar que vai de 0 a
100%.
O que quero fazer é utilizar essa porta, a Openness para conectar à escala do objeto.
Eu lembro que no começo definimos a escala em 5 em todos os campos.

Vamos selecionar a escala (scale) da estrela e jogar aqui. Todos os campos estão em
5 e eu quero começar com 5 mesmo. Não quero que dimensione a partir do 0, porque
a animação ficaria muito…digamos… dramática…muito intensa

Então…a gente sabe que precisa adicionar outro patch aqui, certo? E que esse patch
precisa de três componentes, 3 vetores.

Bom…vamos lá…clique direito, e vamos buscar o patch Add ..aqui no Menu e adicionar
ao nosso editor.

Lembra que eu falei da necessidade de 3 componentes agora há pouco?? Pois…

então…

Se eu conectar esse patch de adição (Add Patch) com o patch da escala, não vai
rolar…não vai dar certo , como você pode ver. E por que não funciona??
Porque o patch da escala está esperando três valores, mas só tá recebendo um
A boa notícia é que isso é bem fácil de resolver!

A gente só precisa utilizar este menuzinho aqui e selecionar a opção Vector3…

e…..agora rolou! A gente consegue conectar os patches agora.

Bem, já sabemos que queremos mudar o tamanho da estrela e que queremos

começar com 5, certo? Então, o valor nos três campos será 5. Vamos começar assim!

Agora vamos adicionar o efeito de Abertura de Boca…e vamos também dar um restart
para atualizar as mudanças que a gente acabou de fazer.

Então vamos lá… eu vou acenar com a cabeça pra estrela aparecer... E agora quando
eu falo, a gente pode ver que a estrela aumenta um pouco de tamanho, mas não
aumenta muito. Eu quero que aumente mais.

Então, vamos multiplicar esse valor da Abertura de Boca!

Para isso, vou jogar um Multiply aqui no meio. Botão direito, multiply…que é um
multiplicador… E… conectar..

O valor padrão é 1, e eu vou mudar para 10.

Boa. Agora quando eu falo, parece que a estrela tipo brilhando.

E, além disso, vamos lembrar aqui que , quando quero que a estrela desapareça, é só….
balançar a cabeça.

Bora fazer algo mais divertido??? Vamos brincar com as cores!

O Patch de Transição é bem massa . A gente já usou ele aqui em cima, esse aqui que
a gente conectou com o patch de animação.

Essa animação está sendo executada em um valor entre 0 e 1 e esse é o valor de

progress vindo do patch Animation.

O patch de Mouth Openness também varia entre 0 e 1, o que significa que eu posso
usá-lo como um progresso.
Então, digamos que eu queria mexer com as cores….ou seja … que, conforme eu falo,
eu quero que a cor da estrela mude…acho que ficaria legal!

Vamos acessar aqui o material da nossa estrela e vamos selecionar esse material
Vamos de novo no painel de propriedades do material: selecionar a nossa textura e
soltar ela aqui e, antes de tirar o rosa - minha cor predileta, eu vou copiar o código
dessa cor.

Agora, vou utilizar esse valor e definir aqui para o nosso rosa. Em seguida, vamos
utilizar esse End Value e escolher uma segunda cor que contraste com o rosa. ….tipo
esse azul aqui.

Temos nossas cores de transição e tudo o mais, e tudo está interligado. Agora, antes
de mais nada, precisamos voltar aqui e redefinir isso para branco.

Agora a gente pode conectar esses patchs…. vamos reiniciar o efeito mais uma vez.

Bora testar pra ver se nosso efeito tá funcionando direitinho?

Primeiro…aceno com a cabeça…e a nossa estrela aparece! Quando eu falo, ou seja,

abro a boca, e a estrela brilha e muda de cor…massa demais! E se eu balançar a
cabeça…a estrela some! E é isso….tudo funcionando direitinho!

FINO EM TELA CHEIA

Viu como é possível mexer com esses patches e criar efeitos poderosos bem
rapidinho? . Bom…a gente fez tudo isso em questão de minutos.

Eu te convido a experimentar não apenas com o rastreador facial, mas também com o
rastreador de plano e com o rastreador de alvos .

Você vai encontrar saídas bem parecidas com essas e isso vai permitir que você
customize a sua experiência conforme for descobrindo as funções de reconhecimento
de cena.

Vamo pôr a mão na massa??