Salc2 Posted March 18, 2018 Share Posted March 18, 2018 Hi all, 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? example using native canvas 2d context drawImage example using PixiJS webgl renderer Cheers. Quote Link to comment Share on other sites More sharing options...
themoonrat Posted March 18, 2018 Share Posted March 18, 2018 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 5alidshammout 1 Quote Link to comment Share on other sites More sharing options...
Salc2 Posted March 19, 2018 Author Share Posted March 19, 2018 It does not seem to work, I tried directly in the baseTexture and in the global property as well and it had not any effect =/ I keep trying things, if I find something I will let you know. Thx. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted March 19, 2018 Share Posted March 19, 2018 Do it before the texture is rendered for the first time. Make a fiddle, I'll show you how to do it. Quote Link to comment Share on other sites More sharing options...
Salc2 Posted March 19, 2018 Author Share Posted March 19, 2018 Hi Ivan, here are the fiddles: This is the canvas native version https://jsfiddle.net/salc2/demvhnav/4/ this is how I would like to have it in pixijs this is the pixijs version https://jsfiddle.net/salc2/5o2eywg5/ blurred Cheers Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted March 19, 2018 Share Posted March 19, 2018 why do you apply CSS transform to canvas? Quote Link to comment Share on other sites More sharing options...
Salc2 Posted March 19, 2018 Author Share Posted March 19, 2018 It is just to see the image properly but we can remove it. Quote Link to comment Share on other sites More sharing options...
Salc2 Posted March 19, 2018 Author Share Posted March 19, 2018 I mean if you see it without the css transformation it get blurry also Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted March 20, 2018 Share Posted March 20, 2018 Updated pixi, set scaleMode, set resolution:3 instead of css transform. It works: https://jsfiddle.net/5o2eywg5/11/ Salc2 1 Quote Link to comment Share on other sites More sharing options...
Salc2 Posted March 20, 2018 Author Share Posted March 20, 2018 Beautiful!! Thank you very much. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.