Sprite Spacing Problem

[Gerente]

Hello, there is any consideration to draw a sprite after another?. I'm having a hard time trying to make them fit perfectly.

I'm starting to think that is something about decimals or something because most of the sprites have a line/space between them , and in mobiles is even worst.

I have a big spritesheet with tiles, and I extract them with:

new PIXI.Texture(texture, new PIXI.Rectangle(col * tileSize, row * tileSize, tileSize, tileSize))

where col and row indicate the position of the tile.

Could be a problem related with this method? the spritesheet is fine because it works perfect in Tiled.

[ivan.popelyshev]

If you dont set nearest (baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST), there might be artifacts on edges.

Alternatively, use this plugin: https://github.com/pixijs/pixi-tilemap  , it takes care of texture edges. The input method is different: instead of creation of many sprites, you have to clear the tilemap and refill it with tiles whenever you want to update it.

[Gerente]

Hi Ivan, I tried with PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; but nothing changed.

I want to use my own tilemap component but pixi-tilemap seems to work directly with webgl so its much faster.

 

thanks.

[jonforum]

not sure if i understand all your answer, but are your sheets use  power of two when your export it ?.

https://www.katsbits.com/tutorials/textures/make-better-textures-correct-size-and-power-of-two.php

if i remember correctly, you need to use the power of two in webgl for get perfect textures size.

But am not sure , maybe somes guys can confirme.

 

if you use texture packer you need to change the layout algoritme.

[bubamara]

You don't have to use power of 2 texture necessarily. But if you do, mipmap is generated and things gets faster.

That also brings some filtering issues, so its always good practise to use extrude option (value of 8 usually works fine) in TexturePacker for both cases, whether you are using or not using POT textures.

And which is something you might try @Gerente

[ivan.popelyshev]

its not pow2 issue.

Settings work only before you create all the textures. `PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST`

You can change that for any texture before you render it first time with `baseTexture.scaleMode`

That's free tool that does packing: https://www.leshylabs.com/apps/sstool/ 

[bubamara]

yes, it's not the POT problem, I was talking about trying extrude pixels option. Depends on how Gerente's atlas looks like and whether he's happy with nearest filtering. I suspect he's having sprite sheet and creating textures from it.

2 options : using tiled as Ivan said or crop each tile + extrude and repack

[AndreasLoew]

TexturePacker creates a JSON file for PixiJS which describes the sprite positions in the sprite sheet and allows trimming the sprites. This removes additional transparent pixels and allows compacted sprite sheets:

1. Smaller file size
2. Faster loading
3. Faster drawing of the sprites

Select "PixiJS" as Data format and save the data file as "sheet.json".

 

Your sprite sheets don't need to have a power of 2 size. This is only required for special image formats like PVTRC codec.

You can set the image format to "PNG-8" to write indexed png files which are much smaller. (TexturePacker includes pngquant + optipng to make the sheet as small as possible).

Load the sprite sheet's JSON file in your Pixi code. IT automatically loads the connected image file.

PIXI.loader
    .add('required/assets/sheet.json')
    .load(onAssetsLoaded);

You can access the sprites using

PIXI.Texture.fromFrame('RunRight0001.png')

A complete example can be found here: http://pixijs.io/examples/#/basics/spritesheet.js

 

[bubamara]

nice having you here @AndreasLoew

Any plans to the future supporting trim/allow rotation properties per sprite? now you can only make it as global option.

Also would be great to have extrude/padding available for each scaling variant separately  

[jonforum]

26 minutes ago, bubamara said:

nice having you here @AndreasLoew

Any plans to the future supporting trim/allow rotation properties per sprite? now you can only make it as global option.

Also would be great to have extrude/padding available for each scaling variant separately  

also a sprite setting for pixi.js for specialy anchor and pivot.

this would offer a good workflow.

 

[bubamara]

11 minutes ago, jonforum said:

also a sprite setting for pixi.js for specialy anchor and pivot.

this would offer a good workflow.

 

 

Yes, that would be excellent addition as well. Opening each sprite in Photoshop measure pixel distance and write back to Pixi is pain in the ass.

[jonforum]

1 hour ago, bubamara said:

Yes, that would be excellent addition as well. Opening each sprite in Photoshop measure pixel distance and write back to Pixi is pain in the ass.

yes, that's also the only reason why I made myself a map editor and sprite manager.

Configuring the pivot, anchor, rotation and scale, the skew is tedious, especially for a complex project.

I do not know how people do it, but I find it impossible to do a project the way you do it.
This saves me a lot of calculating and workflow , it build json for every elements I want to includes in a scene.
The pivot and anchor can control and set directly with the mouse or with inputs for more precise.

Still, I think it would be great to be able to defend the anchor by default for every sprite in texturepacker.

[bubamara]

very nice @jonforum

Back then I have exported json similar to this one directly from Photoshop for quick layouting :

background:

{
    texture  : 'some-texture',
    anchorXY : 0.5,
    scaleX   : 2,
    x        : 100,
    y        : 100
}

and with simple loop assigning those to DisplayObject.

Unfortunately my old HDD has passed away and things got more complex over the time  Lazy to go through it again or to make editor like you have, so I ended up with simple js file that I'm requiring.