Drawing

// cmd/shapes/main.go — create
package main

import (
	"image/color"
	"log"

	"github.com/hajimehoshi/ebiten/v2"
	"github.com/hajimehoshi/ebiten/v2/vector"
)

const (
	screenW = 320
	screenH = 180
)

var (
	courtColor = color.RGBA{R: 16, G: 20, B: 28, A: 255}
	lineColor  = color.RGBA{R: 232, G: 232, B: 232, A: 255}
)

// drawCourt paints the court: the fill, a border two pixels wide just
// inside the edge, and a net of dashes down the middle.
func drawCourt(screen *ebiten.Image) {
	screen.Fill(courtColor)
	vector.StrokeRect(screen, 1, 1, screenW-2, screenH-2, 2, lineColor, false)
	for y := 0; y < screenH; y += 8 {
		vector.FillRect(screen, 159, float32(y), 2, 4, lineColor, false)
	}
}

type Game struct{}

func (g *Game) Update() error {
	return nil
}

func (g *Game) Draw(screen *ebiten.Image) {
	drawCourt(screen)
}

func (g *Game) Layout(outsideWidth, outsideHeight int) (int, int) {
	return screenW, screenH
}

func main() {
	ebiten.SetWindowSize(960, 540)
	ebiten.SetWindowTitle("Shapes")
	ebiten.SetTPS(60)
	if err := ebiten.RunGame(&Game{}); err != nil {
		log.Fatal(err)
	}
}

go vet ./...
go run ./cmd/shapes

The window after stage 1: the court, its border and its net.

Each chapter's program gets its own directory under cmd/, so this one is cmd/shapes. The constants, the three methods and main are chapter 1's, with a new window title.

screen.Fill paints every pixel of the picture one colour. vector.StrokeRect paints a line along the outline of a rectangle. The stroke straddles that outline, half its width to either side. This one runs round the rectangle from (1, 1) to (319, 179) at two pixels wide, so it covers columns 0 and 1 on the left, 318 and 319 on the right, and the matching rows top and bottom. That is the two outermost pixels all round, and nothing further in.

The net is drawn with vector.FillRect, the call chapter 1 used. The loop runs from row 0 to row 176 in steps of eight, which is twenty-three dashes, two pixels wide and four tall. They sit on columns 159 and 160. The middle of a 320-wide picture is the line between those two columns, so a two-pixel dash sits on it exactly. Every game in this volume that has a court draws it with these three calls.

// cmd/shapes/main.go — extend
var (
	courtColor = color.RGBA{R: 16, G: 20, B: 28, A: 255}
	lineColor  = color.RGBA{R: 232, G: 232, B: 232, A: 255}
	dimColor   = color.RGBA{R: 60, G: 66, B: 80, A: 255}
	ballColor  = color.RGBA{R: 232, G: 120, B: 80, A: 255}
)

func (g *Game) Draw(screen *ebiten.Image) {
	drawCourt(screen)
	drawShapes(screen)
}

// drawShapes paints one of each shape on the left half of the court.
func drawShapes(screen *ebiten.Image) {
	vector.FillCircle(screen, 40, 50, 20, ballColor, false)
	vector.StrokeCircle(screen, 100, 50, 20, 2, lineColor, false)
	vector.FillRect(screen, 20, 100, 40, 24, lineColor, false)
	vector.StrokeRect(screen, 80, 100, 40, 24, 2, lineColor, false)
	vector.StrokeLine(screen, 20, 150, 140, 150, 1, dimColor, false)
	vector.StrokeLine(screen, 20, 160, 140, 170, 3, dimColor, false)
}

go vet ./...
go run ./cmd/shapes

The window after stage 2: a filled and a stroked circle, a filled and a stroked rectangle, and two lines, on the left half of the court.

This is the first listing marked extend, and the convention holds for the rest of the book. An extend listing prints whole declarations. Each one replaces the declaration of the same name in the file, or is added at the end if the file has none. Here the var block gains two colours, Draw gains a line, and drawShapes is new. The imports do not change.

Each call names its shape by numbers. A circle takes its centre and its radius. A rectangle takes its top-left corner, its width and its height. A line takes its two ends. A stroked shape takes a stroke width before its colour.

Every call ends in false. That argument declines antialiasing, which is the smoothing of a shape's edges. A pixel game declines it on purpose. At 320 by 180 each pixel is a visible square on screen, and a smoothed edge is a row of half-lit squares that reads as blur. The line at row 150 is one pixel wide and the sloping line below it is three, which is the difference between a hairline and a stroke at this size.

// cmd/shapes/main.go — extend
import (
	"image/color"
	"log"
	"math"

	"github.com/hajimehoshi/ebiten/v2"
	"github.com/hajimehoshi/ebiten/v2/vector"
)

type Game struct {
	glyph *ebiten.Image
}

func (g *Game) Draw(screen *ebiten.Image) {
	drawCourt(screen)
	drawShapes(screen)
	drawGlyphs(screen, g.glyph)
}

func main() {
	ebiten.SetWindowSize(960, 540)
	ebiten.SetWindowTitle("Shapes")
	ebiten.SetTPS(60)
	if err := ebiten.RunGame(&Game{glyph: newGlyph()}); err != nil {
		log.Fatal(err)
	}
}

// glyphArt is an eight-by-eight picture as text: # is ink, . is paper.
var glyphArt = []string{
	"...##...",
	"..####..",
	".######.",
	"...##...",
	"...##...",
	"...##...",
	"...##...",
	"........",
}

var (
	inkColor   = color.RGBA{R: 255, G: 255, B: 255, A: 255}
	paperColor = color.RGBA{R: 40, G: 90, B: 160, A: 255}
)

// newGlyph turns glyphArt into an image: four bytes a pixel, red, green,
// blue and alpha, the rows laid end to end.
func newGlyph() *ebiten.Image {
	w, h := len(glyphArt[0]), len(glyphArt)
	pix := make([]byte, 4*w*h)
	for y, row := range glyphArt {
		for x := 0; x < w; x++ {
			c := paperColor
			if row[x] == '#' {
				c = inkColor
			}
			i := 4 * (y*w + x)
			pix[i], pix[i+1], pix[i+2], pix[i+3] = c.R, c.G, c.B, c.A
		}
	}
	img := ebiten.NewImage(w, h)
	img.WritePixels(pix)
	return img
}

// drawGlyph draws img scaled by s, turned by angle degrees about its own
// centre, with the centre at (x, y), through the filter given.
func drawGlyph(screen, img *ebiten.Image, x, y, s, angle float64, filter ebiten.Filter) {
	w, h := float64(img.Bounds().Dx()), float64(img.Bounds().Dy())
	op := &ebiten.DrawImageOptions{}
	op.GeoM.Translate(-w/2, -h/2)
	op.GeoM.Scale(s, s)
	op.GeoM.Rotate(angle * math.Pi / 180)
	op.GeoM.Translate(x, y)
	op.Filter = filter
	screen.DrawImage(img, op)
}

// drawGlyphs draws the glyph on the right half of the court: at one, four
// and eight times through the nearest-pixel filter, then at four times
// through the linear filter, then at four times turned a quarter turn.
func drawGlyphs(screen, glyph *ebiten.Image) {
	drawGlyph(screen, glyph, 180, 50, 1, 0, ebiten.FilterNearest)
	drawGlyph(screen, glyph, 212, 50, 4, 0, ebiten.FilterNearest)
	drawGlyph(screen, glyph, 272, 50, 8, 0, ebiten.FilterNearest)
	drawGlyph(screen, glyph, 212, 130, 4, 0, ebiten.FilterLinear)
	drawGlyph(screen, glyph, 272, 130, 4, 90, ebiten.FilterNearest)
}

go vet ./...
go run ./cmd/shapes

The window after stage 3: the arrow at one, four and eight times through the nearest filter, at four times through the linear filter, and at four times turned a quarter turn.

newGlyph walks the eight strings and writes four bytes for each character into one 256-byte slice, at the offset the formula above gives. ebiten.NewImage makes an empty image of that size, and WritePixels copies the slice into it. That call is how pixels get into an image from anywhere; a file decoder does the same thing after reading a PNG.

The image is made once, in main, and kept in the Game. Making it again in every Draw would send 256 bytes to the graphics card sixty or more times a second for no gain.

screen.DrawImage is Ebitengine's call for copying one image onto another. It takes the image and a DrawImageOptions, whose GeoM field holds the placement and whose Filter field says how pixels are looked up. The next two sections take those in turn.