Spaces:
Running
Running
Upload 5 files
Browse files- Pr2.md +250 -0
- Pr3.md +274 -0
- Pr4.md +225 -0
- Prompt_1.md +389 -0
- textures.md +474 -0
Pr2.md
ADDED
@@ -0,0 +1,250 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
### **NS\_Prompt\_02.txt**
|
2 |
+
|
3 |
+
' STAR DUST VOYAGER: GALAXY WANDERER \- INITIAL AND MAIN MENU SCREEN DESIGN
|
4 |
+
' CREATED BY GROK 3 (XAI) \- 01:35 PM CEST, MONDAY, JULY 21, 2025
|
5 |
+
' DEFINES DETAILED DESIGN AND IMPLEMENTATION OF INITIALLOADINGSCREEN AND MAINMENUSCREEN
|
6 |
+
' TARGETED FOR TRAE AI AGENT (LOVABLE.DEV)
|
7 |
+
' PURPOSE: DEVELOP THE VISUAL AND FUNCTIONAL FOUNDATION FOR THE GAME'S ENTRY SCREENS USING PIXIJS, INTEGRATING THEMATIC PIXELART, 3D DEPTH, AND CZECH LOCALIZATION, BUILDING ON NS\_PROMPT\_01
|
8 |
+
|
9 |
+
' GOALS
|
10 |
+
' \- Design and implement the InitialLoadingScreen to display asset loading progress, thematic visuals, and tips, using PixiJS for rendering with 3D depth illusion and pixelart style.
|
11 |
+
' \- Create the MainMenuScreen as a navigational hub with thematic UI elements (buttons, panels), parallax layers, and animated background, optimized with PixiJS for performance and immersion.
|
12 |
+
' \- Ensure both screens align with the game’s retro-futuristic aesthetic, featuring detailed textures, neon accents, and lore-inspired details (e.g., serial numbers, faded logos).
|
13 |
+
' \- Integrate Czech localization using i18next, with text rendered via PixiJS Text objects, and prepare for smooth transitions managed by SceneManager.
|
14 |
+
' \- Generate high-quality placeholder assets (backgrounds, UI elements, animations) compatible with PixiJS, adhering to the project’s asset management system from NS\_Prompt\_01.
|
15 |
+
' \- Lay the groundwork for subsequent prompts (e.g., NS\_Prompt\_03 for UI refinement) by establishing PixiJS rendering patterns, animation frameworks, and screen-specific logic.
|
16 |
+
|
17 |
+
' PROJECT CONTEXT
|
18 |
+
' \- BUILDS ON: NS\_Prompt\_01, assuming the project structure (star-dust-voyager), tech stack (React, PixiJS, Zustand), and initial assets are set up.
|
19 |
+
' \- ASSUMPTIONS: PixiApplication, AssetManager, and SceneManager are functional, with placeholder assets (e.g., loading\_background.png) available.
|
20 |
+
' \- DEPENDENCIES: client/src/game/rendering/PixiApplication.ts, client/src/game/core/AssetManager.ts, client/src/game/core/SceneManager.ts, client/public/locales/cs.json.
|
21 |
+
|
22 |
+
' SCREEN DESIGN SPECIFICATIONS
|
23 |
+
' \- INITIALLOADINGSCREEN
|
24 |
+
' \- PURPOSE: Display loading progress (0-100%), a thematic background, and randomized tips to engage players during asset loading.
|
25 |
+
' \- VISUAL STYLE:
|
26 |
+
' \- BACKGROUND: Space dock scene (1280x720px), dark \#050510 base, with a 16x16px pixelart ship silhouette, faint \#3388ff neon lights, and a 5px offset star layer for parallax (3 layers total).
|
27 |
+
' \- PROGRESS BAR: Horizontal bar (800x40px), metallic \#3388ff frame, \#050510 fill with a \#FFD700 gradient progress indicator, positioned at 640px, 500px.
|
28 |
+
' \- TEXT: Loading progress (e.g., "Načítání: 75%") in FontStyle\_PixelArt\_Thematic\_16pt (white \#FFFFFF, \#3388ff outline), and a tip (e.g., "Tip: Kontrolujte zásoby paliva před warpem\!") in FontStyle\_PixelArt\_Thematic\_12pt (gray \#CCCCCC).
|
29 |
+
' \- ANIMATION: Subtle star twinkling (8 frames, 15 FPS) and progress bar fill animation (16 frames, 20 FPS).
|
30 |
+
' \- FUNCTIONALITY:
|
31 |
+
' \- Load all assets from asset\_manifest.json using AssetManager.
|
32 |
+
' \- Update progress text and bar in real-time via PixiJS ticker.
|
33 |
+
' \- Display a random tip from cs.json on each load.
|
34 |
+
' \- Transition to MainMenuScreen when loading completes (progress \= 1), using SceneManager.transitionTo("MainMenuScreen").
|
35 |
+
' \- MAINMENUSCREEN
|
36 |
+
' \- PURPOSE: Serve as the main navigation hub with options (New Game, Load Game, Settings, Exit), featuring a dynamic galactic background and thematic UI.
|
37 |
+
' \- VISUAL STYLE:
|
38 |
+
' \- BACKGROUND: Galactic nebula (1280x720px), dark \#050510 base, with 3 parallax layers: distant stars (zIndex \-2), nebula clouds (zIndex \-1, 64 frames, 15 FPS), and orbiting station silhouette (zIndex 0, 16 frames, 10 FPS).
|
39 |
+
' \- BUTTONS: Four buttons (200x40px each), metallic \#3388ff frames, \#050510 textured fills, neon \#FFD700 glow on hover, labels from cs.json (e.g., "Nová Hra"), arranged vertically at 640px, 200px (spacing 60px).
|
40 |
+
' \- PANEL: Optional info panel (400x200px), dark \#050510 with \#333333 border, displaying a welcome message (e.g., "Vítejte ve hvězdné galaxii\!") and serial number (e.g., "SN-4721-XK"), positioned at 640px, 400px.
|
41 |
+
' \- ANIMATION: Nebula cloud drift, station orbit, and button hover pulse (16 frames, 15 FPS).
|
42 |
+
' \- FUNCTIONALITY:
|
43 |
+
' \- Render background layers and animate via PixiJS ticker.
|
44 |
+
' \- Handle button clicks to trigger SceneManager transitions (e.g., "NewGameScreen" for New Game).
|
45 |
+
' \- Display localized text and dynamic elements (e.g., station animation) with PixiJS.
|
46 |
+
|
47 |
+
' ASSET REQUIREMENTS
|
48 |
+
' \- NEW PLACEHOLDER ASSETS:
|
49 |
+
' \- client/public/assets/images/screens/loading\_background.png
|
50 |
+
' \- DIMENSIONS: 1280x720px
|
51 |
+
' \- DESIGN: Space dock with 16x16px ship silhouette, \#050510 background, \#3388ff neon lights, 5px offset star layer, 32x32px tile precision, PixiJS Texture-compatible.
|
52 |
+
' \- TOOL: Aseprite, with parallax layer separation.
|
53 |
+
' \- client/public/assets/images/screens/mainmenu\_background.png
|
54 |
+
' \- DIMENSIONS: 1280x720px
|
55 |
+
' \- DESIGN: Galactic nebula with 3 layers (stars, clouds, station), \#050510 base, \#3388ff/\#FF3300 nebula colors, 16x16px station sprite, 64-frame cloud animation, PixiJS Texture-compatible.
|
56 |
+
' \- TOOL: Aseprite, with spritesheet export for animation.
|
57 |
+
' \- client/public/assets/images/ui/buttons/menu\_button\_base.png
|
58 |
+
' \- DIMENSIONS: 200x40px
|
59 |
+
' \- DESIGN: Metallic \#3388ff frame (2px), \#050510 textured fill (4x4px grid), white \#FFFFFF "Placeholder" text, transparent background, PixiJS Sprite-compatible.
|
60 |
+
' \- TOOL: Aseprite, with 2-frame hover animation (menu\_button\_hover.png).
|
61 |
+
' \- client/public/assets/images/ui/panels/info\_panel\_base.png (optional)
|
62 |
+
' \- DIMENSIONS: 400x200px
|
63 |
+
' \- DESIGN: Dark \#050510 fill, \#333333 2px border, subtle grid texture, PixiJS Sprite-compatible.
|
64 |
+
' \- TOOL: Aseprite.
|
65 |
+
' \- UPDATE ASSET MANIFEST:
|
66 |
+
' \- Add new entries to client/public/assets/data/asset\_manifest.json:
|
67 |
+
\`\`\`json
|
68 |
+
{
|
69 |
+
"ui/button\_base": "images/ui/buttons/button\_base.png",
|
70 |
+
"screens/loading\_background": "images/screens/loading\_background.png",
|
71 |
+
"audio/loading\_theme": "audio/music/loading\_theme.ogg",
|
72 |
+
"fonts/default": "fonts/pixelart\_default.ttf",
|
73 |
+
"screens/mainmenu\_background": "images/screens/mainmenu\_background.png",
|
74 |
+
"ui/buttons/menu\_button\_base": "images/ui/buttons/menu\_button\_base.png",
|
75 |
+
"ui/buttons/menu\_button\_hover": "images/ui/buttons/menu\_button\_hover.png",
|
76 |
+
"ui/panels/info\_panel\_base": "images/ui/panels/info\_panel\_base.png"
|
77 |
+
}
|
78 |
+
|
79 |
+
’ PIXIJS CONFIGURATION (SCREEN-SPECIFIC) ’ \- INITIALLOADINGSCREEN: ’ \- USE: PixiApplication from NS\_Prompt\_01, with a new Container for loading elements. ’ \- SETUP: ’ \- Create a progressBar Container with a Graphics object for the bar and Text for progress. ’ \- Add a tipText Text object with random selection from cs.json. ’ \- Use ParticleContainer for star twinkling (50 particles, random alpha 0.1-0.5). ’ \- ANIMATION: Update progressBar width and tipText via ticker, with a 0.5s fade-out transition to MainMenuScreen. ’ \- MAINMENUSCREEN: ’ \- USE: PixiApplication with three Containers (stars, nebula, UI). ’ \- SETUP: ’ \- starsContainer: 100 static sprites (4x4px, \#FFFFFF), zIndex \-2. ’ \- nebulaContainer: AnimatedSprite with 64-frame spritesheet, zIndex \-1, speed 0.1. ’ \- uiContainer: Buttons as Sprites, panel as Sprite, Text for labels, zIndex 1\. ’ \- ANIMATION: Parallax scroll (stars at 0.5x speed, nebula at 0.2x), button hover with Filter (BlurFilter, 2px radius). ’ \- OPTIMIZATION: Use PixiJS batching for stars, texture atlas for button states, and limit nebula frames to 30 FPS on mobile.
|
80 |
+
|
81 |
+
’ CODE IMPLEMENTATION ’ \- InitialLoadingScreen.tsx
|
82 |
+
|
83 |
+
// client/src/components/InitialLoadingScreen.tsx
|
84 |
+
import { useEffect } from 'react';
|
85 |
+
import { pixiApp, PixiApplication } from '../game/rendering/PixiApplication';
|
86 |
+
import { assetManager } from '../game/core/AssetManager';
|
87 |
+
import { SceneManager } from '../game/core/SceneManager';
|
88 |
+
import { Text, Graphics, Container, ParticleContainer } from 'pixi.js';
|
89 |
+
import i18n from '../i18n';
|
90 |
+
|
91 |
+
const InitialLoadingScreen \= () \=\> {
|
92 |
+
useEffect(() \=\> {
|
93 |
+
const assets \= \[
|
94 |
+
"screens/loading\_background",
|
95 |
+
"ui/buttons/menu\_button\_base",
|
96 |
+
"audio/loading\_theme"
|
97 |
+
\];
|
98 |
+
const loadingContainer \= new Container();
|
99 |
+
pixiApp.addToStage(loadingContainer);
|
100 |
+
|
101 |
+
// Background
|
102 |
+
const bg \= new PIXI.Sprite(assetManager.getAsset("screens/loading\_background")\!);
|
103 |
+
loadingContainer.addChild(bg);
|
104 |
+
|
105 |
+
// Progress Bar
|
106 |
+
const progressBarBg \= new Graphics()
|
107 |
+
.beginFill(0x333333)
|
108 |
+
.drawRect(240, 460, 800, 40\)
|
109 |
+
.endFill();
|
110 |
+
const progressBar \= new Graphics()
|
111 |
+
.beginFill(0xFFD700)
|
112 |
+
.drawRect(240, 460, 0, 40);
|
113 |
+
loadingContainer.addChild(progressBarBg, progressBar);
|
114 |
+
|
115 |
+
// Text
|
116 |
+
const progressText \= new Text("Načítání: 0%", {
|
117 |
+
fontFamily: 'pixelart\_default',
|
118 |
+
fontSize: 16,
|
119 |
+
fill: 0xFFFFFF,
|
120 |
+
stroke: 0x3388ff,
|
121 |
+
strokeThickness: 1
|
122 |
+
});
|
123 |
+
progressText.anchor.set(0.5);
|
124 |
+
progressText.x \= 640;
|
125 |
+
progressText.y \= 520;
|
126 |
+
const tipText \= new Text(i18n.t('loading.tip\_1\_cz'), {
|
127 |
+
fontFamily: 'pixelart\_default',
|
128 |
+
fontSize: 12,
|
129 |
+
fill: 0xCCCCCC
|
130 |
+
});
|
131 |
+
tipText.anchor.set(0.5);
|
132 |
+
tipText.x \= 640;
|
133 |
+
tipText.y \= 560;
|
134 |
+
loadingContainer.addChild(progressText, tipText);
|
135 |
+
|
136 |
+
// Stars
|
137 |
+
const stars \= new ParticleContainer(50, {
|
138 |
+
position: true,
|
139 |
+
alpha: true
|
140 |
+
});
|
141 |
+
for (let i \= 0; i \< 50; i++) {
|
142 |
+
const star \= new PIXI.Sprite(PIXI.Texture.WHITE);
|
143 |
+
star.width \= star.height \= 4;
|
144 |
+
star.x \= Math.random() \* 1280;
|
145 |
+
star.y \= Math.random() \* 720;
|
146 |
+
star.alpha \= 0.1 \+ Math.random() \* 0.4;
|
147 |
+
stars.addChild(star);
|
148 |
+
}
|
149 |
+
loadingContainer.addChild(stars);
|
150 |
+
|
151 |
+
// Loading Logic
|
152 |
+
assetManager.loadAssets(assets).then(() \=\> {
|
153 |
+
pixiApp.getApp().ticker.add(() \=\> {
|
154 |
+
const progress \= assetManager.getProgress();
|
155 |
+
progressBar.width \= 800 \* progress;
|
156 |
+
progressText.text \= \`Načítání: ${Math.round(progress \* 100)}%\`;
|
157 |
+
if (progress \=== 1\) {
|
158 |
+
pixiApp.getApp().ticker.removeAllListeners();
|
159 |
+
SceneManager.transitionTo("MainMenuScreen");
|
160 |
+
}
|
161 |
+
});
|
162 |
+
});
|
163 |
+
|
164 |
+
return () \=\> {
|
165 |
+
loadingContainer.destroy({ children: true });
|
166 |
+
};
|
167 |
+
}, \[\]);
|
168 |
+
|
169 |
+
return ;
|
170 |
+
};
|
171 |
+
|
172 |
+
export default InitialLoadingScreen;
|
173 |
+
|
174 |
+
’ \- MainMenuScreen.tsx
|
175 |
+
|
176 |
+
// client/src/components/MainMenuScreen.tsx
|
177 |
+
import { useEffect } from 'react';
|
178 |
+
import { pixiApp } from '../game/rendering/PixiApplication';
|
179 |
+
import { assetManager } from '../game/core/AssetManager';
|
180 |
+
import { SceneManager } from '../game/core/SceneManager';
|
181 |
+
import { Container, Sprite, Text, AnimatedSprite, BlurFilter } from 'pixi.js';
|
182 |
+
import i18n from '../i18n';
|
183 |
+
|
184 |
+
const MainMenuScreen \= () \=\> {
|
185 |
+
useEffect(() \=\> {
|
186 |
+
const menuContainer \= new Container();
|
187 |
+
pixiApp.addToStage(menuContainer);
|
188 |
+
|
189 |
+
// Background Layers
|
190 |
+
const starsContainer \= new Container();
|
191 |
+
for (let i \= 0; i \< 100; i++) {
|
192 |
+
const star \= new Sprite(PIXI.Texture.WHITE);
|
193 |
+
star.width \= star.height \= 4;
|
194 |
+
star.x \= Math.random() \* 1280;
|
195 |
+
star.y \= Math.random() \* 720;
|
196 |
+
starsContainer.addChild(star);
|
197 |
+
}
|
198 |
+
starsContainer.zIndex \= \-2;
|
199 |
+
const nebulaContainer \= new AnimatedSprite(\[
|
200 |
+
assetManager.getAsset("screens/mainmenu\_background")\!.clone(),
|
201 |
+
// Assume 64-frame spritesheet
|
202 |
+
\]);
|
203 |
+
nebulaContainer.animationSpeed \= 0.1;
|
204 |
+
nebulaContainer.play();
|
205 |
+
nebulaContainer.zIndex \= \-1;
|
206 |
+
menuContainer.addChild(starsContainer, nebulaContainer);
|
207 |
+
|
208 |
+
// UI Elements
|
209 |
+
const buttons \= \[
|
210 |
+
"newGame\_cz", "loadGame\_cz", "settings\_cz", "exit\_cz"
|
211 |
+
\].map((key, index) \=\> {
|
212 |
+
const button \= new Sprite(assetManager.getAsset("ui/buttons/menu\_button\_base")\!);
|
213 |
+
button.x \= 640 \- 100;
|
214 |
+
button.y \= 200 \+ index \* 60;
|
215 |
+
const text \= new Text(i18n.t(\`mainMenu.${key}\`), {
|
216 |
+
fontFamily: 'pixelart\_default',
|
217 |
+
fontSize: 16,
|
218 |
+
fill: 0xFFFFFF,
|
219 |
+
stroke: 0x3388ff,
|
220 |
+
strokeThickness: 1
|
221 |
+
});
|
222 |
+
text.anchor.set(0.5);
|
223 |
+
text.x \= 100;
|
224 |
+
button.addChild(text);
|
225 |
+
button.interactive \= true;
|
226 |
+
button.on('mouseover', () \=\> button.filters \= \[new BlurFilter(2)\]);
|
227 |
+
button.on('mouseout', () \=\> button.filters \= \[\]);
|
228 |
+
return button;
|
229 |
+
});
|
230 |
+
menuContainer.addChild(...buttons);
|
231 |
+
|
232 |
+
// Parallax and Animation
|
233 |
+
pixiApp.getApp().ticker.add((delta) \=\> {
|
234 |
+
starsContainer.x \-= 0.5 \* delta;
|
235 |
+
nebulaContainer.x \-= 0.2 \* delta;
|
236 |
+
if (starsContainer.x \< \-1280) starsContainer.x \= 0;
|
237 |
+
if (nebulaContainer.x \< \-1280) nebulaContainer.x \= 0;
|
238 |
+
});
|
239 |
+
|
240 |
+
return () \=\> {
|
241 |
+
menuContainer.destroy({ children: true });
|
242 |
+
};
|
243 |
+
}, \[\]);
|
244 |
+
|
245 |
+
return ;
|
246 |
+
};
|
247 |
+
|
248 |
+
export default MainMenuScreen;
|
249 |
+
|
250 |
+
’ AI DIRECTIVES FOR TRAE ’ 1\. UPDATE PROJECT STRUCTURE: ’ \- Add client/src/components/InitialLoadingScreen.tsx and client/src/components/MainMenuScreen.tsx to the existing structure from NS\_Prompt\_01. ’ \- INSTRUCTION: Ensure TypeScript compiles and integrates with PixiCanvas.tsx. ’ 2\. GENERATE NEW ASSETS: ’ \- loading\_background.png: Follow design specs, export as PixiJS Texture. ’ \- mainmenu\_background.png: Create 64-frame spritesheet, optimize for PixiJS AnimatedSprite. ’ \- menu\_button\_base.png and menu\_button\_hover.png: Design 2-frame animation, PixiJS-compatible. ’ \- info\_panel\_base.png: Optional, follow design specs. ’ \- INSTRUCTION: Use Aseprite, verify with PixiJS Loader, and update asset\_manifest.json. ’ 3\. IMPLEMENT SCREENS: ’ \- Create InitialLoadingScreen.tsx with the provided code, testing progress and transition. ’ \- Create MainMenuScreen.tsx with the provided code, testing parallax and button interactivity. ’ \- INSTRUCTION: Run with Vite (npm run dev), confirm PixiJS rendering, and log transitions. ’ 4\. INTEGRATE LOCALIZATION: ’ \- Use i18next in both screens, rendering Text with cs.json keys. ’ \- INSTRUCTION: Test with i18n.t() calls, ensure proper font rendering. ’ 5\. OUTPUT REQUIREMENTS: ’ \- PROVIDE: List of new files and updated asset\_manifest.json. ’ \- PROVIDE: Screenshots of InitialLoadingScreen (at 50% and 100%) and MainMenuScreen (with hover effect). ’ \- PROVIDE: Confirm successful PixiJS rendering and transition from loading to menu. ’ \- PROVIDE: Full code of InitialLoadingScreen.tsx and MainMenuScreen.tsx with comments. ’ \- INSTRUCTION: Include logs and performance metrics (e.g., FPS) from PixiJS ticker.
|
Pr3.md
ADDED
@@ -0,0 +1,274 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
### **NS\_Prompt\_03.txt**
|
2 |
+
|
3 |
+
' STAR DUST VOYAGER: GALAXY WANDERER \- TRANSITION LOADING SCREEN AND NEW GAME SETUP MODULE
|
4 |
+
' CREATED BY GROK 3 (XAI) \- 02:15 PM CEST, MONDAY, JULY 21, 2025
|
5 |
+
' SPECIFIES DESIGN, VISUALS, LAYOUT, FUNCTIONALITY, ANIMATIONS, AND ASSETS FOR TRANSITIONLOADINGSCREEN AND NEWGAMESETUPSCREEN
|
6 |
+
' TARGETED FOR TRAE AI AGENT (LOVABLE.DEV)
|
7 |
+
' PURPOSE: DEVELOP TRANSITION LOADING SCREENS AND A MULTI-STEP NEW GAME SETUP WITH PILOT CREATION, SHIP SELECTION, CREW CHOICE, AND DIFFICULTY SETTINGS IN COMPLEX PIXELART STYLE, WITH CZECH LOCALIZATION
|
8 |
+
|
9 |
+
' GOALS
|
10 |
+
' \- Design and implement the TransitionLoadingScreen for smooth scene transitions, featuring animated warp lines and a pulsating nexus symbol, rendered with PixiJS.
|
11 |
+
' \- Create a multi-step NewGameSetupScreen with detailed UI for difficulty selection, pilot creation (with procedural portraits), ship selection, optional crew and scenario choices, and a summary step, all in retro-futuristic pixelart style.
|
12 |
+
' \- Ensure all player-facing text is in Czech using i18next, with dynamic updates and tooltips for enhanced UX.
|
13 |
+
' \- Generate high-quality pixelart assets (backgrounds, sprites, icons) and sound effects, optimized for PixiJS rendering and the game’s aesthetic from NS\_Prompt\_01 and Prompt 35\.
|
14 |
+
' \- Integrate with SceneManager for seamless transitions and gameSessionStore for saving player choices.
|
15 |
+
' \- Prepare for subsequent prompts (e.g., NS\_Prompt\_04 for InSystemScene) by establishing reusable UI patterns and procedural generation logic.
|
16 |
+
|
17 |
+
' PROJECT CONTEXT
|
18 |
+
' \- BUILDS ON: NS\_Prompt\_01 (project structure, tech stack), NS\_Prompt\_02 (InitialLoadingScreen, MainMenuScreen), and references Prompt 35 (global visual style) and Prompt 27/40 (alien races, portrait generation).
|
19 |
+
' \- ASSUMPTIONS: PixiApplication, AssetManager, and SceneManager are functional; placeholder assets and localization (cs.json) are available.
|
20 |
+
' \- DEPENDENCIES: client/src/game/rendering/PixiApplication.ts, client/src/game/core/AssetManager.ts, client/src/game/core/SceneManager.ts, client/public/locales/cs.json.
|
21 |
+
|
22 |
+
' 0\. ASSUMPTIONS AND GLOBAL STYLES
|
23 |
+
' \- PIXEL ART STYLE: Strict adherence to "Complex Detailed Pixel Art Style with Retro Touch" (Prompt 1, 35), 16x16px base tile, with 3D depth via parallax and lighting effects.
|
24 |
+
' \- ASSET DIRECTORY: Follows NS\_Prompt\_01 structure (e.g., client/public/assets/).
|
25 |
+
' \- UI COMPONENTS: Uses global styles (ButtonStyle\_Standard\_PixelArt, FontStyle\_PixelArt\_DefaultText) from NS\_Prompt\_01.
|
26 |
+
' \- LOCALIZATION: All text uses i18next keys with Czech defaults.
|
27 |
+
|
28 |
+
' 1\. TRANSITIONLOADINGSCREEN
|
29 |
+
' \- PURPOSE: Short loading screen between main scenes (e.g., MainMenu to NewGameSetup), displaying contextual text and animations.
|
30 |
+
' \- SPECIFICATION (TransitionLoadingScreenConfig):
|
31 |
+
\`\`\`json
|
32 |
+
{
|
33 |
+
"id": "TransitionLoadingScreen",
|
34 |
+
"screenName\_cz": "Načítání...",
|
35 |
+
"background": {
|
36 |
+
"type": "Subtle\_Animated\_PixelArt",
|
37 |
+
"assetPath": "client/public/assets/images/ui/loading\_screens/transition\_warp\_lines\_subtle\_pixel\_anim\_sheet.png",
|
38 |
+
"animationParams": { "frameCount": 32, "speed": 5, "loop": true },
|
39 |
+
"overlayColor": "\#000000B0"
|
40 |
+
},
|
41 |
+
"loadingIndicator": {
|
42 |
+
"type": "Pulsating\_Nexus\_Symbol\_Small\_PixelArt",
|
43 |
+
"assetPath": "client/public/assets/images/ui/icons/nexus\_symbol\_loading\_pulsate\_pixelart\_anim.png",
|
44 |
+
"animationParams": { "frameCount": 16, "speed": 2, "loop": true },
|
45 |
+
"position": { "x\_percent": 50, "y\_percent": 45, "anchor\_x": 0.5, "anchor\_y": 0.5 },
|
46 |
+
"sizePx": { "x": 48, "y": 48 }
|
47 |
+
},
|
48 |
+
"loadingText": {
|
49 |
+
"display": true,
|
50 |
+
"dynamicKey\_cz": "loading.text.contextual\_cz",
|
51 |
+
"defaultText\_cz": "PROSÍM ČEKEJTE...",
|
52 |
+
"fontStyleKey": "FontStyle\_PixelArt\_Loading\_Transition",
|
53 |
+
"position": { "x\_percent": 50, "y\_percent": 55, "anchor\_x": 0.5, "anchor\_y": 0.5 }
|
54 |
+
},
|
55 |
+
"displayDuration\_IfNoRealTask\_ms": 300,
|
56 |
+
"fadeInOut\_Animation": { "type": "FadeToFromBlack", "durationMs": 200 }
|
57 |
+
}
|
58 |
+
|
59 |
+
’ \- DESCRIPTION: ’ \- Displays animated warp lines and a pulsating nexus symbol during scene transitions or data loading. ’ \- Text updates dynamically (e.g., “Generování Postavy…”) via SceneManager. ’ \- PIXIJS IMPLEMENTATION: ’ \- Use PixiApplication with a Container for background (AnimatedSprite) and indicator (AnimatedSprite). ’ \- Apply overlay with Graphics and Text for loading message. ’ \- Animate via ticker with fade-in/out using PixiJS AlphaFilter. ’ \- REQUIRED ASSETS: ’ \- client/public/assets/images/ui/loading\_screens/transition\_warp\_lines\_subtle\_pixel\_anim\_sheet.png: 1280x720px, 32-frame spritesheet, warp effect with \#3388ff lines on \#050510. ’ \- client/public/assets/images/ui/icons/nexus\_symbol\_loading\_pulsate\_pixelart\_anim.png: 48x48px, 16-frame spritesheet, pulsating \#FFD700 symbol on \#050510. ’ \- FontStyle\_PixelArt\_Loading\_Transition: 16px, white \#FFFFFF with \#00AACC outline.
|
60 |
+
|
61 |
+
’ 2\. NEWGAMESETUPSCREEN ’ \- PURPOSE: Multi-step screen for configuring a new game, including difficulty, pilot creation, ship selection, crew choice, scenario, and summary. ’ \- SPECIFICATION (NewGameSetupScreenConfig):
|
62 |
+
|
63 |
+
{
|
64 |
+
"id": "NewGameSetupScreen",
|
65 |
+
"screenName\_cz": "Nová Hra \- Nastavení",
|
66 |
+
"panelStyle": {
|
67 |
+
"backgroundImageAsset\_Subtle\_Path": "client/public/assets/images/ui/backgrounds/new\_game\_setup\_bg\_blueprint\_grid\_animated.png",
|
68 |
+
"backgroundColor": "\#080A18F8",
|
69 |
+
"borderColor": "\#00AACC",
|
70 |
+
"borderWidthPx": 2,
|
71 |
+
"widthPercentOfScreen": 90,
|
72 |
+
"heightPercentOfScreen": 90,
|
73 |
+
"paddingPx": 30
|
74 |
+
},
|
75 |
+
"steps": \[
|
76 |
+
{ "stepId": "difficulty\_selection", "titleKey\_cz": "newgame.step1.title\_cz", "defaultTitle\_cz": "Nastavení Obtížnosti a Módů Hry", "ui\_Component\_Key": "NewGameStep\_Difficulty" },
|
77 |
+
{ "stepId": "pilot\_creation", "titleKey\_cz": "newgame.step2.title\_cz", "defaultTitle\_cz": "Vytvoření Pilota", "ui\_Component\_Key": "NewGameStep\_PilotCreation" },
|
78 |
+
{ "stepId": "ship\_selection", "titleKey\_cz": "newgame.step3.title\_cz", "defaultTitle\_cz": "Výběr Počáteční Lodi", "ui\_Component\_Key": "NewGameStep\_ShipSelection" },
|
79 |
+
{ "stepId": "crew\_selection", "titleKey\_cz": "newgame.step4.title\_cz", "defaultTitle\_cz": "Sestavení Počáteční Posádky (Volitelné)", "ui\_Component\_Key": "NewGameStep\_CrewSelection" },
|
80 |
+
{ "stepId": "scenario\_selection", "titleKey\_cz": "newgame.step5.title\_cz", "defaultTitle\_cz": "Zvolte Počáteční Scénář (Volitelné)", "ui\_Component\_Key": "NewGameStep\_ScenarioSelection" },
|
81 |
+
{ "stepId": "summary", "titleKey\_cz": "newgame.step6.title\_cz", "defaultTitle\_cz": "Souhrn Vašich Voleb", "ui\_Component\_Key": "NewGameStep\_Summary" }
|
82 |
+
\],
|
83 |
+
"navigationButtons": {
|
84 |
+
"nextButton\_TextKey\_cz": "newgame.next\_cz", "defaultNextButton\_Text\_cz": "Další \>",
|
85 |
+
"previousButton\_TextKey\_cz": "newgame.previous\_cz", "defaultPreviousButton\_Text\_cz": "\< Zpět",
|
86 |
+
"startGameButton\_TextKey\_cz": "newgame.start\_cz", "defaultStartGameButton\_Text\_cz": "Zahájit Dobrodružství\!",
|
87 |
+
"buttonStyleKey": "ButtonStyle\_Large\_Confirm\_PixelArt",
|
88 |
+
"layout\_Position": "Bottom\_Center\_Spread"
|
89 |
+
},
|
90 |
+
"stepIndicator\_UI": {
|
91 |
+
"displayType": "DotSequence\_Highlighted",
|
92 |
+
"dotStyle\_Active\_Asset": "assets/images/ui/dot\_active\_gold\_pixelart.png",
|
93 |
+
"dotStyle\_Inactive\_Asset": "assets/images/ui/dot\_inactive\_gray\_pixelart.png",
|
94 |
+
"position": "TopCenter"
|
95 |
+
},
|
96 |
+
"music\_NewGameSetup\_AssetPath": "client/public/assets/audio/music/themes/new\_game\_setup\_theme\_contemplative\_tech\_loop.ogg",
|
97 |
+
"transitionTo\_OnStartGame\_ScreenId": "TransitionLoadingScreen\_To\_InGame"
|
98 |
+
}
|
99 |
+
|
100 |
+
’ 2.1 STEP 1: DIFFICULTY AND GAME MODE SELECTION ’ \- SPECIFICATION (NewGame\_Step\_DifficultyConfig):
|
101 |
+
|
102 |
+
{
|
103 |
+
"ui\_Component\_Key": "NewGameStep\_Difficulty",
|
104 |
+
"titleKey\_cz": "newgame.step1.title\_cz", "defaultTitle\_cz": "Nastavení Obtížnosti a Módů Hry",
|
105 |
+
"layout\_Columns": 2,
|
106 |
+
"difficultySelection\_UI": {
|
107 |
+
"labelKey\_cz": "newgame.difficulty.label\_cz", "defaultLabel\_cz": "Zvolte Obtížnost:",
|
108 |
+
"options": \[
|
109 |
+
{ "value": "Easy", "labelKey\_cz": "difficulty.easy\_cz", "defaultLabel\_cz": "Lehká (Tulák Začátečník)", "description\_cz": "Mírnější nepřátelé, více zdrojů, menší postihy.", "iconAsset": "assets/images/icons/ui/difficulty\_easy\_shield.png" },
|
110 |
+
{ "value": "Normal", "labelKey\_cz": "difficulty.normal\_cz", "defaultLabel\_cz": "Normální (Ostřílený Poutník)", "description\_cz": "Vyvážený zážitek.", "iconAsset": "assets/images/icons/ui/difficulty\_normal\_sword\_shield.png" },
|
111 |
+
{ "value": "Hard", "labelKey\_cz": "difficulty.hard\_cz", "defaultLabel\_cz": "Těžká (Vesmírný Vlk Samotář)", "description\_cz": "Silnější nepřátelé, méně zdrojů.", "iconAsset": "assets/images/icons/ui/difficulty\_hard\_skull.png" },
|
112 |
+
{ "value": "Roguelike", "labelKey\_cz": "difficulty.roguelike\_cz", "defaultLabel\_cz": "Nemilosrdná (Legenda Prázdnoty)", "description\_cz": "Trvalá smrt, extrémní výzva.", "iconAsset": "assets/images/icons/ui/difficulty\_roguelike\_broken\_skull.png" }
|
113 |
+
\],
|
114 |
+
"displayType": "LargeButtons\_With\_IconAndDescription",
|
115 |
+
"selectedOption\_HighlightStyleKey": "SelectionHighlight\_GoldBorder\_Animated",
|
116 |
+
"defaultSelection": "Normal"
|
117 |
+
},
|
118 |
+
"gameModes\_UI": {
|
119 |
+
"labelKey\_cz": "newgame.gamemodes.label\_cz", "defaultLabel\_cz": "Speciální Herní Módy:",
|
120 |
+
"options": \[
|
121 |
+
{ "id": "permadeath\_mode", "labelKey\_cz": "gamemode.permadeath\_cz", "defaultLabel\_cz": "Trvalá Smrt", "tooltip\_cz": "Hra končí při explozi lodi (pouze pro 'Nemilosrdná').", "checkboxStyleKey": "Checkbox\_RetroTech\_Large", "isEnabled\_Condition": "difficulty \=== 'Roguelike'" },
|
122 |
+
{ "id": "ironman\_mode", "labelKey\_cz": "gamemode.ironman\_cz", "defaultLabel\_cz": "Režim Ironman", "tooltip\_cz": "Zakázané manuální ukládání.", "checkboxStyleKey": "Checkbox\_RetroTech\_Large" }
|
123 |
+
\]
|
124 |
+
},
|
125 |
+
"galaxySeed\_UI": {
|
126 |
+
"labelKey\_cz": "newgame.galaxyseed.label\_cz", "defaultLabel\_cz": "Seed Galaxie (volitelné):",
|
127 |
+
"inputField\_StyleKey": "TextInput\_PixelArt\_Retro\_Medium",
|
128 |
+
"randomizeButton\_Text\_cz": "Náhodný", "randomizeButton\_IconAsset": "assets/images/icons/ui/dice\_random\_icon.png", "randomizeButton\_StyleKey": "Button\_Small\_IconOnly\_PixelArt"
|
129 |
+
}
|
130 |
+
}
|
131 |
+
|
132 |
+
’ \- PIXIJS: Render buttons as Sprites with AnimatedSprite highlights, text via Text objects.
|
133 |
+
|
134 |
+
’ 2.2 STEP 2: PILOT CREATION ’ \- SPECIFICATION (NewGame\_Step\_PilotCreationConfig):
|
135 |
+
|
136 |
+
{
|
137 |
+
"ui\_Component\_Key": "NewGameStep\_PilotCreation",
|
138 |
+
"titleKey\_cz": "newgame.step2.title\_cz", "defaultTitle\_cz": "Vytvoření Pilota",
|
139 |
+
"layout\_Columns": 2,
|
140 |
+
"pilotName\_Input\_UI": {
|
141 |
+
"labelKey\_cz": "newgame.pilot.name\_cz", "defaultLabel\_cz": "Jméno Pilota:",
|
142 |
+
"inputField\_StyleKey": "TextInput\_PixelArt\_Retro\_Large",
|
143 |
+
"maxLength": 24
|
144 |
+
},
|
145 |
+
"pilotRace\_Selection\_UI": {
|
146 |
+
"labelKey\_cz": "newgame.pilot.race\_cz", "defaultLabel\_cz": "Rasa:",
|
147 |
+
"displayType": "Dropdown\_With\_RaceIcons\_And\_InfoTooltip",
|
148 |
+
"options\_Source\_AlienRaceDefinitions\_Playable": true,
|
149 |
+
"onRaceChange\_Action": "UpdatePortraitGenerator\_WithRaceParts\_And\_ResetAppearance"
|
150 |
+
},
|
151 |
+
"pilotPortrait\_Customization\_UI": {
|
152 |
+
"previewArea\_SizePx": { "x": 256, "y": 256 },
|
153 |
+
"previewBackground\_AssetPath": "assets/images/ui/new\_game\_setup/portrait\_preview\_bg\_tech.png",
|
154 |
+
"componentCategories\_cz": \[
|
155 |
+
{ "categoryId": "HeadShape", "label\_cz": "Tvar Hlavy", "partType\_Reference": "HeadShape" },
|
156 |
+
{ "categoryId": "HairStyle", "label\_cz": "Účes/Hlavové Útvary", "partType\_Reference": "HairOrHeadFeature" },
|
157 |
+
{ "categoryId": "Eyes", "label\_cz": "Oči", "partType\_Reference": "Eyes" },
|
158 |
+
{ "categoryId": "Mouth", "label\_cz": "Ústa", "partType\_Reference": "Mouth" },
|
159 |
+
{ "categoryId": "SkinPatterns", "label\_cz": "Vzory Kůže", "partType\_Reference": "SkinPattern" },
|
160 |
+
{ "categoryId": "Clothing", "label\_cz": "Oblečení \- Trup", "partType\_Reference": "Clothing" },
|
161 |
+
{ "categoryId": "Accessories", "label\_cz": "Doplňky", "partType\_Reference": "Accessory" }
|
162 |
+
\],
|
163 |
+
"partSelection\_UI\_Type": "Horizontal\_IconStrip\_With\_Arrows",
|
164 |
+
"colorSelection\_UI\_Type\_ForColorableParts": "PaletteGrid\_SmallSwatches",
|
165 |
+
"randomizeAppearance\_Button\_cz": {
|
166 |
+
"text\_cz": "Náhodný Vzhled", "iconAsset": "assets/images/icons/ui/dice\_random\_icon\_large.png",
|
167 |
+
"styleKey": "Button\_Standard\_PixelArt\_WithIcon",
|
168 |
+
"action": "Call\_ProceduralPortraitGenerator\_RandomizeForCurrentRace"
|
169 |
+
},
|
170 |
+
"genderOrEquivalent\_Selection\_IfRaceHasMultiple\_cz": true
|
171 |
+
},
|
172 |
+
"pilotOrigin\_Selection\_UI\_Optional": {
|
173 |
+
"labelKey\_cz": "newgame.pilot.origin\_cz", "defaultLabel\_cz": "Původ:",
|
174 |
+
"options\_Path": "assets/data/player\_setup/pilot\_origins\_cz.json",
|
175 |
+
"displayType": "Dropdown\_With\_DescriptionTooltip"
|
176 |
+
}
|
177 |
+
}
|
178 |
+
|
179 |
+
’ \- PIXIJS: Render preview as Sprite, use AnimatedSprite for part changes, Text for labels.
|
180 |
+
|
181 |
+
’ 2.3 STEP 3: SHIP SELECTION ’ \- SPECIFICATION (NewGame\_Step\_ShipSelectionConfig):
|
182 |
+
|
183 |
+
{
|
184 |
+
"ui\_Component\_Key": "NewGameStep\_ShipSelection",
|
185 |
+
"titleKey\_cz": "newgame.step3.title\_cz", "defaultTitle\_cz": "Výběr Počáteční Lodi",
|
186 |
+
"layout\_Type": "Horizontal\_ShipCarousel\_With\_StatsDisplay",
|
187 |
+
"availableStartingShips\_Ids": \["explorer\_scout\_nomad\_player\_start", "fighter\_light\_arrow\_starter", "transport\_small\_hauler\_starter", "corvette\_stealth\_shadow\_starter"\],
|
188 |
+
"shipDisplay\_InUI": {
|
189 |
+
"sprite\_AssetPath\_From\_ShipClassDefinition": true,
|
190 |
+
"sprite\_ScaleFactor": 1.0,
|
191 |
+
"animation\_Idle\_SubtleRotation\_Or\_EngineFlicker": { "frameCount": 8, "speed": 3, "loop": true },
|
192 |
+
"background\_ForShipSprite\_AssetPath": "assets/images/ui/new\_game\_setup/ship\_display\_hangar\_bay\_bg.png"
|
193 |
+
},
|
194 |
+
"shipStats\_Display\_KeyElements\_cz": \["Název Třídy", "Role", "Max. Trup", "Max. Štíty", "Rychlost", "Obratnost", "Nákladový Prostor", "Počet Zbraňových Slotů", "Stručný Popis Výhod/Nevýhod"\],
|
195 |
+
"shipStats\_Comparison\_UI\_Optional": true,
|
196 |
+
"shipName\_Input\_UI": {
|
197 |
+
"labelKey\_cz": "newgame.ship.name\_cz", "defaultLabel\_cz": "Pojmenujte Svou Loď:",
|
198 |
+
"inputField\_StyleKey": "TextInput\_PixelArt\_Retro\_Medium"
|
199 |
+
},
|
200 |
+
"shipColor\_Selection\_UI\_Basic": {
|
201 |
+
"labelKey\_cz": "newgame.ship.color\_cz", "defaultLabel\_cz": "Primární Barva Lodi:",
|
202 |
+
"colorPalette\_Options\_Path": "assets/data/player\_setup/ship\_starting\_colors.json",
|
203 |
+
"displayType": "ColorSwatch\_Buttons\_Selectable"
|
204 |
+
}
|
205 |
+
}
|
206 |
+
|
207 |
+
’ \- PIXIJS: Use Carousel with AnimatedSprite for ships, Text for stats.
|
208 |
+
|
209 |
+
’ 2.4 STEP 4: CREW SELECTION (OPTIONAL) ’ \- SPECIFICATION (NewGame\_Step\_CrewSelectionConfig):
|
210 |
+
|
211 |
+
{
|
212 |
+
"ui\_Component\_Key": "NewGameStep\_CrewSelection",
|
213 |
+
"titleKey\_cz": "newgame.step4.title\_cz", "defaultTitle\_cz": "Sestavení Počáteční Posádky (Volitelné)",
|
214 |
+
"allowSkip\_Button\_Text\_cz": "Začít Sám",
|
215 |
+
"maxSelectableCrew\_Initial": 2,
|
216 |
+
"candidatePool\_Generation\_Logic\_cz": "4-6 random candidates with procedural portraits and traits.",
|
217 |
+
"candidateDisplay\_UI\_ListItem": {
|
218 |
+
"layout\_cz": "Portrét vlevo, Jméno/Rasa/Hlavní Dovednost/Rys vpravo.",
|
219 |
+
"portraitSizePx": { "x": 48, "y": 48 },
|
220 |
+
"fontStyle\_NameKey": "StandardText\_Bold",
|
221 |
+
"fontStyle\_InfoKey": "SmallText\_Default",
|
222 |
+
"selectionCheckbox\_StyleKey": "Checkbox\_RetroTech\_Small"
|
223 |
+
},
|
224 |
+
"selectedCrew\_Summary\_Panel\_cz": "Small panel with portraits and names."
|
225 |
+
}
|
226 |
+
|
227 |
+
’ \- PIXIJS: Render candidates as Sprites, use Text for details.
|
228 |
+
|
229 |
+
’ 2.5 STEP 5: SCENARIO SELECTION (OPTIONAL) ’ \- SPECIFICATION (NewGame\_Step\_ScenarioSelectionConfig):
|
230 |
+
|
231 |
+
{
|
232 |
+
"ui\_Component\_Key": "NewGameStep\_ScenarioSelection",
|
233 |
+
"titleKey\_cz": "newgame.step5.title\_cz", "defaultTitle\_cz": "Zvolte Počáteční Scénář (Volitelné)",
|
234 |
+
"allowSkip\_Button\_Text\_cz": "Standardní Začátek",
|
235 |
+
"scenarioOptions\_Path": "assets/data/player\_setup/starting\_scenarios\_cz.json",
|
236 |
+
"displayType": "SelectableCards\_With\_ImageAndDescription",
|
237 |
+
"cardStyle\_AssetPath\_Template": "assets/images/ui/new\_game\_setup/scenario\_card\_{scenarioId}.png"
|
238 |
+
}
|
239 |
+
|
240 |
+
’ \- PIXIJS: Render cards as Sprites with Text overlays.
|
241 |
+
|
242 |
+
’ 2.6 STEP 6: SUMMARY ’ \- SPECIFICATION (NewGame\_Step\_SummaryConfig):
|
243 |
+
|
244 |
+
{
|
245 |
+
"ui\_Component\_Key": "NewGameStep\_Summary",
|
246 |
+
"titleKey\_cz": "newgame.step6.title\_cz", "defaultTitle\_cz": "Souhrn Vašich Voleb",
|
247 |
+
"layout\_Display\_ReadAllChoices\_cz": "Display all choices: Difficulty, Pilot Name/Race/Portrait, Origin, Ship, Crew, Scenario.",
|
248 |
+
"confirmationText\_cz": "Jste připraveni zahájit své vesmírné dobrodružství?",
|
249 |
+
"startGame\_Button\_Reference": "NewGameSetupScreenConfig.navigationButtons.startGameButton"
|
250 |
+
}
|
251 |
+
|
252 |
+
’ \- PIXIJS: Use Container for summary layout, Text for details.
|
253 |
+
|
254 |
+
’ 3\. REQUIRED GRAPHIC ASSETS ’ \- BACKGROUND: client/public/assets/images/ui/backgrounds/new\_game\_setup\_bg\_blueprint\_grid\_animated.png: 1280x720px, animated grid, \#00AACC lines. ’ \- DIFFICULTY ICONS: assets/images/icons/ui/difficulty\_easy\_shield.png, difficulty\_normal\_sword\_shield.png, difficulty\_hard\_skull.png, difficulty\_roguelike\_broken\_skull.png: 32x32px each. ’ \- GAME MODE ICONS: assets/images/icons/ui/gamemode\_permadeath\_icon.png, gamemode\_ironman\_icon.png: 24x24px. ’ \- RANDOMIZE BUTTONS: assets/images/icons/ui/dice\_random\_icon.png (24x24px), dice\_random\_icon\_large.png (48x48px). ’ \- PORTRAIT PARTS: client/public/assets/images/portraits/procedural/{raceId}/{partType}/: 64x64px PNGs for 3-4 races \+ Humans (e.g., human/HeadShape\_01.png). ’ \- PORTRAIT PREVIEW: assets/images/ui/new\_game\_setup/portrait\_preview\_bg\_tech.png: 256x256px, tech frame. ’ \- SHIP SPRITES: assets/images/ships/player\_starters/explorer\_nomad\_detailed\_preview.png, etc.: 128x256px, animated. ’ \- SHIP DISPLAY: assets/images/ui/new\_game\_setup/ship\_display\_hangar\_bay\_bg.png: 300x200px. ’ \- SCENARIO CARDS: assets/images/ui/new\_game\_setup/scenario\_card\_{scenarioId}.png: 200x150px each.
|
255 |
+
|
256 |
+
’ 4\. REQUIRED SOUND ASSETS ’ \- MUSIC: client/public/assets/audio/music/themes/new\_game\_setup\_theme\_contemplative\_tech\_loop.ogg: 3-min loop, 44.1kHz. ’ \- UI SOUNDS: sfx/ui/new\_game\_step\_next\_confirm.wav, previous\_click.wav, start\_adventure\_confirm\_epic.wav, dropdown\_select\_option\_click.wav, checkbox\_toggle\_tech\_click.wav, text\_input\_keypress\_pixel.wav, portrait\_part\_change\_click.wav, ship\_select\_confirm\_chime.wav, crew\_candidate\_select\_click.wav, randomize\_button\_dice\_roll.wav: 0.5-2s each.
|
257 |
+
|
258 |
+
’ 5\. AI DIRECTIVES FOR TRAE ’ \- IMPLEMENT TRANSITIONLOADINGSCREEN: ’ \- Create TransitionLoadingScreen.tsx with PixiJS logic (AnimatedSprite for background/indicator, Text for loading). ’ \- Ensure display during SceneManager transitions, update text dynamically. ’ \- Generate assets (warp lines, nexus symbol, font). ’ \- IMPLEMENT NEWGAMESETUPSCREEN: ’ \- Create NewGameSetupScreen.tsx to manage steps and navigation. ’ \- Implement each step (NewGameStep\_\*.tsx) with PixiJS rendering: ’ \- Step 1: Difficulty selection with buttons and checkboxes. ’ \- Step 2: Pilot creation with input, dropdown, and portrait customization (procedural generation). ’ \- Step 3: Ship selection with carousel and stats. ’ \- Step 4: Crew selection with random candidates. ’ \- Step 5: Scenario selection with cards. ’ \- Step 6: Summary with all choices. ’ \- Store choices in gameSessionStore.newGameConfig. ’ \- Generate all specified assets (pixelart sprites, sounds). ’ \- ENSURE: ’ \- Pixelart style with retro touch, Czech localization, smooth transitions. ’ \- Test with Vite, log FPS and transitions. ’ \- OUTPUT: ’ \- List of new files and assets. ’ \- Screenshots of each step and transition screen. ’ \- Full code of TransitionLoadingScreen.tsx and NewGameSetupScreen.tsx with subcomponents.
|
259 |
+
|
260 |
+
’ DIAGRAM UPDATE ’ graph TD A\[Spuštění Aplikace\] –\> B(NS\_Prompt\_02: Úvodní Načítací Obrazovka); B –\> C{NS\_Prompt\_02: Hlavní Menu Hry}; C –\> |“NOVÁ HRA”| D(NS\_Prompt\_03: Přechodová Načítací Obrazovka); D –\> E\[NS\_Prompt\_03: Tvorba Nové Hry (Vícekroková)\]; E –\> |Zahájit Hru| D2(NS\_Prompt\_03: Přechodová Načítací Obrazovka
|
261 |
+
“Generuji Galaxii…”); D2 –\> F\_GAME\[NS\_Prompt\_42: Hlavní Herní Scéna\]; C –\> |“NAČÍST HRU”| G(NS\_Prompt\_03: Přechodová Načítací Obrazovka); G –\> H\[Obrazovka Načtení Uložené Hry\]; H –\> |Načíst| G2(NS\_Prompt\_03: Přechodová Načítací Obrazovka
|
262 |
+
“Načítám Hru…”); G2 –\> F\_GAME; C –\> |“NASTAVENÍ”| I\[NS\_Prompt\_13: Nastavení Hry\]; C –\> |“KNIHOVNA”| J\[NS\_Prompt\_19 & 47: Knihovna Znalostí\]; C –\> |“TVŮRCI”| K\[Obrazovka Tvůrců\]; C –\> |“UKONČIT HRU”| L\[Potvrzovací Dialog Ukončení\]; style D fill:\#ff9900,stroke:\#fff,stroke-width:2px style E fill:\#ff9900,stroke:\#fff,stroke-width:2px style D2 fill:\#ff9900,stroke:\#fff,stroke-width:2px style G fill:\#ff9900,stroke:\#fff,stroke-width:2px style G2 fill:\#ff9900,stroke:\#fff,stroke-width:2px
|
263 |
+
|
264 |
+
\#\#\# Podrobnosti pro Trae
|
265 |
+
1\. \*\*TransitionLoadingScreen\*\*:
|
266 |
+
\- Animated background and indicator with PixiJS, short duration for fluidity.
|
267 |
+
2\. \*\*NewGameSetupScreen\*\*:
|
268 |
+
\- Multi-step UI with detailed customization (portraits, ships, crew), all rendered with PixiJS.
|
269 |
+
\- Procedural generation for portraits and crew, integrated with race data.
|
270 |
+
3\. \*\*Assets\*\*:
|
271 |
+
\- Extensive pixelart library for portraits, ships, and UI, generated with Aseprite.
|
272 |
+
4\. \*\*Code\*\*:
|
273 |
+
\- React components with PixiJS for each step, managed by a parent component.
|
274 |
+
|
Pr4.md
ADDED
@@ -0,0 +1,225 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
### **NS\_Prompt\_04.txt**
|
2 |
+
|
3 |
+
' STAR DUST VOYAGER: GALAXY WANDERER \- SETTINGS, CREDITS, EXIT DIALOG, AND LOAD GAME MODULE
|
4 |
+
' CREATED BY GROK 3 (XAI) \- 02:45 PM CEST, MONDAY, JULY 21, 2025
|
5 |
+
' SPECIFIES DESIGN, VISUALS, LAYOUT, FUNCTIONALITY, ANIMATIONS, AND ASSETS FOR SETTINGS, CREDITS, EXIT DIALOG, AND LOAD GAME SCREENS
|
6 |
+
' TARGETED FOR TRAE AI AGENT (LOVABLE.DEV)
|
7 |
+
' PURPOSE: IMPLEMENT SYSTEM SCREENS WITH PIXELART STYLE, CZECH LOCALIZATION, AND INTEGRATION WITH SCENEMANAGER AND STATE MANAGER
|
8 |
+
|
9 |
+
' GOALS
|
10 |
+
' \- Design and implement SettingsScreen as a modal UI for graphics, sound, and controls, with save/apply logic.
|
11 |
+
' \- Create CreditsScreen with scrolling text and animated starfield background.
|
12 |
+
' \- Develop ExitGameDialog for game termination with unsaved changes handling.
|
13 |
+
' \- Build LoadGameScreen for loading and deleting saved games with version compatibility checks.
|
14 |
+
' \- Generate all required pixelart assets and sound effects, optimized for PixiJS.
|
15 |
+
' \- Ensure responsive UI and integration with SceneManager and StateManager.
|
16 |
+
|
17 |
+
' PROJECT CONTEXT
|
18 |
+
' \- BUILDS ON: NS\_Prompt\_01 (project structure), NS\_Prompt\_02 (MainMenu), NS\_Prompt\_03 (TransitionLoadingScreen), and references Prompt 35 (visual style).
|
19 |
+
' \- ASSUMPTIONS: PixiApplication, AssetManager, SceneManager, and StateManager are functional.
|
20 |
+
' \- DEPENDENCIES: client/src/game/core/SceneManager.ts, client/src/game/core/StateManager.ts, client/public/locales/cs.json.
|
21 |
+
|
22 |
+
' 0\. ASSUMPTIONS AND GLOBAL STYLES
|
23 |
+
' \- PIXEL ART STYLE: Strict adherence to "Complex Detailed Pixel Art Style with Retro Touch" (Prompt 1, 35), 16x16px base tile, with depth effects.
|
24 |
+
' \- ASSET DIRECTORY: Follows NS\_Prompt\_01 (e.g., client/public/assets/).
|
25 |
+
' \- UI COMPONENTS: Uses global styles (ButtonStyle\_Standard\_PixelArt\_Retro, FontStyle\_PixelArt\_DefaultText) or generated by AI.
|
26 |
+
' \- LOCALIZATION: All text uses i18next keys with Czech defaults.
|
27 |
+
' \- SCENE/STATE MANAGEMENT: SceneManager and StateManager handle transitions and data persistence.
|
28 |
+
|
29 |
+
' 1\. SETTINGSSCREEN
|
30 |
+
' \- PURPOSE: Configurable modal screen for graphics, sound, and controls, accessible from MainMenu or In-Game Menu.
|
31 |
+
' \- SPECIFICATION (SettingsScreenConfig):
|
32 |
+
\`\`\`json
|
33 |
+
{
|
34 |
+
"id": "SettingsScreen",
|
35 |
+
"screenName\_cz": "Nastavení Hry",
|
36 |
+
"isModal": true,
|
37 |
+
"panelStyle": {
|
38 |
+
"backgroundImageAsset\_Subtle\_Path": "client/public/assets/images/ui/backgrounds/settings\_panel\_bg\_tech\_circuitry\_anim\_sheet.png",
|
39 |
+
"backgroundColor": "\#0A0F18F5",
|
40 |
+
"borderColor": "\#2070A0", "borderWidthPx": 2,
|
41 |
+
"widthPercentOfScreen\_IfModal": 80, "heightPercentOfScreen\_IfModal": 85, "paddingPx": 25,
|
42 |
+
"titleBar\_HeightPx": 40, "titleBar\_TextStyleKey": "FontStyle\_PixelArt\_Header\_Large\_PanelTitle\_Teal"
|
43 |
+
},
|
44 |
+
"tabDefinitions": \[
|
45 |
+
{
|
46 |
+
"id": "graphicsSettingsTab", "tabLabelKey\_cz": "settings.tab.graphics\_cz", "defaultTabLabel\_cz": "GRAFIKA",
|
47 |
+
"iconAsset": "client/public/assets/images/icons/tabs/icon\_tab\_graphics\_pixelart.png",
|
48 |
+
"layoutColumns": 2,
|
49 |
+
"items": \[
|
50 |
+
{ "itemType": "Label", "id": "gfx\_display\_header", "labelKey\_cz": "settings.graphics.display\_header\_cz", "defaultLabel\_cz": "NASTAVENÍ ZOBRAZENÍ", "labelStyleKey": "FontStyle\_PixelArt\_SectionHeader\_Orange" },
|
51 |
+
{ "itemType": "Dropdown", "id": "gfx\_resolution", "labelKey\_cz": "settings.graphics.resolution\_cz", "defaultLabel\_cz": "Rozlišení Obrazovky:", "options": \[{"value": "native", "label\_cz": "Nativní"}, {"value": "800x600", "label\_cz": "800x600"}, {"value": "1280x720", "label\_cz": "1280x720"}\], "defaultValue": "native", "currentValue\_StoreKey": "settings.graphics.resolution", "styleKey": "Dropdown\_RetroTech\_PixelArt", "requiresRestart": true, "tooltipTextKey\_cz": "settings.graphics.resolution.tooltip\_cz", "defaultTooltipText\_cz": "Nastaví rozlišení hry. Změna může vyžadovat restart." },
|
52 |
+
{ "itemType": "Checkbox", "id": "gfx\_colorblind\_protanopia", "labelKey\_cz": "settings.graphics.colorblind\_protanopia\_cz", "defaultLabel\_cz": "Režim Protanopie", "defaultValue": false, "currentValue\_StoreKey": "settings.accessibility.colorblindMode\_Protanopia", "styleKey": "Checkbox\_RetroTech\_PixelArt\_Toggle" }
|
53 |
+
\]
|
54 |
+
},
|
55 |
+
{
|
56 |
+
"id": "soundSettingsTab", "tabLabelKey\_cz": "settings.tab.sound\_cz", "defaultTabLabel\_cz": "ZVUK",
|
57 |
+
"iconAsset": "client/public/assets/images/icons/tabs/icon\_tab\_sound\_pixelart.png",
|
58 |
+
"layoutColumns": 2,
|
59 |
+
"items": \[
|
60 |
+
{ "itemType": "Label", "id": "snd\_volume\_header", "labelKey\_cz": "settings.sound.volume\_header\_cz", "defaultLabel\_cz": "HLOUBKA ZVUKU", "labelStyleKey": "FontStyle\_PixelArt\_SectionHeader\_Orange" },
|
61 |
+
{ "itemType": "Slider", "id": "snd\_master\_volume", "labelKey\_cz": "settings.sound.master\_volume\_cz", "defaultLabel\_cz": "Hlavní Hlasitost:", "min": 0, "max": 100, "defaultValue": 75, "currentValue\_StoreKey": "settings.sound.masterVolume", "styleKey": "Slider\_RetroTech\_PixelArt" }
|
62 |
+
\]
|
63 |
+
},
|
64 |
+
{
|
65 |
+
"id": "controlSettingsTab", "tabLabelKey\_cz": "settings.tab.controls\_cz", "defaultTabLabel\_cz": "OVLÁDÁNÍ",
|
66 |
+
"iconAsset": "client/public/assets/images/icons/tabs/icon\_tab\_controls\_pixelart.png",
|
67 |
+
"layoutColumns": 2,
|
68 |
+
"items": \[
|
69 |
+
{ "itemType": "Label", "id": "ctrl\_input\_header", "labelKey\_cz": "settings.controls.input\_header\_cz", "defaultLabel\_cz": "NASTAVENÍ OVLÁDÁNÍ", "labelStyleKey": "FontStyle\_PixelArt\_SectionHeader\_Orange" },
|
70 |
+
{ "itemType": "KeybindList", "id": "ctrl\_move\_up", "labelKey\_cz": "settings.controls.move\_up\_cz", "defaultLabel\_cz": "Posun Vzhůru:", "defaultValue": "W", "currentValue\_StoreKey": "settings.controls.moveUp", "styleKey": "KeybindListItem\_PixelArt" }
|
71 |
+
\]
|
72 |
+
}
|
73 |
+
\],
|
74 |
+
"actionButtons": {
|
75 |
+
"applyButton": { "id": "settings\_apply", "textLabelKey\_cz": "settings.button.apply\_cz", "defaultText\_cz": "POUŽÍT ZMĚNY", "action": { "type": "APPLY\_SETTINGS" }, "styleKey": "ButtonStyle\_Primary\_PixelArt\_Large" },
|
76 |
+
"defaultsButton": { "id": "settings\_defaults", "textLabelKey\_cz": "settings.button.defaults\_cz", "defaultText\_cz": "VÝCHOZÍ", "action": { "type": "RESET\_TO\_DEFAULTS", "scope": "CurrentTab" }, "styleKey": "ButtonStyle\_Secondary\_PixelArt\_Medium" },
|
77 |
+
"backOrCloseButton": { "id": "settings\_back", "textLabelKey\_cz": "settings.button.back\_cz", "defaultText\_cz": "ZPĚT", "action": { "type": "SAVE\_AND\_NAVIGATE\_BACK", "target": "PreviousScreen" }, "styleKey": "ButtonStyle\_Secondary\_PixelArt\_Medium",
|
78 |
+
"confirmDialog\_IfChangesUnapplied\_OnBack": {
|
79 |
+
"titleKey\_cz": "dialog.unsaved\_settings.title\_cz", "defaultTitle\_cz": "Neuložené Změny",
|
80 |
+
"messageKey\_cz": "dialog.unsaved\_settings.message\_cz", "defaultMessage\_cz": "Máte neuložené změny v nastavení. Chcete je použít před odchodem, nebo je zahodit?",
|
81 |
+
"button\_ApplyAndBack\_Text\_cz": "Použít a Zpět",
|
82 |
+
"button\_DiscardAndBack\_Text\_cz": "Zahodit a Zpět",
|
83 |
+
"button\_StayOnSettings\_Text\_cz": "Zůstat v Nastavení"
|
84 |
+
}
|
85 |
+
},
|
86 |
+
"layout": "Horizontal\_RightAligned\_Footer", "spacingPx": 15
|
87 |
+
},
|
88 |
+
"sharedTooltipStyleKey": "TooltipStyle\_Standard\_PixelArt\_Dark",
|
89 |
+
"onSettingsChanged\_NeedsRestart\_Indicator\_cz": { "text\_cz": "(vyžaduje restart hry)", "iconAsset": "client/public/assets/images/icons/ui/restart\_required\_pixelart\_icon.png", "color": "\#FFA500" },
|
90 |
+
"settingsStorage\_Mechanism": "LocalStorage\_Via\_SettingsStore",
|
91 |
+
"soundEffects": {
|
92 |
+
"openScreen": "sfx/ui/settings\_screen\_open\_interface.wav",
|
93 |
+
"closeScreen": "sfx/ui/settings\_screen\_close\_confirm.wav",
|
94 |
+
"tab\_Change": "sfx/ui/settings\_tab\_switch\_click.wav",
|
95 |
+
"setting\_ValueChange\_Generic": "sfx/ui/settings\_value\_change\_tick.wav",
|
96 |
+
"button\_Apply\_Click": "sfx/ui/settings\_apply\_changes\_confirm.wav",
|
97 |
+
"button\_Defaults\_Click": "sfx/ui/settings\_reset\_defaults\_action.wav"
|
98 |
+
}
|
99 |
+
}
|
100 |
+
|
101 |
+
’ \- PIXIJS: Render as Container with AnimatedSprite background, Text for labels, and interactive UI elements.
|
102 |
+
|
103 |
+
’ 2\. CREDITSSCREEN ’ \- PURPOSE: Displays credits and thanks with scrolling text and animated background. ’ \- SPECIFICATION (CreditsScreenConfig):
|
104 |
+
|
105 |
+
{
|
106 |
+
"id": "CreditsScreen",
|
107 |
+
"screenName\_cz": "Tvůrci Hry",
|
108 |
+
"isModal": true,
|
109 |
+
"background": {
|
110 |
+
"type": "Animated\_Starfield\_DeepSpace\_PixelArt",
|
111 |
+
"assetPath\_Template": "client/public/assets/images/ui/backgrounds/credits\_bg\_starfield\_parallax\_layer\_{1,2,3}.png",
|
112 |
+
"layerCount": 3,
|
113 |
+
"animationParams\_StarScroll": { "frameCount": 1, "speed": \-0.5, "loop": true }
|
114 |
+
},
|
115 |
+
"scrollingText\_Content\_Path\_cz": "client/public/assets/data/ui\_config/credits\_text\_cz.json",
|
116 |
+
"scrollingText\_Style": {
|
117 |
+
"fontFamily\_Title": "FontStyle\_PixelArt\_Header\_Large\_Gold",
|
118 |
+
"fontFamily\_Entry": "FontStyle\_PixelArt\_Credits\_White",
|
119 |
+
"lineSpacingPx": 8,
|
120 |
+
"scrollSpeed\_PixelsPerSecond": 30,
|
121 |
+
"alignment": "center"
|
122 |
+
},
|
123 |
+
"music\_CreditsTheme\_AssetPath": "client/public/assets/audio/music/themes/credits\_theme\_reflective\_epic\_loop.ogg",
|
124 |
+
"interactionButtons": {
|
125 |
+
"skipButton\_Text\_cz": "Přeskočit", "skipButton\_Key": "Escape", "skipButton\_StyleKey": "ButtonStyle\_Transparent\_Small\_TopRight",
|
126 |
+
"speedUpButton\_Text\_cz": "Zrychlit (Držet)", "speedUpButton\_Key": "ArrowDown",
|
127 |
+
"backButton\_Text\_cz": "Zpět do Menu", "backButton\_StyleKey": "ButtonStyle\_Standard\_PixelArt\_BottomCenter"
|
128 |
+
},
|
129 |
+
"autoReturnTo\_PreviousScreen\_AfterScrollEnd": true
|
130 |
+
}
|
131 |
+
|
132 |
+
’ \- PIXIJS: Use ParallaxContainer with AnimatedSprite layers, Text for scrolling content.
|
133 |
+
|
134 |
+
’ 3\. EXITGAMEDIALOG ’ \- PURPOSE: Confirmation dialog for game exit with unsaved changes handling. ’ \- SPECIFICATION (ExitGameDialogConfig):
|
135 |
+
|
136 |
+
{
|
137 |
+
"id": "ExitGameConfirmationDialog",
|
138 |
+
"dialogStyleKey": "DialogStyle\_PixelArt\_Warning\_Retro",
|
139 |
+
"titleKey\_cz": "dialog.exit.title\_cz", "defaultTitle\_cz": "Ukončit Hru?",
|
140 |
+
"messageText\_cz\_Template": "Opravdu si přejete ukončit {GameTitle}?{UnsavedChangesWarning\_IfPresent}",
|
141 |
+
"buttons": {
|
142 |
+
"confirmExit\_Button": { "textKey\_cz": "dialog.exit.button\_confirm\_cz", "defaultText\_cz": "Ano, Ukončit", "styleKey": "ButtonStyle\_Danger\_PixelArt", "action": "APPLICATION\_QUIT" },
|
143 |
+
"cancelExit\_Button": { "textKey\_cz": "dialog.exit.button\_cancel\_cz", "defaultText\_cz": "Ne, Zpět do Hry", "styleKey": "ButtonStyle\_Secondary\_PixelArt", "action": "CLOSE\_DIALOG" },
|
144 |
+
"saveAndExit\_Button\_IfUnsavedChanges": { "textKey\_cz": "dialog.exit.button\_save\_and\_exit\_cz", "defaultText\_cz": "Uložit a Ukončit", "styleKey": "ButtonStyle\_Primary\_PixelArt", "action": "SAVE\_GAME\_THEN\_APPLICATION\_QUIT" }
|
145 |
+
},
|
146 |
+
"iconAsset\_Warning\_Path": "client/public/assets/images/icons/ui/warning\_icon\_pixelart\_large.png",
|
147 |
+
"soundEffect\_OpenDialog": "sfx/ui/dialog\_open\_warning\_chime.wav"
|
148 |
+
}
|
149 |
+
|
150 |
+
’ \- PIXIJS: Render as Container with Sprite background and Text/buttons.
|
151 |
+
|
152 |
+
’ 4\. LOADGAMESCREEN ’ \- PURPOSE: Screen for loading and deleting saved game slots. ’ \- SPECIFICATION (LoadGameScreenConfig):
|
153 |
+
|
154 |
+
{
|
155 |
+
"id": "LoadGameScreen",
|
156 |
+
"screenName\_cz": "Načíst Uloženou Hru",
|
157 |
+
"isModal": true,
|
158 |
+
"panelStyle": {
|
159 |
+
"backgroundImageAsset\_Path": "client/public/assets/images/ui/backgrounds/load\_game\_bg\_data\_archives\_pixelart.png"
|
160 |
+
},
|
161 |
+
"layout": {
|
162 |
+
"saveSlotList\_Position": { "x\_percent": 30, "y\_percent": 20, "width\_percent": 40, "height\_percent": 60 },
|
163 |
+
"selectedSavePreviewPanel\_Position": { "x\_percent": 70, "y\_percent": 20, "width\_percent": 25, "height\_percent": 60 },
|
164 |
+
"actionButtons\_Panel\_Position": "Bottom\_Row\_Spread"
|
165 |
+
},
|
166 |
+
"saveSlotList\_MaxVisible\_BeforeScroll": 5,
|
167 |
+
"saveSlotItem\_Style": {
|
168 |
+
"heightPx": 100,
|
169 |
+
"backgroundColor\_Default": "\#0A0F18",
|
170 |
+
"backgroundColor\_Hover": "\#1A1F28",
|
171 |
+
"backgroundColor\_Selected": "\#2A2F38",
|
172 |
+
"borderColor\_Selected": "\#2070A0",
|
173 |
+
"thumbnail\_SizePx": { "x": 160, "y": 90 },
|
174 |
+
"thumbnail\_Placeholder\_AssetPath": "client/public/assets/images/ui/save\_load/save\_slot\_thumbnail\_placeholder.png",
|
175 |
+
"fontStyle\_SlotName": { "styleKey": "FontStyle\_PixelArt\_DefaultText\_Bold" },
|
176 |
+
"fontStyle\_PlayerName": { "styleKey": "FontStyle\_PixelArt\_DefaultText" },
|
177 |
+
"fontStyle\_GameTime": { "styleKey": "FontStyle\_PixelArt\_SmallText" },
|
178 |
+
"fontStyle\_RealDateTime": { "styleKey": "FontStyle\_PixelArt\_SmallText" },
|
179 |
+
"fontStyle\_GameVersion\_MismatchWarning": { "color": "\#FFA500" },
|
180 |
+
"deleteButton\_IconAsset": "client/public/assets/images/icons/ui/delete\_icon\_pixelart\_small.png",
|
181 |
+
"deleteButton\_StyleKey": "ButtonStyle\_IconOnly\_Danger\_Small"
|
182 |
+
},
|
183 |
+
"selectedSavePreviewPanel\_Content\_cz": {
|
184 |
+
"largerThumbnail": true,
|
185 |
+
"currentLocation\_Text\_cz": "Poslední Lokace: {SystemName} / {PlanetName}",
|
186 |
+
"mainQuest\_Progress\_Text\_cz": "Hlavní Úkol: {QuestName} ({PercentComplete}%)",
|
187 |
+
"shipName\_And\_Class\_Text\_cz": "Loď: {ShipName} (Třída {ShipClass})"
|
188 |
+
},
|
189 |
+
"actionButtons": {
|
190 |
+
"loadButton": { "id": "load\_game", "textLabelKey\_cz": "load.button.load\_cz", "defaultText\_cz": "NAČÍST HRU", "action": { "type": "LOAD\_SELECTED\_GAME" }, "styleKey": "ButtonStyle\_Primary\_PixelArt\_Large" },
|
191 |
+
"deleteButton": { "id": "delete\_save", "textLabelKey\_cz": "load.button.delete\_cz", "defaultText\_cz": "SMAZAT", "action": { "type": "DELETE\_SELECTED\_SAVE" }, "confirmDialog\_MessageKey\_cz": "load.dialog.delete\_confirm\_cz", "defaultConfirmDialog\_Message\_cz": "Opravdu smazat {SaveName}?", "styleKey": "ButtonStyle\_Danger\_PixelArt\_Medium" },
|
192 |
+
"backButton": { "id": "load\_back", "textLabelKey\_cz": "load.button.back\_cz", "defaultText\_cz": "ZPĚT", "action": { "type": "NAVIGATE\_BACK", "target": "PreviousScreen\_Or\_MainMenu" }, "styleKey": "ButtonStyle\_Secondary\_PixelArt\_Medium" }
|
193 |
+
},
|
194 |
+
"emptySaveList\_MessageKey\_cz": "load.message.no\_saves\_cz", "defaultEmptySaveList\_Message\_cz": "Žádné uložené hry nebyly nalezeny.",
|
195 |
+
"saveFileVersion\_CompatibilityCheck\_Logic\_cz": "Varovat hráče, pokud se snaží načíst uložení z nekompatibilní verze. Možnost 'Načíst na vlastní riziko'.",
|
196 |
+
"soundEffects": {
|
197 |
+
"openScreen": "sfx/ui/load\_game\_screen\_open\_data\_access.wav",
|
198 |
+
"slot\_Select": "sfx/ui/load\_game\_slot\_hover.wav",
|
199 |
+
"button\_Load\_Confirm": "sfx/ui/load\_game\_confirm\_systems\_online.wav",
|
200 |
+
"button\_Delete\_Confirm": "sfx/ui/load\_game\_delete\_confirm.wav",
|
201 |
+
"delete\_Success\_Sound": "sfx/ui/load\_game\_delete\_success.wav",
|
202 |
+
"delete\_Fail\_Sound": "sfx/ui/load\_game\_delete\_fail.wav"
|
203 |
+
}
|
204 |
+
}
|
205 |
+
|
206 |
+
’ \- PIXIJS: Use ScrollContainer for slots, Sprite for thumbnails, Text for details.
|
207 |
+
|
208 |
+
’ 5\. AI DIRECTIVES FOR TRAE ’ \- IMPLEMENT SETTINGSSCREEN: ’ \- Create SettingsScreen.tsx with tabs (Graphics, Sound, Controls) and UI elements. ’ \- Integrate with settingsStore for persistence. ’ \- Handle apply, defaults, and back logic with confirmation dialog. ’ \- IMPLEMENT CREDITSSCREEN: ’ \- Create CreditsScreen.tsx with scrolling Text and Parallax background. ’ \- Add skip, speed-up, and back controls. ’ \- IMPLEMENT EXITGAMEDIALOG: ’ \- Create ExitGameDialog.tsx with conditional buttons for unsaved changes. ’ \- Link to application quit logic. ’ \- IMPLEMENT LOADGAMESCREEN: ’ \- Create LoadGameScreen.tsx with slot list and preview panel. ’ \- Integrate with SaveLoadManager for metadata and deletion. ’ \- Add version compatibility check. ’ \- GENERATE ASSETS: ’ \- Settings: settings\_panel\_bg\_tech\_circuitry\_anim\_sheet.png, tab icons, UI styles. ’ \- Credits: starfield\_parallax\_layer\_{1,2,3}.png, fonts, music. ’ \- Exit: dialog\_warning\_bg\_pixelart.png, warning\_icon\_pixelart\_large.png. ’ \- Load: load\_game\_bg\_data\_archives\_pixelart.png, save\_slot\_thumbnail\_placeholder.png, delete\_icon\_pixelart\_small.png. ’ \- ENSURE: ’ \- Pixelart style with retro touch, Czech localization, responsive UI. ’ \- Test with SceneManager and StateManager. ’ \- OUTPUT: ’ \- List of new files and assets. ’ \- Screenshots of each screen/dialog.
|
209 |
+
|
210 |
+
’ DIAGRAM UPDATE ’ graph TD A\[Spuštění Aplikace\] –\> B(NS\_Prompt\_02: Úvodní Načítací Obrazovka); B –\> C{NS\_Prompt\_02: Hlavní Menu Hry}; C –\> |“NOVÁ HRA”| D(NS\_Prompt\_03: Přechodová Načítací Obrazovka); D –\> E\[NS\_Prompt\_03: Tvorba Nové Hry (Vícekroková)\]; E –\> |Zahájit Hru| D2(NS\_Prompt\_03: Přechodová Načítací Obrazovka
|
211 |
+
“Generuji Galaxii…”); D2 –\> F\_GAME\[NS\_Prompt\_42: Hlavní Herní Scéna\]; C –\> |“NAČÍST HRU”| G(NS\_Prompt\_03: Přechodová Načítací Obrazovka); G –\> H\[NS\_Prompt\_04: Obrazovka Načtení Uložené Hry\]; H –\> |Načíst| G2(NS\_Prompt\_03: Přechodová Načítací Obrazovka
|
212 |
+
“Načítám Hru…”); G2 –\> F\_GAME; C –\> |“NASTAVENÍ”| I\[NS\_Prompt\_04: Nastavení Hry (Modální)\]; I – Zpět –\> C; C –\> |“KNIHOVNA”| J\[NS\_Prompt\_19 & 47: Knihovna Znalostí (Modální)\]; J – Zpět –\> C; C –\> |“TVŮRCI”| K\[NS\_Prompt\_04: Obrazovka Tvůrců (Modální)\]; K – Zpět –\> C; C –\> |“UKONČIT HRU”| L\[NS\_Prompt\_04: Potvrzovací Dialog Ukončení\]; L – Ano –\> M\[Ukončení Aplikace\]; L – Ne –\> C; subgraph InGameInteractions \[Interakce ve Hře\] F\_GAME –\> N\[NS\_Prompt\_XX: Menu ve Hře (In-Game Menu \- Modální)\]; N –\> I\_GM\[NS\_Prompt\_04: Nastavení Hry (Modální)\]; I\_GM – Zpět –\> N; N –\> L\_GM\[NS\_Prompt\_04: Potvrzovací Dialog Ukončení\]; L\_GM – Ano –\> M; L\_GM – Ne –\> N; N –\> H\_GM\[NS\_Prompt\_04: Obrazovka Načtení Uložené Hry (Modální)\]; H\_GM – Zpět –\> N; N – Uložit Hru –\> O\[Obrazovka Uložení Hry (Modální)\]; O – Zpět –\> N; end style H fill:\#ff9900,stroke:\#fff,stroke-width:2px style I fill:\#ff9900,stroke:\#fff,stroke-width:2px style K fill:\#ff9900,stroke:\#fff,stroke-width:2px style L fill:\#ff9900,stroke:\#fff,stroke-width:2px style I\_GM fill:\#ff9900,stroke:\#fff,stroke-width:2px style L\_GM fill:\#ff9900,stroke:\#fff,stroke-width:2px style H\_GM fill:\#ff9900,stroke:\#fff,stroke-width:2px style O fill:\#ff9900,stroke:\#fff,stroke-width:2px
|
213 |
+
|
214 |
+
\#\#\# Podrobnosti pro Trae
|
215 |
+
1\. \*\*SettingsScreen\*\*:
|
216 |
+
\- Modal UI with tabs, integrated with settingsStore, and restart indicators.
|
217 |
+
2\. \*\*CreditsScreen\*\*:
|
218 |
+
\- Scrolling text with parallax starfield, interactive controls.
|
219 |
+
3\. \*\*ExitGameDialog\*\*:
|
220 |
+
\- Confirmation with unsaved changes logic.
|
221 |
+
4\. \*\*LoadGameScreen\*\*:
|
222 |
+
\- Slot list with preview, deletion, and version checks.
|
223 |
+
5\. \*\*Assets\*\*:
|
224 |
+
\- Detailed pixelart for backgrounds, icons, and UI styles.
|
225 |
+
|
Prompt_1.md
ADDED
@@ -0,0 +1,389 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
## **Specifikační Dokument Modulu: Založení Projektu, Struktura Adresářů a Technologie**
|
2 |
+
|
3 |
+
Série Nových Promptů \- Číslo: 01
|
4 |
+
Datum Vytvoření: 2025-05-27
|
5 |
+
Cíl Dokumentu: Tento dokument slouží jako direktiva pro AI agenta (např. Lovable.dev) pro založení základní struktury projektu hry "Star Dust Voyager: Galaxy Wanderer". Definuje hlavní cíle projektu, použitý technologický stack, detailní adresářovou strukturu, konvence pojmenování a seznam základních knihoven a nástrojů k instalaci. V této fázi se nebude implementovat žádná herní logika do souborů, pouze se vytvoří jejich struktura a základní konfigurace.
|
6 |
+
|
7 |
+
### **1\. Celková Filozofie a Cíle Projektu**
|
8 |
+
|
9 |
+
Hra "Star Dust Voyager: Galaxy Wanderer" je koncipována jako 2D top-down vesmírná explorační roguelike hra\[cite: 5, 41\]. Klade důraz na:
|
10 |
+
|
11 |
+
* Vizuální Styl: Extrémně detailní fotorealistický pixel art s retro nádechem\[cite: 5, 11, 49\]. Každý vizuální prvek, od nebeských těles po UI, musí být propracovaný a plný detailů, s využitím pokročilých pixel artových technik.
|
12 |
+
* Herní Svět: Procedurálně generovaná galaxie obsahující 100-200 hvězdných systémů\[cite: 5, 41, 57\]. Každý systém s realisticky škálovanými a rozmístěnými nebeskými tělesy (hvězdy 500-1500px, planety 200-800px, měsíce 50-300px, s minimální mezerou 2000px mezi tělesy)\[cite: 6, 49, 50, 56\].
|
13 |
+
* Hratelnost: Hluboké herní mechaniky zahrnující průzkum, dynamický boj v reálném čase, správu zdrojů (palivo, energie, integrita trupu, náklad, kredity, teplota, kyslík)\[cite: 44\], rozsáhlou customizaci lodí\[cite: 5, 47\], diplomacii s frakcemi\[cite: 5, 52\], správu posádky\[cite: 5, 52\], dynamické události a příběh ovlivněný hráčovými volbami\[cite: 5, 42, 52\].
|
14 |
+
* Cílové Platformy: PC (Windows, Linux, macOS), mobilní zařízení (iOS, Android) a gamepad podpora, s volitelnou budoucí podporou pro AR/VR\[cite: 5, 51\].
|
15 |
+
* Modding: Podpora pro komunitní modifikace\[cite: 5, 52\].
|
16 |
+
|
17 |
+
AI musí adresovat a opravit specifické problémy zmíněné v Sd.txt, jako je pohyb lodí a zajištění správného škálování a rozmístění nebeských těles\[cite: 6, 7\].
|
18 |
+
|
19 |
+
### **2\. Základní Technologický Stack**
|
20 |
+
|
21 |
+
Pro vývoj hry bude použit následující technologický stack, vycházející z poskytnutých dokumentů\[cite: 336, 387, 392, 411, 412, 413, 414, 420\]:
|
22 |
+
|
23 |
+
* Frontend (Klient):
|
24 |
+
* Jazyk: TypeScript (se zapnutým strict módem)\[cite: 38, 420\].
|
25 |
+
* UI Framework: React (pro HUD, menu, herní obrazovky a všechny UI komponenty)\[cite: 16, 22, 410\].
|
26 |
+
* Vykreslovací Engine: PixiJS (pro hlavní herní scénu, vykreslování spritů, částicové efekty, shadery)\[cite: 16, 32, 410\].
|
27 |
+
* Správa Stavu: Zustand (pro globální správu stavu hry, hráče, UI atd.)\[cite: 28, 405\].
|
28 |
+
* Stylování UI: Emotion (nebo jiná CSS-in-JS knihovna) pro pixel-perfect retro estetiku (např. pozadí \#050510, akcenty \#3388ff)\[cite: 22\].
|
29 |
+
* Routing (pro UI obrazovky): react-router-dom (nebo ekvivalent).
|
30 |
+
* Lokalizace: i18next s react-i18next pro podporu více jazyků (primárně čeština).
|
31 |
+
* Backend (Server):
|
32 |
+
* Jazyk: Node.js s TypeScriptem\[cite: 33, 411\].
|
33 |
+
* Framework: Express.js (nebo výkonnější alternativa jako Fastify)\[cite: 412\].
|
34 |
+
* Databáze: MongoDB (pro perzistentní ukládání hráčského postupu, stavu galaxie, uživatelských účtů)\[cite: 33, 411\].
|
35 |
+
* ODM (Object Data Modeling): Mongoose pro MongoDB.
|
36 |
+
* Real-time Komunikace: WebSockets (např. pomocí knihovny Socket.IO) pro případné multiplayerové funkce nebo synchronizaci\[cite: 33, 412\].
|
37 |
+
* Autentifikace: JWT (jsonwebtoken) pro zabezpečení API.
|
38 |
+
* Vývojové Nástroje a Prostředí:
|
39 |
+
* Verzování: Git, repozitář na GitHub (dle Sd.txt\[cite: 4\], StarDustVoyager.txt\[cite: 382\], Hvězdička.txt \[cite: 770\]).
|
40 |
+
* Linting a Formátování: ESLint a Prettier pro udržení kvality a konzistence kódu.
|
41 |
+
* Build Nástroje: Vite (nebo Create React App s Craco pro úpravy Webpacku) pro frontend, tsc pro backend.
|
42 |
+
* CI/CD: GitHub Actions pro automatické buildy, linting a testování při pushi\[cite: 39\].
|
43 |
+
* Deployment:
|
44 |
+
* Frontend a Serverless Backend: Vercel (nebo ekvivalent jako Netlify, AWS Amplify).
|
45 |
+
* Databáze: MongoDB Atlas (nebo jiný cloudový poskytovatel).
|
46 |
+
|
47 |
+
### **3\. Detailní Adresářová Struktura Projektu**
|
48 |
+
|
49 |
+
Následující struktura adresářů (vycházející z Sd.txt, StarDustVoyager.txt, Hvězdička.txt) by měla být vytvořena. AI zatím nebude vytvářet obsah souborů, pouze adresáře a prázdné soubory s definovanými názvy a příponami tam, kde je to uvedeno.
|
50 |
+
/star-dust-voyager-galaxy-wanderer \# Kořenový adresář projektu
|
51 |
+
|
|
52 |
+
|-- client/ \# Frontend aplikace (React, PixiJS, TypeScript)
|
53 |
+
| |-- public/ \# Statické soubory přímo servírované web serverem
|
54 |
+
| | |-- index.html \# Hlavní HTML vstupní bod
|
55 |
+
| | |-- favicon.ico
|
56 |
+
| | |-- manifest.json
|
57 |
+
| | |-- assets/ \# Herní grafické, zvukové a datové assety
|
58 |
+
| | | |-- images/ \# Obrázky a spritesheety
|
59 |
+
| | | | |-- backgrounds/ \# Pozadí pro menu, hru, galaktickou mapu, panoramata
|
60 |
+
| | | | |-- celestial\_bodies/ \# Sprity planet, hvězd, měsíců, asteroidů, komet
|
61 |
+
| | | | |-- ships/ \# Sprity lodí (hráč, NPC, frakce, mimozemšťané)
|
62 |
+
| | | | | |-- player/
|
63 |
+
| | | | | |-- factions/ \# Podsložky pro jednotlivé frakce
|
64 |
+
| | | | | |-- aliens/ \# Podsložky pro mimozemské rasy
|
65 |
+
| | | | |-- ship\_modules/ \# Vizuální reprezentace modulů lodí
|
66 |
+
| | | | |-- projectiles/ \# Sprity/animace projektilů, paprsků
|
67 |
+
| | | | |-- fx/ \# Spritesheety pro explózie, štíty, motory, warp, anomálie
|
68 |
+
| | | | |-- ui/ \# Ikony, rámečky, tlačítka, prvky HUD, načítací obrazovky
|
69 |
+
| | | | | |-- icons/ \# Obecné UI ikony, ikony pro itemy, skilly, úspěchy, frakce atd.
|
70 |
+
| | | | | |-- buttons/
|
71 |
+
| | | | | |-- panels/
|
72 |
+
| | | | |-- items/ \# Ikony pro předměty, suroviny, komponenty, plány
|
73 |
+
| | | | |-- portraits/ \# Portréty postav, posádky, mimozemšťanů
|
74 |
+
| | | | | |-- procedural\_parts/ \# Části pro generování portrétů
|
75 |
+
| | | | |-- codex/ \# Ilustrace pro Knižnici Znalostí
|
76 |
+
| | | | |-- decals/ \# Nálepky a symboly pro lodě
|
77 |
+
| | | |-- audio/ \# Zvukové soubory
|
78 |
+
| | | | |-- music/ \# Hudební stopy (ogg, mp3) \< 5MB \[cite: 20, 40\]
|
79 |
+
| | | | |-- sfx/ \# Zvukové efekty (wav, ogg) \< 5MB \[cite: 20, 40\]
|
80 |
+
| | | | |-- voices/ \# Krátké hlasové projevy (pokud budou)
|
81 |
+
| | | |-- fonts/ \# Pixel art fonty (ttf, woff2)
|
82 |
+
| | | |-- data/ \# JSON konfiguračné soubory pro hru (všechny s příponou \_cz.json pro české texty)
|
83 |
+
| | | | |-- game\_setup/ \# Např. difficulty\_settings\_cz.json
|
84 |
+
| | | | |-- ships/ \# např. ship\_classes\_cz.json, ship\_modules\_visuals\_cz.json
|
85 |
+
| | | | |-- items/ \# např. resources\_cz.json, trade\_goods\_cz.json, consumables\_cz.json
|
86 |
+
| | | | |-- celestial\_bodies/ \# např. planet\_types\_cz.json, star\_types\_cz.json, anomalies\_cz.json
|
87 |
+
| | | | |-- research/ \# např. research\_tree\_main\_cz.json, tech\_definitions\_cz.json
|
88 |
+
| | | | |-- factions/ \# např. faction\_definitions\_cz.json, alien\_races\_cz.json
|
89 |
+
| | | | |-- quests/ \# např. main\_story\_nexus\_cz.json, side\_missions\_templates\_cz.json
|
90 |
+
| | | | |-- codex/ \# např. codex\_entries\_planets\_cz.json, procedural\_lore\_templates\_cz.json
|
91 |
+
| | | | |-- blueprints/ \# např. crafting\_blueprints\_all\_cz.json
|
92 |
+
| | | | |-- player\_progression/ \# např. player\_skills\_cz.json, achievements\_cz.json
|
93 |
+
| | | | |-- events/ \# např. dynamic\_events\_cz.json, galactic\_events\_cz.json
|
94 |
+
| | | | |-- ui\_config/ \# např. hud\_layout\_cz.json, main\_menu\_config\_cz.json
|
95 |
+
| | | | |-- name\_generation/ \# např. name\_syllables\_human\_cz.json, name\_patterns\_planets\_cz.json
|
96 |
+
| | | | |-- game\_constants.json
|
97 |
+
| | |-- shaders/ \# GLSL shadery (fragment .frag a vertex .vert) \- dle Sd.txt \[cite: 21, 40\]
|
98 |
+
| | |-- effects/ \# např. distortion.frag, bloom.frag, heat\_haze.frag, pixelart\_gravitational\_lens.frag
|
99 |
+
| | |-- celestial\_bodies/ \# např. planet\_surface\_lighting.frag, star\_corona.frag
|
100 |
+
| | |-- postprocessing/ \# např. retro\_crt\_filter.frag
|
101 |
+
| |-- src/ \# Zdrojový kód klienta
|
102 |
+
| | |-- App.tsx \# Hlavní React komponenta, routing, globální kontext
|
103 |
+
| | |-- index.tsx \# Vstupní bod React aplikace, renderování App
|
104 |
+
| | |-- config/ \# Konfigurace klienta
|
105 |
+
| | | |-- clientConfig.ts
|
106 |
+
| | | |-- gameConstants.ts // Fyzikální konstanty, UI rozměry, herní balanc
|
107 |
+
| | |-- components/ \# Znovupoužitelné React UI komponenty \[cite: 22, 395\]
|
108 |
+
| | | |-- common/ \# Základní UI prvky (Button.tsx, Panel.tsx, Modal.tsx, Icon.tsx, ProgressBar.tsx, Slider.tsx) \[cite: 23\]
|
109 |
+
| | | |-- screens/ \# Komponenty pro hlavní herní obrazovky (MainMenuScreen.tsx, SettingsScreen.tsx, atd.)
|
110 |
+
| | | |-- hud/ \# Komponenty pro Heads-Up Display (HUD.tsx, TargetInfoPanel.tsx, MiniMap.tsx) \[cite: 22\]
|
111 |
+
| | | |-- game\_specific\_ui/ \# Specifické UI pro herní mechaniky (např. CraftingInterface.tsx, ResearchNode.tsx)
|
112 |
+
| | |-- game/ \# Hlavní herní logika (PixiJS, ECS) \[cite: 24, 396\]
|
113 |
+
| | | |-- core/ \# Základní herní systémy a manažery
|
114 |
+
| | | | |-- GameController.ts \# Hlavní třída řídící hru, herní smyčka, správa scén
|
115 |
+
| | | | |-- AssetManager.ts \# Správa načítání a přístupu k assetům (obrázky, zvuky, JSON)
|
116 |
+
| | | | |-- InputManager.ts \# Zpracování vstupů (klávesnice, myš, gamepad, dotyk)
|
117 |
+
| | | | |-- AudioManager.ts \# Správa zvuku a hudby (dle Sd.txt\[cite: 19\], StarDustVoyager.txt \[cite: 391\])
|
118 |
+
| | | | |-- SceneManager.ts \# Správa přechodů mezi herními scénami
|
119 |
+
| | | | |-- EventBus.ts \# Globální event emitter
|
120 |
+
| | | | |-- SaveLoadManager.ts \# Logika pro ukládání a načítání hry
|
121 |
+
| | | | |-- TimeManager.ts \# Správa herního času (G.S.R., domovský čas)
|
122 |
+
| | | | |-- TutorialManager.ts
|
123 |
+
| | | |-- ecs/ \# Implementace Entity-Component-System
|
124 |
+
| | | | |-- Entity.ts
|
125 |
+
| | | | |-- Component.ts
|
126 |
+
| | | | |-- System.ts
|
127 |
+
| | | | |-- World.ts
|
128 |
+
| | | |-- components/ \# Herní komponenty (ECS) \- čistě datové \[cite: 25, 399\]
|
129 |
+
| | | | |-- Transform.component.ts // Position, Rotation, Scale
|
130 |
+
| | | | |-- PhysicsBody.component.ts // Velocity, Mass, Forces
|
131 |
+
| | | | |-- Renderable.component.ts // SpriteKey, Tint, Alpha, ZIndex
|
132 |
+
| | | | |-- Health.component.ts
|
133 |
+
| | | | |-- Shield.component.ts
|
134 |
+
| | | | |-- WeaponSystem.component.ts
|
135 |
+
| | | | |-- AIController.component.ts
|
136 |
+
| | | | |-- PlayerAgent.component.ts // Označuje entitu hráče
|
137 |
+
| | | | |-- Faction.component.ts
|
138 |
+
| | | | |-- CargoHold.component.ts
|
139 |
+
| | | | |-- MiningTool.component.ts
|
140 |
+
| | | | |-- WarpDrive.component.ts
|
141 |
+
| | | | |-- CrewQuarters.component.ts
|
142 |
+
| | | | |-- PlanetaryBaseAnchor.component.ts
|
143 |
+
| | | | |-- QuestTarget.component.ts
|
144 |
+
| | | | |-- DiscoveredByPlayer.component.ts
|
145 |
+
| | | |-- systems/ \# Herní systémy (ECS) \- logika \[cite: 28, 403\]
|
146 |
+
| | | | |-- Movement.system.ts // Pohyb, rotace, warp
|
147 |
+
| | | | |-- Physics.system.ts // Kolize, gravitace, setrvačnost
|
148 |
+
| | | | |-- Rendering.system.ts // Vykreslování spritů, efektů, UI (PixiJS)
|
149 |
+
| | | | |-- Combat.system.ts // Střelba, poškození, obrana
|
150 |
+
| | | | |-- PlayerInput.system.ts
|
151 |
+
| | | | |-- NPC\_AI.system.ts // Chování NPC lodí, frakcí
|
152 |
+
| | | | |-- Mining.system.ts
|
153 |
+
| | | | |-- Crafting.system.ts
|
154 |
+
| | | | |-- Research.system.ts
|
155 |
+
| | | | |-- Diplomacy.system.ts
|
156 |
+
| | | | |-- Mission.system.ts
|
157 |
+
| | | | |-- DynamicEvent.system.ts
|
158 |
+
| | | | |-- Codex.system.ts
|
159 |
+
| | | | |-- CrewManagement.system.ts
|
160 |
+
| | | | |-- PlanetaryInteraction.system.ts
|
161 |
+
| | | | |-- Animation.system.ts // Správa spritesheet animací
|
162 |
+
| | | | |-- ParticleEffect.system.ts
|
163 |
+
| | | | |-- SoundPlayback.system.ts
|
164 |
+
| | | | |-- Persistence.system.ts // Pro in-session persistence
|
165 |
+
| | | |-- entities/ \# Funkce pro vytváření ("továrny") entit s předdefinovanými komponentami
|
166 |
+
| | | | |-- createPlayerShip.ts
|
167 |
+
| | | | |-- createAsteroid.ts
|
168 |
+
| | | | |-- createPirateScout.ts
|
169 |
+
| | | | |-- createPlanetVolcanic.ts
|
170 |
+
| | | |-- world\_generation/ \# Logika pro procedurální generování \[cite: 24, 397\]
|
171 |
+
| | | | |-- GalaxyGenerator.ts
|
172 |
+
| | | | |-- StarSystemGenerator.ts
|
173 |
+
| | | | |-- CelestialBodyGenerator.ts // Planety, měsíce, hvězdy, asteroidy
|
174 |
+
| | | | |-- NameGenerator.ts // Pro názvy systémů, planet, postav
|
175 |
+
| | | | |-- PortraitGenerator.ts // Pro portréty posádky/NPC
|
176 |
+
| | | |-- utils/ \# Pomocné funkce a třídy (matematika, RNG, string utils) \[cite: 31, 408\]
|
177 |
+
| | | |-- types/ \# Globální TypeScript typy a rozhraní pro herní logiku
|
178 |
+
| | | |-- scenes/ \# Definice herních scén (každá může mít vlastní ECS World nebo sdílet)
|
179 |
+
| | | |-- InitialLoadingScene.ts
|
180 |
+
| | | |-- MainMenuScene.ts
|
181 |
+
| | | |-- NewGameSetupScene.ts
|
182 |
+
| | | |-- InSystemScene.ts
|
183 |
+
| | | |-- GalaxyMapScene.ts
|
184 |
+
| | | |-- OrbitViewScene.ts
|
185 |
+
| | |-- services/ \# Služby pro komunikaci se serverem (API, WebSockets)
|
186 |
+
| | | |-- apiService.ts
|
187 |
+
| | | |-- webSocketService.ts
|
188 |
+
| | |-- stores/ \# Správa globálního stavu aplikace (Zustand) \[cite: 28, 405\]
|
189 |
+
| | | |-- playerStore.ts
|
190 |
+
| | | |-- gameSessionStore.ts // Ukládá i in-session perzistentní data
|
191 |
+
| | | |-- uiStore.ts
|
192 |
+
| | | |-- settingsStore.ts
|
193 |
+
| | | |-- researchStore.ts
|
194 |
+
| | | |-- codexStore.ts
|
195 |
+
| | | |-- missionStore.ts
|
196 |
+
| | | |-- achievementStore.ts
|
197 |
+
| | |-- styles/ \# Globální CSS/SCSS styly, témata (Emotion se používá pro komponenty)
|
198 |
+
| | |-- hooks/ \# Vlastní React hooks
|
199 |
+
| | |-- translations/ \# Soubory pro lokalizaci (i18n)
|
200 |
+
| | |-- cs.json \# České texty
|
201 |
+
| | |-- en.json \# Anglické texty (volitelně)
|
202 |
+
| |-- tsconfig.json \# Konfigurace TypeScriptu pro klienta
|
203 |
+
| |-- package.json \# Závislosti a skripty pro klienta
|
204 |
+
| |-- .env.local \# Lokální proměnné prostředí (API URL)
|
205 |
+
|
|
206 |
+
|-- server/ \# Backend (Node.js \+ TypeScript \+ MongoDB) \[cite: 33, 411\]
|
207 |
+
| |-- src/
|
208 |
+
| | |-- config/
|
209 |
+
| | | |-- serverConfig.ts \# Port, DB connection string, JWT secret, cesty k datům
|
210 |
+
| | | |-- corsOptions.ts
|
211 |
+
| | |-- api/ \# REST API routes (Express.js/Fastify)
|
212 |
+
| | | |-- index.ts \# Hlavní router
|
213 |
+
| | | |-- auth.routes.ts \# Autentifikace (registrácia, login)
|
214 |
+
| | | |-- player.routes.ts \# Ukladanie/načítanie postupu hráča
|
215 |
+
| | | |-- game\_data.routes.ts \# Prípadné endpointy pre herné dáta (leaderboardy, mody)
|
216 |
+
| | |-- ws/ \# WebSocket handlery (Socket.IO)
|
217 |
+
| | | |-- index.ts \# Hlavný WebSocket server
|
218 |
+
| | | |-- game\_sync.handler.ts \# Pre multiplayerové interakcie (ak budú)
|
219 |
+
| | | |-- chat.handler.ts
|
220 |
+
| | |-- db/ \# Interakcia s databázou (Mongoose)
|
221 |
+
| | | |-- models/ \# MongoDB schémy/modely
|
222 |
+
| | | | |-- Player.model.ts
|
223 |
+
| | | | |-- GameSave.model.ts
|
224 |
+
| | | | |-- FactionState.model.ts // Ak je stav frakcií perzistentný na serveri
|
225 |
+
| | | |-- connection.ts \# Pripojenie k MongoDB
|
226 |
+
| | |-- services/ \# Serverové služby (logika pre autentifikáciu, validáciu, atď.)
|
227 |
+
| | | |-- auth.service.ts
|
228 |
+
| | | |-- player.service.ts
|
229 |
+
| | | |-- mod\_validation.service.ts \[cite: 34\]
|
230 |
+
| | |-- middleware/ \# Express.js/Fastify middleware (napr. pre autentifikáciu JWT, rate limiting \[cite: 35\])
|
231 |
+
| | |-- index.ts \# Vstupný bod serverovej aplikácie (spustenie servera)
|
232 |
+
| | |-- types/ \# TypeScript typy špecifické pre server
|
233 |
+
| |-- tsconfig.json \# Konfigurácia TypeScriptu pre server
|
234 |
+
| |-- package.json \# Závislosti a skripty pre server
|
235 |
+
| |-- .env \# Premenné prostredia pre server
|
236 |
+
|
|
237 |
+
|-- shared/ \# Kód (hlavne typy) zdieľaný medzi klientom a serverom
|
238 |
+
| |-- types/ \# Spoločné TypeScript typy a rozhrania
|
239 |
+
| | |-- IPlayer.ts
|
240 |
+
| | |-- IGameSave.ts
|
241 |
+
| | |-- IAPIResponse.ts
|
242 |
+
| | |-- ICelestialBodyData.ts // Základné typy pre planéty, hviezdy atď.
|
243 |
+
| | |-- IShipModuleData.ts
|
244 |
+
| | |-- IFactionData.ts
|
245 |
+
| | |-- IQuestData.ts
|
246 |
+
| |-- utils/ \# Spoločné pomocné funkcie (napr. validátory, formátovače)
|
247 |
+
| |-- constants/ \# Spoločné konštanty (napr. názvy eventov, herné limity)
|
248 |
+
|
|
249 |
+
|-- docs/ \# Dokumentácia hry \[cite: 37, 418\]
|
250 |
+
| |-- GDD/ \# Game Design Dokumenty (tieto prompty)
|
251 |
+
| |-- API\_Docs/ \# Dokumentácia API (napr. generovaná Swaggerom/OpenAPI)
|
252 |
+
| |-- Modding\_Guide\_cz.md/ \# Návod pre modderov v češtině \[cite: 37, 419\]
|
253 |
+
| |-- Architecture\_Overview.md \# Přehled architektury \[cite: 37, 418\]
|
254 |
+
|
|
255 |
+
|-- tools/ \# Vývojové nástroje \[cite: 36, 415\]
|
256 |
+
| |-- sprite\_editor/ \# (Konceptuálně) Jednoduchý editor spritů nebo integrace s externím
|
257 |
+
| |-- galaxy\_visualizer/ \# Nástroj pro vizualizaci generované galaxie
|
258 |
+
| |-- mod\_builder\_cli/ \# CLI nástroj pro vytváření a balení modů
|
259 |
+
|
|
260 |
+
|-- tests/ \# Testy \[cite: 37, 417\]
|
261 |
+
| |-- unit/ \# Jednotkové testy (Jest)
|
262 |
+
| | |-- ecs/ \# např. movementSystem.test.ts
|
263 |
+
| | |-- world\_generation/ \# např. galaxyGenerator.test.ts
|
264 |
+
| |-- integration/ \# Integrační testy
|
265 |
+
| | |-- combatFlow.test.ts
|
266 |
+
| | |-- tradeMission.test.ts
|
267 |
+
| |-- e2e/ \# End-to-end testy (Cypress)
|
268 |
+
| |-- newGameToFirstWarp.spec.ts
|
269 |
+
|
|
270 |
+
|-- .gitignore \# Ignorované soubory a složky (node\_modules/, dist/, .env\*)
|
271 |
+
|-- .eslintrc.js \# Konfigurace ESLint
|
272 |
+
|-- .prettierrc.js \# Konfigurace Prettier
|
273 |
+
|-- README\_cz.md \# Hlavní README projektu v češtině
|
274 |
+
|-- LICENSE \# Licence projektu
|
275 |
+
|
276 |
+
Popis Účelu Klíčových Složek:
|
277 |
+
|
278 |
+
* client/: Obsahuje veškerý kód a assety pro herního klienta, který běží v prohlížeči nebo jako zabalená aplikace.
|
279 |
+
* public/assets/: Místo pro všechny statické herní zdroje (obrázky, zvuky, data). Je důležité zde udržovat jasnou a intuitivní strukturu podsložek.
|
280 |
+
* src/components/: React komponenty tvořící uživatelské rozhraní.
|
281 |
+
* src/game/: Jádro herní logiky, implementované pomocí ECS architektury a PixiJS pro vykreslování.
|
282 |
+
* src/stores/: Globální správa stavu pomocí Zustand.
|
283 |
+
* server/: Backendová část aplikace pro perzistenci dat, případné multiplayer funkce a validaci modů.
|
284 |
+
* shared/: Kód (především TypeScript typy a rozhraní), který je sdílen mezi klientem a serverem pro zajištění konzistence.
|
285 |
+
* docs/: Veškerá projektová a herní dokumentace.
|
286 |
+
* tools/: Pomocné nástroje pro vývoj (např. editor spritů, vizualizér galaxie).
|
287 |
+
* tests/: Automatizované testy pro zajištění kvality kódu.
|
288 |
+
|
289 |
+
### **4\. Konvence Pojmenování Souborů a Proměnných**
|
290 |
+
|
291 |
+
Pro udržení přehlednosti a konzistence v kódu budou dodržovány následující konvence:
|
292 |
+
|
293 |
+
* Soubory a Složky:
|
294 |
+
* Složky: kebab-case (např. celestial-bodies, ui-components).
|
295 |
+
* TypeScript/JavaScript soubory: camelCase.ts nebo PascalCase.ts (např. assetManager.ts, PlayerShip.ts).
|
296 |
+
* React komponenty: PascalCase.tsx (např. MainMenuScreen.tsx, Button.tsx).
|
297 |
+
* Konfigurační JSON soubory s českými texty: nazev\_konfigurace\_cz.json (např. planety\_typy\_cz.json).
|
298 |
+
* CSS/SCSS moduly (pokud by se používaly mimo Emotion): ComponentName.module.scss.
|
299 |
+
* Proměnné a Funkce:
|
300 |
+
* camelCase (např. playerHealth, calculateDamage).
|
301 |
+
* Třídy, Rozhraní, Typy, Enumy:
|
302 |
+
* PascalCase (např. ShipModuleData, PlayerState, enum GameScreen).
|
303 |
+
* Konstanty:
|
304 |
+
* UPPER\_SNAKE\_CASE (např. MAX\_SPEED, DEFAULT\_PLANET\_SIZE).
|
305 |
+
* Grafické Assety (Soubory):
|
306 |
+
* Formát: kategorie\_typ\_specifikace\_{varianta}\_{velikostPokudRelevantni}\_{animPokudRelevantni}.png (nebo jiná přípona).
|
307 |
+
* Příklady: ship\_fighter\_krall\_talon\_v1\_128px.png, planet\_terrestrial\_earthlike\_orbit\_800px.png, icon\_item\_medkit\_basic\_48px.png, fx\_explosion\_medium\_ship\_anim\_sheet.png, ui\_button\_confirm\_blue\_hover.png.
|
308 |
+
* Vše malými písmeny, odděleno podtržítky pro maximální kompatibilitu a čitelnost.
|
309 |
+
* Zvukové Assety (Soubory):
|
310 |
+
* Formát: kategorie\_specifickyPopis\_{varianta}.wav (pro krátké efekty) / .ogg (pro hudbu a delší ambientní zvuky).
|
311 |
+
* Příklady: sfx\_weapon\_laser\_fire\_heavy\_01.wav, music\_theme\_main\_menu\_loop.ogg, ambience\_station\_tradehub\_busy\_loop.ogg.
|
312 |
+
|
313 |
+
### **5\. Požadované Základní Knihovny a Nástroje k Instalaci**
|
314 |
+
|
315 |
+
AI by měla zajistit, že package.json soubory pro klienta a server budou obsahovat následující klíčové závislosti (konkrétní verze "latest" nebo dle potřeby kompatibility):
|
316 |
+
|
317 |
+
* Klient (client/package.json):
|
318 |
+
* Hlavní: react, react-dom, pixi.js, zustand, typescript.
|
319 |
+
* Typy: @types/react, @types/react-dom, @types/node, @types/pixi.js.
|
320 |
+
* Stylování: @emotion/react, @emotion/styled.
|
321 |
+
* Routing: react-router-dom.
|
322 |
+
* Lokalizace: i18next, react-i18next.
|
323 |
+
* Utility: uuid, lodash (nebo ramda), howler.js (pro audio, pokud vestavěné nestačí).
|
324 |
+
* Vývojové: eslint, prettier, vite (nebo react-scripts s craco), @typescript-eslint/parser, @typescript-eslint/eslint-plugin, eslint-plugin-react.
|
325 |
+
* Server (server/package.json):
|
326 |
+
* Hlavní: express (nebo fastify), mongoose, socket.io, jsonwebtoken, bcryptjs, typescript, cors.
|
327 |
+
* Typy: @types/express, @types/mongoose, @types/socket.io, @types/jsonwebtoken, @types/bcryptjs, @types/cors.
|
328 |
+
* Vývojové: ts-node, nodemon, eslint, prettier.
|
329 |
+
* Globální (pro projekt):
|
330 |
+
* husky, lint-staged (pro pre-commit hooky).
|
331 |
+
* jest (pro jednotkové a integrační testy), ts-jest.
|
332 |
+
* cypress (pro E2E testy).
|
333 |
+
|
334 |
+
### **6\. Základní Konfigurační Soubory (Přehled)**
|
335 |
+
|
336 |
+
AI by měla vytvořit základní verze těchto konfiguračních souborů s doporučeným nastavením:
|
337 |
+
|
338 |
+
* client/tsconfig.json a server/tsconfig.json: Konfigurace pro TypeScript kompilátor, včetně strict: true\[cite: 38\], esModuleInterop: true, nastavení paths pro aliasy importů, jsx: "react-jsx".
|
339 |
+
* .eslintrc.js (v kořeni projektu): Konfigurace pro ESLint s doporučenými pravidly pro TypeScript a React.
|
340 |
+
* .prettierrc.js (v kořeni projektu): Konfigurace pro Prettier pro jednotné formátování kódu.
|
341 |
+
* .gitignore (v kořeni projektu): Seznam ignorovaných souborů a složek (např. node\_modules/, dist/, build/, .env\*, .DS\_Store).
|
342 |
+
* client/.env.local a server/.env: Soubory pro lokální proměnné prostředí (např. REACT\_APP\_API\_URL pro klienta, DATABASE\_URL, JWT\_SECRET, PORT pro server). Tyto soubory nebudou commitovány do Gitu. Vytvořit také .env.example soubory se šablonami.
|
343 |
+
* client/package.json a server/package.json: AI vygeneruje základní package.json s názvem projektu, verzí a skripty jako start, dev (pro spuštění s nodemon/vite HMR), build, test, lint, format. AI také přidá výše uvedené knihovny do dependencies a devDependencies.
|
344 |
+
|
345 |
+
### **7\. Direktiva pro AI (Lovable.dev) \- Založení Projektu**
|
346 |
+
|
347 |
+
1. Vytvořit Adresářovou Strukturu: AI vygeneruje kompletní adresářovou strukturu definovanou v Sekci 3, včetně všech uvedených podsložek. Vytvoří prázdné soubory s uvedenými názvy tam, kde je to specifikováno (např. GameController.ts, clientConfig.ts).
|
348 |
+
2. Inicializovat package.json: Pro client/ a server/ AI inicializuje package.json a přidá všechny knihovny uvedené v Sekci 5 do příslušných dependencies a devDependencies. Použít npm install nebo yarn add (konceptuálně).
|
349 |
+
3. Vytvořit Základní Konfigurační Soubory: AI vytvoří soubory uvedené v Sekci 6 s doporučeným základním obsahem (např. tsconfig.json s strict: true, základní .gitignore).
|
350 |
+
4. NepImplementovat Herní Logiku: V této fázi AI nebude psát žádný kód do herních logických souborů (např. do systémů ECS, React komponent pro obrazovky, atd.). Cílem tohoto promptu je pouze příprava kostry projektu. Obsah těchto souborů bude definován v následujících promptech.
|
351 |
+
5. Nastavit Linting a Formátování: Konfigurovat ESLint a Prettier pro projekt.
|
352 |
+
6. Inicializovat Git Repozitář: (Konceptuálně) Vytvořit .git adresář a provést první commit se základní strukturou projektu.
|
353 |
+
|
354 |
+
### **8\. Diagram Herního Toku a Propojení Komponent**
|
355 |
+
|
356 |
+
(Zde by AI vložila vylepšený diagram hry. Protože já jako textový model nemohu přímo pracovat s obrázky, AI (Lovable.dev) by měla tento diagram buď vygenerovat jako SVG/PNG na základě mého textového popisu v následujících promptech, nebo by zde byl placeholder pro manuální vložení. Prozatím popíšu, co by měl základní diagram obsahovat a jak bude rozšiřován.)
|
357 |
+
Základní Koncept Diagramu (bude rozšiřován v každém promptu):
|
358 |
+
Diagram bude vizualizovat hlavní komponenty a tok mezi nimi. Pro tento Prompt 01 (Založení Projektu), diagram by měl velmi zjednodušeně ukazovat:
|
359 |
+
graph TD
|
360 |
+
A\[Start Aplikace\] \--\> B(InitialLoadingScreen);
|
361 |
+
B \--\> C{Hlavní Menu (MainMenuScreen)};
|
362 |
+
C \--\> |Nová Hra| D(TransitionLoadingScreen);
|
363 |
+
D \--\> E\[Nastavení Nové Hry (NewGameSetupScreen)\];
|
364 |
+
C \--\> |Načíst Hru| F(TransitionLoadingScreen);
|
365 |
+
F \--\> G\[Načtení Uložené Hry (LoadGameScreen)\];
|
366 |
+
C \--\> |Nastavení| H\[Nastavení (SettingsScreen) \- Modální\];
|
367 |
+
C \--\> |Knihovna| I\[Knihovna Znalostí (KnowledgeLibraryScreen) \- Modální\];
|
368 |
+
C \--\> |Tvůrci| J\[Tvůrci (CreditsScreen) \- Modální\];
|
369 |
+
C \--\> |Ukončit| K\[Potvrzovací Dialog Ukončení\];
|
370 |
+
|
371 |
+
subgraph Projektová Struktura \[Definováno v NS\_Prompt\_01\]
|
372 |
+
direction LR
|
373 |
+
S01\[client/\]
|
374 |
+
S02\[server/\]
|
375 |
+
S03\[shared/\]
|
376 |
+
S04\[docs/\]
|
377 |
+
S05\[tools/\]
|
378 |
+
S06\[tests/\]
|
379 |
+
end
|
380 |
+
|
381 |
+
%% Zvýraznění aktuální části diagramu pro NS\_Prompt\_01
|
382 |
+
style Projektová Struktura fill:\#333,stroke:\#fff,stroke-width:2px,color:\#fff
|
383 |
+
style A fill:\#333,stroke:\#fff,stroke-width:2px,color:\#fff
|
384 |
+
|
385 |
+
Popis Zvýrazněné Části Diagramu pro NS\_Prompt\_01:
|
386 |
+
Tento prompt se zaměřuje na vytvoření základní Projektové Struktury (client/, server/, shared/, atd.) a definuje počáteční bod aplikace (Start Aplikace), který vede k první viditelné obrazovce (InitialLoadingScreen) a následně k Hlavnímu Menu. Ostatní propojení z Hlavního Menu jsou zde naznačena, ale jejich detailní implementace bude následovat v dalších promptech.
|
387 |
+
(Tento diagram bude AI agent vkládat na konec každého promptu a vždy zvýrazní tu část, kterou daný prompt detailně popisuje, a přidá nová relevantní propojení.)
|
388 |
+
Tento první prompt nové série by měl AI (Lovable.dev) poskytnout všechny potřebné informace k založení robustní a dobře organizované kostry projektu pro hru "Star Dust Voyager: Galaxy Wanderer".
|
389 |
+
Jakmile budeš mít připravený náčrt diagramu, nebo pokud chceš, abychom začali s diagramem, který jsem zde naznačil a budeme ho postupně rozvíjet, dej vědět. Poté se můžeme pustit do druhého promptu, který se zaměří na InitialLoadingScreen a MainMenuScreen s detailním popisem jejich UI, assetů a funkcí.
|
textures.md
ADDED
@@ -0,0 +1,474 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# **Stylová dokumentace a šablony Star Dust Voyager**
|
2 |
+
|
3 |
+
## **Terminály a CRT obrazovky**
|
4 |
+
|
5 |
+
* **Styl rozhraní**: CRT-heavy retro-futuristický design s analogovým vzhledem (opalovaný plast, kov).
|
6 |
+
* **Rozlišení**: Pevné násobky pixelů (např. 320times200, 640times480).
|
7 |
+
* **Pixelart rastr**: Viditelné pixely, ostré hrany bez antialiasingu.
|
8 |
+
* **Barvy**: Omezená paleta (monochromatická nebo několik základních barev \- např. zelená, jantarová, červená). Používají se barevné režimy zelený fosfor, jantarový žlutý, sytě červený.
|
9 |
+
* **Scanlines**: Vrstva jemných horizontálních pruhů mezi řádky pixelů. Intenzita 50-70% (simulace rasteru CRT).
|
10 |
+
* **Záře (Glow)**: Slabá záření u jasných prvků (text, LED). Implementována jako rozostřený poloprůhledný obrys (kuželoidní bloom).
|
11 |
+
* **Kovový rámeček**: Terminály mají robustní rám z INDUSTRIAL\_METAL s opotřebovaným lakem. Tlumené odstíny, s drobnými oděrkami a korozí v rozích.
|
12 |
+
* **Obsah obrazovky**: Terminály zobrazují blokový text, jednoduchou vektorovou grafiku nebo statické obrázky (schémata). Animace omezena na 15-20 FPS pro retro dojem.
|
13 |
+
* **Zvuk a animace**: Interakce způsobuje krátké zablikání obrazem (flicker) a pulzování kontrolek. Simulovat analogové chvění jasu.
|
14 |
+
* **Ghosting**: Při rychlém přepínání ponechat slabý „závoj" předchozího obrazu (simulace luminiscence).
|
15 |
+
* **Tearing efekt**: Náhodné horizontální posuny pixelů (drobný obrys, rušení) při přetížení.
|
16 |
+
* **Šum**: Přes obrazovku přidat jemný pixelový šum (grain) s nízkou neprůhledností.
|
17 |
+
* **Zakřivení**: Lehká barelová deformace (barrel distortion) simulující zakřivený tvar obrazovky CRT.
|
18 |
+
|
19 |
+
**Příklad**
|
20 |
+
|
21 |
+
TerminalPanel { \[cite: 21\]
|
22 |
+
resolution: (320, 200\) \[cite: 22\]
|
23 |
+
palette: "green\_phosphor" \[cite: 23\]
|
24 |
+
scanlineIntensity: 0.6 \[cite: 24\]
|
25 |
+
glowRadius: 1.0 \[cite: 25\]
|
26 |
+
frameMaterial: "INDUSTRIAL\_METAL" \[cite: 26\]
|
27 |
+
cornerRadius: 4 \[cite: 27\]
|
28 |
+
content: \[ \[cite: 28\]
|
29 |
+
TextBox(font="RetroConsole8", color="green\_phosphor", text="SYSTEM READY"), \[cite: 29, 30\]
|
30 |
+
IndicatorLight(color="amber", state="on") \[cite: 31\]
|
31 |
+
\]
|
32 |
+
}
|
33 |
+
|
34 |
+
## **Přepínače a ovládací prvky**
|
35 |
+
|
36 |
+
* **Vzhled**: Mechanické spínače a tlačítka s výraznými 3D detaily \- kovové knoflíky, opotřebovaný plast, nýtové spoje.
|
37 |
+
* **Stavy**: Každý prvek má stavy Normal, Hover, Active (pressed), Disabled, Alert. Pro každý stav definovat změnu jasu, barvy nebo stínu.
|
38 |
+
* **Hover**: Při najetí kurzorem zvýšit mírně jas a přidat jemný glow (zdůraznění aktivního prvku).
|
39 |
+
* **Active**: Při stisku se objekt posune o pár pixelů, jeho barva ztmavne, zvýrazní se vnitřní stín (efekt zatlačení).
|
40 |
+
* **Disabled/Alert**: Neaktivní stav šedý nebo ztlumený. Alarmový stav má blikavé červené světlo, případně invertované barvy.
|
41 |
+
* **Zvuk**: Mechanické cvaknutí při potvrzení, žádné digitální pípy. Použít originální kovové kliky.
|
42 |
+
* **Sprite Textury**: Používat spritesheety s vícestavovými obrázky (např. off/on), aby bylo snadné přepínat stav.
|
43 |
+
* **Mřížka**: Komponenty umisťovat do pixel-perfect mřížky (např. krok 16px).
|
44 |
+
* **Feedback**: Na kliknutí krátké bliknutí nebo puls animace (ripple) kolem tlačítka.
|
45 |
+
|
46 |
+
**Příklad**
|
47 |
+
|
48 |
+
ToggleSwitch { \[cite: 46\]
|
49 |
+
size: (48, 16\) \[cite: 47\]
|
50 |
+
offStateTexture: "switch\_off.png" \[cite: 48\]
|
51 |
+
onStateTexture: "switch\_on.png" \[cite: 49\]
|
52 |
+
onHover: enableGlow(intensity=0.2) \[cite: 50\]
|
53 |
+
onClick: playSound("click\_metal.wav") \[cite: 51\]
|
54 |
+
}
|
55 |
+
|
56 |
+
## **HUD a mapy**
|
57 |
+
|
58 |
+
* **HUD panely**: Průhledné nebo kovové rámečky, integrované analogové ukazatele a LED pruhy. Indikátory jako segmentové displeje a ručičky.
|
59 |
+
* **Fonty**: Monospace pixelové fonty (8times8 nebo 8times16). Barva kontrastní (typicky neonově zelená, žlutá nebo červená na tmavém pozadí).
|
60 |
+
* **Minimap / Galaktická mapa**: Pozadí tmavé (black), hvězdné pole animované s mírným pohybem (parallax). Body zájmu (planety, hvězdy) neonově zvýrazněné.
|
61 |
+
* **Ikonografie**: Jednoduché ikonky (8times8 nebo 16times16) pro objekty, barevné podle typu. Malé animace (blikání, pulsování) pro pozornost.
|
62 |
+
* **Grid pro HUD**: Používat hrubou mřížku 32px pro hlavní elementy a jemnou 8px pro umisťování textů/ikon.
|
63 |
+
* **Interaktivní prvky**: Kliknutí/hover na ikonky zobrazí tooltipy s efektem zeleného obrysu. Hranice kolmo na mřížku.
|
64 |
+
* **Navigace**: Horní nebo dolní ovládací prvky pro zoom a posun (LED tlačítka, kolečka).
|
65 |
+
* **Indikátory**: Digitální čítače (pixel-art) a analogové metry pro stavy. Např. tahomer, radarové lokátory.
|
66 |
+
|
67 |
+
**Příklad**
|
68 |
+
|
69 |
+
HUD\_GalaxyMap { \[cite: 64\]
|
70 |
+
size: (800, 600\) \[cite: 65\]
|
71 |
+
background: Texture("starfield\_static.png") \[cite: 66\]
|
72 |
+
waypoints: \[ \[cite: 68\]
|
73 |
+
{id: "Sol", pos: (150,120), icon:"icon\_star.png", tooltip: "Sol System"}, \[cite: 69, 70\]
|
74 |
+
{id: "Alpha", pos: (500,400), icon: "icon\_planet.png", tooltip: "Alpha Centauri"} \[cite: 71, 72\]
|
75 |
+
\]
|
76 |
+
font: "PixelFont8x8" \[cite: 73\]
|
77 |
+
colorMode: "neon\_green\_on\_black" \[cite: 74\]
|
78 |
+
}
|
79 |
+
|
80 |
+
## **Hierarchie vrstev a grid systém**
|
81 |
+
|
82 |
+
* **Vrstvy UI**: Rozdělit prvky do úrovní (background, UI, overlay, efekty). Vrstvy určeny podle z-indexu (pozadí \= 0, UI \= 1-2, efekty \= 4-5, varování \= 6).
|
83 |
+
* **Grid systém**: Hlavní mřížka 32px (moduly, panely), sekundární 8px (text, ikony). Vše pixel-perfect \- přesné násobky pixelů.
|
84 |
+
* **Rozlišení**: Navržené pro pevný poměr stran (např. 4:3 nebo 16:9). Při škálování vždy dělat celočíselnou změnu (beze ztráty ostrých hran).
|
85 |
+
* **Zarovnání textu**: Všechny texty na 8px baselinu. Řádky textu přesně 8px od sebe.
|
86 |
+
* **Focus a modální stavy**: Aktivní okno/komponenta je zvýrazněna. Ostatní prvky lze „zasvětlit" (snížit opacity) pro dohled.
|
87 |
+
* **Responsivita**: Přizpůsobení na nižší rozlišení: skrýt méně důležité panely, zmenšit písmo, zachovat velikost v krocích po pixelech.
|
88 |
+
|
89 |
+
**Příklad**
|
90 |
+
|
91 |
+
UILayout { \[cite: 86\]
|
92 |
+
gridMajor: 32 \[cite: 87\]
|
93 |
+
gridMinor: 8 \[cite: 88\]
|
94 |
+
layers: \[ \[cite: 89\]
|
95 |
+
{name: "background", zIndex: 0}, \[cite: 90\]
|
96 |
+
{name: "ui", zIndex: 1}, \[cite: 91\]
|
97 |
+
{name: "overlay", zIndex: 4}, \[cite: 92\]
|
98 |
+
{name: "alerts", zIndex: 6} \[cite: 93\]
|
99 |
+
\]
|
100 |
+
anchors: \["top-left", "center", "bottom-right"\] \[cite: 95\]
|
101 |
+
align: "pixel-perfect" \[cite: 96\]
|
102 |
+
}
|
103 |
+
|
104 |
+
## **Barevné režimy a fonty**
|
105 |
+
|
106 |
+
* **Paleta**: Omezené palety připomínající CRT. Obvykle 1-4 barvy na element. Typické barvy: neonově zelená, smaragdově modrá, oranžový jantar.
|
107 |
+
* **Kontrast**: Vysoký kontrast text/pozadí (text\~80-90% jasu, pozadí \~10-20%). Umožňuje čitelnost i při nízkém rozlišení/skenování.
|
108 |
+
* **Fonty**: Ručně malované pixelové fonty s artefakty (drobná nepravidelnost v liních). Žádné vyhlazování. Např. PixelFont8x8, RetroConsole.
|
109 |
+
* **Fallback znaky**: Pro neznámé znaky použít vyplněný blok (blacksquare) nebo prázdný modul. Zajistit čitelné symboly.
|
110 |
+
* **Inverze**: Pro varování/informace přepínat na inverzní zobrazení (bílé texty na černém pozadí nebo červené na černé).
|
111 |
+
* **Materiál textu**: Indikátory (LED, indikátory) využívají vlastní úroveň jasu a barvy (červená, oranžová, neon zelená) oddělené od main palety.
|
112 |
+
|
113 |
+
**Příklad**
|
114 |
+
|
115 |
+
StyleSheet { \[cite: 108\]
|
116 |
+
colorScheme: { \[cite: 109\]
|
117 |
+
primary: "\#00FF00", // neon green \[cite: 111\]
|
118 |
+
secondary: "\#002244", // deep blue \[cite: 112\]
|
119 |
+
alert: "\#FF4444" \[cite: 113\]
|
120 |
+
}
|
121 |
+
font: { \[cite: 114\]
|
122 |
+
name: "PixelFont8x8", \[cite: 117\]
|
123 |
+
size: 8, \[cite: 118\]
|
124 |
+
spacing: 2 \[cite: 119\]
|
125 |
+
}
|
126 |
+
terminalEffect: "scanline\_overlay" \[cite: 120\]
|
127 |
+
}
|
128 |
+
|
129 |
+
## **Terminálové efekty (Scanlines, Glow, Glitch)**
|
130 |
+
|
131 |
+
* **Scanlines**: Přidat horizontální 1px pruhy mezi řádky. Intenzita \~0.5 (50% opacity).
|
132 |
+
* **Bloom/Glow**: Jasné objekty (text, LED) rozmazat do okolí (malý radius). Např. jasný pixel nabobtná na \-2px rozostřenou záři.
|
133 |
+
* **Deformace CRT**: Mírná barelová deformace obrazu (zakřivení rohů) simulující realitu.
|
134 |
+
* **Glitch**: Občasné náhodné posuny (offset) některých řádků o pár pixelů. Barevné poruchy (RGB oddělení) pro dramatický efekt.
|
135 |
+
* **Šum**: Krátkodobý statický šum \- celý obraz lehce „zavibruje" bíločerným šumem.
|
136 |
+
* **Pořadí aplikace**: Shader efekty aplikovat v pořadí: základní obraz → scanlines → bloom → glitch.
|
137 |
+
|
138 |
+
**Příklad**
|
139 |
+
|
140 |
+
Effect ApplyCRTFilters { \[cite: 129\]
|
141 |
+
enableScanlines(opacity=0.6) \[cite: 130\]
|
142 |
+
enableBloom(threshold=0.7, radius=1.0) \[cite: 131\]
|
143 |
+
if (state \== ERROR) { \[cite: 132\]
|
144 |
+
applyGlitch(offsetX=3, duration=0.2) \[cite: 133\]
|
145 |
+
applyColorDrift(rShift=+5, gShift=-5) \[cite: 134\]
|
146 |
+
}
|
147 |
+
}
|
148 |
+
|
149 |
+
## **Interaktivní stavy a responsivita**
|
150 |
+
|
151 |
+
* **Stavy UI**: Definovat stavy Normal, Hover, Active, Disabled, Alert. Pro každý stav specifikovat vizuální změny (jas, barva, posun).
|
152 |
+
* **Animace**: Přechody \-0.1s (ease-in-out). Např. lehké vyjasnění při hover.
|
153 |
+
* **Zpětná vazba**: Akce (click, select) generuje krátký pulz (zvýšení jasu/změna barvy) nebo zvukový efekt.
|
154 |
+
* **Klávesové zkratky**: Podtrhnout odpovídající písmeno (např. Enter) a detekovat Alt+\[Key\].
|
155 |
+
* **Responzivní layout**: Při změně rozlišení měnit velikost prvků po celých pixelech. Na menších rozlišeních skrýt pomocné prvky.
|
156 |
+
* **Zdůraznění**: Vybraný prvek orámovat neonovou barvou (např. zelenou). Zvýraznění může pulsovat.
|
157 |
+
|
158 |
+
**Příklad**
|
159 |
+
|
160 |
+
Button { \[cite: 146\]
|
161 |
+
normal: {bg: "\#333333", text: "\#00FF00"} \[cite: 147\]
|
162 |
+
hover: {bg:"\#444444", glow:0.2} \[cite: 148, 149\]
|
163 |
+
active: {offsetY: 2px, shadow: 0.5px, text:"\#99FF99"} \[cite: 150, 151\]
|
164 |
+
onHover: animate(duration=0.1s) \[cite: 152\]
|
165 |
+
onClick: playSound("button\_press.wav") \[cite: 153\]
|
166 |
+
}
|
167 |
+
|
168 |
+
## **Příklady layoutů**
|
169 |
+
|
170 |
+
### **Výzkumná konzole**
|
171 |
+
|
172 |
+
* **Rozvržení**: Levý panel \- textové logy, střední panel \- 3D holografická mapa, pravý panel \- datové statistiky. Vše zarovnáno do 32px mřížky.
|
173 |
+
* **Komponenty**: Terminálové obrazovky s textem, analogové ručičkové měřiče a LED indikátory. Barvy \- zelené a modré akcenty.
|
174 |
+
* **Interakce**: Levý panel scrolluje logy, na mapě lze přemisťovat kameru (otáčet), pravý panel filtruje data.
|
175 |
+
|
176 |
+
Layout ResearchConsole { \[cite: 161\]
|
177 |
+
panels: \[ \[cite: 163\]
|
178 |
+
{name: "log\_panel", size: (200x400), position: (0,0)}, \[cite: 165\]
|
179 |
+
{name:"3d\_display", size: (400x400), position: (200,0)}, \[cite: 166\]
|
180 |
+
{name:"stats\_panel", size: (200x400), position: (600,0)} \[cite: 167\]
|
181 |
+
\]
|
182 |
+
grid: 32 \[cite: 168\]
|
183 |
+
font: "PixelFont8x8" \[cite: 169\]
|
184 |
+
colorMode: "monochrome\_green" \[cite: 170\]
|
185 |
+
}
|
186 |
+
|
187 |
+
### **Mapa galaxie**
|
188 |
+
|
189 |
+
* **Rozvržení**: Celá obrazovka pokryta hvězdným polem. Ikony planet a hvězd jsou barevné a blikají.
|
190 |
+
* **Navigace**: Šipky nebo kolečko pro zoom vlevo/pravý. Ikony pro posun vlevo/vpravo/horní/dolní.
|
191 |
+
* **Grafika**: Spojnice mezi hvězdami neonově zelené, hvězdy pulsují. Pozadí statické se slabým pohybem (parallax).
|
192 |
+
|
193 |
+
Layout GalaxyMap { \[cite: 175\]
|
194 |
+
background: StarField(texture="stars\_noise.png", parallax=0.6) \[cite: 176\]
|
195 |
+
waypoints: \["Sol", "Alpha", "Vega"\] \[cite: 179\]
|
196 |
+
icons: {star: "star\_icon.png", planet: "planet\_icon.png"} \[cite: 180\]
|
197 |
+
zoomControls: {position:"bottom-right", size: 48} \[cite: 180\]
|
198 |
+
textFont: "PixelFont8x8" \[cite: 180\]
|
199 |
+
highlightColor: "neon\_green" \[cite: 181\]
|
200 |
+
}
|
201 |
+
|
202 |
+
### **Inventář**
|
203 |
+
|
204 |
+
* **Rozvržení**: Mřížka 5x4 slotů na předměty na tmavém kovovém pozadí, dolní panel s detailem položky.
|
205 |
+
* **Sloty**: Každý slot hranatý, rámeček kovový. Vybraný slot má zářivě zelený rámeček a lehce pulzuje.
|
206 |
+
* **Ikony**: Pixelové ikony položek se stínem. Konstantní velikost (např. 48x48 px).
|
207 |
+
* **Text**: Vedle vybraného slotu se zobrazí název a popis pixelfontem.
|
208 |
+
|
209 |
+
Layout Inventory { \[cite: 187\]
|
210 |
+
grid: {columns: 5, rows: 4, cellSize:64, gap:8} \[cite: 189\]
|
211 |
+
slotFrame: Texture("inv\_slot\_frame.png") \[cite: 189\]
|
212 |
+
selectedBorder: {color:"neon\_green", thickness:2} \[cite: 190\]
|
213 |
+
itemIconSize: (48, 48\) \[cite: 191\]
|
214 |
+
infoPanel: {size: (400x100), position: "bottom"} \[cite: 192\]
|
215 |
+
font: "PixelFont8x8" \[cite: 192\]
|
216 |
+
}
|
217 |
+
|
218 |
+
## **Šablony assetů**
|
219 |
+
|
220 |
+
* **Lodě**: Modulární design \- trup, křídla, kokpit, motory. Povrch z INDUSTIAL\_METAL s nátěrem, viditelné šrouby a panely. Barevné akcenty (červené/žluté).
|
221 |
+
* **Stanice**: Rozsáhlé kubické bloky, robustní vazby. Textury RUSTED\_STEEL pro exteriér, panely s WORN\_PLASTIC v interiéru.
|
222 |
+
* **Vnitřní moduly**: Chodby a kabíny. Stěny z INDUSTRIAL\_METAL s opotřebovaným nátěrem, ozdobné OSD panely z WORN\_PLASTIC.
|
223 |
+
* **Panely (control panels)**: Vnější rámečky z INDUSTRIAL\_METAL, tlačítka z WORN\_PLASTIC. Povrch 2D textury s dekály (štítky, šrouby).
|
224 |
+
* **Trupy**: Zakřivené kovové části z INDUSTRIAL\_METAL. Opotřebení hlavně na hranách a styčných místech.
|
225 |
+
* **Generátory**: Robustní válce a žebra. Použít RUSTED\_STEEL pro části vystavené žáru (skvrny spáleného kovu), kablíky z CABLING\_BUNDLE.
|
226 |
+
|
227 |
+
**Příklad**
|
228 |
+
|
229 |
+
AssetTemplate Ship\_X { \[cite: 203\]
|
230 |
+
modules: \["cockpit", "engine", "wing\_left", "wing\_right", "hull"\] \[cite: 204\]
|
231 |
+
style: "retro\_futuristic" \[cite: 205\]
|
232 |
+
defaultMaterials: \["INDUSTRIAL\_METAL", "RUSTED\_STEEL"\] \[cite: 206\]
|
233 |
+
textureLayers: \[ \[cite: 207\]
|
234 |
+
{material: "INDUSTRIAL\_METAL", normalMap: "metal\_norm.png"}, \[cite: 211\]
|
235 |
+
{material: "WORN\_PLASTIC", decal: "panel\_scratch.png"} \[cite: 212\]
|
236 |
+
\]
|
237 |
+
}
|
238 |
+
|
239 |
+
### **INDUSTRIAL\_METAL**
|
240 |
+
|
241 |
+
* **Barva**: Tmavě ocelová se studeným odstínem. Lehce zelenkavá nebo šedá patina.
|
242 |
+
* **Textura**: Jemné kovové zrno, škrábance. Přidat šmouhy oleje/maziva.
|
243 |
+
* **Specular**: Nízký, povrch matný (roughness \~0.7). Lesklejší prvky na okrajích škrábanců.
|
244 |
+
* **Opotřebení**: Okraje a hřeby světlejší. Použít masku pro odřeniny a odlupování laku.
|
245 |
+
* **Normálová mapa**: Zvýraznění promáčklin a škrábanců pro realistické odlesky.
|
246 |
+
* **Použití**: Trupy, nosníky, exteriér lodí a stanic.
|
247 |
+
|
248 |
+
**Příklad**
|
249 |
+
|
250 |
+
Material INDUSTRIAL\_METAL { \[cite: 220\]
|
251 |
+
baseColor: \#5A5D61 \[cite: 221\]
|
252 |
+
roughness: 0.7 \[cite: 222\]
|
253 |
+
normalTexture: "industrial\_metal\_norm.png" \[cite: 223\]
|
254 |
+
scratchTexture: "metal\_scratches.png" \[cite: 224\]
|
255 |
+
}
|
256 |
+
|
257 |
+
### **WORN\_PLASTIC**
|
258 |
+
|
259 |
+
* **Barva**: Tmavě šedá nebo olivová, matný plast. Povrch původně lakovaný.
|
260 |
+
* **Opotřebení**: Oděry a škrábance odhalující světlejší plast v hloubce. Místy odštípnutý lak.
|
261 |
+
* **Struktura**: Jemná granulace (simulace výlisku). Škrábance jako drobné čáry.
|
262 |
+
* **Lesk**: Velmi nízký (průmyslový mat, roughness \~0.9).
|
263 |
+
* **Použití**: Kryty ovládacích panelů, madla, interiérové obklady.
|
264 |
+
|
265 |
+
**Příklad**
|
266 |
+
|
267 |
+
Material WORN\_PLASTIC { \[cite: 233\]
|
268 |
+
baseColor: \#4B4B4B \[cite: 234\]
|
269 |
+
roughness: 0.9 \[cite: 235\]
|
270 |
+
normalTexture: "worn\_plastic\_norm.png" \[cite: 236\]
|
271 |
+
decalTexture: "plastic\_dents.png" \[cite: 237\]
|
272 |
+
}
|
273 |
+
|
274 |
+
### **RUSTED\_STEEL**
|
275 |
+
|
276 |
+
* **Barva**: Rezavě hnědá/oranžová. Na podkladu tmavý kov (tmavě hnědý).
|
277 |
+
* **Koroze**: Hluboké mapy rzi na exponovaných místech. Nerovnoměrné flíčky rezu.
|
278 |
+
* **Povrch**: Matný (rust není lesklý). Odlupuje se s mírou (podklad obnažen).
|
279 |
+
* **Detaily**: Vypálené či zašpiněné oblasti (okolo šroubů, hran).
|
280 |
+
* **Použití**: Exteriér stanic, potrubí, generátorů, části kde je vlhkost/chemická zátěž.
|
281 |
+
|
282 |
+
**Příklad**
|
283 |
+
|
284 |
+
Material RUSTED\_STEEL { \[cite: 247\]
|
285 |
+
baseColor: \#664433 \[cite: 248\]
|
286 |
+
rustIntensity: 0.8 \[cite: 249\]
|
287 |
+
rustMask: "rust\_blots.png" \[cite: 250\]
|
288 |
+
normalTexture: "rusted\_steel\_norm.png" \[cite: 251\]
|
289 |
+
}
|
290 |
+
|
291 |
+
### **CABLING\_BUNDLE**
|
292 |
+
|
293 |
+
* **Barva**: Mix kabelů \- základem černá/gumová izolace. Varovné žluté/červené proužky.
|
294 |
+
* **Textura**: Zřetelné spojovací prvky (dráty, konektory). Praporkovité izolace navinuté okolo.
|
295 |
+
* **Opletení**: U většiny kabelů spirálový pruhový vzor (světlejší linky).
|
296 |
+
* **Detaily**: Namáčení na spojích, pájené spoje. Mírně lesklé koncové konektory.
|
297 |
+
* **Použití**: Elektrické trasy, moduly s elektronikou, spotřebiče.
|
298 |
+
|
299 |
+
**Příklad**
|
300 |
+
|
301 |
+
Material CABLING\_BUNDLE { \[cite: 260\]
|
302 |
+
baseColor: \#222222 \[cite: 261\]
|
303 |
+
wireCount: 6 \[cite: 262\]
|
304 |
+
insulationPattern: "spiral\_stripes.png" \[cite: 263\]
|
305 |
+
connectorTexture: "metal\_connector.png" \[cite: 264\]
|
306 |
+
}
|
307 |
+
|
308 |
+
## **Vrstvení a efekty opotřebení**
|
309 |
+
|
310 |
+
* **Základní vrstvy**: Používat sekvenci base \> dirt \> scratch \> edgeHighlight. Nejprve nanést čistý základní materiál, potom vrstvy nečistot, škrábanců a nakonec krajové opotřebení.
|
311 |
+
* **Parametrická patina**: Použití Perlinova šumu či Voronoi pro generování koroze a škrábanců s náhodným seedem.
|
312 |
+
* **Ovládací parametry**: hustota škrábanců, velikost flíčků, směr degradace.
|
313 |
+
* **Hrany**: Kraje dílů zvýraznit světlejší barvou (simulace obrusu). Maskovat podle vzdálenosti od okraje.
|
314 |
+
* **Kombinování efektů**: Smíchat celoplošné (základní patinování) s drobnými (bodové škrábance, kapky).
|
315 |
+
* **Maskování**: Použít grunge masky k umístění efektů (okraje, rohy). Zachovat pixelart ostrost (masky high-contrast).
|
316 |
+
* **Automatizace**: Procedurálně generovat drobné detaily (čárky, tečky) skripty (např. náhodné 1px linky).
|
317 |
+
|
318 |
+
**Příklad**
|
319 |
+
|
320 |
+
LayeredTexture WallModule { \[cite: 276\]
|
321 |
+
baseLayer: Material("INDUSTRIAL\_METAL") \[cite: 277\]
|
322 |
+
addLayer(type="DIRT", opacity=0.3, seed=42) \[cite: 278\]
|
323 |
+
addLayer(type="SCRATCHES", density=0.5, angle=45) \[cite: 279\]
|
324 |
+
applyEdgeMask(intensity=0.8) \[cite: 281\]
|
325 |
+
}
|
326 |
+
|
327 |
+
## **Texturovací modely**
|
328 |
+
|
329 |
+
* **Panely (Control Panels)**: Velikost obvykle malé (32times32 až 128times128 px). Rozděleny do sekcí (knoflíky, obrazovka). Použít uniformní rám a textury šroubů a štítků.
|
330 |
+
* **Zařízení (Devices)**: Kulatá nebo válcová tělesa (motory, baterie). Povrch rozdělen na segmenty s různými materiály (kov, plast, zářivka).
|
331 |
+
* **Přepážky (Partitions)**: Rovné plochy stěn. Použít opakující se modulární vzor (geometrická mřížka, ventily).
|
332 |
+
* **Pozadí**: Technologické pozadí s jemnými detaily (potrubí, cívky, perforace). Nízká kontrast, aby nepřehlušilo primární objekty.
|
333 |
+
* **Normal mapy**: Vypočíst z vysoko-kontrastních základních vzorů (šrouby, prolisy).
|
334 |
+
* **UV layout**: Šablony pro standardní tvary (1times1 panel, 2times1 krychle apod.) pro konzistentní texturování.
|
335 |
+
|
336 |
+
**Příklad**
|
337 |
+
|
338 |
+
TextureModel ControlPanel { \[cite: 292\]
|
339 |
+
size: (64, 64\) \[cite: 293\]
|
340 |
+
segments: 4x2 \[cite: 294\]
|
341 |
+
baseTexture: "panel\_base.png" \[cite: 295\]
|
342 |
+
detailOverlays: \["screws.png", "buttons.png"\] \[cite: 296\]
|
343 |
+
normalMap: "panel\_norm.png" \[cite: 297\]
|
344 |
+
}
|
345 |
+
|
346 |
+
## **Příklady generování modulu**
|
347 |
+
|
348 |
+
* **Tvar modulu**: Definovat základní geometrii (např. krychle, válec). Nastavit UV-mapping odpovídající rozměrům.
|
349 |
+
* **Hlavní materiál**: Aplikovat primární materiál (např. INDUSTRIAL\_METAL) na všechny plochy.
|
350 |
+
* **Doplňkové vrstvy**: Nad hlavní materiál přidat vrstvy opotřebení: WORN\_PLASTIC pro oděrky, RUSTED\_STEEL pro korozi na okrajích, CABLING\_BUNDLE pro elektrická vedení.
|
351 |
+
* **Detaily**: Generovat dekorativní části \- větrací otvory, šrouby, světla \- samostatně a integrovat jako transparentní mapy nebo 3D prvky.
|
352 |
+
* **Kombinace textur**: Vrstvy spojit do výsledné textury (displacement map). Při velkém rozlišení zachovat pixelovou ostrost (více mipmap, žádné bilineární rozmazání).
|
353 |
+
|
354 |
+
**Příklad**
|
355 |
+
|
356 |
+
ModuleTexture EngineBay { \[cite: 307\]
|
357 |
+
shape: "Cylinder" \[cite: 308\]
|
358 |
+
baseMaterial: "INDUSTRIAL\_METAL" \[cite: 309\]
|
359 |
+
addLayer(material="RUSTED\_STEEL", amount=0.4, region="edges") \[cite: 310\]
|
360 |
+
addLayer(material="WORN\_PLASTIC", amount=0.2, region="center") \[cite: 311\]
|
361 |
+
addDetail(type="CABLING\_BUNDLE", position=(32,64)) \[cite: 311\]
|
362 |
+
finalize() \[cite: 311\]
|
363 |
+
}
|
364 |
+
|
365 |
+
## **Výbuchy a fléry**
|
366 |
+
|
367 |
+
* **Frame-by-frame**: Sekvence 8-12 snímků. Začíná jasným explozním středem (white-hot), postupně se rozrůstá oblak (oranžovo-žlutý) a končí šedivým kouřem.
|
368 |
+
* **Expanze**: Každý další snímek mírně zvětší průměr exploze. Simulace rozptylu částic (jiskry) v pozadí.
|
369 |
+
* **Barvy**: Počáteční snímek bílý/yellow, následují oranžové a tmavnoucí červené tóny, nakonec šedý/černý kouř.
|
370 |
+
* **Částice**: Kromě hlavního plamene emulovat drobné jiskry a úlomky (2D pixel particle system).
|
371 |
+
* **Loop**: Jednorázová animace (loop \= false). Po dokončení spustit event (např. audio „boom").
|
372 |
+
* **Světelný flash**: První snímek může být o jeden stupeň jasnější (přesvětlený).
|
373 |
+
|
374 |
+
**Příklad**
|
375 |
+
|
376 |
+
Animation EngineExplosion { \[cite: 324\]
|
377 |
+
frames: 10 \[cite: 325\]
|
378 |
+
frameRate: 12 \[cite: 326\]
|
379 |
+
sprites: \["exp0.png", "exp1.png", ... ,"exp9.png"\] \[cite: 327\]
|
380 |
+
loop: false \[cite: 328\]
|
381 |
+
onComplete: emit("ExplosionDone") \[cite: 329\]
|
382 |
+
}
|
383 |
+
|
384 |
+
## **Glitch efekty**
|
385 |
+
|
386 |
+
* **Horizontální posuvy**: Náhodně posunovat některé řádky obrazu o několik pixelů (offset glitch). Častá frekvence krátkodobě (např. 5-10Hz).
|
387 |
+
* **Chromatická aberace**: Mírný posuv RGB kanálů (červený a modrý rozestup) pro digitální šum.
|
388 |
+
* **Šumové linie**: Vertikální a horizontální lineární šum (blikající bíločerné pruhy).
|
389 |
+
* **Frekvence**: Epizodicky, ne konstantně \- glitch se objevuje v intervalech (např. 2-5 sekund trvající burst).
|
390 |
+
* **Selektivní aplikace**: Aplikovat na specifický prvek (monitor, HUD) nebo celou vrstvu obrazovky.
|
391 |
+
|
392 |
+
**Příklad**
|
393 |
+
|
394 |
+
Effect ScreenGlitch { \[cite: 338\]
|
395 |
+
horizontalJitter(intensity=2px, frequency=10Hz) \[cite: 339\]
|
396 |
+
verticalNoise(strength=0.3) \[cite: 340\]
|
397 |
+
onAlert: colorShift(r=+10, g=-5, b=+10) \[cite: 341\]
|
398 |
+
}
|
399 |
+
|
400 |
+
## **Parallax a ambientní efekty**
|
401 |
+
|
402 |
+
* **Parallax**: Více vrstev pozadí s různou rychlostí posuvu. Např. vzdálené hvězdy pomalu, blízké rychleji.
|
403 |
+
* **Ambientní světla**: Statické kontrolky a světelné panely, které občas bliknou (blinking) nebo plynule mění jas (pulsování).
|
404 |
+
* **Šum**: Jemný celoplošný šum (grain) přidán na vrstvu, simulující statický signál.
|
405 |
+
* **Částice**: Drobná animovaná částice prachu nebo kouře v popředí pro hloubku (nízká transparentnost).
|
406 |
+
* **Kamera**: Při akcích (výbuchu, letu) aplikovat lehký pohyb kamery (shake, slewing) pro dynamiku.
|
407 |
+
|
408 |
+
**Příklad**
|
409 |
+
|
410 |
+
ParallaxScene {
|
411 |
+
layers: \[
|
412 |
+
{asset:"stars\_far.png", speed:0.2},
|
413 |
+
{asset:"stars\_near.png", speed:0.5},
|
414 |
+
{asset:"space\_dust.png", speed:0.8}
|
415 |
+
\]
|
416 |
+
ambientLights: \[
|
417 |
+
{color:"red", pattern:"blink", interval:1.0},
|
418 |
+
{color:"green", pattern:"pulse", interval:0.5}
|
419 |
+
\]
|
420 |
+
noiseOverlay: {strength:0.05}
|
421 |
+
}
|
422 |
+
|
423 |
+
## **Simulace starého terminálu**
|
424 |
+
|
425 |
+
* **Textový výstup**: Postupné „psaní“ znaků s pauzami (typewriter effect). Každý znak doprovázen krátkým pípnutím.
|
426 |
+
* **Varovné stavy**: Při chybě střídavě blikat celé slovo nebo řádek (červeně) – invertovat barvy textu nebo použít efektní blikající pozadí.
|
427 |
+
* **FIFO buffer**: Na obrazovce se text vykresluje po řádcích z fronty. Každý nový řádek se posouvá nahoru.
|
428 |
+
* **Kursor**: Blikající podtržítko nebo blok ukazující aktivní pozici textu (blinking cursor \~2Hz).
|
429 |
+
* **Tónové efekty**: Nahrát charakteristický šum pro každé odeslané písmeno a varovné syčení.
|
430 |
+
|
431 |
+
**Příklad**
|
432 |
+
|
433 |
+
TerminalAnimation {
|
434 |
+
textLines: \["Accessing system...", "Loading data...", "WARNING: OVERLOAD"\]
|
435 |
+
charDelay: 0.05s
|
436 |
+
onWarning: flashText(color="red", duration=0.5)
|
437 |
+
cursor: blink(rate=2Hz)
|
438 |
+
}
|
439 |
+
|
440 |
+
## **Příklady efektů**
|
441 |
+
|
442 |
+
### **Výbuch motoru**
|
443 |
+
|
444 |
+
* Frame-by-frame animace motorového výbuchu: rychlý počáteční blesk, oblaka kouře do strany.
|
445 |
+
|
446 |
+
Animation EngineExplosion {
|
447 |
+
frames: 12 \[cite: 357\]
|
448 |
+
frameRate: 15 \[cite: 357\]
|
449 |
+
sprites: \["eng\_exp0.png","eng\_exp1.png",...,"eng\_exp11.png"\] \[cite: 357\]
|
450 |
+
loop: false \[cite: 357\]
|
451 |
+
onComplete: spawnDebris() \[cite: 357\]
|
452 |
+
}
|
453 |
+
|
454 |
+
### **Glitch monitoru**
|
455 |
+
|
456 |
+
* Post-procesní glitch efekt na obrazovce: náhodné rovnoběžné posuvy a barevný šum.
|
457 |
+
|
458 |
+
Effect MonitorGlitch {
|
459 |
+
horizontalShift(intensity=3px, frequency=8Hz)
|
460 |
+
noiseOverlay(strength=0.2)
|
461 |
+
colorDrift(r=+20, g=-10, b=+20)
|
462 |
+
}
|
463 |
+
|
464 |
+
### **Přechod obrazovky**
|
465 |
+
|
466 |
+
* Stylizovaný přechod mezi obrazovkami: z černé do neonové barvy s přídavným scanline efektem.
|
467 |
+
|
468 |
+
Transition ScreenFade {
|
469 |
+
fromColor: "black"
|
470 |
+
toColor: "green"
|
471 |
+
duration: 0.8
|
472 |
+
overlayScanlines: true
|
473 |
+
soundEffect: "static\_burst.wav"
|
474 |
+
}
|