doubleb Posted January 7, 2018 Share Posted January 7, 2018 Hey everyone, this is my first Phaser game I am making, nice to be a part of this community :)! I have used these forums for the last couple of weeks, there are a lot of helpful people here and yet I never posted anything, so I just thought, let's do something back. Today I just want to share what I learned today and hope this will help other people: I am currently making a tile editor where I am showing 32x32 sprites on a sidebar. I added a simple graphics object which acted as a border/selection for these tiles which has a 2px width. I noticed that when selecting some tiles the border is not always 2px but rather 1px sometimes either on the top or the bottom. When dragging these sprites, the borders correct themselves every few pixels. This confused me greatly at first... I had disabled antialiasing and I was not scaling.. so what happened was that I was showing a pixellated sprite in the background of the website, using the image-rendering: pixelated; CSS rule on the body of the webpage to ensure all images are pixelated. This caused the canvas to also become pixelated and show my sprites in unexpected ways. Overriding image-rendering for the canvas to image-rendering: auto; has resolved my issue! Hopefully this will help other people that will get into a situation like this. Did you ever face any issues like this where CSS has made unexpected changes to your canvas? Any other tips to look out for? Link to comment Share on other sites More sharing options...
samme Posted January 8, 2018 Share Posted January 8, 2018 Did you scale the game at all? Link to comment Share on other sites More sharing options...
doubleb Posted January 9, 2018 Author Share Posted January 9, 2018 Yeah I scale the game to 100% width/height. But even setting a specific width did not make a difference. All good now after changing the CSS. Link to comment Share on other sites More sharing options...
Recommended Posts