Sprites and Animation

mkdir -p assets

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

import (
	"image/color"
	"image/png"
	"log"
	"os"

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

const (
	screenW = 320
	screenH = 180
)

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

// loadImage reads a PNG file and hands its pixels to Ebitengine.
func loadImage(path string) (*ebiten.Image, error) {
	f, err := os.Open(path)
	if err != nil {
		return nil, err
	}
	defer f.Close()
	img, err := png.Decode(f)
	if err != nil {
		return nil, err
	}
	return ebiten.NewImageFromImage(img), nil
}

// drawAt draws img scaled by s with its top-left corner at (x, y).
func drawAt(screen, img *ebiten.Image, x, y, s float64) {
	op := &ebiten.DrawImageOptions{}
	op.GeoM.Scale(s, s)
	op.GeoM.Translate(x, y)
	screen.DrawImage(img, op)
}

type Game struct {
	sheet *ebiten.Image
}

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

// drawSheet draws the whole sheet at three times its size.
func (g *Game) drawSheet(screen *ebiten.Image) {
	screen.Fill(courtColor)
	drawAt(screen, g.sheet, 8, 8, 3)
}

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

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

func main() {
	ebiten.SetWindowSize(960, 540)
	ebiten.SetWindowTitle("Sprites")
	ebiten.SetTPS(60)
	sheet, err := loadImage("assets/pong-sheet.png")
	if err != nil {
		log.Fatal(err)
	}
	if err := ebiten.RunGame(&Game{sheet: sheet}); err != nil {
		log.Fatal(err)
	}
}

go vet ./...
go run ./cmd/sprite

The window after stage 1: the sheet at three times its size, the court colour showing through its transparent pixels.

loadImage opens the file, decodes the PNG with image/png and hands the decoded image to ebiten.NewImageFromImage. Ebitengine then has an image it can draw.

The file is decoded once in main, before the window opens. Reading it in Draw would read the same file every time the screen was painted. The paddles sit at the sheet's top-left corner, the ball frames sit beside them, and the digits sit along the bottom.

pong-sheet-4x.png: the sheet at four times. Two paddles, each lit one column in from the side that will face the net; the ball's four frames, with a grey seam at the top, the right and the bottom of the last three; the ten digits along row 24.

// cmd/sprite/main.go — extend
import (
	"image"
	"image/color"
	"image/png"
	"log"
	"os"

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

type Game struct {
	sp *sprites
}

// drawSheet draws the whole sheet at three times its size.
func (g *Game) drawSheet(screen *ebiten.Image) {
	screen.Fill(courtColor)
	drawAt(screen, g.sp.sheet, 8, 8, 3)
}

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

func main() {
	ebiten.SetWindowSize(960, 540)
	ebiten.SetWindowTitle("Sprites")
	ebiten.SetTPS(60)
	sheet, err := loadImage("assets/pong-sheet.png")
	if err != nil {
		log.Fatal(err)
	}
	if err := ebiten.RunGame(&Game{sp: cutSprites(sheet)}); err != nil {
		log.Fatal(err)
	}
}

// sprites is the sheet cut into the pictures a game draws. Each piece is a
// sub-image: a view onto the one sheet, not a copy of its pixels.
type sprites struct {
	sheet       *ebiten.Image
	left, right *ebiten.Image    // the paddles, four by twenty-four
	ball        [4]*ebiten.Image // the ball's four spin frames, four by four
	digits      [10]*ebiten.Image
}

// cutSprites cuts the pieces out of the sheet, where the sheet's layout
// puts them: paddles at the top left, the ball's frames beside them, the
// digits, three by five each, along row 24.
func cutSprites(sheet *ebiten.Image) *sprites {
	cut := func(x, y, w, h int) *ebiten.Image {
		return sheet.SubImage(image.Rect(x, y, x+w, y+h)).(*ebiten.Image)
	}
	s := &sprites{sheet: sheet, left: cut(0, 0, 4, 24), right: cut(4, 0, 4, 24)}
	for i := range s.ball {
		s.ball[i] = cut(8+4*i, 0, 4, 4)
	}
	for i := range s.digits {
		s.digits[i] = cut(3*i, 24, 3, 5)
	}
	return s
}

// drawPieces draws each piece the sheet was cut into, at four times: the
// paddles to the right of the sheet, the ball's frames and the digits in
// a row under it.
func (g *Game) drawPieces(screen *ebiten.Image) {
	drawAt(screen, g.sp.left, 216, 8, 4)
	drawAt(screen, g.sp.right, 240, 8, 4)
	for i, b := range g.sp.ball {
		drawAt(screen, b, float64(8+24*i), 116, 4)
	}
	for i, d := range g.sp.digits {
		drawAt(screen, d, float64(120+16*i), 116, 4)
	}
}

go vet ./...
go run ./cmd/sprite

The window after stage 2: the sheet, and beside and below it each of the sixteen pieces at four times, drawn apart.

cut is declared inside cutSprites so the rectangles stay close to the sheet layout. Each call names the left column, top row, width and height of one piece.

SubImage returns Go's image.Image interface. Ebitengine documents that a sub-image of an Ebitengine image is also an Ebitengine image, so the type assertion turns it back into *ebiten.Image.

No pixels are copied when the program cuts the sheet. Drawing sixteen pieces means sixteen DrawImage calls, all reading rectangles from the same loaded image.

// cmd/sprite/main.go — extend
type Game struct {
	sp   *sprites
	spin int // ticks the ball has been turning
}

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

func (g *Game) Draw(screen *ebiten.Image) {
	g.drawSheet(screen)
	g.drawPieces(screen)
	g.drawSpin(screen)
}

// The ball turns one frame every six ticks: a full turn in twenty-four
// ticks, two and a half turns a second.
const spinEvery = 6

// drawSpin draws the frame the counter picks: at eight times in the top
// right corner, and at one, rolling along the bottom a pixel a tick.
func (g *Game) drawSpin(screen *ebiten.Image) {
	frame := (g.spin / spinEvery) % 4
	drawAt(screen, g.sp.ball[frame], 272, 8, 8)
	drawAt(screen, g.sp.ball[frame], float64(g.spin%screenW), 168, 1)
}

go vet ./...
go run ./cmd/sprite

The window fifteen ticks after stage 3 starts: the counter reads 15, fifteen divided by six is two, and frame 2 has the seam on the right. The small ball has rolled fifteen pixels along the bottom.

The big ball turns because spin chooses a different frame every six ticks. The small ball uses the same frame and moves one pixel per tick along the bottom. A full turn takes twenty-four ticks, so the small ball rolls twenty-four pixels per turn.

Update raises spin by one. Draw may read the counter and choose a frame, but it must not change the counter.