Phaser Atlas Sprite Size

[lunny]

I have a sprite created from atlas.  Everything works fine expect that the sprite is the size of the original image not the trimmed version.

For Example, my sprite is 300x300 but I want it to the trimmed size of 110x93.  How can I do that?

{
    "filename": "stand1",
    "frame": {"x":1077,"y":708,"w":110,"h":93},
    "rotated": false,
    "trimmed": true,
    "spriteSourceSize": {"x":119,"y":98,"w":110,"h":93},
    "sourceSize": {"w":300,"h":300}
}

[rich]

You want to just read those values, or you want the sprite width / height to be the trimmed values? If the second one you need to trim it before adding it to the atlas. The first can be found in the FrameData object.

[lunny]

Hi Rich!  I want the sprite's body width/height to be the trimmed values.  My sprite sheet is trimmed but the sprite's body width/height is still displaying the sourceSize of 300x300 instead of the trimmed size.

Some of the code.

this = Phaser.State

this.game.load.atlas(HeroTypes.WARRIOR + '-sprite', 'resources/imgs/heroes/warrior/warrior.png', 'resources/imgs/heroes/warrior/warrior.json');

this = Phaser.Group

this.sprite = this.create(0, 0, HeroTypes.WARRIOR + '-sprite');

Heres the git repo if you want to take a look.

The atlas is loaded in boot.js and the sprite is created in Warrior.js.  

https://github.com/lunzhang/maplefighter

[rich]

I don't have time to look at the repo, sorry - but if it's just the physics body you want to resize then you can do that easily enough (see the example for it), however if you want the Sprite size to be the trimmed size, then you're going to need to trim it before adding it to the atlas.

[lunny]

I want the Sprite size and physics body to be the trimmed size.  I did trim the images in the sprite sheet if that's what you mean. I used TexturePacker to trim the images and save it as png and exported the atlas as Phaser JSON.

[rich]

Right, so like I said, you're going to have to trim the frames before adding them to the atlas. Using Photoshop or similar. Whatever dimension the image is when adding to the atlas is the data that gets exported to the JSON files. If you want those dimensions to be different, the source files need to be different.

[lunny]

I thought Texture Packer trims the images, or does the original image has to be trimmed?

Here is the exported trimmed sprite sheet by Texture Packer.  Would it work?

https://github.com/lunzhang/maplefighter/blob/master/resources/imgs/heroes/pirate/pirate.png

[rich]

Texture Packer does trim the frames. But it only does so to optimize space used in the atlas and save memory. The data it exports is based on the fact that the original frame size is the one you actually wanted in your game, because that is the size of the sprite you gave it. Texture Packer can also rotate sprites if it will save memory / space to do so - you wouldn't want them to appear rotated in your game, you'd expect them to be the right way around when they render. That is how the trim feature works too.

[rich]

Think of it like this: The size of the sprite you put into Texture Packer is the size of the sprite you're going to get in your game, regardless what the settings within Texture Packer are (trim, rotate, scale, etc).

[lunny]

Ah ok, Thanks Rich!  Looks like I'll have to trim the images myself.  Good luck on phaser v3!

[rich]

I'm afraid so - there are loads of apps that can batch job that though, to save you the hassle.

[lastuniverse]

On 9/11/2017 at 6:14 PM, rich said:

Think of it like this: The size of the sprite you put into Texture Packer is the size of the sprite you're going to get in your game, regardless what the settings within Texture Packer are (trim, rotate, scale, etc).

 

sir, you are misleading people. See for yourself: 1. I take a sprite with a size of 256x256 2. I pack in the atlas texture packer with the crop method 3. I pack in an atlas with a texture packer with a trim method and now we compare these 2 atlases

trim

{
      "frame": {
        "x": 0,
        "y": 0,
        "w": 85,
        "h": 73
      },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": {
        "x": 90,
        "y": 109,
        "w": 85,
        "h": 73
      },
      "sourceSize": {
        "w": 256,
        "h": 256
      },
      "pivot": {
        "x": 0.5,
        "y": 0.5
      }
    }

 

 

 

crop

{
      "frame": {
        "x": 0,
        "y": 0,
        "w": 85,
        "h": 73
      },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {
        "x": 0,
        "y": 0,
        "w": 85,
        "h": 73
      },
      "sourceSize": {
        "w": 85,
        "h": 73
      },
      "pivot": {
        "x": 0.5,
        "y": 0.5
      }
    }

 

with the crop method, the author of the question gets exactly the result that he wanted, but with a broken pivot))))