ebiten/docs/examples/masking.html
2018-03-21 14:34:48 +09:00

186 lines
7.0 KiB
HTML

<!DOCTYPE html>
<meta charset="utf-8">
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://hajimehoshi.github.io/ebiten/images/examples/masking.png">
<meta name="description" content="Ebiten example - masking">
<link rel="shortcut icon" href="../favicon.png" type="image/png" >
<link rel="icon" href="../favicon.png" type="image/png" >
<title>Ebiten example - masking</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 - 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 jsgo
package main
import (
&#34;bytes&#34;
&#34;image&#34;
&#34;image/color&#34;
_ &#34;image/jpeg&#34;
&#34;log&#34;
&#34;math&#34;
&#34;github.com/hajimehoshi/ebiten&#34;
&#34;github.com/hajimehoshi/ebiten/examples/resources/images&#34;
)
const (
screenWidth = 320
screenHeight = 240
)
var (
bgImage *ebiten.Image
fgImage *ebiten.Image
maskedFgImage *ebiten.Image
spotLightImage *ebiten.Image
spotLightX = 0
spotLightY = 0
spotLightVX = 1
spotLightVY = 1
)
func init() {
// 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.Gophers_jpg))
if err != nil {
log.Fatal(err)
}
bgImage, _ = ebiten.NewImageFromImage(img, 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)
// Initialize the spot light image.
const r = 64
alphas := image.Point{r * 2, r * 2}
a := image.NewAlpha(image.Rectangle{image.ZP, alphas})
for j := 0; j &lt; alphas.Y; j&#43;&#43; {
for i := 0; i &lt; alphas.X; i&#43;&#43; {
// d is the distance between (i, j) and the (circle) center.
d := math.Sqrt(float64((i-r)*(i-r) &#43; (j-r)*(j-r)))
// Alphas around the center are 0 and values outside of the circle are 0xff.
b := uint8(max(0, min(0xff, int(3*d*0xff/r)-2*0xff)))
a.SetAlpha(i, j, color.Alpha{b})
}
}
spotLightImage, _ = ebiten.NewImageFromImage(a, ebiten.FilterDefault)
}
func update(screen *ebiten.Image) error {
spotLightX &#43;= spotLightVX
spotLightY &#43;= spotLightVY
if spotLightX &lt; 0 {
spotLightX = -spotLightX
spotLightVX = -spotLightVX
}
if spotLightY &lt; 0 {
spotLightY = -spotLightY
spotLightVY = -spotLightVY
}
w, h := spotLightImage.Size()
maxX, maxY := screenWidth-w, screenHeight-h
if maxX &lt; spotLightX {
spotLightX = -spotLightX &#43; 2*maxX
spotLightVX = -spotLightVX
}
if maxY &lt; spotLightY {
spotLightY = -spotLightY &#43; 2*maxY
spotLightVY = -spotLightVY
}
if ebiten.IsRunningSlowly() {
return nil
}
// Reset the maskedFgImage.
maskedFgImage.Fill(color.White)
op := &amp;ebiten.DrawImageOptions{}
op.CompositeMode = ebiten.CompositeModeCopy
op.GeoM.Translate(float64(spotLightX), float64(spotLightY))
maskedFgImage.DrawImage(spotLightImage, op)
// Use &#39;source-in&#39; composite mode so that the source image (fgImage) is used but the alpha
// is determined by the destination image (maskedFgImage).
//
// The result image is the source image with the destination alpha. In maskedFgImage, alpha
// values in the hole is 0 and alpha values in other places are 0xff. As a result, the
// maskedFgImage draws the source image with a hole that shape is spotLightImage. Note that
// RGB values in the destination image are ignored.
//
// See also https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin.
op = &amp;ebiten.DrawImageOptions{}
op.CompositeMode = ebiten.CompositeModeSourceIn
maskedFgImage.DrawImage(fgImage, op)
screen.Fill(color.RGBA{0x00, 0x00, 0x80, 0xff})
screen.DrawImage(bgImage, &amp;ebiten.DrawImageOptions{})
screen.DrawImage(maskedFgImage, &amp;ebiten.DrawImageOptions{})
return nil
}
func max(a, b int) int {
if a &lt; b {
return b
}
return a
}
func min(a, b int) int {
if a &lt; b {
return a
}
return b
}
func main() {
if err := ebiten.Run(update, screenWidth, screenHeight, 2, &#34;Masking (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>