Skip to content

Commit 7b94ffc

Browse files
authored
Update README.md
1 parent aae9c96 commit 7b94ffc

1 file changed

Lines changed: 30 additions & 12 deletions

File tree

README.md

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# CYOA Studio (Choose Your Own Adventure Editor)
22

3-
CYOA Studio is a powerful tool for creating, styling, and exporting choice-based narrative games, interactive fiction, and interactive graphic novels. It runs entirely in your web browser, providing a complete workflow from writing your story to packaging a distributable ZIP file for platforms like itch.io. [itch.io](https://itch.io/).
3+
CYOA Studio is a powerful tool for creating, styling, and exporting choice-based narrative games, interactive fiction, and interactive graphic novels. It runs entirely in your web browser, providing a complete workflow from writing your story to packaging a distributable ZIP file for platforms like [itch.io](https://itch.io/).
44

55
<img width="1905" height="959" alt="image" src="https://github.com/user-attachments/assets/8a7c3d51-4abd-4d48-8a15-cb728ec17401" />
66

@@ -21,7 +21,9 @@ An example project. Unzip and open with CYOA Studio: [Example_The_Last_Broadcast
2121
* **Visual Story Creation:**
2222
* A rich text editor for writing your narrative.
2323
* Easily add, edit, and link choices between scenes.
24-
* Includes an integrated **Generative AI Image** tool to create and add unique artwork for your scenes directly within the editor.
24+
* **Integrated Generative AI Tools:**
25+
* **Image Generation:** Create and add unique artwork for your scenes directly within the editor.
26+
* **Text Processing:** Use AI to rewrite or expand upon your story text.
2527

2628
* **Interactive Story Map:**
2729
* A collapsible tree view provides a clear visualization of your story's branches.
@@ -32,18 +34,31 @@ An example project. Unzip and open with CYOA Studio: [Example_The_Last_Broadcast
3234
* **Live Player & Preview:**
3335
* Instantly playtest your game from the start or the current scene using the built-in player.
3436
* Launch a full, clean preview of your project in a new browser tab at any time.
37+
* **Modern Player UI:** The exported game features a clean, overlay-based UI with quick access to menu, sound toggle, and exit functions, ensuring an immersive experience.
3538

36-
* **Integrated Asset Management:** Select image and audio files from your computer. The studio automatically copies them into your project folder on save, ensuring all asset paths are correct and ready for export.
39+
* **Integrated Asset Management:**
40+
* Select image and audio files from your computer using a file picker or by **dragging and dropping** them directly onto the input fields.
41+
* The studio automatically copies them into your project folder on save, ensuring all asset paths are correct and ready for export.
3742

38-
* **Powerful Style Editor:** Customize the visual theme of your game, including layout, colors, fonts, padding, background images, and even global background music. Your custom style is saved with the project.
43+
* **Powerful Style Editor:**
44+
* Customize the visual theme of your game, including layout, colors, fonts, padding, background images, and even global background music. Your custom style is saved with the project.
45+
46+
* **Batch AI Processing:**
47+
* Automate image creation for all scenes that are missing one.
48+
* Optionally use AI to automatically generate image prompts based on your scene's text.
49+
* Globally add artistic suffixes (e.g., ", cinematic lighting, 4k") to all generated images.
50+
* Includes tools to safely delete all image paths or all prompts from your project at once.
3951

4052
* **One-Click Export:**
4153
* Export your complete, playable project as a self-contained `.zip` file. This bundle includes the game, your custom theme, and all required assets, ready to be shared or hosted.
54+
* The exported game is optimized for both desktop and mobile browsers.
4255
* Export specific data, such as all AI image prompts, to a structured `.json` file for analysis or external use.
4356

44-
* **Single-File, Zero Installation:** The entire studio is a single `.html` file. It runs directly in your browser with no installation, servers, or dependencies required.
57+
* **Single-File, Zero Installation:**
58+
* The entire studio is a single `.html` file. It runs directly in your browser with no installation, servers, or dependencies required.
4559

46-
* **Local-First Project Management:** Works directly with folders on your computer via the File System Access API. Your project, including the story file and all assets, is saved locally, not in the cloud. The app tracks unsaved changes to prevent data loss.
60+
* **Local-First Project Management:**
61+
* Works directly with folders on your computer via the File System Access API. Your project, including the story file and all assets, is saved locally, not in the cloud. The app tracks unsaved changes to prevent data loss.
4762

4863
## Screenshots
4964

@@ -111,19 +126,22 @@ First, open the `index.html` file in your browser. From the **Menu**, you have t
111126

112127
### 3. Add Media (Image & Audio)
113128

114-
You have two ways to add images, and one way to add audio:
129+
You have multiple ways to add images and audio:
115130

116-
1. **From Your Computer:**
131+
1. **From Your Computer (File Picker):**
117132
* Click the **yellow folder icon** next to the "Image" or "Audio" field.
118133
* Select any image or audio file from your computer.
119-
* Or you can drag & drop the files to the string widgets.
120-
* The app automatically sets the correct path. The file will be copied into your project's `images/` or `sounds/` folder the next time you click **"Save Project"**.
121134

122-
2. **Using Generative AI (for Images):**
123-
* Write a descriptive prompt in the "Generative AI Image" text box.
135+
2. **From Your Computer (Drag & Drop):**
136+
* Drag an image or audio file from your file explorer directly onto the corresponding text input field (e.g., drag `my_image.png` onto the "Image Path" field). The input will highlight to show it's a valid target.
137+
138+
3. **Using Generative AI (for Images):**
139+
* Write a descriptive prompt in the "AI Image Prompt" text box.
124140
* Click the **purple Render button** (with the stars icon) to create an image.
125141
* Once you're happy with the result, click the **green Add button** (with the plus icon) to add it to your scene.
126142

143+
For all methods, the app automatically sets the correct path. The file will be copied into your project's `images/` or `sounds/` folder the next time you click **"Save Project"**.
144+
127145
### 4. Customize the Look & Feel
128146

129147
1. Click **"Menu"** and select **"Style Template Editor"**.

0 commit comments

Comments
 (0)