Texture Sizes

Does having power of 2 images benefit games in Construct 2?

The only way this will benefit is it will prevent your tiled backgrounds from being slightly blurry.

ahhh ok cool thanks sqiddster.

I am having an issue with all of my tiled backgrounds showing up blurry.

Here is a screenshot of the problem I'm getting https://dl.dropbox.com/u/30187917/issue.jpg

Everything looks good when I am in construct 2, and image editing software, but when I run the project in chrome, i.e., and firefox, my tiled bgs are very blurry!

I need to be using webgl and point sampling to get the pixelated look I am going for.

I am using r97 on a nvidia gpu with win 7 64bit.

My drivers are good, and I get the same result in all browsers.

Here is the capx showing the problem.

https://dl.dropbox.com/u/30187917/tiled_background_blurry.capx

The project shown above is a sprite next to a tiled bg. When I run the project, the sprite is crisp and point sampled but the tiled bg is blurry. Same texture, different object, different rendering results.

The texture is 48x24 (it was 48x20 when I found this thread, but changing it did not help.)

I tried scaling it to 48x48 just to see if that fixes the blurryness, but no luck.

As sqiddster said the only way to get tiled backgrounds to show perfectly in WebGL mode is to use a power-of-two sized texture, e.g. 32x32 or 64x64.

You should also make sure 'sampling' is set to 'point' in project properties to prevent sub-pixel positioning causing blurring.

Chrome is really not consistent when displaying sprite,

i found that Firefox actually is more consistent (sprite/tiledbackground always looks sharp).

it could be a graphic driver....maybe ??

Out of curiosity i run a test on Chrome vs Firefox, and true enough:

• on my desktop, a Win XP machine with latest Nvidia driver,

* in Chrome Sprite looks blurry while TiledBackground looks sharp. (while the post earlier mention the opposite where tiled background looks blurry & sprite looks sharp)

* Firefox both looks sharp.

• on my laptop, Win 7 with ATI graphic (latest driver), both looks sharp (on Chrome & Firefox)

I'm not sure if this is ATI vs Nvidia thing, or it's Win XP vs Win 7, because i only have 2 machine to test <img src="smileys/smiley17.gif" border="0" align="middle">

When the sprite blurry, it looks like this:

Chrome:

<img src="http://i45.tinypic.com/140exe.jpg" border="0">

Firefox:

<img src="http://i46.tinypic.com/2i8d75f.jpg" border="0">

I slightly modified the sprite so the size is 64x64 just to see if it fix the problem (it's not):

CAPX:

https://dl.dropbox.com/u/39382262/BUG/BlurrySprite.capx

Web Test (Try it on Chrome & Firefox to see the different):

https://dl.dropbox.com/u/39382262/Blur2/index.html

Project Setting:

<img src="http://i47.tinypic.com/20u7rig.jpg" border="0">

Potato:

Looks fine to me both in Chrome and FF, I have an nvidia card and WinXP on this machine.

Potato:

Looks fine to me both in Chrome and FF, I have an nvidia card and WinXP on this machine.

I know.. isn't that really weird,

on my laptop it also works fine both on Chrome & Firefox.

only on my desktop with Chrome it looks blurry (looks sharp with Firefox).

desktop spec: Win XP, GeForce GT 220 with latest Nvidia 301.42 WHQL driver

maybe Ashley knows what happens in here,

not that i expect him to fix it, since this is probably one of that browser unpredictable behavior and we can't do anything about it <img src="smileys/smiley5.gif" border="0" align="middle" />

It depends on your graphics card and drivers.

Not sure what's happening. Does turning off WebGL affect it on machines where the sprite looks blurry?

Not sure what's happening. Does turning off WebGL affect it on machines where the sprite looks blurry?

Turning off WebGL doesn't really help (doesn't change anything).

Also i might narrow the problem, it only happens on FullScreen Scale & Letterbox Scale

(which is a given since we scale those sprites up)

It's just weird how Chrome treats Sprite & TiledBackground differently

(where sprite looks blurrier and TiledBackground looks sharper)

Firefox doesn't have this problem though. (sprite/tiledbackground looks the same in firefox)

I recreate the project with a bigger sprite:

<img src="http://i45.tinypic.com/aa999i.png" border="0">

capx:

https://dl.dropbox.com/u/39382262/BUG/CircleTest.capx

And some web test (WebGL always ON):

Sampling: LINEAR - Fullscreen: OFF

https://dl.dropbox.com/u/39382262/Test/LinearOff/index.html

Sampling: LINEAR - Fullscreen: SCALE

https://dl.dropbox.com/u/39382262/Test/LinearScale/index.html

Sampling: POINT - Fullscreen: OFF

https://dl.dropbox.com/u/39382262/Test/PointOff/index.html

Sampling: POINT - Fullscreen: SCALE

https://dl.dropbox.com/u/39382262/Test/PointScale/index.html

don't worry too much about it Ashley, i guess it's just one of that browser quirk,

i'm just doing this test out of curiosity

My results are invert.

Chrome has sprite showing as sharp and tiled background as blurry, same with firefox. I.E. is all blurry.

I am on nvidia 560m with latest stable driver. I will test on another pc tomorrow if I can.

Sorry to bump the topic, but I figured it was better then making a new thread. In the latest beta release (r98) the log notes that texture sizes for tiled background objects need to be power of two, and gives the example of a 1:1 ratio image.

Can images be in a power of two with different height width ratios?

In my previous experience other engines allow us to use any height width ratio as long as it stays within a power of two.

For instance a 64x32 texture would be fine, but a 61x31 would cause issues.

Our engine at my last job had issues exporting to wii when the ratio was x<y but x>y in the ratio was fine (64x32 good, 32x64 bad) but this was only on the wii not on any other platforms. Also, images smaller than 16x16 had issues on 360, but taht was not much of a problem because of the power of the system using a smaller then 16x16 texture was unncessary in most cases.

Unfortunately not - they have to be square power-of-two. The problem is the lowest common denominator is mobile, which tend to have much more limited hardware, and get this limitation. This then "leaks" over to desktop machines, which don't have the limitation, because technologies like WebGL only support the lowest-common-denominator as well, specifically to maintain compatibility with mobile. So now your desktop machine using WebGL has to use a square power-of-two texture for good tiling, even though the hardware powering it is 99% likely to be able to tile any size texture perfectly. I tried to press the WebGL standards committee to add support for the desktop extension when it's available, but they didn't want to add it. I think it was mainly because WebGL is still relatively new, and they don't want to add features which don't work everywhere yet.