1
\$\begingroup\$

I know this issue maybe repeated and seems to be very common but I searched first and did not find anything concrete.

I am doing some test and playing around with pixijs. I created an stage 320x180 and I am rendering an sprite of 27x27 in a autodetected renderer (WEBGL always is selected) I am in a macos retina resolution (devicepixerate 4) the problem is I can not achieve having the sprite pixelated even setting antialias false in the renderer. I tested the same without pixijs but native canvas 2d context using drawImage and I could get what I wanted using some hacks like after every drawImage set context.imagesmoothingenabled to false and I have CSS file to canvas image-rendering: pixelated. With those I am having exactly what I want, but of course I would like to obtain the same using pixijs and WEBGL. Is it possible? Disable at all antialias in a WEBGL context? How we can deal with this to render pixel arts properly?

EDITED: Using canvas 2d context native api enter image description here

Using PixiJS webgl context. enter image description here

Cheers.

\$\endgroup\$
2
  • 1
    \$\begingroup\$ can you show us a screen of how it looks? \$\endgroup\$
    – Kromster
    Commented Mar 18, 2018 at 13:38
  • \$\begingroup\$ @Kromster edited please review. Thx \$\endgroup\$
    – salc2
    Commented Mar 18, 2018 at 16:50

2 Answers 2

3
\$\begingroup\$

Helped me in html5gamedevs forum.

Solution: The scale mode of the texture needs to be set to nearest. You can either do that on a texture by texture basis via the scaleMode property, or change the default via http://pixijs.download/dev/docs/PIXI.settings.html#.SCALE_MODE Updated pixi from 4.5 tp 4.7, set scaleMode, set resolution:3 instead of css transform

Thread: http://www.html5gamedevs.com/topic/36463-pixijs-v4-does-not-remain-sprite-pixelated-as-it-original-is

\$\endgroup\$
0
1
\$\begingroup\$

Simple solutions using CSS:

canvas {
  image-rendering: pixelated;
} 

The same can be applied to img tag or any other element with images on the background.

It allows you to render a 1-to-1 pixel scale, and resize your canvas into any resolution.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .