Adding gradient background

[David M]

Hi,

I'm having issues trying to add a gradient to the background of my platformer game. I have worked out that, due to the WebGL renderer, the images used need to be either square or width = height x 2. My issue is that the stage is width = height x 4. I thought I could just add two image layers and align them next to each other with the "repeat" property set to "no-repeat" but this does not work. Even though the offset for my second level is correct the image is getting repeated over the first image.

Is there a better solution. What I need is a gradient that goes from dark to light top to bottom but also changes from left to right so that it feels that night is falling as you walk through the level.

I hope this makes sense, you help would be much appreciated.

Thanks

Dave

[Parasyte]

WebGL has a soft requirement that textures width and height are a power of two, e.g. 128, 256, 512, 1024, ... And any combination is allowed; 128x1024, 512x256, etc.

You should be able to accomplish your goal with a single background texture (just draw your gradients in Photoshop or whatever) that is wider than tall. You can also set the scrolling ratio to <1 so that it scrolls slower than the other tile layers in your map. For example, a ratio of 0.5 will cause the background to scroll at half the speed of the viewport.

[David M]

Hi Parasyte,

Thanks for the info, that seems to have done the trick.

[David M]

Look like I was a little premature.

The image layer seems to be cropping the image to less than the visible area, please see screenshot. That black space should not be there. The image is sized to match the level width so I'm not sure whats going on? This area of black seems to increase and decrease depending on the browser window ratio. Wider the browser less black you see. Is this a bug?

Thanks

[Parasyte]

Are you using the ImageLayer API directly, or is it created from a tile map? Are you setting the repeat property correctly? Are you setting or changing the layer size? If you're using the repeat property, you should not change the size, since they are mutually exclusive configurations... Logically, anyway. There's nothing wrong with using them together if you wanted that black bar! When using repeat, the image is sized to match the viewport (not the level).

So this leads me to believe you're using the API in an unexpected way.