docs: Update

_docs/index.tmpl.html

@@ -25,7 +25,7 @@
       <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>
+      <li class="nav-item"><a class="nav-link" href="https://jsgo.io/dave/jsgo/playground#c3ff01cd9b8e897cf0438a78c87bf1f5aee38095">Playground (jsgo.io)</a>
     </ul>
   </div>
 </div></nav>

docs/examples/_resources/audio/license.md

@@ -18,14 +18,6 @@ Recorded by Mike Koenig
 Attribution 3.0: https://creativecommons.org/licenses/by/3.0/
 ```
 
-## game.ogg
-
-```
-http://mart.kitunebi.com/music_act.html
-
-Harpie's Feather (ハルピュイアの羽) by Napi
-```
-
 
 ## ragtime.ogg
 

docs/examples/airship.html

@@ -27,11 +27,12 @@
 
   <h2>Ebiten example - airship</h2>
   <iframe src="airship.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
         &#34;fmt&#34;
         &#34;image&#34;
         &#34;image/color&#34;
@@ -41,6 +42,7 @@ import (
 
         &#34;github.com/hajimehoshi/ebiten&#34;
         &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -65,11 +67,21 @@ var (
 )
 
 func init() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        gophersImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/gophers.jpg&#34;, ebiten.FilterDefault)
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Gophers_jpg))
         if err != nil {
-                panic(err)
+                log.Fatal(err)
         }
+        gophersImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
+
         groundImage, _ = ebiten.NewImage(screenWidth*2, screenHeight*2/3&#43;50, ebiten.FilterDefault)
         perspectiveGroundImage, _ = ebiten.NewImage(screenWidth*2, screenHeight, ebiten.FilterDefault)
 
@@ -210,9 +222,9 @@ func drawGroundImage(screen *ebiten.Image, ground *ebiten.Image) {
         gw, _ := ground.Size()
         pw, ph := perspectiveGroundImage.Size()
         for j := 0; j &lt; ph; j&#43;&#43; {
-                // z is in [1, -1]
+                // z is in [2, -1]
                 rate := float64(j) / float64(ph)
-                z := (1-rate)*1 &#43; rate*-1
+                z := (1-rate)*2 &#43; rate*-1
                 if z &lt;= 0 {
                         break
                 }

docs/examples/alphablending.html

@@ -27,17 +27,19 @@
 
   <h2>Ebiten example - alphablending</h2>
   <iframe src="alphablending.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
+        &#34;image&#34;
         &#34;image/color&#34;
         _ &#34;image/png&#34;
         &#34;log&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
-        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -81,11 +83,21 @@ func update(screen *ebiten.Image) error {
 }
 
 func main() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        ebitenImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/ebiten.png&#34;, ebiten.FilterDefault)
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Ebiten_png))
         if err != nil {
                 log.Fatal(err)
         }
+        ebitenImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
+
         if err := ebiten.Run(update, screenWidth, screenHeight, 2, &#34;Alpha Blending (Ebiten Demo)&#34;); err != nil {
                 log.Fatal(err)
         }

docs/examples/audio.html

@@ -27,7 +27,7 @@
 
   <h2>Ebiten example - audio</h2>
   <iframe src="audio.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 // This is an example to implement an audio player.
 // See examples/wav for a simpler example to play a sound file.
@@ -46,6 +46,7 @@ import (
         &#34;github.com/hajimehoshi/ebiten/audio/mp3&#34;
         &#34;github.com/hajimehoshi/ebiten/audio/wav&#34;
         &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        raudio &#34;github.com/hajimehoshi/ebiten/examples/resources/audio&#34;
         &#34;github.com/hajimehoshi/ebiten/inpututil&#34;
 )
 
@@ -83,15 +84,7 @@ func playerBarRect() (x, y, w, h int) {
 
 func NewPlayer(audioContext *audio.Context) (*Player, error) {
         const bytesPerSample = 4 // TODO: This should be defined in audio package
-        wavF, err := ebitenutil.OpenFile(&#34;_resources/audio/jab.wav&#34;)
+        s, err := mp3.Decode(audioContext, audio.BytesReadSeekCloser(raudio.Classic_mp3))
-        if err != nil {
-                return nil, err
-        }
-        mp3F, err := ebitenutil.OpenFile(&#34;_resources/audio/classic.mp3&#34;)
-        if err != nil {
-                return nil, err
-        }
-        s, err := mp3.Decode(audioContext, mp3F)
         if err != nil {
                 return nil, err
         }
@@ -111,7 +104,7 @@ func NewPlayer(audioContext *audio.Context) (*Player, error) {
         }
         player.audioPlayer.Play()
         go func() {
-                s, err := wav.Decode(audioContext, wavF)
+                s, err := wav.Decode(audioContext, audio.BytesReadSeekCloser(raudio.Jab_wav))
                 if err != nil {
                         log.Fatal(err)
                         return

docs/examples/filter.html

@@ -27,16 +27,19 @@
 
   <h2>Ebiten example - filter</h2>
   <iframe src="filter.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
+        &#34;image&#34;
         _ &#34;image/png&#34;
         &#34;log&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
         &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -72,14 +75,25 @@ func update(screen *ebiten.Image) error {
 }
 
 func main() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        // Specifying filter on NewImage(FromImage) is just for backward compatibility.
+        // this example works in any working directory.
-        // Now specifying filter at DrawImageOptions is recommended.
+        // If you want to use a file, there are some options:
-        // Specify FilterDefault here, that means to prefer filter specified at DrawImageOptions.
+        // 1) Use os.Open and pass the file to the image decoder.
-        ebitenImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/ebiten.png&#34;, ebiten.FilterDefault)
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Ebiten_png))
         if err != nil {
                 log.Fatal(err)
         }
+
+        // Specifying filter on NewImage[FromImage] is just for backward compatibility.
+        // Now specifying filter at DrawImageOptions is recommended.
+        // Specify FilterDefault here, that means to prefer filter specified at DrawImageOptions.
+        ebitenImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
+
         if err := ebiten.Run(update, screenWidth, screenHeight, 1, &#34;Filter (Ebiten Demo)&#34;); err != nil {
                 log.Fatal(err)
         }

docs/examples/flood.html

@@ -27,17 +27,19 @@
 
   <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
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
+        &#34;image&#34;
         &#34;image/color&#34;
         _ &#34;image/png&#34;
         &#34;log&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
-        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -97,11 +99,21 @@ func update(screen *ebiten.Image) error {
 }
 
 func main() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        ebitenImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/ebiten.png&#34;, ebiten.FilterDefault)
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Ebiten_png))
         if err != nil {
                 log.Fatal(err)
         }
+        ebitenImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
+
         if err := ebiten.Run(update, screenWidth, screenHeight, 2, &#34;Flood fill with solid colors (Ebiten Demo)&#34;); err != nil {
                 log.Fatal(err)
         }

docs/examples/font.html

@@ -27,14 +27,13 @@
 
   <h2>Ebiten example - font</h2>
   <iframe src="font.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
         &#34;fmt&#34;
         &#34;image/color&#34;
-        &#34;io/ioutil&#34;
         &#34;log&#34;
         &#34;math/rand&#34;
         &#34;strings&#34;
@@ -44,7 +43,7 @@ import (
         &#34;golang.org/x/image/font&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
-        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/fonts&#34;
         &#34;github.com/hajimehoshi/ebiten/text&#34;
 )
 
@@ -109,18 +108,7 @@ func init() {
 }
 
 func init() {
-        f, err := ebitenutil.OpenFile(&#34;_resources/fonts/mplus-1p-regular.ttf&#34;)
+        tt, err := truetype.Parse(fonts.MPlus1pRegular_ttf)
-        if err != nil {
-                log.Fatal(err)
-        }
-        defer f.Close()
-
-        b, err := ioutil.ReadAll(f)
-        if err != nil {
-                log.Fatal(err)
-        }
-
-        tt, err := truetype.Parse(b)
         if err != nil {
                 log.Fatal(err)
         }

docs/examples/gamepad.html

@@ -27,7 +27,7 @@
 
   <h2>Ebiten example - gamepad</h2>
   <iframe src="gamepad.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 

docs/examples/highdpi.html

@@ -27,7 +27,7 @@
 
   <h2>Ebiten example - highdpi</h2>
   <iframe src="highdpi.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 

docs/examples/hsv.html

@@ -27,18 +27,21 @@
 
   <h2>Ebiten example - hsv</h2>
   <iframe src="hsv.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
         &#34;fmt&#34;
+        &#34;image&#34;
         _ &#34;image/jpeg&#34;
         &#34;log&#34;
         &#34;math&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
         &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -139,11 +142,21 @@ Inverted:   %s [I]`, hue, saturation, value, msgInverted)
 }
 
 func main() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        gophersImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/gophers.jpg&#34;, ebiten.FilterDefault)
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Gophers_jpg))
         if err != nil {
                 log.Fatal(err)
         }
+        gophersImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
+
         if err := ebiten.Run(update, screenWidth, screenHeight, 2, &#34;HSV (Ebiten Demo)&#34;); err != nil {
                 log.Fatal(err)
         }

docs/examples/hue.html

@@ -27,17 +27,19 @@
 
   <h2>Ebiten example - hue</h2>
   <iframe src="hue.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
+        &#34;image&#34;
         _ &#34;image/jpeg&#34;
         &#34;log&#34;
         &#34;math&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
-        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -70,11 +72,21 @@ func update(screen *ebiten.Image) error {
 }
 
 func main() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        gophersImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/gophers.jpg&#34;, ebiten.FilterDefault)
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Gophers_jpg))
         if err != nil {
                 log.Fatal(err)
         }
+        gophersImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
+
         if err := ebiten.Run(update, screenWidth, screenHeight, 2, &#34;Hue (Ebiten Demo)&#34;); err != nil {
                 log.Fatal(err)
         }

docs/examples/infinitescroll.html

@@ -27,17 +27,20 @@
 
   <h2>Ebiten example - infinitescroll</h2>
   <iframe src="infinitescroll.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
         &#34;fmt&#34;
+        &#34;image&#34;
         _ &#34;image/png&#34;
         &#34;log&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
         &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -50,11 +53,20 @@ var (
 )
 
 func init() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        bgImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/tile.png&#34;, ebiten.FilterDefault)
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Tile_png))
         if err != nil {
                 log.Fatal(err)
         }
+        bgImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
 }
 
 var (

docs/examples/keyboard.html

@@ -27,18 +27,20 @@
 
   <h2>Ebiten example - keyboard</h2>
   <iframe src="keyboard.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
+        &#34;image&#34;
         _ &#34;image/png&#34;
         &#34;log&#34;
         &#34;strconv&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
-        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
         &#34;github.com/hajimehoshi/ebiten/examples/keyboard/keyboard&#34;
+        rkeyabord &#34;github.com/hajimehoshi/ebiten/examples/resources/images/keyboard&#34;
 )
 
 const (
@@ -49,11 +51,12 @@ const (
 var keyboardImage *ebiten.Image
 
 func init() {
-        var err error
+        img, _, err := image.Decode(bytes.NewReader(rkeyabord.Keyboard_png))
-        keyboardImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/keyboard/keyboard.png&#34;, ebiten.FilterDefault)
         if err != nil {
                 log.Fatal(err)
         }
+
+        keyboardImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
 }
 
 var keyNames = map[ebiten.Key]string{

docs/examples/life.html

@@ -27,7 +27,7 @@
 
   <h2>Ebiten example - life</h2>
   <iframe src="life.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 

docs/examples/mandelbrot.html

@@ -27,7 +27,7 @@
 
   <h2>Ebiten example - mandelbrot</h2>
   <iframe src="mandelbrot.content.html" width="640" height="640"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 

docs/examples/masking.html

@@ -27,11 +27,12 @@
 
   <h2>Ebiten example - masking</h2>
   <iframe src="masking.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
         &#34;image&#34;
         &#34;image/color&#34;
         _ &#34;image/jpeg&#34;
@@ -39,7 +40,7 @@ import (
         &#34;math&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
-        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -59,16 +60,26 @@ var (
 )
 
 func init() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        bgImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/gophers.jpg&#34;, ebiten.FilterDefault)
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Gophers_jpg))
         if err != nil {
                 log.Fatal(err)
         }
+        bgImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
 
-        fgImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/fiveyears.jpg&#34;, ebiten.FilterDefault)
+        img, _, err = image.Decode(bytes.NewReader(images.FiveYears_jpg))
         if err != nil {
                 log.Fatal(err)
         }
+        fgImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
 
         maskedFgImage, _ = ebiten.NewImage(screenWidth, screenHeight, ebiten.FilterDefault)
 

docs/examples/mosaic.html

@@ -27,16 +27,18 @@
 
   <h2>Ebiten example - mosaic</h2>
   <iframe src="mosaic.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
+        &#34;image&#34;
         _ &#34;image/jpeg&#34;
         &#34;log&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
-        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -52,11 +54,20 @@ var (
 )
 
 func init() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        gophersImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/gophers.jpg&#34;, ebiten.FilterDefault)
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Gophers_jpg))
         if err != nil {
                 log.Fatal(err)
         }
+        gophersImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
 }
 
 func update(screen *ebiten.Image) error {

docs/examples/noise.html

@@ -27,7 +27,7 @@
 
   <h2>Ebiten example - noise</h2>
   <iframe src="noise.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 

docs/examples/paint.html

@@ -27,7 +27,7 @@
 
   <h2>Ebiten example - paint</h2>
   <iframe src="paint.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 

docs/examples/perspective.html

@@ -27,17 +27,18 @@
 
   <h2>Ebiten example - perspective</h2>
   <iframe src="perspective.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
         &#34;image&#34;
         _ &#34;image/jpeg&#34;
         &#34;log&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
-        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -80,11 +81,21 @@ func update(screen *ebiten.Image) error {
 }
 
 func main() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        gophersImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/gophers.jpg&#34;, ebiten.FilterDefault)
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Gophers_jpg))
         if err != nil {
                 log.Fatal(err)
         }
+        gophersImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
+
         if err := ebiten.Run(update, screenWidth, screenHeight, 2, &#34;Perspective (Ebiten Demo)&#34;); err != nil {
                 log.Fatal(err)
         }

docs/examples/piano.html

@@ -27,14 +27,13 @@
 
   <h2>Ebiten example - piano</h2>
   <iframe src="piano.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
         &#34;fmt&#34;
         &#34;image/color&#34;
-        &#34;io/ioutil&#34;
         &#34;log&#34;
         &#34;math&#34;
 
@@ -44,6 +43,7 @@ import (
         &#34;github.com/hajimehoshi/ebiten&#34;
         &#34;github.com/hajimehoshi/ebiten/audio&#34;
         &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/fonts&#34;
         &#34;github.com/hajimehoshi/ebiten/inpututil&#34;
         &#34;github.com/hajimehoshi/ebiten/text&#34;
 )
@@ -53,18 +53,7 @@ var (
 )
 
 func init() {
-        f, err := ebitenutil.OpenFile(&#34;_resources/fonts/arcade_n.ttf&#34;)
+        tt, err := truetype.Parse(fonts.ArcadeN_ttf)
-        if err != nil {
-                log.Fatal(err)
-        }
-        defer f.Close()
-
-        b, err := ioutil.ReadAll(f)
-        if err != nil {
-                log.Fatal(err)
-        }
-
-        tt, err := truetype.Parse(b)
         if err != nil {
                 log.Fatal(err)
         }

docs/examples/rotate.html

@@ -27,17 +27,19 @@
 
   <h2>Ebiten example - rotate</h2>
   <iframe src="rotate.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
+        &#34;image&#34;
         _ &#34;image/jpeg&#34;
         &#34;log&#34;
         &#34;math&#34;
 
         &#34;github.com/hajimehoshi/ebiten&#34;
-        &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -74,11 +76,21 @@ func update(screen *ebiten.Image) error {
 }
 
 func main() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        gophersImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/gophers.jpg&#34;, ebiten.FilterDefault)
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Gophers_jpg))
         if err != nil {
                 log.Fatal(err)
         }
+        gophersImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
+
         if err := ebiten.Run(update, screenWidth, screenHeight, 2, &#34;Rotate (Ebiten Demo)&#34;); err != nil {
                 log.Fatal(err)
         }

docs/examples/sinewave.html

@@ -27,7 +27,7 @@
 
   <h2>Ebiten example - sinewave</h2>
   <iframe src="sinewave.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 

docs/examples/sprites.html

@@ -27,12 +27,14 @@
 
   <h2>Ebiten example - sprites</h2>
   <iframe src="sprites.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
         &#34;fmt&#34;
+        &#34;image&#34;
         _ &#34;image/png&#34;
         &#34;log&#34;
         &#34;math&#34;
@@ -40,6 +42,7 @@ import (
 
         &#34;github.com/hajimehoshi/ebiten&#34;
         &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -105,15 +108,28 @@ var (
 )
 
 func init() {
-        img, _, err := ebitenutil.NewImageFromFile(&#34;_resources/images/ebiten.png&#34;, ebiten.FilterDefault)
+        // Decode image from a byte slice instead of a file so that
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Ebiten_png))
         if err != nil {
                 log.Fatal(err)
         }
-        w, h := img.Size()
+        origEbitenImage, _ := ebiten.NewImageFromImage(img, ebiten.FilterDefault)
-        ebitenImage, _ = ebiten.NewImage(w, h, ebiten.FilterDefault)
+
+        w, h := origEbitenImage.Size()
+        ebitenImage, _ = ebiten.NewImage(w, h, ebiten.FilterNearest)
+
         op := &amp;ebiten.DrawImageOptions{}
         op.ColorM.Scale(1, 1, 1, 0.5)
-        ebitenImage.DrawImage(img, op)
+        ebitenImage.DrawImage(origEbitenImage, op)
+
         for i := range sprites.sprites {
                 w, h := ebitenImage.Size()
                 x, y := rand.Intn(screenWidth-w), rand.Intn(screenHeight-h)

docs/examples/tiles.html

@@ -27,11 +27,12 @@
 
   <h2>Ebiten example - tiles</h2>
   <iframe src="tiles.content.html" width="480" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 
 import (
+        &#34;bytes&#34;
         &#34;fmt&#34;
         &#34;image&#34;
         _ &#34;image/png&#34;
@@ -39,6 +40,7 @@ import (
 
         &#34;github.com/hajimehoshi/ebiten&#34;
         &#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
+        &#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
 )
 
 const (
@@ -56,11 +58,20 @@ var (
 )
 
 func init() {
-        var err error
+        // Decode image from a byte slice instead of a file so that
-        tilesImage, _, err = ebitenutil.NewImageFromFile(&#34;_resources/images/tiles.png&#34;, ebiten.FilterDefault)
+        // this example works in any working directory.
+        // If you want to use a file, there are some options:
+        // 1) Use os.Open and pass the file to the image decoder.
+        //    This is a very regular way, but doesn&#39;t work on browsers.
+        // 2) Use ebitenutil.OpenFile and pass the file to the image decoder.
+        //    This works even on browsers.
+        // 3) Use ebitenutil.NewImageFromFile to create an ebiten.Image directly from a file.
+        //    This also works on browsers.
+        img, _, err := image.Decode(bytes.NewReader(images.Tiles_png))
         if err != nil {
                 log.Fatal(err)
         }
+        tilesImage, _ = ebiten.NewImageFromImage(img, ebiten.FilterDefault)
 }
 
 var (

docs/examples/typewriter.html

@@ -27,7 +27,7 @@
 
   <h2>Ebiten example - typewriter</h2>
   <iframe src="typewriter.content.html" width="640" height="480"></iframe>
-  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example
+  <div class="card"><pre class="card-body"><code class="language-go">// &#43;build example jsgo
 
 package main
 

docs/index.html

@@ -25,7 +25,7 @@
       <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>
+      <li class="nav-item"><a class="nav-link" href="https://jsgo.io/dave/jsgo/playground#c3ff01cd9b8e897cf0438a78c87bf1f5aee38095">Playground (jsgo.io)</a>
     </ul>
   </div>
 </div></nav>
@@ -36,7 +36,7 @@
 </div></header>
 
 <main><div class="container">
-  <p>Stable version: v1.6.1 / Development version: v1.7.0-alpha</p>
+  <p>Stable version: v1.6.2 / Development version: v1.7.0-alpha</p>
 
   <h2 id="platforms">Platforms</h2>
   <dl class="row">