Scaling up pixel art animations with the Spine Plugin

Phaser 3
1

To the left you have the in-engine version, at 1x and 3x.
On the right you have the desired effect, running within the Spine editor.

Any tips on how to get there?

31246
312461211×419 3.18 MB

A workaround could be to increase the size of the assets, but I really want to avoid that workflow if possible.

Code dump:

export function startPhaser (parent: HTMLElement) {
  return new Phaser.Game({
    type: Phaser.AUTO,
    parent,
    width: parent.offsetWidth,
    height: parent.offsetHeight,
    render: {
      pixelArt: true,
      antialias: false,
      antialiasGL: false
    },
    plugins: {
      scene: [
        {
          mapping: 'spine',
          key: 'SpinePlugin',
          plugin: (window as any).SpinePlugin
        }
      ]
    },
    scene: [ PlayScene ]
  })
}

export class PlayScene extends Phaser.Scene {
  preload () {
    // @ts-ignore
    this.load.spine('player', skeletonJson, [skeletonAtlas])
  }
  create () {
    this.cameras.main.setBackgroundColor('green')
    // @ts-ignore
    const player = this.make.spine({
      x: 50,
      y: 80,
      key: 'player',
      scale: 1,
      animationName: 'idle',
      loop: true
    })
    // @ts-ignore
    const player2 = this.make.spine({
      x: 150,
      y: 80,
      key: 'player',
      scale: 3,
      animationName: 'idle',
      loop: true
    })
  }
}
2

Still stuck… I’ve tried manually changing the texture’s filter mode (setFilter) to Phaser.Textures.FilterMode.NEAREST at runtime. This did not work

3

Meanwhile I posted on the Spine forums :pray: Desperation is setting in
http://esotericsoftware.com/forum/Nearest-neighbor-upscaling-in-HTML5-15433

4

SOLVED :smiley:

See Github: Using nearest neighbor for scaling? · Issue #375 · pixijs/pixi-spine · GitHub
You need to change your export settings on Spine

1 Like