Jump to content

Any idea how to stop object from flickering


DNGunpla
 Share

Recommended Posts

Currently I am working on a project that requires moving the clock hands, where the hour hand moves 30 degrees while the minute hand moves by 6 degrees.

Example:
https://gyazo.com/72f11ae5f8fdefdbc96c502f7d7fbc48

However,  I have this issue of the object flickering whenever I stopped at a point.

Issue Example:
20180418_100149.jpg

Right now this is my code for moving the minute hand and the hour hand

Quote

dragMinutes: function(){
        this.calculateAngles(minute);
      
        minutes += direction; //0.5 is speed
      
        hours = (minutes/1440)*24; //24h = 1440 minutes,

    },

    dragHours: function(){
        this.calculateAngles(hour);
        
        hours += direction; //0.05 is speed

        
        //minutes = hours* 60;
    },

    calculateAngles: function(dial){
        //round to whole numbers
        mouseangle = Math.floor(this.game.physics.arcade.angleToPointer(dial)*180/Math.PI);
      
        //difference between mouse and dial
        difference = Math.abs(mouseangle - dial.angle);
      
        //if reached 9 o clock going counterclockwise, reverse the difference calculation.
        if(difference>180){
            difference = 180 - mouseangle + dial.angle;
        }else{
            difference = mouseangle - dial.angle;
        }
        
        if(difference < 0){
            direction = -1;
        }else if (difference == 0){
            direction = 0;
        }else if (difference > 0){
            direction = 1;
        }
    },


In the Update Function:
 

Quote

if (minute.input.pointerDown())
        {   
            minutes = hours*60;
            this.dragMinutes();
        }
      
        if (hour.input.pointerDown())
        {   

            this.dragHours();
        }

 minute.angle = minutes*6 -90;//6 degrees = 1 minute, 90 degrees, because 12 o clock is facing upward
        minute.angle = Math.round(minute.angle);

hour.angle = hours*30-90; //30 degrees = 1 hour
        hour.angle = Math.round(hour.angle);


Is there anyway to fix it?

Link to comment
Share on other sites

Don't "snap" the clock hands to time right away, when you move them. Snap them to realtive measurements when you release the mouse button. That's all I can say at this point, maybe someone more skilled will tell you how to fix this more easily.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...