samples.libcna.com/index.html at main · libcna/samples.libcna.com · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CNA Samples</title>
<meta name="description" content="XNA 4.0 samples ported to C++ with CNA, running in the browser through WebAssembly and WebGL 2.">
<link rel="stylesheet" href="assets/site.css">
</head>
<body>

<header class="site-head">
  <div class="wrap">
    <h1 class="site-title"><a href="index.html">CNA Samples</a></h1>
    <p class="tagline">
      Microsoft's XNA 4.0 samples, ported to C++ with CNA and compiled to WebAssembly.
      Every sample below runs in this browser on WebGL&nbsp;2 — no plugin, no download.
    </p>
  </div>
</header>

<main class="wrap">

  <section class="progress-note" aria-labelledby="progress-title">
    <h2 id="progress-title">Work in progress</h2>
    <p>
      Nearly 100 XNA samples have already been ported to CNA. We are validating their native and
      Release web builds and publishing them here one by one, so this gallery will keep growing.
    </p>
    <a class="repo-link" href="https://github.com/libcna/cna-samples" target="_blank" rel="noopener">Browse the ports and follow progress on GitHub →</a>
  </section>

  <ul class="gallery">

    <li class="card">
      <a href="PrimitivesSample.html">
        <img src="assets/img/primitives-thumb.png" width="560" height="315"
             alt="A starfield with two Spacewar ships and a sun, drawn entirely from points and lines.">
        <div class="card-body">
          <h2>Primitives</h2>
          <p>Points, lines and triangles through a Begin/End batch, the way SpriteBatch works for sprites.</p>
        </div>
      </a>
    </li>

    <li class="card">
      <a href="Primitives3D.html">
        <img src="assets/img/primitives-3d-thumb.png" width="560" height="336"
             alt="A dark red three-dimensional cube on a blue background, with the on-screen control hints.">
        <div class="card-body">
          <h2>Primitives 3D</h2>
          <p>Reusable cube, sphere, cylinder, torus and teapot geometry, in solid or wireframe.</p>
        </div>
      </a>
    </li>

    <li class="card">
      <a href="TexturesAndColors.html">
        <img src="assets/img/textures-and-colors-thumb.png" width="560" height="335"
             alt="A lit, textured sphere rendered by the sample’s LightingModColorModTexture technique.">
        <div class="card-body">
          <h2>Textures and Colors</h2>
          <p>Shader Series 2 — combining lighting, vertex colour and texture colour into one pixel.</p>
        </div>
      </a>
    </li>

    <li class="card">
      <a href="ReachGraphicsDemo.html">
        <img src="assets/img/reach-graphics-demo-thumb.png" width="560" height="336"
             alt="An animated tank rendered with XNA's BasicEffect in the Reach Graphics Demo.">
        <div class="card-body">
          <h2>Reach Graphics Demo</h2>
          <p>Six interactive scenes for XNA's stock effects, models, animation, render targets and SpriteBatch.</p>
        </div>
      </a>
    </li>

    <li class="card">
      <a href="SpriteEffects.html">
        <img src="assets/img/sprite-effects-thumb.png" width="560" height="336"
             alt="A cat lit by an animated normal map over a snowy glacier background.">
        <div class="card-body">
          <h2>Sprite Effects</h2>
          <p>Five animated SpriteBatch pixel effects: desaturation, dissolve, refraction and normal-mapped lighting.</p>
        </div>
      </a>
    </li>

    <li class="card">
      <a href="SpriteSheet.html">
        <img src="assets/img/sprite-sheet-thumb.png" width="560" height="315"
             alt="A rotating cat and animated glow beside their combined sprite-sheet texture.">
        <div class="card-body">
          <h2>Sprite Sheet</h2>
          <p>A custom content processor packs a cat and seven glow frames into one texture atlas.</p>
        </div>
      </a>
    </li>

    <li class="card">
      <a href="ShapeRendering.html">
        <img src="assets/img/shape-rendering-thumb.png" width="560" height="336"
             alt="Five coloured wireframe debug shapes rotating on a cornflower-blue background.">
        <div class="card-body">
          <h2>Shape Rendering</h2>
          <p>Batched debug drawing for lines, triangles, boxes, spheres and viewing frustums.</p>
        </div>
      </a>
    </li>

    <li class="card">
      <a href="InputReporter.html">
        <img src="assets/img/input-reporter-thumb.png" width="560" height="315"
             alt="The Input Reporter showing live values for every control on a connected gamepad.">
        <div class="card-body">
          <h2>Input Reporter</h2>
          <p>Live gamepad state, capabilities, controller selection and configurable thumbstick dead zones.</p>
        </div>
      </a>
    </li>

    <li class="card">
      <a href="InputSequence.html">
        <img src="assets/img/input-sequence-thumb.png" width="560" height="315"
             alt="The Input Sequence sample recognizing the 30 Lives move from a buffered input sequence.">
        <div class="card-body">
          <h2>Input Sequence</h2>
          <p>Buffered keyboard and gamepad input recognition for fighting-game-style moves and combinations.</p>
        </div>
      </a>
    </li>

    <li class="card">
      <a href="SafeArea.html">
        <img src="assets/img/safe-area-thumb.png" width="560" height="315"
             alt="A cat on a tiled grass background with labels aligned to all four title-safe corners.">
        <div class="card-body">
          <h2>Safe Area</h2>
          <p>Title-safe screen layout, aligned text and a camera that follows the cat before it reaches the edge.</p>
        </div>
      </a>
    </li>

  </ul>

</main>

<footer class="site-foot">
  <div class="wrap">
    <p>
      The samples are Microsoft's, published under the Microsoft Permissive License.
      The C++ port and the WebAssembly build are CNA.
    </p>
  </div>
</footer>

</body>
</html>