mirror of
https://github.com/hajimehoshi/ebiten.git
synced 2024-12-26 03:38:55 +01:00
186 lines
7.0 KiB
HTML
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">// +build example jsgo
|
|
|
|
package main
|
|
|
|
import (
|
|
"bytes"
|
|
"image"
|
|
"image/color"
|
|
_ "image/jpeg"
|
|
"log"
|
|
"math"
|
|
|
|
"github.com/hajimehoshi/ebiten"
|
|
"github.com/hajimehoshi/ebiten/examples/resources/images"
|
|
)
|
|
|
|
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'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 < alphas.Y; j++ {
|
|
for i := 0; i < alphas.X; i++ {
|
|
// d is the distance between (i, j) and the (circle) center.
|
|
d := math.Sqrt(float64((i-r)*(i-r) + (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 += spotLightVX
|
|
spotLightY += spotLightVY
|
|
if spotLightX < 0 {
|
|
spotLightX = -spotLightX
|
|
spotLightVX = -spotLightVX
|
|
}
|
|
if spotLightY < 0 {
|
|
spotLightY = -spotLightY
|
|
spotLightVY = -spotLightVY
|
|
}
|
|
w, h := spotLightImage.Size()
|
|
maxX, maxY := screenWidth-w, screenHeight-h
|
|
if maxX < spotLightX {
|
|
spotLightX = -spotLightX + 2*maxX
|
|
spotLightVX = -spotLightVX
|
|
}
|
|
if maxY < spotLightY {
|
|
spotLightY = -spotLightY + 2*maxY
|
|
spotLightVY = -spotLightVY
|
|
}
|
|
|
|
if ebiten.IsRunningSlowly() {
|
|
return nil
|
|
}
|
|
|
|
// Reset the maskedFgImage.
|
|
maskedFgImage.Fill(color.White)
|
|
op := &ebiten.DrawImageOptions{}
|
|
op.CompositeMode = ebiten.CompositeModeCopy
|
|
op.GeoM.Translate(float64(spotLightX), float64(spotLightY))
|
|
maskedFgImage.DrawImage(spotLightImage, op)
|
|
|
|
// Use 'source-in' 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 = &ebiten.DrawImageOptions{}
|
|
op.CompositeMode = ebiten.CompositeModeSourceIn
|
|
maskedFgImage.DrawImage(fgImage, op)
|
|
|
|
screen.Fill(color.RGBA{0x00, 0x00, 0x80, 0xff})
|
|
screen.DrawImage(bgImage, &ebiten.DrawImageOptions{})
|
|
screen.DrawImage(maskedFgImage, &ebiten.DrawImageOptions{})
|
|
|
|
return nil
|
|
}
|
|
|
|
func max(a, b int) int {
|
|
if a < b {
|
|
return b
|
|
}
|
|
return a
|
|
}
|
|
|
|
func min(a, b int) int {
|
|
if a < b {
|
|
return a
|
|
}
|
|
return b
|
|
}
|
|
|
|
func main() {
|
|
if err := ebiten.Run(update, screenWidth, screenHeight, 2, "Masking (Ebiten Demo)"); 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>
|