Make a Speedometer! (with Capx)

1

Attached Files

The following files have been attached to this tutorial:

.capx

speedometer.capx

Download now 191.29 KB

Stats

3,501 visits, 4,765 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.

Published on 26 Sep, 2014. Last updated 19 Feb, 2019

This simple tutorial will show you how to make a speedometer needle which goes up or down according to car.speed.

You'll need 3 sprites. Your car, the circle part of the speedometer, and the speedometer needle.

You need to have two layers. A "Game" layer with parallax set to 100, 100, and a "UI" Layer with parallax set to 0, 0.

Place your car sprite on the "Game" layer and give it the car behaviour.

Before placing your speedometer sprites, you need to set their origin points so they will line up and rotate properly. Make sure the circle's origin point is in the exact center and make sure the needle's origin point is exactly the point that you need it to rotate from.

Next, using the dashed window outline as a guide, Place the circle sprite on the "UI" layer wherever you like. When you have it placed where you want it, copy its x and y positions. Now place your Needle sprite in the exact same location by pasting the x and y values of the circle sprite.

Great. Almost finished.

Now we just need to calculate a formula which tells us what the needle's angle should be based on the car's speed. Luckily, you don't have to be a mathematician to figure this out. All you need is a two-point form calculator such as this one: http://www.mathportal.org/calculators/analytic-geometry/two-point-form-calculator.php

As you can see, it's asking us for four numbers.

The car's speed is the variable which sets the angle of the needle, so these 2 numbers represent our Xs:

X1: Car's minimum speed (0)

X2: Car's maximum speed (we'll use the default of 350)

Leaving these 2 numbers to represent our Ys:

Y1: Needle's minimum angle (we'll use 135)

Y2: Needle's maximum angle (we'll use 315)

Plug these numbers in. Then hit calculate and it gives us the formula 18/35x + 135.

The X (variable) in this case is our car.speed, remember?

So now all we have to do is make an event using this formula (but replacing the x with sprite.car.speed) which sets the needle angle every tick like this:

(my sprite is named car, so "sprite.car.speed" is "car.car.speed" in this case. don't let that throw ya)

Still one thing left to add. You'll notice, if your car goes in reverse, the speedometer rotates backwards. To fix this, we simply need to tell our car.speed variable to only return it's absolute value (no negatives). So we change our event to this:

and voila!

That's how you make a speedometer in C2.

.CAPX

speedometer.capx

Download now 191.29 KB
  • 0 Comments

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