There's several ways to add a gradient background to your layouts. Sprites work pretty good as long as you don't waste memory and make a texture the size of the window. You can make the scale a few sizes smaller and upscale it physically, and hope there's no real noticeable artifacts. There probably will be and they will look something like a pixel art dither, but all in all the runtime sampling does a good job.
In fact you can get a little tricky and make the texture basically one dimension with the gradient applied to one pixel, and just stretch the thing to what ever size. This trick works even better with the Tiled Background object, but you still might get some artifacts.
Of course the point of this post is to show how to do it with the Drawing Canvas object which doesn't have the scaling issues, and lets you make your colors on the fly, and even animate them... within reason.
In fact you can get a little tricky and make the texture basically one dimension with the gradient applied to one pixel, and just stretch the thing to what ever size. This trick works even better with the Tiled Background object, but you still might get some artifacts.
Of course the point of this post is to show how to do it with the Drawing Canvas object which doesn't have the scaling issues, and lets you make your colors on the fly, and even animate them... within reason.
To start you'll want to make the object the size you want in the layout.
If you set the origin to top left you can just make its position 0,0.
Also while you're at it check the Antialiasing. It defaults to the lowest setting, and while its not that big of a deal here, it will rear its ugly head at some other time, and make you think something is terribly wrong.
Once its in the layout we can get to setting it up in events:
+ System: On start of layout
-> gradeDrawingCanvas: Fill Vertical linear gradient (0, 0) to (gradeDrawingCanvas.Width, gradeDrawingCanvas.Height) with rgba(255, 255, 255, 5) to rgba(0, 0, 0, 50)
Lets take a closer look at the action part of that.
For this gradient the starting point is the same as it origin, 0,0. Then we want its width to be that of the layout, but since its set already just reference its own width. Same for height.
The first color is rgba white with an alpha of 5. So it is almost opaque.
The second is rgba black, at 50 alpha.
The important bit is the direction. Making it basically top to bottom, and giving a gentle sunlight effect.
The second is rgba black, at 50 alpha.
The important bit is the direction. Making it basically top to bottom, and giving a gentle sunlight effect.
Remember the order in the layout will make the gradient sit on top if you don't place it at the bottom z wise.
The source file is located: Here
Comments
Post a Comment