Toonle - Kreatywna Gra Rysowania Animacji - Casual Gra
Prompt
MODEL: Seele01-Flash
Proszę użyć Three.js do wygenerowania **gry zorientowanej na urządzenia mobilne** o temacie **"Toonle: Studio Animacji Klatka po Klatce"**. Najpierw przeczytaj poniższe szczegółowe wymagania projektowe gry, a następnie wygeneruj kod zgodnie z nimi:
### 1. Zasoby i Środowisko
* **Styl Wizualny:** Czysty, minimalistyczny interfejs 2D osadzony w przestrzeni 3D. Estetyka powinna być "Cyfrowy Papier" — chrupkie białe obszary płótna, miękkie cienie dla głębi i zaokrąglone elementy UI. Tło powinno być subtelnym, uspokajającym gradientem (np. jasny cyjan do pastelowego niebieskiego) lub teksturą biurka, aby stworzyć wrażenie stanowiska pracy animatora.
* **Elementy 3D:** Choć rysunek jest 2D, przedstaw "klatki" jako fizyczne taśmy filmowe lub arkusze papieru unoszące się w przestrzeni 3D. Gdy użytkownik przełącza klatki, animuj kamerę lub stos papieru, aby symulować przewracanie strony (metafora onion skinning).
* **Narzędzia:** Wyrenderuj trójwymiarowe reprezentacje narzędzi do rysowania (ołówek, pędzel, gumka), które unoszą się w pobliżu aktywnego płótna.
* **Wydajność:** Ponieważ wiąże się to z rysowaniem, priorytetem jest wydajność tekstur canvas. Używaj siatek low-poly do dekoracji UI i optymalizuj renderowanie linii (używaj wydajnych shaderów linii lub pociągnięć opartych na teksturach zamiast ciężkiej geometrii dla każdego piksela).
### 2. Wymagania Audio
* **Muzyka Tła:** Bardzo lo-fi, chill-hopowy lub akustyczny utwór gitarowy. Musi być powtarzalny, ale nieinwazyjny, aby wspomagać koncentrację i kreatywność.
* **Efekty Dźwiękowe:**
* **Rysowanie:** Wyraźne dźwięki dla różnych narzędzi (chropowaty dźwięk ołówka do szkicowania, dźwięk mokrego markera do kolorowania, cichy dźwięk ścierania dla gumki).
* **Interfejs:** Satysfakcjonujące dźwięki "pop" lub "kliknięcia" przy wyborze narzędzi lub kolorów.
* **Odtwarzanie animacji:** Szybki dźwięk "klikania projektora filmowego" lub przewracania kartek, gdy użytkownik naciśnie „Odtwórz”, aby wyświetlić podgląd swojej animacji.
### 3. Pętla rozgrywki
* **Główny mechanizm:** Użytkownik rysuje na centralnym płótnie. Może dodać nową klatkę, która zapisuje bieżący rysunek i czyści płótno dla następnej klatki.
* **Onion Skinning (Warstwy cebuli):** Funkcja kluczowa. Podczas rysowania na Klatce 2, Klatka 1 powinna być widoczna jako subtelna, półprzezroczysta warstwa poniżej, aby kierować ruchem animacji.
* **Odtwarzanie:** Wyraźny przycisk „Odtwórz” kompiluje klatki i odtwarza je w pętli z ustaloną liczbą klatek na sekundę (np. 12 FPS), aby pokazać animację.
* **Narzędzia:**
* **Rozmiar pędzla:** Suwak do regulacji grubości.
* **Paleta kolorów:** Prosty wybierak kolorów.
* **Gumka:** Do usuwania błędów.
* **Kopiuj/Wklej klatkę:** Aby skopiować poprzedni rysunek do niewielkich modyfikacji.
### 4. Sterowanie mobilne i interakcje
* **Wejście dotykowe (krytyczne):** Logika rysowania musi precyzyjnie mapować współrzędne dotyku (`touchstart`, `touchmove`, `touchend`) na płaszczyznę 3D Three.js lub teksturę płótna 2D. Musi obsługiwać odrzucanie multi-dotyku (aby oparta dłoń nie rysowała, jeśli to możliwe, lub aby ściśle śledzić główny punkt dotyku).
* **Orientacja:** Obsługa zarówno trybu portretowego (dla wysokich animacji), jak i krajobrazowego (dla panoramicznych). Interfejs powinien reagować responsywnie (narzędzia na dole w portrecie, z boku w krajobrazie).
* **Wielkość interfejsu:** Wszystkie przyciski (Odtwórz, Dodaj klatkę, Narzędzia) muszą mieć co najmniej 44x44 piksele. Wybierak kolorów powinien być wystarczająco duży, aby łatwo go dotknąć.
* **Gesty:**
* **Uszczypnięcie dwoma palcami:** Aby przybliżyć/oddalić płótno.
* **Przeciąganie dwoma palcami:** Aby przesuwać się po płótnie podczas przybliżenia.
* **Cofanie/Ponawianie:** Zaimplementuj widoczny przycisk "Cofnij" lub gest podwójnego stuknięcia (opcjonalne, ale zalecane).
* **Informacja zwrotna:** Po wybraniu narzędzia powinno ono nieznacznie zwiększyć skalę lub zostać podświetlone. Pociągnięcia rysunku powinny pojawiać się natychmiast, bez opóźnień.
TWÓRZ • UDOSTĘPNIAJ • ZARABIAJ
Gry są świetne. Tworzenie ich jest jeszcze lepsze.
Opis gry
O Toonle
Toonle to innowacyjna, internetowa gra rysunkowo-animacyjna, która przekształca Twoje kreatywne pomysły w zachwycające sekwencje animacji. Ta darmowa platforma łączy sztukę tradycyjnej animacji klatka po klatce z nowoczesnymi narzędziami cyfrowymi, czyniąc animację dostępną dla wszystkich — od zupełnie początkujących po doświadczonych artystów.
Niezależnie od tego, czy szkicujesz proste postaci z patyków, czy tworzysz złożone animacje postaci, Toonle zapewnia wszystkie niezbędne narzędzia do tworzenia profesjonalnie wyglądających animacji bezpośrednio w przeglądarce.
Kluczowe funkcje
Profesjonalne narzędzia animacyjne
Toonle oferuje kompleksowy zestaw narzędzi do rysowania i animacji zaprojektowanych z myślą o łatwości użytkowania:
- Intuicyjny interfejs rysowania : Czyste, przyjazne użytkownikowi środowisko pracy, które nie przytłacza początkujących
- Wiele opcji pędzli : Różne rodzaje i rozmiary pędzli do osiągania różnych efektów artystycznych
- Niestandardowe palety kolorów : Twórz i zapisuj spersonalizowane schematy kolorów dla spójnego stylu
- Animacja klatka po klatce : Tradycyjne techniki animacji uproszczone i udostępnione wszystkim
- Cieniowanie : Oglądaj poprzednie i następne klatki podczas rysowania dla płynnego przepływu animacji
Funkcje społeczności i udostępniania
Łącz się z innymi animatorami i prezentuj swoją kreatywność:
- Galeria Animacji : Przeglądaj i zainspiruj się twórczością społeczności
- Łatwe Udostępnianie : Udostępniaj swoje animacje znajomym i na platformach społecznościowych
- Opinie Społeczności : Otrzymuj konstruktywną krytykę i wsparcie od innych użytkowników
- Wyróżnione Treści : Odkrywaj popularne animacje i popularnych twórców
Nauka i rozwój
Toonle to nie tylko narzędzie – to kompleksowa platforma edukacyjna:
- Wbudowane samouczki : Przewodniki krok po kroku obejmujące podstawy animacji
- Inspirująca biblioteka treści : Oglądaj przykłady doskonałych technik animacji
- Stopniowy rozwój umiejętności : Narzędzia i funkcje, które rozwijają się wraz z Twoimi umiejętnościami
- Zasady Animacji : Poznaj standardowe techniki branżowe, takie jak timing, spacing i easing
Mechaniki Gry
Proces Animacji Klatka po Klatce
Tworzenie animacji w Toonle odbywa się według prostego, ale skutecznego przepływu pracy:
- Przygotuj Scenę : Wybierz rozmiar płótna i częstotliwość klatek dla swojej animacji
- Narysuj Pierwszą Klatkę : Użyj narzędzi rysunkowych, aby stworzyć swój początkowy obraz
- Dodaj Kolejne Klatki : Twórz nowe klatki i rysuj przyrostowe zmiany
- Podglądaj Swoją Pracę : Odtwórz swoją animację, aby zobaczyć, jak płynie
- Dopracuj i Wykończ : Dostosuj timing, dodaj szczegóły i udoskonal swoje dzieło
- Udostępnij i Eksportuj : Zapisz swoją animację i podziel się nią ze społecznością
Możliwości Twórcze
Gra obsługuje różne style i gatunki animacji:
- Animacja Postaci : Ożywiaj patyczkowych ludzików, postacie z kreskówek i oryginalne kreacje
- Grafika Ruchoma : Twórz abstrakcyjne animacje i efekty wizualne
- Opowiadanie historii : Twórz krótkie animowane historie i scenariusze
- Treści edukacyjne : Twórz instruktażowe animacje i demonstracje
- Sztuka eksperymentalna : Przekraczaj granice kreatywności z unikalnymi technikami animacji
Sterowanie i obsługa
Doświadczenie na komputerze
- Rysowanie myszą : Używaj lewego przycisku myszy, aby rysować płynne linie i kształty
- Kontrola precyzyjna : Dostosuj swoje dzieło z precyzyjnymi ruchami kursora
- Skróty klawiaturowe : Przyspiesz pracę dzięki wygodnym skrótom klawiszowym
- Dostęp do wielu narzędzi : Szybkie przełączanie między pędzlami, kolorami i kontrolami animacji
Kompatybilność mobilna
- Rysowanie dotykowe : Naturalne rysowanie palcem na smartfonach i tabletach
- Sterowanie Gestami : Intuicyjne gesty szczypania do powiększania i przesuwania
- Responsywny Interfejs : Optymalizowany układ dla mniejszych ekranów
- Synchronizacja Międzyplatformowa : Kontynuuj projekty na różnych urządzeniach
Dlaczego warto wybrać Toonle
Idealne dla początkujących
Toonle usuwa tradycyjne bariery w tworzeniu animacji:
- Brak potrzeby pobierania : Zacznij animować natychmiast w swojej przeglądarce
- Bezpłatne użytkowanie : Korzystaj ze wszystkich kluczowych funkcji bez żadnych opłat
- Łagodna krzywa uczenia się : Przyjazny interfejs, który nie onieśmiela nowych użytkowników
- Obszerne samouczki : Naucz się podstaw animacji poprzez przewodnie lekcje
Odpowiednie dla wszystkich poziomów umiejętności
Choć przyjazne dla początkujących, Toonle oferuje zaawansowane możliwości doświadczonym animatorom:
- Techniki profesjonalne : Wsparcie dla zaawansowanych zasad animacji
- Elastyczne Narzędzia : Dostosuj się do różnych stylów animacji i preferencji
- Nauka Społecznościowa : Ucz się od innych animatorów i dziel się technikami
- Tworzenie Portfolio : Stwórz kolekcję animacji, aby zaprezentować swoje umiejętności
Swoboda Twórcza
Wyrażaj siebie bez ograniczeń:
- Brak Ograniczeń Stylistycznych : Twórz realistyczne, kreskówkowe, abstrakcyjne lub eksperymentalne animacje
- Oryginalna Twórczość : Pełne prawo własności do twoich dzieł
- Możliwości Współpracy : Łącz się z innymi twórcami, by realizować wspólne projekty
- Centrum Inspiracji : Odkrywaj nowe pomysły, przeglądając twórczość społeczności
Jak Zacząć
Rozpoczęcie przygody z animacją w Toonle jest proste:
- Uruchom Grę : Otwórz Toonle w dowolnej nowoczesnej przeglądarce internetowej
- Zapoznaj się z Samouczkami : Zacznij od wbudowanego systemu samouczków
- Stwórz Swoją Pierwszą Animację : Zacznij od prostych ruchów i postaci
- Dołącz do Społeczności : Udostępniaj swoje prace i łącz się z innymi animatorami
- Rozwijaj Swoje Umiejętności : Ćwicz regularnie i eksperymentuj z nowymi technikami
Niezależnie od tego, czy interesuje Cię tworzenie prostych animowanych GIF-ów, nauka profesjonalnych technik animacji, czy po prostu zabawa sztuką cyfrową, Toonle zapewnia idealną platformę do odkrywania swojej kreatywności i ożywiania pomysłów dzięki magii animacji.