Jump to content

Sprite Spacing Problem


Gerente
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

image.thumb.png.4de948cd1ef79d48a6bc191321878d14.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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/ 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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".

 2018-05-01_13-48-02.thumb.png.1aa088af8fcf29fdf4647135e195f74c.png

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

 

Link to comment
Share on other sites

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.

 

image.thumb.png.bc7066b1cdfccf298f135655c61cfd8b.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

image.thumb.png.3ddeae92d0dcfdd4a054e5c9abc6c73d.png

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...