Title scene: Labels
Now for some graphics.
We will create a title for the game.
Pulpcore has a few widgets for helping to create a GUI.
For our title we shall use the Label widget.
The label widget is a sprite with some extra bells and whistles to make it act like a label.
First we setup some position coordinates.
Then we create a new label using the Font we load from the resources singleton and set it to display the text “Pong”.
Finally we set the sprites anchor point. By default sprites are anchored by their top left corner. Luckily for us Pulpcore lets us change this anchoring.
I have chosen to anchor the sprite by its center. Play around with a few of the different anchor position and you will quickly see how this a pretty nifty feature.
Now for some fun. A static label displaying the word “Pong” is adequate for a title if a little boring.
Pulpcore has a lot of nifty features using the animation timelines that can quickly make this a bit snazzier.
First we make the title invisible and then using the timeline object we created earlier add some cool animations to the text.
With a timeline we can animate several of the sprites properties. In this case we are going to animate the text labels width and height at the same time to give it a springy bounce up out of nowhere effect.
We tell the time line to animate the selected property, the starting value, the final value, the length of time to animate the effect over, the easing to use and how long to delay the start of the animation.
So we set the texts width property, start it at size 0, end it at the text current width, animate it for 1.5 seconds, use the elastic out easing and start it now.
You may be wondering what easing are. Easing are some preset effects that can be applied to these property animations.
There is a good demo of these in effect here.
Next we create the games instructions. These follow all most identically to the title text.
The only real difference is we use a short delay so that they “Pop” on the screen a little bit after the title has started to animate to create a nifty water fall effect of GUI elements down the screen.