Skip to content

Commit

Permalink
docs: Add examples
Browse files Browse the repository at this point in the history
  • Loading branch information
hajimehoshi committed Jan 31, 2018
1 parent 6abaf41 commit 484d979
Show file tree
Hide file tree
Showing 12 changed files with 549 additions and 45 deletions.
71 changes: 41 additions & 30 deletions _docs/gen.go
Original file line number Diff line number Diff line change
Expand Up @@ -136,17 +136,25 @@ func safeHTML(text string) template.HTML {
}

type example struct {
Name string
ThumbWidth int
ThumbHeight int
Name string
ThumbWidth int
ThumbHeight int
ScreenWidth int
ScreenHeight int
}

func (e *example) Width() int {
return e.ThumbWidth * 2
if e.ScreenWidth == 0 {
return e.ThumbWidth * 2
}
return e.ScreenWidth
}

func (e *example) Height() int {
return e.ThumbHeight * 2
if e.ScreenHeight == 0 {
return e.ThumbHeight * 2
}
return e.ScreenHeight
}

func (e *example) Source() string {
Expand Down Expand Up @@ -177,34 +185,37 @@ func versions() string {
}

var (
gamesExamples = []example{
{Name: "2048", ThumbWidth: 210, ThumbHeight: 300},
{Name: "blocks", ThumbWidth: 256, ThumbHeight: 240},
}
graphicsExamples = []example{
{"alphablending", 320, 240},
{"font", 320, 240},
{"highdpi", 320, 240},
{"hsv", 320, 240},
{"hue", 320, 240},
{"infinitescroll", 320, 240},
{"life", 320, 240},
{"masking", 320, 240},
{"mosaic", 320, 240},
{"noise", 320, 240},
{"paint", 320, 240},
{"perspective", 320, 240},
{"rotate", 320, 240},
{"sprites", 320, 240},
{Name: "alphablending", ThumbWidth: 320, ThumbHeight: 240},
{Name: "flood", ThumbWidth: 320, ThumbHeight: 240},
{Name: "font", ThumbWidth: 320, ThumbHeight: 240},
{Name: "highdpi", ThumbWidth: 320, ThumbHeight: 240},
{Name: "hsv", ThumbWidth: 320, ThumbHeight: 240},
{Name: "hue", ThumbWidth: 320, ThumbHeight: 240},
{Name: "infinitescroll", ThumbWidth: 320, ThumbHeight: 240},
{Name: "life", ThumbWidth: 320, ThumbHeight: 240},
{Name: "mandelbrot", ThumbWidth: 320, ThumbHeight: 320, ScreenWidth: 640, ScreenHeight: 640},
{Name: "masking", ThumbWidth: 320, ThumbHeight: 240},
{Name: "mosaic", ThumbWidth: 320, ThumbHeight: 240},
{Name: "noise", ThumbWidth: 320, ThumbHeight: 240},
{Name: "paint", ThumbWidth: 320, ThumbHeight: 240},
{Name: "perspective", ThumbWidth: 320, ThumbHeight: 240},
{Name: "rotate", ThumbWidth: 320, ThumbHeight: 240},
{Name: "sprites", ThumbWidth: 320, ThumbHeight: 240},
}
inputExamples = []example{
{"gamepad", 320, 240},
{"keyboard", 320, 240},
{"typewriter", 320, 240},
{Name: "gamepad", ThumbWidth: 320, ThumbHeight: 240},
{Name: "keyboard", ThumbWidth: 320, ThumbHeight: 240},
{Name: "typewriter", ThumbWidth: 320, ThumbHeight: 240},
}
audioExamples = []example{
{"audio", 320, 240},
{"piano", 320, 240},
}
gameExamples = []example{
{"2048", 210, 300},
{"blocks", 256, 240},
{Name: "audio", ThumbWidth: 320, ThumbHeight: 240},
{Name: "piano", ThumbWidth: 320, ThumbHeight: 240},
{Name: "sinewave", ThumbWidth: 320, ThumbHeight: 240},
}
)

Expand Down Expand Up @@ -268,7 +279,7 @@ func outputMain() error {
"GraphicsExamples": graphicsExamples,
"InputExamples": inputExamples,
"AudioExamples": audioExamples,
"GameExamples": gameExamples,
"GamesExamples": gamesExamples,
}
return t.Funcs(funcs).Execute(f, data)
}
Expand Down Expand Up @@ -371,7 +382,7 @@ func main() {
examples = append(examples, graphicsExamples...)
examples = append(examples, inputExamples...)
examples = append(examples, audioExamples...)
examples = append(examples, gameExamples...)
examples = append(examples, gamesExamples...)
for _, e := range examples {
if err := outputExampleContent(&e); err != nil {
log.Fatal(err)
Expand Down
16 changes: 8 additions & 8 deletions _docs/index.tmpl.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,33 +60,33 @@ <h2 id="features">Features</h2>
</dl>

<h2 id="examples">Examples</h2>
<h3>Graphics</h3>
<h3>Games</h3>
<div class="row">
{{range .GraphicsExamples -}}
{{range .GamesExamples -}}
<div class="col-3">
<a href="examples/{{.Name}}.html"><img src="images/examples/{{.Name}}.png" width="{{.ThumbWidth}}" height="{{.ThumbHeight}}" alt="Ebiten example: {{.Name}}" class="img-thumbnail"></a>
</div>
{{- end}}
</div>
<h3>Input</h3>
<h3>Graphics</h3>
<div class="row">
{{range .InputExamples -}}
{{range .GraphicsExamples -}}
<div class="col-3">
<a href="examples/{{.Name}}.html"><img src="images/examples/{{.Name}}.png" width="{{.ThumbWidth}}" height="{{.ThumbHeight}}" alt="Ebiten example: {{.Name}}" class="img-thumbnail"></a>
</div>
{{- end}}
</div>
<h3>Audio</h3>
<h3>Input</h3>
<div class="row">
{{range .AudioExamples -}}
{{range .InputExamples -}}
<div class="col-3">
<a href="examples/{{.Name}}.html"><img src="images/examples/{{.Name}}.png" width="{{.ThumbWidth}}" height="{{.ThumbHeight}}" alt="Ebiten example: {{.Name}}" class="img-thumbnail"></a>
</div>
{{- end}}
</div>
<h3>Game</h3>
<h3>Audio</h3>
<div class="row">
{{range .GameExamples -}}
{{range .AudioExamples -}}
<div class="col-3">
<a href="examples/{{.Name}}.html"><img src="images/examples/{{.Name}}.png" width="{{.ThumbWidth}}" height="{{.ThumbHeight}}" alt="Ebiten example: {{.Name}}" class="img-thumbnail"></a>
</div>
Expand Down
31 changes: 31 additions & 0 deletions docs/examples/flood.content.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset="utf-8">
<script>
'use strict';
window.addEventListener('load', function() {
function isProduction() {
var l = window.top.location;
if (l.hash === '#_production') {
return true;
}
if (l.hostname === 'localhost' || l.hostname === '127.0.0.1') {
return false;
}
return true;
}

var s = document.createElement('script');
var src = 'flood.js';
if (isProduction()) {
src = 'https://hajimehoshi.github.io/ebiten.pagestorage/latest/' + src;
}
s.src = src;
s.onload = function() {
var notice = document.getElementById('notice');
notice.parentNode.removeChild(notice);
};
document.body.appendChild(s);
});
</script>
<title>(Example)</title>
<p id="notice" style="color: white;">Now Loading...</p>
120 changes: 120 additions & 0 deletions docs/examples/flood.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!DOCTYPE html>
<meta charset="utf-8">
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://hajimehoshi.github.io/ebiten/images/examples/flood.png">
<meta name="description" content="Ebiten example - flood">
<link rel="shortcut icon" href="../favicon.png" type="image/png" >
<link rel="icon" href="../favicon.png" type="image/png" >
<title>Ebiten example - flood</title>

<link rel="stylesheet" href="../stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="../stylesheets/highlight-github.css">
<link rel="stylesheet" href="../stylesheets/ebiten.css">
<script src="../scripts/googleanalytics.js"></script>

<nav class="navbar"><div class="container">
<nav class="d-flex flex-row" style="width: 100%;">
<div class="nav mr-auto"><a class="navbar-brand" href="../"><img src="../images/logo_white.svg" alt="EBITEN"></a></div>
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="https://github.com/hajimehoshi/ebiten">GitHub</a></li>
<li class="nav-item"><a class="nav-link" href="https://godoc.org/github.com/hajimehoshi/ebiten">GoDoc</a></li>
<li class="nav-item"><a class="nav-link" href="https://github.com/hajimehoshi/ebiten/wiki">Wiki</a>
<li class="nav-item"><a class="nav-link" href="https://ebiten-playground.github.io/">Playground</a>
</ul>
</nav>
</div></nav>

<main><div class="container">

<h2>Ebiten example - flood</h2>
<iframe src="flood.content.html" width="640" height="480"></iframe>
<div class="card"><pre class="card-body"><code class="language-go">// &#43;build example

package main

import (
&#34;image/color&#34;
_ &#34;image/png&#34;
&#34;log&#34;

&#34;github.com/hajimehoshi/ebiten&#34;
&#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
)

const (
screenWidth = 320
screenHeight = 240
)

var (
ebitenImage *ebiten.Image
colors = []color.RGBA{
{0xff, 0xff, 0xff, 0xff},
{0xff, 0xff, 0x0, 0xff},
{0xff, 0x0, 0xff, 0xff},
{0xff, 0x0, 0x0, 0xff},
{0x0, 0xff, 0xff, 0xff},
{0x0, 0xff, 0x0, 0xff},
{0x0, 0x0, 0xff, 0xff},
{0x0, 0x0, 0x0, 0xff},
}
)

func update(screen *ebiten.Image) error {
if ebiten.IsRunningSlowly() {
return nil
}

const (
ox = 10
oy = 10
dx = 60
dy = 50
)
screen.Fill(color.NRGBA{0x00, 0x40, 0x80, 0xff})

op := &amp;ebiten.DrawImageOptions{}
op.GeoM.Translate(ox, oy)
screen.DrawImage(ebitenImage, op)

// Fill with solid colors
for i, c := range colors {
op := &amp;ebiten.DrawImageOptions{}
x := i % 4
y := i/4 &#43; 1
op.GeoM.Translate(ox&#43;float64(dx*x), oy&#43;float64(dy*y))

// Reset RGB (not Alpha) 0 forcibly
op.ColorM.Scale(0, 0, 0, 1)

// Set color
r := float64(c.R) / 0xff
g := float64(c.G) / 0xff
b := float64(c.B) / 0xff
op.ColorM.Translate(r, g, b, 0)
screen.DrawImage(ebitenImage, op)
}
return nil
}

func main() {
var err error
ebitenImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/ebiten.png&#34;, ebiten.FilterNearest)
if err != nil {
log.Fatal(err)
}
if err := ebiten.Run(update, screenWidth, screenHeight, 2, &#34;Flood fill with solid colors (Ebiten Demo)&#34;); err != nil {
log.Fatal(err)
}
}
</code></pre></div>

</div></main>

<footer><div class="container">
<p>© 2013 Hajime Hoshi</p>
<p>Code is licensed under <a href="https://github.com/hajimehoshi/ebiten/blob/master/LICENSE">the Apache License 2.0</a>.</p>
<p>The content of this page is licensed under <a href="https://creativecommons.org/licenses/by/4.0/">the Creative Commons Attribution 4.0 License</a>.</p>
</div></footer>

<script src="../scripts/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
31 changes: 31 additions & 0 deletions docs/examples/mandelbrot.content.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<meta charset="utf-8">
<script>
'use strict';
window.addEventListener('load', function() {
function isProduction() {
var l = window.top.location;
if (l.hash === '#_production') {
return true;
}
if (l.hostname === 'localhost' || l.hostname === '127.0.0.1') {
return false;
}
return true;
}

var s = document.createElement('script');
var src = 'mandelbrot.js';
if (isProduction()) {
src = 'https://hajimehoshi.github.io/ebiten.pagestorage/latest/' + src;
}
s.src = src;
s.onload = function() {
var notice = document.getElementById('notice');
notice.parentNode.removeChild(notice);
};
document.body.appendChild(s);
});
</script>
<title>(Example)</title>
<p id="notice" style="color: white;">Now Loading...</p>
Loading

0 comments on commit 484d979

Please sign in to comment.