Reduce image resolution

[dasmus]

Disclaimer: not the most experienced graphics guy out there.

I have an app, that is loading in dozens of images and displays them on canvas. Images are quite big - 800x600.
On canvas they are shown 6x6 or smaller. Clipping so large images on canvas makes it run slow.

Is there a way to make them smaller before adding them to canvas?

One way is always to make smaller images on server side. But maybe there is a way with PIXI as well?

[xerver]

You could draw them to a separate canvas, scale it, and then use that as a texture instead.

I'm a little curious about this part though:

> Clipping so large images on canvas makes it run slow.

Not sure what problem you actually are encountering. If you are drawing a bunch of different images, and they are all separate images, then each will be a separate draw call. You are likely getting performance issues from each image being separately drawn. If you could make all the images be in a single sprite sheet and draw frames from that instead it would likely be much faster.

[ivan.popelyshev]

You can use mipmapping in webgl and compress your textures to dds/pvr formats. Or just do that work on server.

[dasmus]

You could draw them to a separate canvas, scale it, and then use that as a texture instead.

I'm a little curious about this part though:

> Clipping so large images on canvas makes it run slow.

Not sure what problem you actually are encountering. If you are drawing a bunch of different images, and they are all separate images, then each will be a separate draw call. You are likely getting performance issues from each image being separately drawn. If you could make all the images be in a single sprite sheet and draw frames from that instead it would likely be much faster.

If the real problem is that I'm executing draw on so many images. Can I somehow tell pixi not to call draw method on them again since only background is changing color and the image sprites don't need to change.

I need to trigger click event when image is clicked so I can't union images to one sprite.

 

You can use mipmapping in webgl and compress your textures to dds/pvr formats. Or just do that work on server.

At the moment not looking and server side solution. But mipmapping could look into, not sure how it works atm.

[ivan.popelyshev]

If the real problem is that I'm executing draw on so many images. Can I somehow tell pixi not to call draw method on them again since only background is changing color and the image sprites don't need to change.

I need to trigger click event when image is clicked so I can't union images to one sprite.

 

At the moment not looking and server side solution. But mipmapping could look into, not sure how it works atm.

 

1. container.cacheAsCanvas = true will enable cache, =false will reset it

 

2. mipmapping works if your textures are power-of-2. you need to specify texture.mipmap=true; BEFORE you start using it. And it works only in WebGL, in Canvas you have to manually resize (several times divide size by two), otherwise result will be horrible.

[dasmus]

1. container.cacheAsCanvas = true will enable cache, =false will reset it

 

2. mipmapping works if your textures are power-of-2. you need to specify texture.mipmap=true; BEFORE you start using it. And it works only in WebGL, in Canvas you have to manually resize (several times divide size by two), otherwise result will be horrible.

For now 1. is good enough, thanks.