Nothing rendered from wasm?

[depsypher]

I have some code that works fine when I run it normally, but doesn't render anything from wasm. I'm wondering if this is a bug or somehow expected or has some workaround.

You can see it here when the player spawns (currently at commit 2):
https://github.com/depsypher/gojoust

It should look like this, but in wasm the spawning doesn't render and when the sequence ends the image pops in.

spawn.mp4

If it helps, I've extracted the relevant code here:

package main

import (
	"bytes"
	_ "embed"
	"fmt"
	"github.com/hajimehoshi/ebiten/v2"
	"github.com/hajimehoshi/ebiten/v2/ebitenutil"
	"image"
	"image/color"
	"image/draw"
	"log"
	"math/rand"
	"time"
)

const (
	ScreenWidth  = 300
	ScreenHeight = 200
)

var (
	//go:embed assets/images/spritesheet.png
	SpritesheetPng []byte

	P1Rider *ebiten.Image
	Ostrich []*ebiten.Image
	White   = color.RGBA{
		R: 255,
		G: 255,
		B: 255,
		A: 0,
	}
	Grey = color.RGBA{
		R: 127,
		G: 127,
		B: 127,
		A: 0,
	}
	Yellow = color.RGBA{
		R: 255,
		G: 255,
		B: 86,
		A: 0,
	}

	SpawnColors = []color.RGBA{
		White,
		Grey,
		Yellow,
	}
)

func init() {
	img, _, err := image.Decode(bytes.NewReader(SpritesheetPng))

	ss := ebiten.NewImageFromImage(img)

	spriteAt := func(x, y, w, h int) *ebiten.Image {
		return ss.SubImage(image.Rect(x, y, x+w, y+h)).(*ebiten.Image)
	}

	spriteFramesAt := func(x, y, w, h, gap, count int) []*ebiten.Image {
		var result []*ebiten.Image
		for i := 0; i < count; i++ {
			var frameX = i*w + i*gap
			result = append(result, ss.SubImage(image.Rect(x+frameX, y, x+frameX+w, y+h)).(*ebiten.Image))
		}
		return result
	}

	P1Rider = spriteAt(58, 79, 12, 7)
	Ostrich = spriteFramesAt(348, 19, 16, 20, 5, 8)

	if err != nil {
		log.Fatal(fmt.Errorf("failed to load embedded spritesheet: %s", err))
	}
}

type GameTest struct {
	inited bool
	sprite *TestSprite
}

type TestSprite struct {
	Images      []*ebiten.Image
	image       *ebiten.Image
	rider       *ebiten.Image
	Frame       int
	Width       int
	Height      int
	X           float64
	Y           float64
	Vx          float64
	Vy          float64
	lastAnimate time.Time
	spawn       int
}

func MakeTestSprite(images []*ebiten.Image, rider *ebiten.Image, pos ...float64) *TestSprite {
	position := []float64{0, 0}
	if len(pos) == 2 {
		position = pos
	}
	return &TestSprite{
		Images: images,
		rider:  rider,
		Width:  images[0].Bounds().Dx(),
		Height: images[0].Bounds().Dy(),
		X:      position[0],
		Y:      position[1],
	}
}

func (t *TestSprite) update() {
	if time.Now().Before(t.lastAnimate.Add(time.Millisecond * time.Duration(30))) {
		return
	}
	if t.spawn <= 20 {
		t.spawn += 1
		t.buildSpawn(t.spawn)
	} else {
		t.spawn = 0
	}
	t.lastAnimate = time.Now()
}

func (t *TestSprite) DrawSprite(screen *ebiten.Image) {
	op := &ebiten.DrawImageOptions{}
	op.GeoM.Translate(t.X, t.Y)
	if t.image != nil {
		screen.DrawImage(t.image, op)
	}
}

func (t *TestSprite) drawSolid(bounds image.Rectangle, color color.Color, mask image.Image) *ebiten.Image {
	img := ebiten.NewImage(bounds.Dx(), bounds.Dy())
	img.Fill(color)
	draw.DrawMask(img, bounds, img, image.Point{}, mask, image.Point{}, draw.Src)
	return img
}

func (t *TestSprite) buildMount() *ebiten.Image {
	frame := t.Images[t.Frame]
	composite := ebiten.NewImage(frame.Bounds().Dx(), frame.Bounds().Dy())

	body := ebiten.NewImageFromImage(frame)
	col := SpawnColors[rand.Intn(3)]
	body = t.drawSolid(composite.Bounds(), col, body)

	// draw rider
	op := ebiten.DrawImageOptions{}
	y := 0
	if t.Frame == 4 {
		y = 2
	}
	op.GeoM.Translate(float64(4), float64(y))
	rider := ebiten.NewImageFromImage(t.rider)
	col = SpawnColors[rand.Intn(3)]
	rider = t.drawSolid(rider.Bounds(), col, rider)

	composite.DrawImage(rider, &op)

	// draw ostrich
	op.GeoM.Reset()
	composite.DrawImage(body, &op)
	return composite
}

func (t *TestSprite) buildSpawn(index int) {
	t.Frame = 3
	mount := t.buildMount()
	if t.image == nil {
		t.image = ebiten.NewImage(mount.Bounds().Dx(), mount.Bounds().Dy())
	} else {
		t.image.Clear()
	}
	op := ebiten.DrawImageOptions{}
	op.GeoM.Translate(float64(0), float64(mount.Bounds().Dy()-index))
	t.image.DrawImage(mount, &op)
}

func (g *GameTest) initialize() {
	defer func() {
		g.inited = true
		g.sprite = MakeTestSprite(Ostrich, P1Rider, ScreenWidth/2, ScreenHeight/2)
	}()
}

func (g *GameTest) Update() error {
	if !g.inited {
		g.initialize()
	}
	g.sprite.update()
	return nil
}

func (g *GameTest) Draw(screen *ebiten.Image) {
	ebitenutil.DebugPrint(screen, fmt.Sprintf("FPS: %3.2f\nTPS: %3.2f", ebiten.ActualFPS(), ebiten.ActualTPS()))
	g.sprite.DrawSprite(screen)
}

func (g *GameTest) Layout(outsideWidth, outsideHeight int) (int, int) {
	return ScreenWidth, ScreenHeight
}

func main() {
	ebiten.SetWindowSize(ScreenWidth*3, ScreenHeight*3)
	ebiten.SetWindowTitle("GoJoust")

	if err := ebiten.RunGame(&GameTest{}); err != nil {
		log.Fatal(err)
	}
}

[hajimehoshi]

Colors must be pre-multiplied alpha. See https://github.com/tinne26/kage-desk/blob/main/docs/tutorials/premult.md

[depsypher]

Very helpful thanks! The differing behavior in wasm was especially confusing, but using NRGBA eliminates it. Thanks again.