8 years ago by ComitOne
Hi,
I've just started using twopointfive and I'm not sure why I'm getting pixelated image rendering in the browser when doing the following:
I get:
I've just started using twopointfive and I'm not sure why I'm getting pixelated image rendering in the browser when doing the following:
new tpf.HudTile( this.image, 0, this.image.width, this.image.height); this.image.draw();
I get:
8 years ago by lunarcloud
Well, the simple answer is probably just the matter of resolution.
The example game in TwoPointFive is running at 640x480 I think, and your art assets I would guess have a much higher resolution.\
However, I have noticed that my images with transparency don't translate very well, where the pixels must either be fully opaque or fully transparent.
Probably a consequence of whatever shaders he's using to map images onto quads and such.
The example game in TwoPointFive is running at 640x480 I think, and your art assets I would guess have a much higher resolution.\
However, I have noticed that my images with transparency don't translate very well, where the pixels must either be fully opaque or fully transparent.
Probably a consequence of whatever shaders he's using to map images onto quads and such.
8 years ago by ComitOne
Thanks for your help lunarcloud. My game is for Apple TV and is running at 1920x1080, so the resolution wasn't the source of my problem.
I'm not making a pixel art game, which I believe TwoPointFive's renderer is configured for out of the box. I read up a bit about WebGL and consequently played about with the canvas configuration in TwoPointFive's renderer.js. Namely, changing TEXTURE_MAG_FILTER and TEXTURE_MIN_FILTER both to LINEAR resulted in a big improvement! That's said I still have jaggies around my HUD assets when rendered on screen, regardless of the asset size.
My assets render perfectly on a 2d canvas, anyone know how I can get crisp rendering of assets using TwoPointFive's WebGL canvas? I also made sure my assets have power-of-two sized dimensions.
I'm not making a pixel art game, which I believe TwoPointFive's renderer is configured for out of the box. I read up a bit about WebGL and consequently played about with the canvas configuration in TwoPointFive's renderer.js. Namely, changing TEXTURE_MAG_FILTER and TEXTURE_MIN_FILTER both to LINEAR resulted in a big improvement! That's said I still have jaggies around my HUD assets when rendered on screen, regardless of the asset size.
My assets render perfectly on a 2d canvas, anyone know how I can get crisp rendering of assets using TwoPointFive's WebGL canvas? I also made sure my assets have power-of-two sized dimensions.
8 years ago by ComitOne
lunarcloud, I think you're right about shaders. I'm not sure, but I also heard some mac hardware can force disable antialiasing.
I'm thinking it might just be simpler to just move to implementing a HTML/CSS HUD that just overlays the webgl canvas.
I'm thinking it might just be simpler to just move to implementing a HTML/CSS HUD that just overlays the webgl canvas.
Page 1 of 1
« first
« previous
next ›
last »