From TDN

This page is a Work In Progress.

Contents 1 What Time Is It 1.1 What you'll need 1.2 Where to Begin 1.3 The Code

What Time Is It

This is a simple little tutorial that explains the basics of Mounting and Rotations -- this tutorial does not use any script, with the exception of a few lines of code which is attached to the Image buttons used to increment/decrement the Hour/Minute hands of the clock.

Here's is what the end result will be:

What you'll need

If you'd like to download the artwork, here it is:

The face of the clock:

The hour hand:

The minute hand:

The center piece:

Where to Begin

First, you have to import all of your artwork into TGB, once done with this, start placing one copy of everything into the scene and set the position of the object to X=0,Y=0 (0,0) so that everything is centered.

Now, set the size of your clock face to Width=60,Height=60 and then place two blank t2dSceneObjects into the scene. Place the t2dSceneObjects at positions X=0,Y=0 (0,0) and then resize them to Width=60,Height=60. Your scene objects should now be the same size and in the same location as your clock face.

Let's go to our Project Tab, select the first t2dSceneObject then move over to the Edit tab and roll out the 'Scripting' section. Let's name this t2dSceneObject 'smallHand'. Now find your 'small hand' sprite and hover over it and select the 'mount this object to another object' option and then mount the 'small hand' sprite to the 'smallHand' t2dSceneObject so that the sprite puts the hand in what appears to be an appropriate place for a 'small hand' ('hour hand') to be located. As you can see from the screen shot above, the bottom of the hand should be just past the center piece.

Now, repeat the steps above for the 'big hand' ('minute hand') so that everything looks about right.

To test your 'clock', you can select the 'smallHand' or 'bigHand' t2dSceneObject's from the Project Tab then jump over to the Edit tab and change the rotation. For hours, increments of 30 are complete hours -- for Minutes, increments of 6 are complete minutes. So, a Rotation of 60 for the 'smallHand' object should point it at the 2 and a rotation of 60 should put the 'big hand' at the 3.

The Code

THIS IS A WORK IN PROGRESS -- And as such, is incomplete, but the complete code from the 'ui.cs' for this program is below:

// this is just a quick and dirt way of doing it
// there are better "cleaner" ways of doing this
// but this is the most clear

function hDown::onMouseUp(%this, %modifier, %worldPosition, %clicks)
{
   smallHand.setRotation(smallHand.getRotation() - $HOUR_INCREMENT);
}

function hUp::onMouseUp(%this, %modifier, %worldPosition, %clicks)
{
   smallHand.setRotation(smallHand.getRotation() + $HOUR_INCREMENT);
}

function mDown::onMouseUp(%this, %modifier, %worldPosition, %clicks)
{
   bigHand.setRotation(bigHand.getRotation() - $MINUTE_INCREMENT);
}

function mUp::onMouseUp(%this, %modifier, %worldPosition, %clicks)
{
   bigHand.setRotation(bigHand.getRotation() + $MINUTE_INCREMENT);
}

function updateCurrentTime()
{
   %hour = smallHand.getRotation();
   %hour = %hour / $HOUR_INCREMENT;
   %minute = bigHand.getRotation();
   %minute = %minute / $MINUTE_INCREMENT;
   
   // zero-padding
   if(%hour < 10) %hour = "0" @ %hour;
   if(%minute < 10) %minute = "0" @ mRound(%minute);
   currentTime.Text = "CURRENT TIME: " @ %hour @ ":" @ %minute;
}