Toonle - Creative Animation Drawing Game
Prompt
MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**Toonle: Frame-by-Frame Animation Studio**". Please read the following detailed game design requirements first, and then generate the code accordingly:
### 1. Assets & Environment
* **Visual Style:** A clean, minimalistic 2D interface embedded within a 3D workspace. The aesthetic should be "Digital Paper" — crisp white canvas areas, soft drop shadows for depth, and rounded UI elements. The background should be a subtle, calming gradient (e.g., light cyan to pastel blue) or a desk texture to give the feeling of an animator's workspace.
* **3D Elements:** While the drawing is 2D, represent the "frames" as physical film strips or paper sheets floating in 3D space. When the user switches frames, animate the camera or the paper stack to simulate flipping a page (onion skinning metaphor).
* **Tools:** Render 3D representations of drawing tools (pencil, brush, eraser) that hover near the active canvas.
* **Performance:** Since this involves drawing, prioritize canvas texture performance. Use low-poly meshes for UI decorations and optimize the line rendering (use performant line shaders or texture-based strokes rather than heavy geometry for every pixel).
### 2. Audio Requirements
* **BGM:** A very lo-fi, chill-hop, or acoustic guitar track. It needs to be repetitive but non-intrusive to aid concentration and creativity.
* **SFX:**
* **Drawing:** Distinct sounds for different tools (scratchy pencil sound for sketching, wet marker sound for coloring, soft rubbing sound for erasing).
* **UI:** Satisfying "pop" or "click" sounds when selecting tools or colors.
* **Animation Playback:** A rapid "film projector" clicking sound or paper flipping sound when the user hits "Play" to preview their animation.
### 3. Gameplay Loop
* **Core Mechanic:** The user draws on a central canvas. They can add a new frame, which saves the current drawing and clears the canvas for the next frame.
* **Onion Skinning:** Crucial feature. When drawing on Frame 2, Frame 1 should be visible as a faint, semi-transparent layer underneath to guide the animation movement.
* **Playback:** A prominent "Play" button compiles the frames and loops them at a set frame rate (e.g., 12 FPS) to show the animation.
* **Tools:**
* **Brush Size:** A slider to adjust thickness.
* **Color Palette:** A simple color picker.
* **Eraser:** To remove mistakes.
* **Copy/Paste Frame:** To duplicate the previous drawing for slight modifications.
### 4. Mobile Controls & Interaction
* **Touch Input (Critical):** The drawing logic must map touch coordinates (touchstart, touchmove, touchend) precisely to the Three.js 3D plane or 2D canvas texture. It must support multi-touch rejection (so resting a palm doesn't draw, if possible, or strictly follow the primary touch point).
* **Orientation:** Support both Portrait (for tall animations) and Landscape (for widescreen). The UI should flow responsively (tools at the bottom for portrait, on the side for landscape).
* **UI Sizing:** All buttons (Play, Add Frame, Tools) must be at least 44x44 pixels. The color picker should be large enough to tap easily.
* **Gestures:**
* **Two-finger pinch:** To zoom in/out of the canvas.
* **Two-finger drag:** To pan around the canvas while zoomed in.
* **Undo/Redo:** Implement a prominent "Undo" button or a double-tap gesture (optional but recommended).
* **Feedback:** When a tool is selected, it should visually scale up slightly or highlight. Drawing strokes should appear instantly without lag.
Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.
Game Introduction
About Toonle
Toonle is an innovative online animation drawing game that transforms your creative ideas into stunning animated sequences. This free-to-play platform combines the art of traditional frame-by-frame animation with modern digital tools, making animation accessible to everyone from complete beginners to seasoned artists.
Whether you're sketching simple stick figures or crafting complex character animations, Toonle provides all the essential tools you need to create professional-looking animations directly in your browser.
Core Features
Professional Animation Tools
Toonle offers a comprehensive suite of drawing and animation tools designed for ease of use:
- Intuitive Drawing Interface : Clean, user-friendly workspace that doesn't overwhelm beginners
- Multiple Brush Options : Various brush types and sizes to achieve different artistic effects
- Custom Color Palettes : Create and save personalized color schemes for consistent styling
- Frame-by-Frame Animation : Traditional animation techniques made simple and accessible
- Onion Skinning : See previous and next frames while drawing for smooth animation flow
Community and Sharing Features
Connect with fellow animators and showcase your creativity:
- Animation Gallery : Browse and get inspired by community creations
- Easy Sharing : Share your animations with friends and social media platforms
- Community Feedback : Receive constructive criticism and encouragement from other users
- Featured Content : Discover trending animations and popular creators
Learning and Growth
Toonle isn't just a tool – it's a complete learning platform:
- Built-in Tutorials : Step-by-step guides covering animation fundamentals
- Inspiring Content Library : Watch examples of excellent animation techniques
- Progressive Skill Building : Tools and features that grow with your abilities
- Animation Principles : Learn industry-standard techniques like timing, spacing, and easing
Game Mechanics
Frame-by-Frame Animation Process
Creating animations in Toonle follows a simple yet powerful workflow:
- Setup Your Scene : Choose canvas size and frame rate for your animation
- Draw Your First Frame : Use the drawing tools to create your initial image
- Add Subsequent Frames : Create new frames and draw incremental changes
- Preview Your Work : Play back your animation to see how it flows
- Refine and Polish : Adjust timing, add details, and perfect your creation
- Share and Export : Save your animation and share it with the community
Creative Possibilities
The game supports various animation styles and genres:
- Character Animation : Bring stick figures, cartoons, and original characters to life
- Motion Graphics : Create abstract animations and visual effects
- Storytelling : Craft short animated stories and scenarios
- Educational Content : Make instructional animations and demonstrations
- Experimental Art : Push creative boundaries with unique animation techniques
Controls and Operation
Desktop Experience
- Mouse Drawing : Use left mouse button to draw smooth lines and shapes
- Precision Control : Fine-tune your artwork with precise cursor movements
- Keyboard Shortcuts : Speed up workflow with convenient hotkeys
- Multi-tool Access : Quick switching between brushes, colors, and animation controls
Mobile Compatibility
- Touch Drawing : Natural finger drawing on smartphones and tablets
- Gesture Controls : Intuitive pinch-to-zoom and pan gestures
- Responsive Interface : Optimized layout for smaller screens
- Cross-Platform Sync : Continue projects across different devices
Why Choose Toonle
Perfect for Beginners
Toonle removes the traditional barriers to animation creation:
- No Download Required : Start animating immediately in your browser
- Free to Use : Access all core features without any payment
- Gentle Learning Curve : User-friendly interface that doesn't intimidate newcomers
- Comprehensive Tutorials : Learn animation fundamentals through guided lessons
Suitable for All Skill Levels
While beginner-friendly, Toonle offers depth for experienced animators:
- Professional Techniques : Support for advanced animation principles
- Flexible Tools : Adapt to various animation styles and preferences
- Community Learning : Learn from other animators and share techniques
- Portfolio Building : Create a collection of animations to showcase your skills
Creative Freedom
Express yourself without limitations:
- No Style Restrictions : Create realistic, cartoon, abstract, or experimental animations
- Original Content : Full ownership of your creative works
- Collaborative Opportunities : Connect with other creators for joint projects
- Inspiration Hub : Discover new ideas through community browsing
Getting Started
Beginning your animation journey with Toonle is straightforward:
- Access the Game : Open Toonle in any modern web browser
- Explore Tutorials : Start with the built-in tutorial system
- Create Your First Animation : Begin with simple movements and characters
- Join the Community : Share your work and connect with other animators
- Develop Your Skills : Practice regularly and experiment with new techniques
Whether you're interested in creating simple animated GIFs, learning professional animation techniques, or just having fun with digital art, Toonle provides the perfect platform to explore your creativity and bring your ideas to life through the magic of animation.
Frequently Asked Questions (FAQ)
Is Toonle completely free to use?
+
Yes! Toonle is a free online animation game that provides access to all core drawing and animation tools without any payment required.
Do I need to download anything to use Toonle?
+
No download required! Toonle runs directly in your web browser on both desktop and mobile devices. Just visit the website and start creating.
Can I use Toonle on my phone or tablet?
+
Absolutely! Toonle is fully optimized for mobile devices. You can draw and animate using touch controls on smartphones and tablets.
Is Toonle suitable for animation beginners?
+
Yes, Toonle is perfect for beginners! It features built-in tutorials, an intuitive interface, and a supportive community to help you learn animation fundamentals.
Can I share my animations with others?
+
Definitely! Toonle includes easy sharing features that let you show your animations to friends and the community. You can also browse other creators' work for inspiration.
What animation techniques can I learn in Toonle?
+
Toonle teaches frame-by-frame animation, timing, spacing, onion skinning, and other professional animation principles through its tutorial system and community content.
Do I need drawing experience to use Toonle?
+
Not at all! Toonle welcomes users of all skill levels. The tutorials start with basics, and you can begin with simple stick figure animations before advancing to more complex projects.
Can I save my animation projects?
+
Yes, Toonle automatically saves your work, and you can export your finished animations to share them outside the platform or keep them as portfolio pieces.