# Scaling up pixel art animations with the Spine Plugin

**URL:** <https://phaser.discourse.group/t/scaling-up-pixel-art-animations-with-the-spine-plugin/8897>\
**Category:** Phaser 3\
**Created:** [February 15, 2021, 10:39am UTC](https://phaser.discourse.group/t/scaling-up-pixel-art-animations-with-the-spine-plugin/8897 "2021-02-15T10:39:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mccxiv](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@mccxiv](https://phaser.discourse.group/u/mccxiv)\
**Post date:** [February 15, 2021, 10:39am UTC](https://phaser.discourse.group/t/scaling-up-pixel-art-animations-with-the-spine-plugin/8897/1 "2021-02-15T10:39:04Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/6/6bcb4eaf871a31221461c7fccefe55645bf15bce.gif)

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

Code dump:

```javascript
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
    })
  }
}

```

---

<div class="post-metadata">

**Author:** ![mccxiv](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@mccxiv](https://phaser.discourse.group/u/mccxiv)\
**Post date:** [February 15, 2021, 1:50pm UTC](https://phaser.discourse.group/t/scaling-up-pixel-art-animations-with-the-spine-plugin/8897/2 "2021-02-15T13:50:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mccxiv](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@mccxiv](https://phaser.discourse.group/u/mccxiv)\
**Post date:** [February 16, 2021, 3:45pm UTC](https://phaser.discourse.group/t/scaling-up-pixel-art-animations-with-the-spine-plugin/8897/3 "2021-02-16T15:45:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mccxiv](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@mccxiv](https://phaser.discourse.group/u/mccxiv)\
**Post date:** [February 19, 2021, 12:50pm UTC](https://phaser.discourse.group/t/scaling-up-pixel-art-animations-with-the-spine-plugin/8897/4 "2021-02-19T12:50:56Z")

</div>

SOLVED 😃

See Github: [Using nearest neighbor for scaling? · Issue #375 · pixijs/pixi-spine · GitHub](https://github.com/pixijs/pixi-spine/issues/375#issuecomment-782052136)  
You need to change your export settings on Spine