Emoji Builder - Create Custom Emojis

Seele01-Flash
By
Emoji Builder is a creative online game where you design custom emojis by mixing and matching different emoji parts. Create unlimited unique combinations and showcase your creations in a fun reel format.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**Emoji Builder 3D**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** High-fidelity "Glossy 3D" aesthetic similar to standard Apple/Android emojis but rendered in real-time 3D. The style should be vibrant, clean, and cartoonish. * **Core Models (The Canvas):** A central, spherical "Base" mesh (yellow default, but color-changeable). * **Modular Attachments (The "Parts"):** Create a library of 3D meshes for distinct facial features. These must be separate objects that can be attached to the Base sphere: * *Eyes:* Pixel sunglasses (voxel style), googly eyes, winking eyes, heart eyes. * *Mouths:* Smiling, frowning, zipper-mouth, sticking tongue out. * *Accessories:* Top hat, devil horns, halo, tears of joy (particle effect or mesh). * **Background:** A dynamic, radiating sunburst background (like the reference image) using a shader or a rotating 2D plane behind the 3D model. Use bright orange (`#FFA500`) and yellow (`#FFFF00`) tones. * **Materials:** Use `MeshStandardMaterial` with high roughness (0.2) and metalness (0.1) for a plastic/glossy look. Add a rim light shader to make the emojis pop against the background. * **Optimization:** Ensure geometry is low-poly (use smooth shading). Use a single texture atlas for all accessories to minimize draw calls on mobile GPUs. ### 2. Audio Requirements * **BGM (Background Music):** A bouncy, "shop channel" style track. Upbeat, looped, using marimbas, light percussion, and synth plucks to encourage creativity. * **Sound Effects (SFX):** * *Pop/Plop:* A satisfying "suction cup" or "pop" sound when a player places an item (eyes, mouth) onto the face. * *Whoosh:* A light transition sound when swapping between category tabs (e.g., switching from Eyes to Hats). * *Sparkle/Chime:* A celebratory sound when the user hits the "Save" or "Finish" button. * *Shutter Click:* When adding an emoji to the final "Reel". ### 3. Gameplay Loop * **Phase 1: Creation (The Editor):** * The player sees a blank 3D sphere in the center. * A tabbed menu at the bottom allows selection of categories: Base Color, Eyes, Mouth, Accessories. * Clicking an item instantly applies it to the 3D model. Clicking a different item in the same category replaces the previous one. * **Phase 2: Collection:** * A "Save" button allows the player to "bank" the current creation. * The goal is to create **4 unique emojis**. * Small thumbnails of completed emojis appear in a slot tray at the top of the screen. * **Phase 3: The Reel (Showcase):** * Once 4 slots are filled, a "Showtime!" animation triggers. * The 4 created emojis spin around the center or bounce in a sequence, celebrating the player's creativity with particle confetti. ### 4. Mobile Controls & Interaction * **Orientation:** **Portrait Mode** (Vertical) is mandatory for this design to mimic a phone's selfie cam or social media editor interface. * **Camera Controls:** * Allow the user to **rotate** the emoji horizontally (Y-axis) by dragging their finger across the 3D model area to see side profiles (e.g., checking if the hat fits correctly). * Auto-snap back to front-facing view when the finger is released. * **UI/UX:** * **Bottom Sheet Menu:** A scrollable horizontal list for items (Eyes, Mouths, etc.). Buttons must be large (**min 60x60px**) for easy thumb tapping. * **Haptic Feedback:** Trigger a light vibration (`navigator.vibrate(10)`) whenever an item is equipped. * **Responsive Layout:** The 3D canvas takes up the top 60% of the screen; the editor controls take up the bottom 40%. Ensure no UI overlaps the central emoji model. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Emoji Builder is an innovative creative game that lets you become an emoji designer! This engaging online game allows you to mix and match different parts from your favorite emojis to create completely unique and personalized expressions. Whether you want to combine a winking eye with a surprised mouth or add funky accessories like sunglasses and hats, the possibilities are endless.

The game challenges you to create four different custom emojis, which you can then display in an exciting reel to show off your creative skills. With countless combinations available, every player can express their unique style and personality through their emoji creations.

Core Features

Unlimited Creative Freedom

Emoji Builder offers an extensive library of emoji parts including: - Facial expressions : Eyes, mouths, eyebrows in various styles - Accessories : Hats, sunglasses, and other fun add-ons - Color variations : Different skin tones and vibrant colors - Special effects : Unique elements to make your emojis stand out

Interactive Reel Showcase

Once you've crafted your four masterpiece emojis, the game lets you present them in a dynamic reel format. This feature adds an extra layer of excitement as you can admire your creations and potentially share your artistic vision with others.

Cross-Platform Compatibility

The game works seamlessly across all devices - whether you're on a desktop computer, smartphone, or tablet. The intuitive interface adapts perfectly to both mouse and touch controls.

Game Mechanics

The gameplay revolves around a simple yet addictive concept: creative combination . You start with a base emoji face and then add various elements to transform it into something entirely new. The drag-and-drop interface makes it easy to experiment with different combinations until you achieve the perfect look.

Each emoji part can be positioned and layered to create depth and personality. Want to create a cool emoji wearing sunglasses? Simply drag the sunglasses onto your base emoji. Looking to make something more dramatic? Combine multiple accessories and expressions for truly unique results.

Operation Guide

Basic Controls

  • Mouse Users : Click and drag emoji parts onto your base emoji
  • Touch Screen Users : Tap and drag elements to position them
  • Positioning : Fine-tune placement by dragging parts to exact locations
  • Layering : Add multiple elements to create complex designs
  • Reset : Start over anytime if you want to try a different approach

Step-by-Step Creation Process

  1. Choose your base emoji face
  2. Browse through available parts and accessories
  3. Drag desired elements onto your emoji
  4. Adjust positioning for the perfect look
  5. Repeat the process to create four unique emojis
  6. View your collection in the showcase reel

Why Play Emoji Builder

Perfect for Creative Expression

This game is ideal for players who love customization and creative expression. It's particularly appealing to: - Art enthusiasts who enjoy design challenges - Social media users who want to create unique content - Young players developing their artistic skills - Anyone looking for a relaxing, creative gaming experience

Educational Benefits

Beyond entertainment, Emoji Builder helps develop: - Visual design skills through color and composition choices - Creative thinking by encouraging unique combinations - Digital literacy through intuitive interface interaction - Patience and focus while perfecting designs

Stress-Free Gaming

Unlike competitive games, Emoji Builder offers a peaceful, pressure-free environment where you can take your time and experiment freely. There's no time limit, no scoring pressure - just pure creative fun.

Social Connection

The reel feature allows you to appreciate your artistic achievements and potentially inspire others. Creating custom emojis can also be a great conversation starter about personal expression and creativity.

Frequently Asked Questions (FAQ)