Repository navigation
Expand file tree
/
Copy pathdemos.html
More file actions
416 lines (355 loc) · 28.9 KB
/
Copy pathdemos.html
File metadata and controls
416 lines (355 loc) · 28.9 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
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
<!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 - browser builds, the cna-samples gallery, Android and desktop status, 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 - browser builds, the cna-samples gallery, Android and desktop status, 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="development/index.html" class="nav-link">Development</a>
<a href="deep-dives/index.html" class="nav-link">Deep Dives</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="network.html" class="nav-link">Network</a>
<a href="search.html" class="nav-link">Search</a>
<a href="https://github.com/libcna/cna" class="nav-link nav-link--github" target="_blank" rel="noopener">GitHub</a><a href="https://blog.libcna.com/" class="nav-link nav-link--blog" target="_blank" rel="noopener">Blog</a>
<a href="https://www.youtube.com/@libcna" class="nav-link nav-link--youtube" target="_blank" rel="noopener">YouTube</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. Hosted browser builds are prebuilt binaries: the CNA revision each was compiled from is not recorded, so they demonstrate what CNA can do, not the behavior of the documented snapshot.</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 compiles to WebAssembly via Emscripten, and its WebGL 2 renderer (an EasyGL profile) is the Emscripten default. The demos below run directly in the browser from <a href="https://demos.libcna.com/" target="_blank" rel="noopener">demos.libcna.com</a>, and 90 C++ ports of Microsoft’s XNA samples are playable at <a href="https://samples.libcna.com/" target="_blank" rel="noopener">samples.libcna.com</a>. Android APKs and prebuilt Windows binaries are not published yet.</p>
</div>
<!-- cna-samples -->
<div class="demo-platform" id="cna-samples">
<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 repository’s own plan (<code>cna-samples</code> revision <code>5db32e6</code>, 3 October 2026) audits <strong>153 entries</strong> — the size of the audit list, not 153 games. <strong>91 are complete C++ ports</strong>, so the port of the relevant XNA 4.0 samples is practically complete; <strong>8</strong> relevant XNA 4.0 C# programs remain, and <strong>54</strong> entries are not port targets (XNA 3.x or older content, Silverlight and Windows Forms tools, Visual Basic and C++ projects, asset packs, duplicates and samples tied to retired services). The Racing Game Kit is ported in its own plan and is not hosted, because its original content is not treated as redistributable by the sample gallery (<a href="https://www.youtube.com/watch?v=bTThYkZJzYw" target="_blank" rel="noopener">video</a>). The counts belong to that pinned revision and to CNA <code>next</code> at that date; they are not a result for CNA snapshot <code>c1c316b9</code> and not a universal runtime result across renderers.</p>
<div class="callout callout--info">
<span class="callout-icon">🌐</span>
<p><strong>Playable sample gallery.</strong> 90 Release web builds (WebGL 2; five of them threaded) are published at <a href="https://samples.libcna.com/">samples.libcna.com</a>, each run in Chrome when its port was completed — real XNA sample code running on CNA in your browser, not screenshots. One (PerformanceUtility) is marked partial. The same samples also run as unchanged original C# through <a href="docs/cna-net.html">CNA.NET</a>.</p>
</div>
<div style="margin:1rem 0 1.5rem;">
<a href="https://samples.libcna.com/" class="btn btn-primary" target="_blank" rel="noopener">Browse and play CNA Samples →</a>
</div>
<div class="callout callout--info">
<span class="callout-icon">ⓘ</span>
<p><strong>Shader-driven samples are no longer blocked by <code>.fx</code>.</strong> An earlier revision of this page said that 23 samples could not build because CNA lacked compiled-shader support. That is no longer true: <code>BloomSample</code>, <code>NormalMapping</code>, <code>PerPixelLighting</code>, <code>ShadowMapping</code>, <code>DistortionSample</code>, <code>ShatterEffect</code>, <code>NonPhotoRealistic</code>, <code>ColorReplacement</code>, <code>SkinningSample</code>, <code>CPUSkinning</code>, <code>CustomModelAnimation</code>, <code>CustomModelEffect</code>, <code>ShipGame</code> and <code>Spacewar</code> are all marked complete, because the official Effect binaries produced by XNA’s own content build load through CNA’s compiled-effect path. What CNA still does not do is compile HLSL <code>.fx</code> <em>source</em> at run time; see <a href="docs/effects.html">Effects System</a>. The remaining samples wait on owner decisions or are documented non-ports, not on a missing shader compiler.</p>
</div>
<p style="margin-top:1.5rem;">A representative selection of the samples marked complete at that revision:</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>Yacht</code>, <code>SnowShovel</code>, <code>SoccerPitch</code>, <code>ShipGame</code>, <code>Spacewar</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>MicrophoneEcho</code>.</p>
</div>
<div class="demo-item">
<h4>Shaders & effects</h4>
<p><code>BloomSample</code>, <code>DistortionSample</code>, <code>NormalMapping</code>, <code>PerPixelLighting</code>, <code>ShadowMapping</code>, <code>NonPhotoRealistic</code>, <code>ColorReplacement</code>, <code>ShatterEffect</code>, <code>SkinningSample</code>, <code>CPUSkinning</code>, <code>CustomModelAnimation</code>, <code>CustomModelEffect</code> — the samples that previously waited on compiled shaders.</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>ClientServerSample</code>, <code>NetRumble</code> (native only).</p>
</div>
</div>
<div style="margin-top:1rem;">
<a href="https://github.com/libcna/cna-samples" class="btn btn-secondary btn-sm" target="_blank" rel="noopener">View on GitHub</a>
</div>
</div>
<!-- Web builds -->
<div class="demo-platform">
<h2>🌐 Web Builds (Emscripten / WebGL 2)</h2>
<p>CNA compiles to WebAssembly via Emscripten; the <code>WEBGL2</code> renderer (an EasyGL profile, and the Emscripten default) runs on WebGL 2, and CNA also has an experimental WebGPU renderer for the browser. Full 2D and 3D rendering work in the browser today. These are prebuilt binaries hosted at <a href="https://demos.libcna.com/" target="_blank" rel="noopener">demos.libcna.com</a>; each loads and responds to input when checked, but none is tied to a recorded CNA revision.</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="https://demos.libcna.com/cna_demo_house_3d/cna_house3d_demo.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>House Simulator</h4>
<p>Explore a furnished house from the basement to the attic and garden, with changing daylight and weather. WASD or arrow keys move, click to look around with the mouse, Shift switches between walk and run, and Esc opens Pause. The first load downloads a large asset package.</p>
<a href="https://demos.libcna.com/house-simulator/" 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="https://demos.libcna.com/cna_demo_2d/cna_demo_2d.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>CNA Craft</h4>
<p>An interactive CNA Craft demo compiled to WebAssembly and running directly in the browser.</p>
<a href="https://demos.libcna.com/cna-craft/CnaCraft.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>CNA Examples</h4>
<p>A browsable collection of CNA API examples and experiments, available as a WebAssembly application.</p>
<a href="https://demos.libcna.com/cna-examples/cna_examples.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>Mesh Craft</h4>
<p>An interactive WebAssembly demo focused on geometry and 3D mesh rendering with CNA.</p>
<a href="https://demos.libcna.com/mesh-craft/MeshCraft.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>Black Pine</h4>
<p>An exploration and puzzle adventure across a five-act story at a mountain radio relay.</p>
<a href="https://demos.libcna.com/black-pine/black-pine.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>Lines CNA</h4>
<p>A classic ball-line puzzle game — build lines of five or more matching colors before the board fills.</p>
<a href="https://demos.libcna.com/lines-cna/winlinez_cna.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>Tamagotchi CNA</h4>
<p>A faithful reimplementation of the 1997 virtual pet — one creature, three buttons, a tiny LCD.</p>
<a href="https://demos.libcna.com/tamagotchi-cna/TamagotchiCna.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>Wolf CNA</h4>
<p>A retro first-person shooter prototype with true polygonal 3D rendering and multiple weapons.</p>
<a href="https://demos.libcna.com/wolf-cna/wolf-cna.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>CNA Car Simulator</h4>
<p>A realistic passenger-car driving simulator in a small fictional Czech town, with traffic, weather, a day-night cycle and a helicopter.</p>
<a href="https://demos.libcna.com/cna-car-simulator/cna-car-simulator.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>CNA Street</h4>
<p>A procedurally generated European inner-city street with a signalised junction, traffic, pedestrians, shadows and reflections. The street is built in your browser, so the first start takes about a minute.</p>
<a href="https://demos.libcna.com/cna-street/cna-street.html" class="btn btn-primary btn-sm" target="_blank" rel="noopener">Play in Browser</a>
</div>
<div class="demo-item">
<h4>Living Room Simulator</h4>
<p>An explorable, furnished 3D living room with changing daylight and weather, rendered by the original C++ application through the WebGL 2 renderer. WASD moves, the arrow keys look around, 1–8 switch viewpoints and F1 shows the controls. The first load downloads about 128 MiB of models.</p>
<a href="https://demos.libcna.com/living-room-simulator/living-room-simulator.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 targets Android through SDL3's native Android support and NDK sensor integration, and the Devices demo carries a complete Gradle project (minSdk 24, arm64-v8a). There is no Android CI job and no APK has been published yet, so nothing below is downloadable; APKs will be published here when they exist.</p>
<div class="demo-items">
<div class="demo-item">
<h4>CNA Demo APK</h4>
<p>Android build of the CNA demo application. The demo project targets Android 7.0+ (API 24) and builds arm64-v8a.</p>
<span class="todo-link">⚠ No APK published yet</span>
</div>
<div class="demo-item">
<h4>Speedy Blupi - Android Port</h4>
<p>An Android Gradle/NDK project for the Speedy Blupi C++ port exists in its repository, but no APK has been published anywhere; build it yourself from source. See the Speedy Blupi section below.</p>
<span class="todo-link">⚠ No APK published yet</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. Clone CNA’s <code>apple/m4-stabilization</code> branch, as the build guide explains.</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; none exist yet (the CNA repository publishes tags only).</p>
<a href="https://github.com/libcna/cna/releases" class="btn btn-secondary btn-sm" target="_blank" rel="noopener">GitHub Releases</a>
</div>
</div>
</div>
<!-- Speedy Blupi -->
<div class="demo-platform" id="speedy-blupi">
<h2>🏃 Speedy Blupi - Port / Demo</h2>
<p>Speedy Blupi, in its 2013 Windows Phone edition, has been decompiled, translated from C# to C++ and moved onto CNA by the OpenEggbert project (repository <a href="https://github.com/openeggbert/mobile-eggbert" target="_blank" rel="noopener"><code>openeggbert/mobile-eggbert</code></a>, MIT-licensed). It is a showcase of the framework's capability to support real game code, a practical test of CNA's API coverage and a demonstration of the XNA-style game loop in action. It is an independent consumer of CNA, not part of CNA or its test suite: every result below belongs to the CNA revision it was built with, not to snapshot <code>c1c316b9</code>.</p>
<div class="demo-items">
<div class="demo-item">
<h4>Speedy Blupi - Desktop</h4>
<p>Builds and runs on Linux (SDL_Renderer) from source, and Windows builds are documented (native, MinGW cross-build, and Direct3D through Wine or Proton). No prebuilt binaries are published, and the repository lists open issues; follow the project on GitHub for updates.</p>
<a href="https://github.com/openeggbert/mobile-eggbert" class="btn btn-secondary btn-sm" target="_blank" rel="noopener">Source on GitHub</a>
</div>
<div class="demo-item">
<h4>Speedy Blupi - Web</h4>
<p>Playable in the browser at speedyblupi.com, hosted by the OpenEggbert project as a WebAssembly build made with Emscripten. It is an external build of the Speedy Blupi port: its embedded CNA code dates from May 2026 (an early revision, using CNA’s SDL_Renderer backend), so it predates both alpha.1 and the documented snapshot and is not evidence for either. The Windows Phone game itself is not a CNA example.</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>An Android Gradle/NDK project exists in the repository, but no APK has been published anywhere. Build it from source if you want to try it.</p>
<span class="todo-link">⚠ No APK published yet</span>
</div>
</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. At revision <code>ea33c9a29</code> (13 September 2026) <strong>249 demo screens are registered</strong> across 13 areas and 79 categories, every one calling a real API rather than a mock. It builds against the <code>OPENGLES3</code> renderer by default, though the renderer is overridable, and a hosted WebAssembly build is available above.</p>
<div class="callout callout--note">
<span class="callout-icon">📝</span>
<p><strong>Broad, with a catalogue checker.</strong> An earlier revision of this page described only two populated areas and no tests. Today every area has demos, <code>tools/check_catalog.py</code> keeps the table, plan and registrations in agreement, and the README reports all 249 screens rendering on both OPENGLES3 and SDL_RENDERER via a headless sweep. The count moves with the repository; run <code>./build/cna_examples --list-demos</code> for the authoritative list.</p>
</div>
<div class="demo-items">
<div class="demo-item">
<h4>Input — 52 screens</h4>
<p>Keyboard, Mouse, Gamepad, Touch and a catch-all <code>Other</code> group (joysticks, host sensors, haptics, device enumeration and a cross-subsystem summary).</p>
</div>
<div class="demo-item">
<h4>Audio — 12 screens</h4>
<p><code>SoundEffect</code>, <code>SoundEffectInstance</code>, 3D audio (<code>AudioListener</code>/<code>AudioEmitter</code> with <code>Apply3D()</code>), <code>DynamicSoundEffectInstance</code>, <code>Microphone</code> and XACT.</p>
</div>
<div class="demo-item">
<h4>Graphics — 83 screens</h4>
<p>40 in 2D Graphics and 43 in 3D Graphics, including self-checking screens that compute their own pass/fail for volume and cube textures.</p>
</div>
<div class="demo-item">
<h4>Framework, Math, Content, Media, Devices, Net and more</h4>
<p>Game loop and components, vectors and matrices, ContentManager with the XNB and CNJ formats, Song/Video/MediaLibrary, sensors and power, network sessions and leaderboards, storage, diagnostics and avatars — the remaining areas.</p>
</div>
</div>
<div style="margin-top:1rem;">
<a href="https://github.com/libcna/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 commit c1c316b9 (9 October 2026), a post-alpha.1 development snapshot. CNA exposes 14 renderer identities across 12 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>
<li><a href="network.html">CNA Network</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>
<li><a href="deep-dives/index.html">Deep Dives</a></li>
<li><a href="known-issues/index.html">Known Issues</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Community</h4>
<ul>
<li><a href="https://github.com/libcna/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/libcna/cna/blob/c1c316b9c7a846ce8002809c151fcd1af14942c9/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>