Adicionando física ao AR

O Adventure Club é um estúdio de design digital que colabora com marcas na criação de experiências AR (entre outras coisas). Nossa equipe em Amsterdã escreveu o seguinte tutorial/estudo de caso e esperamos que nosso aprendizado seja útil para outros criadores.

O pontapé inicial

Em preparação para a Copa do Mundo deste ano, a Adidas nos procurou para ajudar a desenvolver uma divertida campanha AR para a Unisport envolver os fãs de futebol. Com a tarefa de criar um jogo que incentivasse a retenção por meio de tentativas repetidas, fomos atraídos por jogos simples baseados em física. O jogo “Keep Up” foi uma escolha fácil, um direcionamento divertido para a campanha e o cliente adorou a ideia.

Bater na trave

“Você tem que lutar para alcançar seu sonho. Você tem que se sacrificar e trabalhar duro para isso.” - Lionel Messi

Para a plataforma, inicialmente escolhemos o Tik Tok ( Effect House ) mas depois adicionamos no Instagram ( Spark AR ) porque, bem, adoramos um desafio e, estávamos bastante interessados ​​em ver se havia alguma semelhança entre as duas plataformas. Tendo já publicado várias experiências de AR no Instagram e Snap ( Lens Studio ), já conhecíamos os desafios relacionados com a interoperabilidade entre plataformas. Com o Tik Tok decidido, ao incluir o Spark AR no escopo do projeto, poderíamos alavancar nosso conhecimento anterior, potencialmente acelerando o desenvolvimento e aumentando o alcance.

Infelizmente, assim como a defesa da Inglaterra, não existiam ferramentas para implementar a física no Effect House, então acertamos com o nosso melhor e começamos prototipando algumas direções (e também, muito mais tarde, decidimos escrever este tutorial/estudo de caso ).

“Se uma imagem vale mais que mil palavras, um protótipo vale mais que mil reuniões” — Tom Kelly, IDEO.

A cabra

O maravilhoso livro de Daniel Shiffman sobre codificação, “ The Nature of Code ” é um guia/leitura fantástico para uma infinidade de tarefas de programação, mas especificamente os capítulos sobre forças são uma leitura obrigatória para os alunos do jogo.

Normalmente, gastamos muito tempo prototipando e criando ideias aqui, usando plataformas de prototipagem como Processing e Sketch-Kit , para iterar conceitos rapidamente no código antes de passar para a implementação real. Seja para web, AR/VR, instalações e implementações específicas de hardware, o sandbox nos fornece uma maneira de colaborar com os designers para aprimorar as ideias.

O processamento é uma ferramenta projetada para designers visuais e desenvolvedores, e há documentação e exemplos fantásticos para usar e começar a trabalhar rapidamente. Neste caso, os exemplos de física de The Nature of Code podem ser facilmente instalados para você construir apon (através do Gerenciador de Contribuições).

A partir destes exemplos conseguimos definir rapidamente as forças e dinâmicas do jogo (podem encontrar o código deste sketch no final deste artigo)

  //update ball speed
  acceleration = new PVector(0, 0.4);
  speed.add(acceleration);

  //we want to limit the speed from increasing too much
  speed.limit(20);

  //copying the (ball) position we'll use this to check against collisions
  PVector newPosition = position.copy();
  newPosition.add(speed);
  
  //here, the mouse position represents the users head (paddle)
  float halfPaddle = PADDLE_WIDTH / 2;
  user.x = constrain(mouseX, halfPaddle, width - halfPaddle);
  user.y = height - 10;

  //check if the ball is colliding with the paddle
  if (newPosition.x > user.x - halfPaddle && newPosition.x < user.x + halfPaddle) {
    if (newPosition.y > height - 50 - 10) {

      //how far is the ball from the center of the paddle
      float offset = map(position.x, user.x - halfPaddle, user.x + halfPaddle, - 1, 1);
      
      //reverse the speed (bounce)
      speed.y = speed.y * -1;

      //determine the angle of bounce
      //the difficulty increases the angle as the game progresses
      float difficulty = 10 * float(count) / 20.0;
      difficulty = constrain(difficulty, 0, 10);
      speed.x = offset * difficulty;
      position.add(speed);

      count ++;
    }
  }

      
                

                    
                    
                
            

Usando o Effect House e o Spark AR para publicar o jogo, ficamos inicialmente surpresos com o quão elementar e emparelhado a interface do Effect House e a lista de recursos são.

É justo dizer que o Tik Tok comprometeu muitos dos recursos disponíveis em outras plataformas em favor da facilidade de uso e integração e, embora o Spark AR possa ser mais complicado para criar filtros inovadores, criar nosso filtro no Effect House foi muito mais difícil.

Jogo ligado!

Transpondo o esboço de processamento para AR, seguimos alguns princípios simples de design de jogo para garantir que o jogo fosse o mais envolvente possível:

• A cabeça do usuário funciona como uma raquete (em essência, traduzindo o espaço 3D da câmera para um objeto 2D na tela)
• A fim de aumentar a dificuldade e tornar o jogo mais desafiador, o ângulo em que a bola quicaria na 'remada' se tornaria mais agudo à medida que o jogo avançasse, aumentando a precisão dos ajustes necessários.
• Para evitar que o usuário 'hackeie' o jogo (ao invés de mover o dispositivo), a bola deve quicar nas laterais da tela, fazendo com que o usuário segure o dispositivo o mais imóvel possível.
• Após a conclusão, usaremos a segmentação para remover o fundo do usuário e substituí-lo por uma tela de 'herói' em um campo com fogos de artifício

Recebemos ótimas respostas ao jogo, os usuários acharam o jogo divertido, mas desafiador e, embora ninguém em nosso estúdio conseguisse manter a bola levantada mais de 24 vezes (boa, Boris!) Alguns usuários se gabaram de atingir 80! Até o jogador de futebol profissional Pierre-Emile Højbjerg tentou…

Empacotamos o patch Spark AR e os esboços de processamento aqui . Adoraríamos ouvir seus comentários, perguntas e amor, entre em contato com a equipe abaixo ;)

Clara Langlois (Mulher do Jogo)

Kev Mayo (O Feitor)

Tempo de Lesão

Desde o momento em que escrevo isso (Effect House 1.5), o Tik Tok revelou vários novos recursos (2.2), mas, infelizmente, os filtros de marca criados exigem fazer parte de seu programa de parceria, e a entrada aqui não é um processo claro ou transparente. Se você deseja publicar esses tipos de filtros com o Tik Tok, agora precisa se inscrever aqui