Toonle - Jogo de Animação e Desenho Criativo - Casual Jogo
Prompt
MODEL: Seele01-Flash
Por favor, utilize Three.js para gerar um **jogo mobile-first** com o tema "**Toonle: Estúdio de Animação Quadro-a-Quadro**". Por favor, leia primeiro os seguintes requisitos detalhados de design do jogo e, em seguida, gere o código de acordo:
### 1. Recursos & Ambiente
* **Estilo Visual:** Uma interface 2D limpa e minimalista embutida num espaço de trabalho 3D. A estética deve ser "Papel Digital" — áreas de tela brancas e nítidas, sombras suaves para profundidade e elementos de UI arredondados. O fundo deve ser um gradiente subtil e calmante (ex.: ciano claro a azul pastel) ou uma textura de secretária para dar a sensação de um espaço de trabalho de animador.
* **Elementos 3D:** Embora o desenho seja 2D, represente os "quadros" como tiras de filme físicas ou folhas de papel a flutuar no espaço 3D. Quando o utilizador muda de quadro, anime a câmara ou a pilha de papel para simular virar uma página (metáfora da pele de cebola).
* **Ferramentas:** Renderize representações 3D de ferramentas de desenho (lápis, pincel, borracha) que pairam perto da tela ativa.
* **Desempenho:** Uma vez que isto envolve desenho, priorize o desempenho da textura da tela. Utilize malhas de baixo polígono para decorações da UI e otimize a renderização de linhas (use shaders de linha performantes ou traços baseados em textura em vez de geometria pesada para cada pixel).
### 2. Requisitos de Áudio
* **Banda Sonora (BGM):** Uma faixa muito lo-fi, chill-hop, ou de guitarra acústica. Precisa de ser repetitiva mas não intrusiva para auxiliar a concentração e a criatividade.
* **Efeitos Sonoros (SFX):**
* **Desenho:** Sons distintos para diferentes ferramentas (som de lápis riscante para esboçar, som de marcador húmido para colorir, som suave de fricção para apagar).
* **UI:** Sons de "pop" ou "clique" satisfatórios ao selecionar ferramentas ou cores.
* **Reprodução de Animação:** Um som de clique rápido de "projetor de filme" ou de folhear papel quando o utilizador pressionar "Reproduzir" para pré-visualizar a sua animação.
### 3. Ciclo de Jogo
* **Mecânica Principal:** O utilizador desenha numa tela central. Pode adicionar um novo fotograma, o que guarda o desenho atual e limpa a tela para o próximo fotograma.
* **Onion Skinning (Pele de Cebola):** Funcionalidade crucial. Ao desenhar no Fotograma 2, o Fotograma 1 deve ser visível como uma camada subtil e semi-transparente por baixo, para guiar o movimento da animação.
* **Reprodução:** Um botão "Reproduzir" proeminente compila os fotogramas e reproduz-os em loop a uma taxa de fotogramas definida (ex.: 12 FPS) para mostrar a animação.
* **Ferramentas:**
* **Tamanho do Pincel:** Um deslizador para ajustar a espessura.
* **Paleta de Cores:** Um seletor de cores simples.
* **Borracha:** Para apagar erros.
* **Copiar/Colar Fotograma:** Para duplicar o desenho anterior para modificações ligeiras.
### 4. Controlos e Interação para Móvel
* **Entrada por Toque (Crítica):** A lógica de desenho deve mapear as coordenadas de toque (touchstart, touchmove, touchend) com precisão para o plano 3D do Three.js ou para a textura da tela 2D. Deve suportar rejeição de toque múltiplo (para que apoiar a palma da mão não desenhe, se possível, ou seguir estritamente o ponto de toque primário).
* **Orientação:** Suportar tanto o modo Retrato (para animações altas) como Paisagem (para ecrã panorâmico). A interface deve adaptar-se responsivamente (ferramentas na parte inferior no modo retrato, ao lado no modo paisagem).
* **Dimensão da Interface:** Todos os botões (Reproduzir, Adicionar Fotograma, Ferramentas) devem ter pelo menos 44x44 píxeis. O seletor de cores deve ser suficientemente grande para ser tocado facilmente.
* **Gestos:**
* **Pinça com dois dedos:** Para ampliar/reduzir a tela.
* **Arrastar com dois dedos:** Para deslocar-se pela tela quando ampliada.
* **Desfazer/Refazer:** Implementar um botão "Desfazer" proeminente ou um gesto de toque duplo (opcional, mas recomendado).
* **Feedback:** Quando uma ferramenta é selecionada, esta deve aumentar ligeiramente de tamanho ou destacar-se visualmente. Os traços de desenho devem aparecer instantaneamente, sem atraso.
CRIE • PARTILHE • GANHE
Os jogos são divertidos. Criá-los é ainda melhor.
Introdução ao jogo
Sobre o Toonle
Toonle é um inovador jogo de desenho de animação online que transforma as suas ideias criativas em sequências animadas deslumbrantes. Esta plataforma gratuita combina a arte da animação tradicional, quadro a quadro, com ferramentas digitais modernas, tornando a animação acessível a todos, desde principiantes absolutos a artistas experientes.
Quer esteja a desenhar figuras simples em pauzinhos ou a criar animações de personagens complexas, o Toonle fornece todas as ferramentas essenciais de que precisa para criar animações com um aspeto profissional diretamente no seu navegador.
Funcionalidades Principais
Ferramentas de Animação Profissionais
O Toonle oferece um conjunto completo de ferramentas de desenho e animação concebidas para facilitar a utilização:
- Interface de Desenho Intuitiva : Espaço de trabalho limpo e fácil de usar que não sobrecarrega os principiantes
- Múltiplas Opções de Pincel : Vários tipos e tamanhos de pincel para obter diferentes efeitos artísticos
- Paletas de Cores Personalizáveis : Crie e guarde esquemas de cores personalizados para um estilo consistente
- Animação Quadro a Quadro : Técnicas de animação tradicionais tornadas simples e acessíveis
- Onion Skinning : Veja os quadros anteriores e seguintes enquanto desenha para um fluxo de animação suave
Funcionalidades de Comunidade e Partilha
Conecte-se com outros animadores e mostre a sua criatividade:
- Galeria de Animações : Navegue e inspire-se com as criações da comunidade
- Partilha Fácil : Partilhe as suas animações com amigos e plataformas de redes sociais
- Feedback da Comunidade : Receba críticas construtivas e incentivo de outros utilizadores
- Conteúdo em Destaque : Descubra animações em tendência e criadores populares
Aprendizagem e Crescimento
O Toonle não é apenas uma ferramenta – é uma plataforma de aprendizagem completa:
- Tutoriais Integrados : Guias passo a passo que cobrem os fundamentos da animação
- Biblioteca de Conteúdo Inspirador : Veja exemplos de técnicas de animação excelentes
- Desenvolvimento Progressivo de Competências : Ferramentas e funcionalidades que evoluem com as suas capacidades
- Princípios de Animação : Aprenda técnicas padrão da indústria, como tempo, espaçamento e easing
Mecânicas de Jogo
Processo de Animação Quadro a Quadro
Criar animações no Toonle segue um fluxo de trabalho simples mas poderoso:
- Configure a Sua Cena : Escolha o tamanho da tela e a taxa de frames para a sua animação
- Desenhe o Seu Primeiro Quadro : Use as ferramentas de desenho para criar a sua imagem inicial
- Adicione Quadros Seguintes : Crie novos quadros e desenhe mudanças incrementais
- Pré-Visualize o Seu Trabalho : Reproduza a sua animação para ver como flui
- Refine e Aprimore : Ajuste o tempo, adicione detalhes e aperfeiçoe a sua criação
- Partilhe e Exporte : Guarde a sua animação e partilhe-a com a comunidade
Possibilidades Criativas
O jogo suporta vários estilos e géneros de animação:
- Animação de Personagens : Dê vida a figuras de pau, cartoons e personagens originais
- Motion Graphics : Criar animações abstratas e efeitos visuais
- Narrativa : Criar histórias e cenários animados curtos
- Conteúdo Educacional : Criar animações e demonstrações instrutivas
- Arte Experimental : Expandir os limites criativos com técnicas de animação únicas
Controlos e Operação
Experiência em Desktop
- Desenho com Rato : Usar o botão esquerdo do rato para desenhar linhas e formas suaves
- Controlo de Precisão : Afinar a sua arte com movimentos precisos do cursor
- Atalhos de Teclado : Acelerar o fluxo de trabalho com teclas de atalho convenientes
- Acesso a Múltiplas Ferramentas : Alternar rapidamente entre pincéis, cores e controlos de animação
Compatibilidade Móvel
- Desenho por Toque : Desenho natural com o dedo em smartphones e tablets
- Controlos por Gestos : Zoom por pinça e gestos de arrastar intuitivos
- Interface Responsiva : Layout otimizado para ecrãs mais pequenos
- Sincronização Multiplataforma : Continue os seus projetos em diferentes dispositivos
Porquê Escolher o Toonle
Perfeito para Principiantes
O Toonle remove as barreiras tradicionais à criação de animação:
- Sem Necessidade de Descarregar : Comece a animar imediatamente no seu navegador
- Totalmente Gratuito : Aceda a todas as funcionalidades principais sem qualquer pagamento
- Curva de Aprendizagem Suave : Interface amigável que não intimida os recém-chegados
- Tutoriais Abrangentes : Aprenda os fundamentos da animação através de lições guiadas
Adequado para Todos os Níveis de Habilidade
Embora ideal para principiantes, o Toonle oferece profundidade para animadores experientes:
- Técnicas Profissionais : Suporte para princípios avançados de animação
- Ferramentas Flexíveis : Adapte-se a vários estilos e preferências de animação
- Aprendizagem Comunitária : Aprenda com outros animadores e partilhe técnicas
- Construção de Portfólio : Crie uma coleção de animações para mostrar as suas competências
Liberdade Criativa
Expresse-se sem limitações:
- Sem Restrições de Estilo : Crie animações realistas, de cartoon, abstratas ou experimentais
- Conteúdo Original : Propriedade total das suas obras criativas
- Oportunidades de Colaboração : Conecte-se com outros criadores para projetos conjuntos
- Centro de Inspiração : Descubra novas ideias navegando na comunidade
Começar
Iniciar a sua jornada de animação com o Toonle é simples:
- Aceda ao Jogo : Abra o Toonle em qualquer navegador web moderno
- Explore os Tutoriais : Comece com o sistema de tutoriais integrado
- Crie a Sua Primeira Animação : Comece com movimentos e personagens simples
- Junte-se à Comunidade : Partilhe o seu trabalho e conecte-se com outros animadores
- Desenvolva as Suas Competências : Pratique regularmente e experimente novas técnicas
Quer esteja interessado em criar GIFs animados simples, aprender técnicas profissionais de animação, ou apenas divertir-se com arte digital, o Toonle oferece a plataforma perfeita para explorar a sua criatividade e dar vida às suas ideias através da magia da animação.