docs: Add highdpi; Update

This commit is contained in:
Hajime Hoshi 2018-01-28 21:49:24 +09:00
parent 5224063af9
commit 825c406128
7 changed files with 166 additions and 1 deletions

View File

@ -180,6 +180,7 @@ var examples = []example{
{"alphablending", 320, 240},
{"audio", 320, 240},
{"font", 320, 240},
{"highdpi", 320, 240},
{"hsv", 320, 240},
{"hue", 320, 240},
{"gamepad", 320, 240},

View File

@ -143,6 +143,7 @@ func init() {
}
func update(screen *ebiten.Image) error {
// Change the text color for each second.
if counter%ebiten.FPS == 0 {
kanjiText = []rune{}
for j := 0; j < 4; j++ {
@ -163,10 +164,16 @@ func update(screen *ebiten.Image) error {
return nil
}
msg := fmt.Sprintf("FPS: %0.2f", ebiten.CurrentFPS())
const x = 20
// Draw info
msg := fmt.Sprintf("FPS: %0.2f", ebiten.CurrentFPS())
text.Draw(screen, msg, mplusNormalFont, x, 40, color.White)
// Draw the sample text
text.Draw(screen, sampleText, mplusNormalFont, x, 80, color.White)
// Draw Kanji text lines
for i, line := range strings.Split(string(kanjiText), "\n") {
text.Draw(screen, line, mplusBigFont, x, 160+54*i, kanjiTextColor)
}

View File

@ -69,6 +69,7 @@ func update(screen *ebiten.Image) error {
return nil
}
// Draw the current gamepad status.
str := ""
if len(ids) > 0 {
for _, id := range ids {

View File

@ -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 = 'highdpi.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>

123
docs/examples/highdpi.html Normal file
View File

@ -0,0 +1,123 @@
<!DOCTYPE html>
<meta charset="utf-8">
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://hajimehoshi.github.io/ebiten/images/examples/highdpi.png">
<meta name="description" content="Ebiten example - highdpi">
<link rel="shortcut icon" href="../favicon.png" type="image/png" >
<link rel="icon" href="../favicon.png" type="image/png" >
<title>Ebiten example - highdpi</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 - 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
package main
import (
&#34;fmt&#34;
&#34;image&#34;
_ &#34;image/jpeg&#34;
&#34;log&#34;
&#34;net/http&#34;
&#34;github.com/hajimehoshi/ebiten&#34;
&#34;github.com/hajimehoshi/ebiten/ebitenutil&#34;
)
var (
count int
highDPIImage *ebiten.Image
)
func init() {
// licensed under Public Domain
// https://commons.wikimedia.org/wiki/File:As08-16-2593.jpg
const url = &#34;https://upload.wikimedia.org/wikipedia/commons/1/1f/As08-16-2593.jpg&#34;
res, err := http.Get(url)
if err != nil {
log.Fatal(err)
}
defer res.Body.Close()
img, _, err := image.Decode(res.Body)
if err != nil {
log.Fatal(err)
}
highDPIImage, err = ebiten.NewImageFromImage(img, ebiten.FilterLinear)
if err != nil {
log.Fatal(err)
}
}
func update(screen *ebiten.Image) error {
if ebiten.IsRunningSlowly() {
return nil
}
scale := ebiten.DeviceScaleFactor()
sw, sh := screen.Size()
w, h := highDPIImage.Size()
op := &amp;ebiten.DrawImageOptions{}
// Move the images&#39;s center to the upper left corner.
op.GeoM.Translate(float64(-w)/2, float64(-h)/2)
// The image is just too big. Adjust the scale.
op.GeoM.Scale(0.25, 0.25)
// Scale the image by the device ratio so that the rendering result can be same
// on various (diffrent-DPI) environments.
op.GeoM.Scale(scale, scale)
// Move the image&#39;s center to the screen&#39;s center.
op.GeoM.Translate(float64(sw)/2, float64(sh)/2)
screen.DrawImage(highDPIImage, op)
ebitenutil.DebugPrint(screen, fmt.Sprintf(&#34;Device Scale Ratio: %0.2f&#34;, scale))
return nil
}
func main() {
const (
screenWidth = 640
screenHeight = 480
)
// Pass the invert of scale so that Ebiten&#39;s auto scaling by device scale is disabled.
s := ebiten.DeviceScaleFactor()
if err := ebiten.Run(update, int(screenWidth*s), int(screenHeight*s), 1/s, &#34;High DPI (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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 942 KiB

View File

@ -67,6 +67,8 @@
<a href="examples/audio.html"><img src="images/examples/audio.png" width="320" height="240" alt="Ebiten example: audio" class="img-thumbnail"></a>
</div><div class="col-3">
<a href="examples/font.html"><img src="images/examples/font.png" width="320" height="240" alt="Ebiten example: font" class="img-thumbnail"></a>
</div><div class="col-3">
<a href="examples/highdpi.html"><img src="images/examples/highdpi.png" width="320" height="240" alt="Ebiten example: highdpi" class="img-thumbnail"></a>
</div><div class="col-3">
<a href="examples/hsv.html"><img src="images/examples/hsv.png" width="320" height="240" alt="Ebiten example: hsv" class="img-thumbnail"></a>
</div><div class="col-3">