How to create a Speedometer

Help & Support
1

I have been wanting to add a speedometer to this game that I am making and want to know the best way of doing it.

https://playcanvas.com/editor/project/735990

2

Don’t know the best way but i simply implemented by clamping the values of the euler angles of the needle of speedometer between 0 and top speed and then changed it’s angle according to the given speed.

1 Like
3

If you study and change this code for a compass you can achieve that

Output.prototype.drawRose= function(){
            this.clear(this.rosePaper);
            this.clear(this.needlePaper);
            this.rosePaper = Raphael(0,this.screenHeight-105/625*this.screenHeight, 100/1360*this.screenWidth, this.screenHeight);
            this.rosePaper.image(this.icRose, 0,0, 100/1360*this.screenWidth,100/625*this.screenHeight).attr({
                opacity: 1
            });
            this.rosePaper.image(this.icWind, 3,3, 93/1360*this.screenWidth,93/625*this.screenHeight).attr({
                opacity: 1
            });
            this.needlePaper = Raphael(10/1360*this.screenWidth,this.screenHeight-Math.round(95/625*this.screenHeight),80/1360*this.screenWidth,this.screenHeight-12/625*this.screenHeight);           
            var yaw = Math.atan2(this.Player.right.z, this.Player.right.x);
            var yaw_degrees = yaw * (180/Math.PI); // conversion to degrees
            if( yaw_degrees < 0 ) yaw_degrees += 360.0; // convert negative to positive angles
            var needle= this.needlePaper.image(this.needle,0,0,80/1360*this.screenWidth,80/625*this.screenHeight).attr({
                opacity:1,
            });
            needle.transform("R"+yaw_degrees);
           
        };
2 Likes
4

I have no clue how to make a gauge for a racing game
I am new to play canvas and am trying to learn java with playcanvas

5

Hi @DeductedFlame24!

What kind of gauge do you want to create?

6

A speedometer in Kilometers per hour

7

This is my Project
https://playcanvas.com/editor/scene/1033819

8

There are many different gauges one could implement. Give an example of one you like and show an approach you tried :slight_smile:

I would approach the topic as follows:

  1. Try out printing the KPH number.
  2. Create an Image with an easy straight gauge bar
  3. Scale the gauge bar depending on the KPH number
  4. Adjust to your likes

Cheers :rocket: