Panel Components

The sliding panel will be made from two parts;

• the tray which will hold the icons
• the title which will be clicked to open and close the panel

The first of these - the tray - is created using a sprite in a similar way to the pointer, however in this case we are not going to use an image.

Specifying a zero instead of an image reference will create a blank sprite - which is a solid rectangle.

panelSprite = createSprite(0)
setSpriteSize( panelSprite , physWidth# , panelHeight# )
setSpritePosition( panelSprite , 0 , physHeight# )

This time the variable panelSprite is used to hold the reference for the created sprite.

The setSpriteSize() command is used to set the size of the sprite, which here uses the full display width and the  calculated panel height.

The setSpritePosition() command is used to position the sprite just off the bottom of the screen, which is where is starts in its closed position.

The Title is created using a Text Object.

Text Objects work in a similar way to Sprites, but are based on text strings rather than an image.

Many of the commands are similar but only their height is set from the program.  Their width is determined based on the font used.

As with sprites, a unique text reference is assigned to each text object.  The reference we are using is panelText.

We are going to set the text height based on the physical height of the screen, so the text size will always be the same no matter what the screen resolution is.  This will be stored in a variable called textHeight#.

Text can be either left aligned (0), centred (1) or right aligned (2) with the setTextAlignment() command, we are going to have it centred which uses the value 1.

The position of the text object is set with the setTextPosition() command.  We are going to position it centrally across the screen ( physWidth# / 2.0) and at the bottom.

Since text objects are positioned by their top, we subtract the text height from the display height to get the Y position of the top of the text.

The commands to do all of this are as follows;

panelText = createText( "Objects" )

textHeight# = physHeight# / 20.0

setTextSize( panelText , textHeight# )

setTextAlignMent( panelText , 1) 

setTextPosition( panelText , physWidth# / 2.0 , physHeight# - textHeight# ) 

The start up code now looks like this;

When run we can only see the text object, but it's in the right place which is a good start.

Next we will get it to open and close.