Jump to content

PIXIJS Can't show png image as Sprite with high quality

Robert Nguyen

Recommended Posts

arrow_02.thumb.png.334be1610cc8ac4d6ea0e15134431978.pngI have this image and i's tried to add into my project. but this quality is not good.So I need your help! i'm a newbie in pixijs

this my code


var textureButtonOver = PIXI.Texture.from('assets/arrow_02.png');
arrowSprite = new PIXI.Sprite.from(textureButtonOver);
arrowSprite.position.set(0, 0);
arrowSprite.width = 150 * 2;
arrowSprite.height = 150 * 2;
arrowSprite.scaleMode = PIXI.SCALE_MODES.NEAREST;

Screen Shot 2021-02-01 at 23.26.58.png

Link to comment
Share on other sites

You tried scaleMode, buts its different texture parameter ;) You are downscaling more than 2 times, so you need mipmap! If you dont want to use it, just scale texture in photoshop that way it wont be ever downscaled more than x2.

sprite.texture.baseTexture.mipmap = PIXI.MIPMAP_MODES.ON;

scaleMode also exists in baseTexture, not sprite itself.

Sprite - the instance in stage

Texture - region (rectangle) + baseTexture

BaseTexture = actual texture that is stored

Beware, mipmaps work in webgl1 only if texture has power-of-two size (512x512, 256x256, 256x512, e.t.c.)

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.

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.


  • Recently Browsing   0 members

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