Commit 370cfe46 authored by bbguimaraes's avatar bbguimaraes
Browse files

nngn: add screenshot captions

parent 46de48ed
......@@ -16,6 +16,10 @@ pre {
overflow: auto;
}
figcaption {
text-align: center;
}
#home {
text-align: center;
}
......
......@@ -76,60 +76,83 @@ on <a href="https://youtube.com/watch?v=T9HBn05Tm4s">Youtube</a>.
<img
src="/files/nngn/screenshots/map.png"
alt="map" title="map">
<figcaption>
Rendering a simple map with sprites and animations.
</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/debug.png"
alt="debug, colliders, grid"
title="debug, colliders, grid">
<figcaption>
Debugging sprite, collision, grid visualizations.
</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/lights.png"
alt="directional/point light, Z sprites"
title="directional/point light, Z sprites">
src="/files/nngn/screenshots/tilesheet.png"
alt="tile sheet map" title="tile sheet map">
<figcaption>Tile sheet maps.</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/tilesheet.png"
alt="tile sheet map" title="tile sheet map">
src="/files/nngn/screenshots/lights.png"
alt="directional/point light, Z sprites"
title="directional/point light, Z sprites">
<figcaption>
Dynamic lighting and shadows in 2D and 3D: directional
and point lights.
</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/shadows.png"
alt="shadow mapping" title="shadow mapping">
<figcaption>"2.5D" sprite lighting and shadows.</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/script.png"
alt="scripting, text box" title="scripting, text box">
<figcaption>Lua scripting.</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/zelda.png"
alt="more scripting" title="more scripting">
<figcaption>
Efficient processing of thousands of entities per frame
using Lua.
</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/fiona.png"
alt="dynamic lighting, light animation"
title="dynamic lighting, light animation">
<figcaption>Lighting animations.</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/perspective.png"
alt="perspective camera" title="perspective camera">
<figcaption>Orthographic and perspective camera.</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/cathedral.png"
alt="more dynamic lighting"
title="more dynamic lighting">
<figcaption>More dynamic lighting.</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/ascii_both.png"
alt="ascii graphics" title="ascii graphics">
<figcaption>
"Gray scale" and colored ASCII software rasterizer.
</figcaption>
</figure>
</div>
<h3 id="screenshots-tools">
......@@ -140,31 +163,39 @@ on <a href="https://youtube.com/watch?v=T9HBn05Tm4s">Youtube</a>.
<img
src="/files/nngn/screenshots/timeline_prof.png"
alt="timeline profiling" title="timeline profiling">
<figcaption>
Per-frame timing of various engine stages.
</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/plot_fps.png"
alt="plot fps" title="plot fps">
<figcaption>FPS counters.</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/plot_graphics.png"
alt="plot graphics" title="plot graphics">
<figcaption>Graphics back end statistics.</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/plot_collision.png"
alt="plot collision" title="plot collision">
<figcaption>Collision statistics.</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/plot_lua.png"
alt="plot lua" title="plot lua">
<figcaption>Lua memory and reference usage.</figcaption>
</figure>
<figure>
<img
src="/files/nngn/screenshots/inspect_textures.png"
alt="inspect textures" title="inspect textures">
<figcaption>Texture cache usage.</figcaption>
</figure>
</div>
</main>
......
......@@ -25,9 +25,14 @@ main {
padding-right: 2em;
}
.screenshots figure {
margin-left: 2em;
margin-right: 2em;
margin-top: 2em;
}
.screenshots img {
display: block;
width: 100%;
max-width: 800px;
margin: 2em auto;
padding: 1em;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment