You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+30-12Lines changed: 30 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# CYOA Studio (Choose Your Own Adventure Editor)
2
2
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/).
@@ -21,7 +21,9 @@ An example project. Unzip and open with CYOA Studio: [Example_The_Last_Broadcast
21
21
***Visual Story Creation:**
22
22
* A rich text editor for writing your narrative.
23
23
* 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.
25
27
26
28
***Interactive Story Map:**
27
29
* 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
32
34
***Live Player & Preview:**
33
35
* Instantly playtest your game from the start or the current scene using the built-in player.
34
36
* 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.
35
38
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.
37
42
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.
39
51
40
52
***One-Click Export:**
41
53
* 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.
42
55
* Export specific data, such as all AI image prompts, to a structured `.json` file for analysis or external use.
43
56
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.
45
59
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.
47
62
48
63
## Screenshots
49
64
@@ -111,19 +126,22 @@ First, open the `index.html` file in your browser. From the **Menu**, you have t
111
126
112
127
### 3. Add Media (Image & Audio)
113
128
114
-
You have two ways to add images, and one way to add audio:
129
+
You have multiple ways to add images and audio:
115
130
116
-
1.**From Your Computer:**
131
+
1.**From Your Computer (File Picker):**
117
132
* Click the **yellow folder icon** next to the "Image" or "Audio" field.
118
133
* 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"**.
121
134
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.
124
140
* Click the **purple Render button** (with the stars icon) to create an image.
125
141
* Once you're happy with the result, click the **green Add button** (with the plus icon) to add it to your scene.
126
142
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
+
127
145
### 4. Customize the Look & Feel
128
146
129
147
1. Click **"Menu"** and select **"Style Template Editor"**.
0 commit comments