Playable Generator

---

Introduction and Getting Started

The Playable Generator is an innovative AI-powered tool within Ludo.ai that allows you to rapidly create, iterate on, and test simple web-based games directly from textual descriptions. This feature is designed to bridge the gap between game idea and interactive prototype, enabling quick validation of core mechanics and concepts without requiring any direct coding from your side. All game generation and modifications are done through natural language prompts.

With the Playable Generator, you can:

• Generate functional 2D or 3D mini-games using natural language prompts.
• Choose between different web game engines.
• Iteratively refine gameplay, visuals, and rules through conversational AI.
• View the generated game code (though you cannot edit it directly) and see how AI modifications impact it.
• Instantly play and test your generated game within the Ludo.ai platform.
• Share a playable version of your game with others.

The Playable Generator is perfect for rapid prototyping, testing game mechanics, or quickly visualizing a game loop.

Accessing the Playable Generator:

1. Navigate to Playable Generator: Find "Playable Generator" in the left-hand sidebar menu of the Ludo.ai platform.
2. Your Playables List: Upon entering, you'll see a list of your previously created playables. You can:
   • Click "+ Create New" to start a new game from scratch.
   • Click "Load" next to an existing playable to continue working on it.

---

Creating a New Playable & Supported Engines

To generate a new playable game:

1. Click the "+ Create New" button from the "Your Playables" list page.
2. Choose Engine: Select your desired game engine. The choice of engine influences the type of game that can be generated and the underlying code structure. Currently supported engines are:
   • PixiJS (2D): A fast and flexible 2D WebGL renderer. Ideal for 2D sprite-based games, puzzle games, and other 2D experiences.
   • Three.js (3D): A popular 3D library for creating and displaying animated 3D computer graphics in a web browser. Suitable for simple 3D games, physics-based interactions, and 3D visualizations.
3. Describe Your Game: In the text box provided, describe the game you want to create. See the next section, "Crafting Effective Initial Prompts," for detailed guidance.
4. Click the "Generate Playable" button.
5. Ludo.ai will process your request, indicated by messages like "Applying game design expertise...", "Generating awesome...", and "Hold tight, magic in progress...". This may take a few moments.
6. Once generated, you'll be taken to the Playable Interface.

---

Crafting Effective Initial Prompts

The quality of your initial prompt significantly influences the success and relevance of your generated playable. Here's how to craft effective prompts:

• Be Clear and Concise: Use straightforward language to describe the core concept of your game.
• Focus on Core Mechanics: Clearly state the primary actions the player will perform and the main objective.
• Specify Controls: Mention how the player will interact (e.g., "Player moves with arrow keys and jumps with spacebar," "Player clicks to drop pieces"). Games should be playable with a mouse and/or keyboard.
• Start Simple: This is crucial. Aim for a very basic, playable version of your idea first. You can always add complexity through iteration. Trying to generate a highly complex game from the outset is more likely to lead to errors or unexpected behavior.
• Define Win/Loss Conditions (If Applicable): How does the game end? What constitutes success or failure?
• Keep it Web-Friendly: Remember these are simple web games. Avoid describing features that are typically found in large, standalone desktop or console games (e.g., vast open worlds, complex multiplayer networking, high-fidelity realistic graphics).
• Single-Screen Focus: For initial generation, think about games that primarily take place on a single screen or have a very simple progression.

Good Prompt Examples (Starting Simple):

• "A game where the player uses the mouse to click on falling circles before they hit the bottom. Clicking a circle makes it disappear and adds a point to the score."
• "A basic 3D snake game. The player controls a snake with arrow keys, eats food to grow longer, and game over if it hits the walls or itself."
• "A simple 2D platformer. The player uses arrow keys to move left/right and space to jump. There's a single platform to land on and a coin to collect."
• "A 3D game where the player is a cube that can be moved with WASD keys. The goal is to push another cube into a target zone."

Prompts to Avoid (Initially Too Ambitious or Vague):

• "Make a game like Grand Theft Auto but in space." (Too complex, vast scope)
• "An amazing RPG with a deep story and lots of characters." (Too vague, lacks specific mechanics for a playable prototype)
• "A game that uses voice commands to control a virtual orchestra." (Potentially beyond simple web browser capabilities for this tool)
• "Generate a full-fledged city building simulation with complex economy." (Too ambitious for initial generation)

Limitations to Consider:

• Simplicity is Key: The generator excels at creating simple, core-mechanic focused games.
• No Asset Generation (Yet): The tool primarily generates code. It uses basic shapes or simple placeholders for game objects. You cannot ask it to "create a detailed character sprite" or "import 3D models."
• Web Browser Constraints: Games are JavaScript-based and run in a browser, so performance and features are constrained by that environment.
• AI Interpretation: While powerful, the AI interprets your text. Misunderstandings can occur, especially with ambiguous or overly complex prompts.

By starting simple and being clear, you set the stage for successful generation and smoother iteration.

---

The Playable Interface

After generating or loading a playable, you'll interact with a two-panel interface. It's important to remember that while you can view the game's code, you cannot edit it directly; all modifications are made through AI prompts.

Left Panel: Control and Iteration

This panel contains information about your playable and tools for AI-driven iteration.

• Settings & Info:
  • Engine: Displays the selected engine (e.g., Three.js (3D)).
  • Summary: A brief AI-generated summary of the current game state.
  • How To Play: AI-generated instructions on how to play the current version of the game. This updates as you iterate.
• Credit Display: Shows your current Playable Generator credit balance. Iterations consume credits.
• "All Playables" Button: Returns you to the list of your playables.
• Iterate with Ludo: This is the core section for refining your game.
  • Commit Log: Shows a history of changes, starting with the "Initial commit" and detailing subsequent AI modifications. Each commit represents a version of your game.
  • Suggested Improvements: AI offers clickable suggestions for common game enhancements (e.g., "Improve visual appearance by adding shadows," "Implement a score display"). Clicking these will prompt the AI to implement the feature.
  • "Ask for changes to your game" Chat Input: A text box where you can type natural language requests to modify your game. (e.g., "Make the pieces fall faster," "Change the camera angle to be more top-down," "Add a background color").

Right Panel: Preview and Actions

This panel displays the interactive game and action buttons.

• Playable Preview: An embedded window where your generated game runs. You can interact with it directly using your keyboard/mouse as per the "How To Play" instructions.
• "Show Code" / "Hide Code" Button: Toggles a view of the JavaScript code generated for the game. When code is shown, the playable preview is hidden. This is for viewing purposes only; the code cannot be edited here.
• "Restart Game" Button: Restarts the game in the Playable Preview window.
• "Share" Button: Allows you to generate a shareable link for your playable.

---

Iterating and Refining Your Playable

The power of the Playable Generator lies in its iterative capabilities. You do not need to write any code; all refinements are done by instructing the AI.

1. Identify Desired Changes: Play your game in the preview and decide what you want to change or add.
2. Make a Request:
   • Type your request into the "Ask for changes to your game" chat input in the left panel. Be clear and specific.
     • Example: "The camera perspective isn't great. It's not centered and I can't clearly view the board borders."
     • Example: "The pieces are disappearing at the bottom of the grid. They should stop at the floor."
   • Alternatively, click one of the Suggested Improvements.
3. AI Processing: Ludo.ai will process your request ("Ludo is thinking...").
4. Review Changes:
   • The AI will respond with a summary of the changes it made in the Commit Log.
   • The Playable Preview will update to reflect the new changes. If the game preview doesn't load, an error might have occurred (see "Fixing Errors in the Game").
   • The Settings & Info (especially "How To Play") may also update.
   • New Suggested Improvements may appear.
5. View Code Differences (Optional): Under the AI's commit message, you can click "Show X Changes" to expand a code diff view, highlighting lines added, removed, or modified. This helps understand the AI's implementation but is not for direct editing.
6. Test: Play the updated game to see if the changes meet your expectations.
7. Repeat: Continue this process to incrementally build and refine your game.

---

Fixing Errors in the Game

It's normal for some AI-driven edits to occasionally fail or introduce bugs into your playable game. The AI is a powerful tool for code generation and modification, but it relies entirely on your textual descriptions of problems and desired outcomes. It cannot "see" the game you are playing or "experience" the issues firsthand. Therefore, clear communication is key.

Error Indication:

• If a runtime error occurs, the Playable Preview might not load correctly (e.g., showing "Loading Preview..." indefinitely).
• A red error bar may appear at the bottom of the preview area, displaying a specific error message from the game's code (e.g., "Runtime Error: Line 392 - Uncaught TypeError: Cannot set properties of null...").

Using the "Fix Error" Button:

• When an error is detected and displayed in the red error bar, a "Fix Error" button will often appear.
• Clicking this button prompts the AI to analyze the provided error message and the current game code to attempt an automatic fix.
• The AI will then report its actions in the commit log, and the game preview will try to reload.

Manually Asking for Fixes & Addressing Misunderstandings:

If the "Fix Error" button isn't available, if the automatic fix doesn't resolve the issue, or if the AI seems to have misunderstood your previous request:

1. Describe the Problem Clearly: In the "Ask for changes to your game" chat input, clearly describe what's going wrong.
   • If there's an error message, include it or the key parts of it. Example: "The game shows a TypeError: Cannot set properties of null when the piece hits the ground. Please fix this."
   • Describe the unwanted behavior you are observing. Example: "The player cube falls through the floor instead of landing on it," or "When I press the spacebar, the character moves right instead of jumping."
   • Explain what you expected to happen versus what is actually happening. This contrast helps the AI understand the goal.
2. Be Specific About When It Occurs: If the error or unwanted behavior happens after a specific action, mention it. Example: "The game crashes and shows an error only when a piece hits the bottom of the screen."
3. Clarify Visual or Gameplay Issues:
   • Crucially, remember the AI cannot see the game you are seeing or play it. If something looks wrong or doesn't feel right during gameplay, you must describe the visual discrepancy or the incorrect behavior in words.
   • Instead of "this is bad," say "The player character is too small compared to the platforms, making it hard to land jumps," or "The enemies move too erratically and fast, they are impossible to avoid."
   • Instead of "it's not working right," say "The score doesn't increase when I collect a coin."
4. AI Debugging Attempt: The AI will process your request and attempt to modify the code to fix the described issue or misunderstanding. Review its changes in the commit log and test again.
5. Iterate on Fixes: Debugging and clarification can be iterative. If the first attempt doesn't work, provide more information, rephrase the problem, or point out what specific part of its previous fix was incorrect. You might say, "That didn't fix the player falling through. Ensure there is solid collision detection with the object named 'ground'."

By providing detailed, descriptive feedback, especially about visual and gameplay experiences that the AI cannot directly perceive, you significantly improve the chances of successful fixes and accurate iterations.

---

Managing Your Playables

All playables you create are automatically saved and associated with your Ludo.ai account.

• Accessing Playables: Click the "All Playables" button from the iteration interface or navigate to the Playable Generator from the main Ludo.ai menu. This will display a list of all playables you've worked on.
• List View: Each playable in the list shows:
  • An AI-generated summary of the game.
  • The engine used (e.g., PixiJS (2D), Three.js (3D)).
  • The last modified date and time.
• Loading: Click the "Load" button next to any playable in the list. This will open it in the iteration interface, allowing you to continue working on it from where you left off, playtest it, or share it.

---

Sharing Your Playable

You can easily share a public, playable snapshot of your game with others (e.g., colleagues, friends, testers).

1. While viewing your playable in the iteration interface, locate and click the "Share" button in the top right corner of the right panel.
2. A "Share Playable" dialog box will appear.
3. Click the "Generate share link" button.
4. A unique URL will be generated and displayed. Click the "Copy" button next to the link to copy it to your clipboard.
5. You can now share this link. Anyone with this link will be able to open a web page where they can play your game.
   • Important: The shared link provides a snapshot or a copy of your game at the time of sharing. If others modify the game through the shared link (if that functionality is enabled for shared playables), their changes will not affect your original version stored in your Ludo.ai account.

---

Best Practices and Tips

• Start Simple, Iterate Often: This is the golden rule. Begin with the most basic version of your core game mechanic. Don't try to generate a complex game in one initial prompt. Add features and complexity step-by-step.
• Be Specific and Clear in Prompts: When describing your game or requesting changes, use clear, unambiguous language. The more specific your prompt (e.g., "change the player's color to red" vs. "make it look better"), the better the AI can understand and implement your intent.
• Test Frequently: After each significant iteration or AI change, thoroughly playtest your game. This helps catch bugs or unintended behaviors early.
• Focus on Prototyping Core Mechanics: The Playable Generator excels at quickly creating functional prototypes to test if a game idea is fun or if a mechanic works as envisioned. It's not designed to generate fully polished, production-ready games with complex art assets.
• Understand AI Limitations: The AI is a powerful tool, but it's not a mind-reader or a seasoned game developer. It interprets text and modifies code based on patterns it has learned.
  • It might misunderstand very nuanced or abstract requests.
  • It may not always choose the most optimal or elegant coding solution, but it aims for functionality based on your prompt.
• Break Down Complex Requests: If you want to add a complex feature, break it down into smaller, manageable requests for the AI. For example, instead of "add a boss battle," try:
  1. "Add a large enemy at the end of the level."
  2. "Make the large enemy stationary."
  3. "Make the large enemy shoot projectiles every 3 seconds."
  4. "Give the large enemy 10 health points."
• Experiment with Prompts: If one phrasing doesn't work, try another. Sometimes, rewording a request can lead to better results.

---

Troubleshooting

This section covers general issues not directly related to in-game errors or AI misunderstandings (which are covered in Section "Fixing Errors in the Game").

• Playable Preview Not Updating After AI Commit:
  • First, try clicking the "Restart Game" button in the right panel.
  • Refresh your browser page. You might need to reload the playable from the "All Playables" list.
• Slow Generation/Iteration Times (General):
  • Ensure you have a stable and reasonably fast internet connection.
  • Extremely complex requests for initial generation or major iterative changes will naturally take longer for the AI to process.
  • During Ludo.ai platform peak usage times, there might be slight general delays. If persistent, check Ludo.ai status pages or community channels for announcements.
• Credit Depletion Issues:
  • Your current Playable Generator credit balance is displayed in the left panel.
  • If you believe there's an error in your credit count or consumption, contact Ludo.ai support.
  • If you frequently run out of credits, consider your Ludo.ai subscription plan for options that might offer more credits.
• General Interface Glitches (Buttons Unresponsive, Panels Not Displaying Correctly):
  • Try a hard refresh of your browser page (Ctrl+F5 or Cmd+Shift+R).
  • Clear your browser's cache and cookies for Ludo.ai.
  • Try using Ludo.ai in a different web browser to see if the issue is browser-specific.
  • Ensure your browser is updated to the latest version.

If problems persist and are not covered here or in Section "Fixing Errors in the Game", please contact Ludo.ai support or join our Discord server for assistance: https://discord.gg/FmTPyugsrR. When reporting an issue, provide as much detail as possible, including your initial prompt if relevant, the steps you took leading to the problem, and any error messages you encountered.