debugui: implement (*Context).SetScale and (*Context).Scale

Closes #5

Author: hajimehoshi

control.go

@@ -390,3 +390,20 @@ func (c *Context) pushContainerBodyLayout(cnt *container, body image.Rectangle,
 	c.pushLayout(body.Inset(c.style.padding), cnt.layout.ScrollOffset)
 	cnt.layout.BodyBounds = body
 }
+
+// SetScale sets the scale of the UI.
+//
+// The scale affects the rendering result of the UI.
+//
+// The default scale is 1.
+func (c *Context) SetScale(scale int) {
+	if scale < 1 {
+		panic("debugui: scale must be >= 1")
+	}
+	c.scale = scale
+}
+
+// Scale returns the scale of the UI.
+func (c *Context) Scale() int {
+	return c.scale
+}

debugui.go

@@ -12,6 +12,7 @@ type DebugUI struct {
 func New() *DebugUI {
 	return &DebugUI{
 		ctx: &Context{
+			scale: 1,
 			style: &defaultStyle,
 		},
 	}

draw.go

@@ -94,16 +94,17 @@ func (c *Context) draw(screen *ebiten.Image) {
 		case commandRect:
 			vector.DrawFilledRect(
 				target,
-				float32(cmd.rect.rect.Min.X),
-				float32(cmd.rect.rect.Min.Y),
-				float32(cmd.rect.rect.Dx()),
-				float32(cmd.rect.rect.Dy()),
+				float32(cmd.rect.rect.Min.X*c.scale),
+				float32(cmd.rect.rect.Min.Y*c.scale),
+				float32(cmd.rect.rect.Dx()*c.scale),
+				float32(cmd.rect.rect.Dy()*c.scale),
 				cmd.rect.color,
 				false,
 			)
 		case commandText:
 			op := &text.DrawOptions{}
 			op.GeoM.Translate(float64(cmd.text.pos.X), float64(cmd.text.pos.Y))
+			op.GeoM.Scale(float64(c.scale), float64(c.scale))
 			op.ColorScale.ScaleWithColor(cmd.text.color)
 			text.Draw(target, cmd.text.str, fontFace, op)
 		case commandIcon:
@@ -115,12 +116,18 @@ func (c *Context) draw(screen *ebiten.Image) {
 			x := cmd.icon.rect.Min.X + (cmd.icon.rect.Dx()-img.Bounds().Dx())/2
 			y := cmd.icon.rect.Min.Y + (cmd.icon.rect.Dy()-img.Bounds().Dy())/2
 			op.GeoM.Translate(float64(x), float64(y))
+			op.GeoM.Scale(float64(c.scale), float64(c.scale))
 			op.ColorScale.ScaleWithColor(cmd.icon.color)
 			target.DrawImage(img, op)
 		case commandDraw:
 			cmd.draw.f(target)
 		case commandClip:
-			target = screen.SubImage(cmd.clip.rect).(*ebiten.Image)
+			r := cmd.clip.rect
+			r.Min.X *= c.scale
+			r.Min.Y *= c.scale
+			r.Max.X *= c.scale
+			r.Max.Y *= c.scale
+			target = screen.SubImage(r).(*ebiten.Image)
 		}
 	}
 }

example/gophers.jpg

@@ -4,14 +4,31 @@
 package main
 
 import (
-	"log"
+	"bytes"
+	_ "embed"
+	"fmt"
+	"image"
+	"image/color"
+	_ "image/jpeg"
+	"math/rand/v2"
+	"os"
 
 	"github.com/hajimehoshi/ebiten/v2"
 
 	"github.com/ebitengine/debugui"
 )
 
+//go:embed gophers.jpg
+var gophersJPG []byte
+
 type Game struct {
+	gopherImage *ebiten.Image
+	x           int
+	y           int
+	vx          int
+	vy          int
+	hiRes       bool
+
 	debugUI *debugui.DebugUI
 
 	logBuf       string
@@ -23,15 +40,44 @@ type Game struct {
 	num2         float64
 }
 
-func New() *Game {
-	return &Game{
-		debugUI: debugui.New(),
-		bg:      [3]float64{90, 95, 100},
-		checks:  [3]bool{true, false, true},
+func NewGame() (*Game, error) {
+	img, _, err := image.Decode(bytes.NewReader(gophersJPG))
+	if err != nil {
+		return nil, err
+	}
+
+	g := &Game{
+		gopherImage: ebiten.NewImageFromImage(img),
+		vx:          2,
+		vy:          2,
+		debugUI:     debugui.New(),
+		bg:          [3]float64{90, 95, 100},
+		checks:      [3]bool{true, false, true},
 	}
+	g.resetPosition()
+
+	return g, nil
+}
+
+func (g *Game) resetPosition() {
+	sW, sH := g.screenSize()
+	imgW, imgH := g.gopherImage.Bounds().Dx(), g.gopherImage.Bounds().Dy()
+	g.x = rand.IntN(sW - imgW)
+	g.y = rand.IntN(sH - imgH)
 }
 
 func (g *Game) Update() error {
+	sW, sH := g.screenSize()
+	imgW, imgH := g.gopherImage.Bounds().Dx(), g.gopherImage.Bounds().Dy()
+	g.x += g.vx
+	g.y += g.vy
+	if g.x < 0 || sW-imgW <= g.x {
+		g.vx *= -1
+	}
+	if g.y < 0 || sH-imgH <= g.y {
+		g.vy *= -1
+	}
+
 	if ebiten.IsKeyPressed(ebiten.KeyEscape) {
 		return ebiten.Termination
 	}
@@ -44,17 +90,36 @@ func (g *Game) Update() error {
 }
 
 func (g *Game) Draw(screen *ebiten.Image) {
+	screen.Fill(color.RGBA{0x40, 0x40, 0x80, 0xff})
+	op := &ebiten.DrawImageOptions{}
+	op.GeoM.Translate(float64(g.x), float64(g.y))
+	screen.DrawImage(g.gopherImage, op)
+
 	g.debugUI.Draw(screen)
 }
 
 func (g *Game) Layout(outsideWidth, outsideHeight int) (int, int) {
-	return 1280, 960
+	return g.screenSize()
+}
+
+func (g *Game) screenSize() (int, int) {
+	scale := 1
+	if g.hiRes {
+		scale = 2
+	}
+	return 1280 * scale, 960 * scale
 }
 
 func main() {
 	ebiten.SetWindowTitle("Ebitengine DebugUI Demo")
 	ebiten.SetWindowSize(1280, 960)
-	if err := ebiten.RunGame(New()); err != nil {
-		log.Fatal("err: ", err)
+	g, err := NewGame()
+	if err != nil {
+		fmt.Fprintln(os.Stderr, err)
+		os.Exit(1)
+	}
+	if err := ebiten.RunGame(g); err != nil {
+		fmt.Fprintln(os.Stderr, err)
+		os.Exit(1)
 	}
 }

example/main.go

@@ -32,6 +32,16 @@ func (g *Game) testWindow(ctx *debugui.Context) {
 			ctx.Text("Size:")
 			ctx.Text(fmt.Sprintf("%d, %d", layout.Bounds.Dx(), layout.Bounds.Dy()))
 		})
+		ctx.Header("Game Config", true, func() {
+			if ctx.Checkbox("Hi-Res", &g.hiRes) {
+				if g.hiRes {
+					ctx.SetScale(2)
+				} else {
+					ctx.SetScale(1)
+				}
+				g.resetPosition()
+			}
+		})
 		ctx.Header("Test Buttons", true, func() {
 			ctx.SetGridLayout([]int{100, -1, -1}, nil)
 			ctx.Text("Test buttons 1:")
@@ -112,17 +122,19 @@ func (g *Game) testWindow(ctx *debugui.Context) {
 			})
 			ctx.Control("", func(bounds image.Rectangle) bool {
 				ctx.DrawControl(func(screen *ebiten.Image) {
+					scale := ctx.Scale()
 					vector.DrawFilledRect(
 						screen,
-						float32(bounds.Min.X),
-						float32(bounds.Min.Y),
-						float32(bounds.Dx()),
-						float32(bounds.Dy()),
+						float32(bounds.Min.X*scale),
+						float32(bounds.Min.Y*scale),
+						float32(bounds.Dx()*scale),
+						float32(bounds.Dy()*scale),
 						color.RGBA{byte(g.bg[0]), byte(g.bg[1]), byte(g.bg[2]), 255},
 						false)
 					txt := fmt.Sprintf("#%02X%02X%02X", int(g.bg[0]), int(g.bg[1]), int(g.bg[2]))
 					op := &text.DrawOptions{}
 					op.GeoM.Translate(float64((bounds.Min.X+bounds.Max.X)/2), float64((bounds.Min.Y+bounds.Max.Y)/2))
+					op.GeoM.Scale(float64(scale), float64(scale))
 					op.PrimaryAlign = text.AlignCenter
 					op.SecondaryAlign = text.AlignCenter
 					debugui.DrawText(screen, txt, op)

example/ui.go

@@ -119,7 +119,10 @@ func (c *Context) mouseDelta() image.Point {
 }
 
 func (c *Context) cursorPosition() image.Point {
-	return image.Pt(ebiten.CursorPosition())
+	p := image.Pt(ebiten.CursorPosition())
+	p.X /= c.scale
+	p.Y /= c.scale
+	return p
 }
 
 func (c *Context) end() {

helpers.go

@@ -37,8 +37,7 @@ type ContainerLayout struct {
 }
 
 type Context struct {
-	// core state
-
+	scale         int
 	style         *style
 	hover         controlID
 	focus         controlID
@@ -52,21 +51,15 @@ type Context struct {
 	numberEditBuf string
 	numberEdit    controlID
 
-	// stacks
-
 	commandList    []*command
 	rootList       []*container
 	containerStack []*container
 	clipStack      []image.Rectangle
 	layoutStack    []layout
 
-	// retained state pools
-
 	idToContainer map[controlID]*container
 	toggledIDs    map[controlID]struct{}
 
-	// input state
-
 	lastMousePos image.Point
 
 	textInputTextFields map[controlID]*textinput.Field