Shaking diagonal movement

[alejandro-a]

Hi,

I'm doing a new project and I started to implement basic movements. When I tryed to move objects on screen I noticed a some sort of "shaking" transition while performing diagonal movements.

Here an example

The movement look like shaking while moving in diagonal direction

Here a code snippet:

//go:build example
// +build example

package main

import (
	"bytes"
	"image"
	_ "image/png"
	"log"
	"time"

	"github.com/hajimehoshi/ebiten/v2"
	"github.com/hajimehoshi/ebiten/v2/examples/resources/images"
)

const (
	screenWidth  = 320
	screenHeight = 240

	frameOX     = 0
	frameOY     = 32
	frameWidth  = 32
	frameHeight = 32
	frameNum    = 8
)

var (
	runnerImage *ebiten.Image
	op          *ebiten.DrawImageOptions = &ebiten.DrawImageOptions{}
	last        time.Time                = time.Now()
	dt          float64                  = 0
	X           float64                  = 0
	Y           float64                  = 0
)

type Game struct {
	count int
}

func (g *Game) Update() error {
	dt = float64(time.Since(last).Milliseconds()) / 1000
	last = time.Now()
	if ebiten.IsKeyPressed(ebiten.KeyUp) {
		Y += 1 * 0.15
	}
	if ebiten.IsKeyPressed(ebiten.KeyDown) {
		Y += -1 * 0.15
	}
	if ebiten.IsKeyPressed(ebiten.KeyLeft) {
		X += -1 * 0.15
	}
	if ebiten.IsKeyPressed(ebiten.KeyRight) {
		X += 1 * 0.15
	}
	g.count++
	return nil
}

func (g *Game) Draw(screen *ebiten.Image) {
	op := &ebiten.DrawImageOptions{}
	op.GeoM.Translate(X, -Y)
	op.GeoM.Translate(screenWidth/2, screenHeight/2)
	sx, sy := frameOX, frameOY
	screen.DrawImage(runnerImage.SubImage(image.Rect(sx, sy, sx+frameWidth, sy+frameHeight)).(*ebiten.Image), op)
}

func (g *Game) Layout(outsideWidth, outsideHeight int) (int, int) {
	return screenWidth, screenHeight
}

func main() {
	img, _, err := image.Decode(bytes.NewReader(images.Runner_png))
	if err != nil {
		log.Fatal(err)
	}
	runnerImage = ebiten.NewImageFromImage(img)

	ebiten.SetWindowSize(screenWidth*2, screenHeight*2)
	ebiten.SetWindowTitle("Animation (Ebiten Demo)")
	if err := ebiten.RunGame(&Game{}); err != nil {
		log.Fatal(err)
	}
}

Is that an issue or I just doing something wrong?

[hajimehoshi]

I think this is due to errors from floating-point numbers. You can see what is going on by printing X and Y.

I suggest

• Using integers for X and Y (recommended)
• Using ebiten.FilterLinear

[Sn0rrii]

Hello,

Using the above example snippet, I'm still seeing the stutter after adding: op.Filter = ebiten.FilterLinear

For context, I've been trying to add normalized diagonal movement which I assume would result in floating-point numbers for X and Y values.

[hajimehoshi]

I tried the linear filter on my machine. I think shaking was reduced. In order to reduce more, you would have to use higher resolution screen by modifying Layout.

[hajimehoshi]

For example:

//go:build example

package main

import (
	"bytes"
	"image"
	_ "image/png"
	"log"
	"time"

	"github.com/hajimehoshi/ebiten/v2"
	"github.com/hajimehoshi/ebiten/v2/examples/resources/images"
)

const (
	screenWidth  = 640
	screenHeight = 480

	frameOX     = 0
	frameOY     = 32
	frameWidth  = 32
	frameHeight = 32
	frameNum    = 8
)

var (
	runnerImage *ebiten.Image
	op          *ebiten.DrawImageOptions = &ebiten.DrawImageOptions{}
	last        time.Time                = time.Now()
	dt          float64                  = 0
	X           float64                  = 0
	Y           float64                  = 0
)

type Game struct {
	count int
}

func (g *Game) Update() error {
	dt = float64(time.Since(last).Milliseconds()) / 1000
	last = time.Now()
	if ebiten.IsKeyPressed(ebiten.KeyUp) {
		Y += 1 * 0.15
	}
	if ebiten.IsKeyPressed(ebiten.KeyDown) {
		Y += -1 * 0.15
	}
	if ebiten.IsKeyPressed(ebiten.KeyLeft) {
		X += -1 * 0.15
	}
	if ebiten.IsKeyPressed(ebiten.KeyRight) {
		X += 1 * 0.15
	}
	g.count++
	return nil
}

func (g *Game) Draw(screen *ebiten.Image) {
	op := &ebiten.DrawImageOptions{}
	op.GeoM.Scale(2, 2)
	op.GeoM.Translate(X, -Y)
	op.GeoM.Translate(screenWidth/2, screenHeight/2)
	sx, sy := frameOX, frameOY
	screen.DrawImage(runnerImage.SubImage(image.Rect(sx, sy, sx+frameWidth, sy+frameHeight)).(*ebiten.Image), op)
}

func (g *Game) Layout(outsideWidth, outsideHeight int) (int, int) {
	return screenWidth, screenHeight
}

func main() {
	img, _, err := image.Decode(bytes.NewReader(images.Runner_png))
	if err != nil {
		log.Fatal(err)
	}
	runnerImage = ebiten.NewImageFromImage(img)

	ebiten.SetWindowSize(screenWidth, screenHeight)
	ebiten.SetWindowTitle("Animation (Ebiten Demo)")
	if err := ebiten.RunGame(&Game{}); err != nil {
		log.Fatal(err)
	}
}

This doesn't use the linear filter but shaking was much reduced.

[Sn0rrii]

This looks to reduce the shaking, thanks.