Clock in Construct 2

2

Attached Files

The following files have been attached to this tutorial:

.capx

Stats

3,833 visits, 5,649 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Someone asked me some time ago that could I make analogue clock? I did not have time as I was working for someone on project. As I am free at the moment. I thought I will create analogue clock for you beginners. Not hard to make in Construct 2 code. Depend on how fancy or impressive you want to design. Mine is simple one.

Also this person said not to use any plug-in, only in C2. Well you or anyone can do this. All you need is logically adding code. We know that 60 seconds in one Minute. 60 Minutes in one Hour and on clock dial we see 12 hours numeral. Please some of you will argue with me and say there are 24 numeral clock is well but, so what. Now let’s start with our clock in C2.

1. Create new project and name it Clock

2. Set windows size to 640 x 480

3. Set layer and margin size same 640 x 480

4. Now create 4 layers and named them as below

Second-hand

Minutes

Hours

Dial

Note make sure your grid set to 32 x 32 and all your sprite should be snap to grid

Locked layer second-hand, Minutes and hours. Why we locking this because when we start adding our Second, minute and hours hand, we don’t want to make any mistake with other layers. Now you can create your own sprite or you are free to use mine. For dial you will need something simple like below:

Place your dial somewhere on left hand side and lock dial layer.

Add sprite hour holder and hour hand

Now place you Hour holder in centre of your dial. Once you done this we will pin hour hands with code so place your hour hand on top of your hour holder. Lock the hour layer

unlock Minute layer and do the same as above add this minute hand and minute holder once you done this lock minute layer.

Unlock Seconds layer and add this two sprites and place them as above.

Now add three text box and name them

txtSeconds

txtMinutes

txtHours

once you done this your screen should look like below:

Now open your event editor and add these global variables below:

Now add this code below:

Now if you have followed the tutorial you should have working clock. With this you could add system time and start your clock according to your time zone. Go ahead and learn from this. Merry Christmas to each and everyone. Merry Christmas Ashley, Tom, Julian rest of crew

.CAPX
  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!