↑↓ selecionar · ENTER ir · ESC fechar

Projeto demo Vídeo e motion

Toffi, um avatar para lives que reage ao teclado e ao mouse

Um projeto demo no estilo dos avatares de VeadoTube que eu faço para streamers: o personagem fica diante do teclado e do mouse, aperta W/A/S/D e suas combinações, clica com os botões esquerdo e direito, pisca e fala. Roda direto no navegador: aqui a boca abre enquanto a tecla Espaço está pressionada — na live, quem faz isso é o microfone.

54 KB
o módulo inteiro
7
botões na tela
0
dependências externas
Toffi, um avatar para lives que reage ao teclado e ao mouse
Passe o mouse sobre o avatar e pressione W, A, S, D; clique nele para ativar as teclas de seta e o Espaço. No celular, use os botões abaixo da cena.

A tarefa

Mostrar ao vivo como funciona um avatar para lives: para que o streamer possa apertar as teclas e ver como o personagem dele ficaria na transmissão.

O que eu fiz

  • Arte vetorial em camadas: estados separados para patas, teclas, olhos e boca
  • W+A e W+D têm poses próprias; as setas funcionam como alternativa, e o layout russo do teclado também
  • O teclado só é capturado com o cursor sobre o avatar ou com o foco nele, então a página continua fácil de usar
  • Botões na tela para celulares; com a opção de reduzir movimento ativada, a animação em repouso é desligada

Comprovação

  • Uma demo interativa nesta página
  • Um avatar parecido para um streamer, no VeadoTube: W/A/S/D, cliques esquerdo e direito, boca acionada pelo microfone, piscadas — o cliente o configurou sozinho seguindo minhas instruções

O que mais você pode me confiar

  • Telas animadas para lives: começando em breve, intervalo, já volto
  • Vídeos promocionais para telas de estabelecimentos a partir dos seus materiais
  • Um overlay publicitário sobre o vídeo
  • Edição, sincronização de voz e limpeza leve de áudio
  • Um avatar 2D para lives que reage ao teclado e à voz
Discutir uma tarefa semelhante