-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemos.html
More file actions
329 lines (282 loc) · 19.1 KB
/
Copy pathdemos.html
File metadata and controls
329 lines (282 loc) · 19.1 KB
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demos - CNA</title>
<meta name="description" content="CNA demos - web builds, Android builds, desktop builds, and the Speedy Blupi port. Try CNA in action across multiple platforms.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="CNA">
<meta property="og:url" content="https://libcna.com/demos.html">
<meta property="og:title" content="Demos - CNA">
<meta property="og:description" content="CNA demos - web builds, Android builds, desktop builds, and the Speedy Blupi port. Try CNA in action across multiple platforms.">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="canonical" href="https://libcna.com/demos.html">
<link rel="stylesheet" href="css/prism-tomorrow.min.css">
<script>(function(){try{var t=localStorage.getItem("cna-theme");if(t==="light"||t==="dark")document.documentElement.setAttribute("data-theme",t);}catch(e){}})();</script>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to content</a>
<nav class="nav">
<div class="nav-container">
<a href="index.html" class="nav-brand">CNA</a>
<button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<div class="nav-menu">
<a href="index.html" class="nav-link">Home</a>
<a href="about.html" class="nav-link">About</a>
<a href="features.html" class="nav-link">Features</a>
<a href="architecture.html" class="nav-link">Architecture</a>
<a href="documentation.html" class="nav-link">Documentation</a>
<a href="tutorials.html" class="nav-link">Tutorials</a>
<a href="demos.html" class="nav-link">Demos</a>
<a href="showcase.html" class="nav-link">Showcase</a>
<a href="videos.html" class="nav-link">Videos</a>
<a href="roadmap.html" class="nav-link">Roadmap</a>
<a href="contact.html" class="nav-link">Contact</a>
<a href="search.html" class="nav-link">Search</a>
<a href="https://github.com/openeggbert/cna" class="nav-link nav-link--github" target="_blank" rel="noopener">GitHub</a>
<a href="https://discord.gg/vrnc4n6DaE" class="nav-link nav-link--discord" target="_blank" rel="noopener">Discord</a>
</div>
<button class="theme-toggle" type="button" aria-label="Switch to light theme" title="Switch to light theme">
<svg class="theme-icon-light" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.5 4.9l1.4-1.4 2.1 2.1-1.4 1.4L3.5 4.9zm13.5 13.5l1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1zM19.1 3.5l1.4 1.4-2.1 2.1-1.4-1.4 2.1-2.1zM5.6 17l1.4 1.4-2.1 2.1-1.4-1.4L5.6 17zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
<svg class="theme-icon-dark" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.3 22a10 10 0 0 1-1.6-19.9c.6-.1 1 .5.8 1a7.9 7.9 0 0 0 9.7 10.6c.5-.2 1 .3.9.8A10 10 0 0 1 12.3 22z"/></svg>
</button>
</div>
</nav>
<main id="main-content">
<div class="page-header">
<div class="container">
<span class="section-label">Demos</span>
<h1>CNA Demos</h1>
<p>Runnable demonstrations of CNA capabilities across web, Android, and desktop platforms. CNA is a work in progress - demos reflect current state and will expand over time.</p>
</div>
</div>
<section class="section">
<div class="container">
<div class="callout callout--info">
<span class="callout-icon">🚀</span>
<p><strong>Web builds available now:</strong> CNA's EasyGL renderer compiles to WebAssembly via Emscripten. The House 3D Demo and the main CNA Demo both run in the browser today. Additional platform builds (Android, Windows prebuilt) are still in progress.</p>
</div>
<!-- Web builds -->
<div class="demo-platform">
<h2>🌐 Web Builds (Emscripten / WebGL 2)</h2>
<p>CNA's EasyGL (OpenGL ES 3.0) renderer compiles to WebAssembly via Emscripten and runs via WebGL 2. Full 2D and 3D rendering work in the browser today.</p>
<div class="demo-items">
<div class="demo-item">
<h4>House 3D Demo</h4>
<p>Procedural 3D house scene with walls, roof, windows, door, and floor. Player movement via WASD + gravity. Runs via WebGL 2/Emscripten. Tests: 3D rendering, BasicEffect, keyboard input.</p>
<a href="demos/house3ddemo/cna_house3d_demo.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>cna-demo (2D Sprite Demo)</h4>
<p>2D sprite demo running via WebGL 2/Emscripten. Tests: SpriteBatch rendering, 2D rendering pipeline, and basic game loop.</p>
<a href="demos/cnademo/CNADEMO.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
</div>
</div>
<!-- Android builds -->
<div class="demo-platform">
<h2>📱 Android Builds</h2>
<p>CNA runs on Android via SDL3's native Android support. The NDK toolchain is configured and validated on Android hardware. Downloadable APKs will be published here.</p>
<div class="demo-items">
<div class="demo-item">
<h4>CNA Demo APK</h4>
<p>Android build of the CNA demo application. Requires Android 7.0+ (API 24). ARM64 and x86_64 targets supported.</p>
<!-- TODO: Replace with actual APK download link -->
<span class="todo-link">⚠ TODO: APK download link</span>
</div>
<div class="demo-item">
<h4>Speedy Blupi - Android Port</h4>
<p>Android port of the Speedy Blupi game running on CNA. A milestone demo for Android CNA support.</p>
<!-- TODO: Replace with actual APK download link -->
<span class="todo-link">⚠ TODO: APK download link</span>
</div>
</div>
</div>
<!-- Desktop builds -->
<div class="demo-platform">
<h2>🖥 Desktop Builds</h2>
<p>Desktop builds are the primary current delivery target. Linux binaries and Windows executables can be built from source following the <a href="docs/building.html">build guide</a>. Prebuilt binaries may be published with future releases.</p>
<div class="demo-items">
<div class="demo-item">
<h4>House 3D Demo - Linux</h4>
<p>Procedural 3D house scene with walls, roof, windows, door, and floor. Player movement with WASD + gravity. Uses EasyGL (OpenGL ES 3.0) renderer. Tests: 3D rendering, BasicEffect, keyboard input. Build with <code>cmake --build build --target cna_house3d_demo</code>.</p>
<a href="docs/building.html" class="btn btn-secondary btn-sm">Build Instructions</a>
</div>
<div class="demo-item">
<h4>2D Sprite Demo - Linux</h4>
<p>SpriteBatch rendering demo with texture loading, movement, rotation, and scaling. Works on all renderers. Build with <code>cmake --build build --target cna_demo_2d</code>.</p>
<a href="docs/building.html" class="btn btn-secondary btn-sm">Build Instructions</a>
</div>
<div class="demo-item">
<h4>Input Demo - Linux</h4>
<p>Real-time visualization of keyboard keys, mouse state, gamepad axes/buttons/D-pad/triggers, touch input, and gestures. Build with <code>cmake --build build --target cna_demo_input</code>.</p>
<a href="docs/building.html" class="btn btn-secondary btn-sm">Build Instructions</a>
</div>
<div class="demo-item">
<h4>Sound Demo - Linux</h4>
<p>Audio playback demo using <code>SoundEffect</code> and <code>SoundEffectInstance</code> with volume/pitch/pan control. Build with <code>cmake --build build --target cna_demo_sound</code>.</p>
<a href="docs/building.html" class="btn btn-secondary btn-sm">Build Instructions</a>
</div>
<div class="demo-item">
<h4>Prebuilt Releases</h4>
<p>Prebuilt Linux and Windows binaries will be published as GitHub Releases when stable milestones are reached.</p>
<a href="https://github.com/openeggbert/cna/releases" class="btn btn-secondary btn-sm" target="_blank" rel="noopener">GitHub Releases</a>
</div>
</div>
</div>
<!-- Speedy Blupi -->
<div class="demo-platform">
<h2>🏃 Speedy Blupi - Port / Demo</h2>
<p>Speedy Blupi is a classic open-source game being ported to run on CNA as a showcase of the framework's capability to support real game code. This port is both a practical test of CNA's API coverage and a demonstration of the XNA-style game loop in action.</p>
<div class="demo-items">
<div class="demo-item">
<h4>Speedy Blupi - Desktop</h4>
<p>Desktop version of the Speedy Blupi CNA port. Currently in development. Follow the project on GitHub for updates.</p>
<!-- TODO: Replace with actual Speedy Blupi / cna-demo link -->
<span class="todo-link">⚠ TODO: project link</span>
</div>
<div class="demo-item">
<h4>Speedy Blupi - Web</h4>
<p>Browser-playable WebAssembly build of the Speedy Blupi CNA port. Emscripten/WebGL 2 support is now working in CNA — Speedy Blupi web port is in progress.</p>
<a href="https://speedyblupi.com/SpeedyBlupi2013/" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>Speedy Blupi - Android</h4>
<p>Android APK of the Speedy Blupi CNA port. APK download coming soon.</p>
<!-- TODO: Replace with actual APK link -->
<span class="todo-link">⚠ TODO: APK link</span>
</div>
</div>
</div>
<!-- cna-samples -->
<div class="demo-platform">
<h2>📚 cna-samples (GitHub)</h2>
<p>C++ ports of the official XNA Game Studio 4.0 sample library — a concrete measure of how much real XNA code has been migrated. The in-scope inventory contains <strong>86 samples</strong>, of which <strong>63 are real ports that build</strong>; the remaining 23 are placeholders. This repository-level count is not a universal runtime result across CNA renderers.</p>
<div class="callout callout--info">
<span class="callout-icon">ⓘ</span>
<p><strong>Why 23 samples do not build.</strong> Almost every one of them is blocked by the same single gap: compiled <code>.fx</code> shader bytecode, which CNA does not yet support. That is why the missing set is dominated by shader-driven samples — <code>BloomSample</code>, <code>NormalMapping</code>, <code>PerPixelLighting</code>, <code>ShadowMapping</code>, <code>DistortionSample</code>, <code>ShatterEffect</code>, <code>NonPhotoRealistic</code>, <code>ColorReplacement</code> — plus the skinning and custom-model-effect samples (<code>SkinningSample</code>, <code>CPUSkinning</code>, <code>CustomModelAnimation</code>, <code>CustomModelEffect</code>) and the larger games built on them (<code>ShipGame</code>, <code>Spacewar</code>, <code>NetRumble</code>). See <a href="docs/effects.html">Effects System</a> for detail on that gap.</p>
</div>
<p style="margin-top:1.5rem;">A representative selection of what does build today:</p>
<div class="demo-items">
<div class="demo-item">
<h4>Rendering & 3D</h4>
<p><code>PrimitivesSample</code>, <code>Primitives3D</code>, <code>Graphics3D</code>, <code>GeneratedGeometry</code>, <code>ReachGraphicsDemo</code>, <code>LensFlare</code>, <code>RimLighting</code>, <code>SpriteEffects</code>, <code>SpriteSheet</code>, <code>TexturesAndColors</code>, <code>ShapeRendering</code>.</p>
</div>
<div class="demo-item">
<h4>Gameplay & complete games</h4>
<p><code>Platformer</code>, <code>MarbleMaze</code>, <code>RolePlayingGame</code>, <code>CatapultWars</code>, <code>HoneycombRush</code>, <code>NinjAcademy</code>, <code>CardsStarterKit</code>, <code>TicTacToe</code>, <code>Yacht</code>, <code>SnowShovel</code>, <code>SoccerPitch</code>.</p>
</div>
<div class="demo-item">
<h4>Input & devices</h4>
<p><code>InputReporter</code>, <code>InputSequence</code>, <code>GesturesSample</code>, <code>TouchThumbsticks</code>, <code>AccelerometerSample</code>, <code>Orientation</code>, <code>TiltPerspective</code>, <code>MicrophoneEcho</code>.</p>
</div>
<div class="demo-item">
<h4>Audio</h4>
<p><code>Audio3D</code>, <code>SoundAndMusic</code> — both exercising CNA's real XACT parser and its 3D audio path.</p>
</div>
<div class="demo-item">
<h4>Collision, physics & AI</h4>
<p><code>CollisionSample</code>, <code>PerPixelCollision</code>, <code>RectangleCollision</code>, <code>TransformedCollision</code>, <code>HeightmapCollision</code>, <code>Pathfinding</code>, <code>FlockingSample</code>, <code>FuzzyLogic</code>, <code>ChaseAndEvade</code>, <code>InverseKinematics</code>, <code>Bounce</code>.</p>
</div>
<div class="demo-item">
<h4>Cameras, UI & networking</h4>
<p><code>ChaseCamera</code>, <code>CameraShake</code>, <code>SafeArea</code>, <code>UISample</code>, <code>DynamicMenu</code>, <code>GameStateManagement</code>, <code>LocalizationSample</code>, <code>PeerToPeer</code>, <code>ClientServerSample</code>, <code>NetworkPrediction</code>.</p>
</div>
</div>
<div style="margin-top:1rem;">
<a href="https://github.com/openeggbert/cna-samples" class="btn btn-secondary btn-sm" target="_blank" rel="noopener">View on GitHub</a>
</div>
</div>
<!-- cna-examples -->
<div class="demo-platform">
<h2>🎮 cna-examples (GitHub)</h2>
<p>A single browsable catalogue application that demonstrates CNA's own APIs area by area — rather than porting existing XNA samples, this is purpose-built teaching material. One executable (<code>cna_examples</code>) presents a <em>Home → Area → Category → Demo</em> menu you navigate at runtime, so you can step through the API surface without rebuilding. <strong>60 demos are registered today.</strong> It builds against the <code>OPENGLES3</code> renderer by default, though the renderer is overridable.</p>
<div class="callout callout--warn">
<span class="callout-icon">⚠</span>
<p><strong>Early — two of seven areas are populated.</strong> The screen framework, navigation and state management are in place and the demos are real API calls, not mock-ups. But <strong>Devices, Net, Media, 2D Graphics and 3D Graphics are registered as empty areas</strong> with no demos behind them yet. There are also no tests and no CI.</p>
</div>
<div class="demo-items">
<div class="demo-item">
<h4>Input — 50 demos</h4>
<p>Ten demos each across <code>Keyboard</code>, <code>Mouse</code>, <code>Gamepad</code>, <code>Touch</code> and a catch-all <code>Other</code> group covering the remaining input surfaces.</p>
</div>
<div class="demo-item">
<h4>Audio — 10 demos</h4>
<p><code>SoundEffect</code>, <code>SoundEffectInstance</code>, <code>DynamicSoundEffectInstance</code>, 3D audio and <code>Microphone</code>. The 3D audio screens build a live <code>AudioListener</code>/<code>AudioEmitter</code> pair and call <code>Apply3D()</code> each frame, with a graceful fallback when no audio hardware is present.</p>
</div>
<div class="demo-item">
<h4>Not yet written</h4>
<p>Devices, Net, Media, 2D Graphics and 3D Graphics. The navigation shell is already built to host them — the areas exist in the menu but are currently empty.</p>
</div>
</div>
<div style="margin-top:1rem;">
<a href="https://github.com/openeggbert/cna-examples" class="btn btn-secondary btn-sm" target="_blank" rel="noopener">View on GitHub</a>
</div>
</div>
<!-- Build yourself -->
<div class="callout callout--note">
<span class="callout-icon">🛠</span>
<p><strong>Build it yourself now:</strong> While public binaries and web builds are still being prepared, you can build CNA from source today. See the <a href="docs/getting-started.html">Getting Started guide</a> and <a href="docs/building.html">Build Instructions</a>.</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-inner">
<div class="footer-top">
<div class="footer-brand">
<div class="footer-brand-name">CNA</div>
<p>Documentation snapshot for CNA 0.1.0-alpha.1, the first tagged pre-release. CNA exposes 50 renderer identities across 46 implementation families; APIs may change before 1.0.</p>
</div>
<div class="footer-col">
<h4>Project</h4>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="architecture.html">Architecture</a></li>
<li><a href="roadmap.html">Roadmap</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Docs</h4>
<ul>
<li><a href="docs/getting-started.html">Getting Started</a></li>
<li><a href="docs/building.html">Building</a></li>
<li><a href="docs/platforms.html">Platforms</a></li>
<li><a href="docs/rendering-backends.html">Renderers</a></li>
<li><a href="docs/faq.html">FAQ</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Community</h4>
<ul>
<li><a href="https://github.com/openeggbert/cna" target="_blank" rel="noopener">GitHub</a></li>
<li><a href="https://discord.gg/vrnc4n6DaE" target="_blank" rel="noopener">Discord</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>CNA is not affiliated with or endorsed by Microsoft Corporation. XNA is a trademark of Microsoft. Licensed under the Microsoft Public License (Ms-PL).</p>
<div class="footer-links">
<a href="https://github.com/openeggbert/cna/blob/master/LICENSE" target="_blank" rel="noopener">License</a>
<a href="contact.html">Contact</a>
</div>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<script src="js/prism/prism.min.js" defer></script>
<script src="js/prism/prism-cpp.min.js" defer></script>
<script src="js/prism/prism-glsl.min.js" defer></script>
<script src="js/prism/prism-json.min.js" defer></script>
<script src="js/prism/prism-bash.min.js" defer></script>
<script src="js/prism/prism-cmake.min.js" defer></script>
</body>
</html>