You can ignore power-of-two image sizes now

by Ashley Gullen | 17th, November 2016

WebGL brings native-grade rendering to the web which Construct 2 games have long taken advantage of, but it always had two minor annoyances. The original WebGL (which I'll call WebGL 1) is based on OpenGL ES 2, and inherits some power-of-two (POT) restrictions: tiled images have to be a POT size (e.g. 32x32, 64x64, 128x128 etc), and it can only generate a mipmap (used for better quality downscaling) for POT size images. To work around the tiling issue, C2 internally stretches any non-power-of-two (NPOT) tiled images to a POT size before creating the texture, which is lossy. This combined with the mipmap restriction meant that there have occasionally been bug reports in the past about slightly degraded quality with certain images.

Fortunately WebGL 2 is coming, which is based on OpenGL ES 3 and lifts both those restrictions. C2 r240 and newer can use WebGL 2 if it's available. This means it can tile any size images without any quality loss, and always create mipmaps for any size images, so the downscaling quality is always the same (and best) quality. It's nice that we can finally solve these long-standing issues with WebGL 2!

Ignore power-of-two sizes

Once WebGL 2 is widespread, there is no longer any reason to consider whether an image is a POT size or not. You can pretty much just completely forget about the whole issue and use any-sized images with no consequences. Even on the slow-moving Android, over half of all devices already support OpenGL ES 3 (and therefore can support WebGL 2), and all other platforms will likely have far better support already. In the near future we can expect WebGL 2 to be pretty much as ubiquitous as WebGL 1 is today. Even on old browsers or devices which fall back to WebGL 1, the consequences are minor - just slightly degraded image quality in a small number of cases.

Spritesheeting

In fact, power-of-two sizes are the worst case size for a Sprite image. The spritesheet builder still uses POT size sheets for performance and compatibility, often at large sizes like 1024x1024 with lots of smaller images on them. However to avoid color bleeding issues it always adds at least a 1px border around each image, making it 2px longer on both dimensions. While POT sizes divide exactly in to a larger POT size, adding 2px to the size actually makes it divide the least efficiently! For example a 512x512 area can fit four times in to a 1024x1024 sheet, but when it's bumped up to 514x514 for the border, it can only fit once on a 1024x1024 sheet!

This means using a power-of-two size for images can actually make your game less efficient. The ideal packing size is actually a power-of-two minus 2px, e.g. 30px, 62px, 126px etc, since once you add the 1px border in it packs neatly. However that's a bit of a weird formula to remember. The spritesheet packer usually does a pretty good job of working out how to fit in lots of different size images. So the best thing to do is (again) just ignore the specific size and choose whatever suits you best.

Conclusion

In the past, for technical reasons you might have to make some images a power-of-two size for best quality. With WebGL 2 this is no longer the case, and in fact sometimes using a power-of-two size image makes spritesheets less efficient!

WebGL 2 will arrive in Chrome 56, and you can test it now with Chrome Canary. Other browsers should follow soon, browser vendors are actively working on it.

So our new advice is this: don't worry about image sizes, use whatever you want!

Now follow us and share this

Comments

3
bilgekaan 23.0k rep

It was really hard to make good tiled objects with pixel art. I just tried it and it works perfectly, now. I really appreciate this update. Thank you!

Thursday, November 17, 2016 at 2:34:47 PM
3
chadorireborn 59.0k rep

@Ashley so does that mean phones bought on 2016 will support Webgl2? I have a marshmallow 6.1. So would it be supported on webgl2 release date.

And regarding the release, will webgl 2 still take a year to release on mobile?
And how about desktops?

Thanks.

Thursday, November 17, 2016 at 2:36:24 PM
3
TELLES0808 21.2k rep

Mr. @Ashley, did you know about Shoebox before? I was hoping to see their features, or similar, in C2 or C3. You should see how it works, may give you a light to make the spritesheets even better and more compacts. renderhjs.net/shoebox/. I don't know the particularities of the Shoebox, but was using it with other compatible softwares who uses the png spritesheet (texture atlas) and a xml to organize and identify the sprites inside the png. doing an animation with very different sprite sizes is possible thanks to the xml who will know and track where each sprite is inside the file, but the final size will be very smaller regarding to the common spritesheet in stripe.

Thursday, November 17, 2016 at 2:40:52 PM
3
AaronSmithUK 522 rep

Current browser support for WebGL 2:

caniuse.com/#feat=webgl2

Thursday, November 17, 2016 at 2:51:20 PM
2
TheRealDannyyy 40.2k rep

Thanks for the summary, everything is clear now and WebGL2 seems to be the right way to go.

At first the upcoming Chrome v55 with the memory consumption improvements and WebGL2 right after that, a lot of exciting news recently.

Judging by their estimates we'd have to wait until the end of January for the stable release with WebGL2 support. Still quite a while until then but it's good to know that C2 is ready for it.

Thursday, November 17, 2016 at 3:07:25 PM
2
jobel 13.7k rep

very nice I never liked that limitation.. thanks for the update!

Thursday, November 17, 2016 at 3:14:36 PM
2
glerikud 20.0k rep

Great update. Thank you for detailing the WebGL 2 case. :)

Thursday, November 17, 2016 at 4:40:05 PM
2
Colorfish 1,681 rep

Thanks for the fine update - its a real pleasure beeing a Construct user :-)

Thursday, November 17, 2016 at 4:59:08 PM
2
EmpowerMe 8,549 rep

This definitely make my life easier. Thank you for the heads up and explanation!

Thursday, November 17, 2016 at 5:53:38 PM
2
Bad Wolf 962 rep

Great blog post, thank you Ashley. The more I use Construct 2, the more I like it.

Keep up the good work!

Thursday, November 17, 2016 at 8:13:08 PM
4
Renfd 4,894 rep

I always ignored it lol

Thursday, November 17, 2016 at 8:41:57 PM
3
Rasputin 2,923 rep

Nice info, thanks :)

Friday, November 18, 2016 at 11:34:32 AM
3
Leandrus 5,847 rep

Ohhh Great :) Thx

Friday, November 18, 2016 at 8:55:50 PM
2
MACPK 7,819 rep

very nice :-)

Monday, November 21, 2016 at 12:13:19 AM
2
smallrobot 1,342 rep

Just tried it for some non-POT pixel art tiling and it worked flawlessly. Awesome work :).

Tuesday, November 22, 2016 at 3:32:05 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.