1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
# PixiJS Prototyping Framework
A minimal PixiJS framework with core architecture patterns (DOM initialization, Service initialization, State management) for rapid prototyping.
## Quick Start
```bash
npm run dev
```
Open browser to `http://localhost:5173/`
## Architecture
The framework follows a clean initialization pattern:
1. **DOM Initialization** - Reference DOM elements
2. **Renderer Initialization** - Set up PixiJS with WebGPU/WebGL
3. **Services Initialization** - Start the update loop
## Global Objects (Available in Console)
- `window.PIXI` - Complete PixiJS namespace
- `window.pixiApp` - PixiJS Application instance
- `window.state` - StateManager instance (reactive state)
- `window.log` - Logger function
## Rapid Prototyping Examples
### Example 1: Draw a Rectangle
Open browser console:
```javascript
const graphics = new PIXI.Graphics();
graphics.rect(100, 100, 200, 150);
graphics.fill(0xff0000);
pixiApp.stage.addChild(graphics);
```
### Example 2: Animated Sprite
```javascript
const graphics = new PIXI.Graphics();
graphics.circle(0, 0, 50);
graphics.fill(0x00ff00);
pixiApp.stage.addChild(graphics);
// Add to update loop in main.js:
// graphics.x = Math.sin(state.state.time.current) * 200 + pixiApp.screen.width / 2;
// graphics.y = pixiApp.screen.height / 2;
```
### Example 3: Using State System
The framework includes a reactive state manager:
```javascript
// Listen to state changes
state.on('time.current', ({ value }) => {
console.log('Time:', value);
});
// Modify state (triggers listeners)
state.state.time.speed = 2.0; // Double speed
// Toggle pause
state.togglePause();
```
### Example 4: Register Input Actions
```javascript
// In main.js, add to setupControls():
state.registerAction('myAction', () => {
log('Action triggered!');
});
state.mapKey('KeyP', 'myAction');
```
## Modifying the Update Loop
Edit `/src/main.js` function `update()`:
```javascript
function update() {
state.incrementTime(0.016); // ~60fps increment
state.updateRealElapsed();
state.state.rendering.frameCounter++;
// YOUR PROTOTYPE CODE GOES HERE
// Example:
mySprite.rotation += 0.01;
myGraphics.x = Math.sin(state.state.time.current) * 100;
}
```
## State Structure
```javascript
state.state = {
userPrefs: {
showGrid: true,
showMetrics: true,
theme: 'dark',
// ... persisted to localStorage
},
uiConfig: {
canvasWidth: number,
canvasHeight: number,
// ...
},
time: {
current: number, // Increments every frame
realElapsed: number, // Real seconds since start
speed: number, // Time multiplier
isPaused: boolean,
},
rendering: {
rendererType: 'webgpu' | 'webgl',
frameCounter: number,
},
health: {
fps: number,
updateMs: number,
renderMs: number,
},
}
```
## Tips
1. **Use the console** - All major objects are exposed globally
2. **Hot reload** - Vite will automatically reload on file changes
3. **State persistence** - userPrefs automatically save to localStorage
4. **Responsive** - Canvas automatically resizes with window
5. **WebGPU fallback** - Automatically falls back to WebGL if WebGPU unavailable
## Clean Slate
The framework intentionally draws nothing by default. Start adding your PixiJS objects and see results immediately.
|
