Build It with AGK: Textured Panel

In the last post, I directed you to a site to get a sound sample, I just want to take a moment to acknowledge what a great site this is.

http://www.grsites.com/

I've used it for some time as a source of textures for apps and web pages and have recommended it many times on forums.

We are going to use it again now to get a background texture for our panel.

To make it more fun, you can choose one. Any one at all starting at http://www.grsites.com/archive/textures/

I can be any texture you like, but I would suggest that it..

is quite small - around 30kb or less
looks good tiled - hover over with your mouse and it will show as a background
is not too dramatic - you want to be able to see the icons on top of it

These are just guides, not rules. Whichever you choose, save it to your media folder with the name "panel.jpg", "panel.png", "panel.gif" or whatever.

Basically call it panel with whatever extension it comes with.

Then use the same name in a line to load it at the start of the program (before the panel sprite is created)

panelImage = loadImage( "panel.jpg" )

For my example, I am going to use the one at http://www.grsites.com/archive/textures/view/source=archive/id=3022/

It is called marb009.jpg (so will be saved as panel.jpg), is 128 x 128 and has a file size of 4.1 KB

Now we change the line which creates the panel sprite to use the image we have just loaded.

panelSprite = createSprite( panelImage )

As it stands, this will use the image un-tiled, which looks like this.

What AGK has done here is scale up the image so that it fits the sprite exactly, which is what you would want in most cases.

In the case of our panel, we want the texture to be shown;

at its original normal size
repeated across the sprite as necessary.

The first step is to get the image to its normal size, this is done by scaling back the image using the following commands immediately after the createSprite() command line.

uScale# = getImageWidth( panelImage ) / physWidth#

vScale# = getImageHeight( panelImage ) / panelHeight#

setSpriteUVScale( panelSprite , uScale# , vScale# )

These calculate the scale of each axis by dividing the image size by the sprite size. Since the sprite is larger than the image, the result will always be smaller than 1.0. A value of 1.0 is what makes the image fit the sprite exactly as it did originally.

The resulting scale is then applied to the sprite which produces this

Original size, but not repeated. To get the texture to repeat across the sprite we add the following lines immediately after the Imageload() command line.

setImageWrapU( panelImage , 1 )
setImageWrapV( panelImage , 1 )

These sets the texture to repeat in both directions and produces