Jump to content

  • Log In with Google      Sign In   
  • Create Account

Techniques for "Smooth" camera scroll with mouse

  • You cannot reply to this topic
No replies to this topic

#1 thefollower   Members   -  Reputation: 252


Posted Yesterday, 06:36 PM

I have made a scrolling function on my canvas that lets the user click and drag their view point.

Currently it moves with raw mouse movement. But I wanted to know what are common techniques people use to apply a smoother feel to it.

My current function looks like this:


function drag(evt,el){
if(evt.button == 2){
    mousePos = {};
    mousePos.x = evt.offsetX / scale;
    mousePos.y = evt.offsetY / scale;

    function update(e){
    var difx = mousePos.x - (e.offsetX/scale),
        dify = mousePos.y - (e.offsetY/scale);

        camera.x += difx;
        camera.y += dify;
        mousePos.x = e.offsetX / scale;
        mousePos.y = e.offsetY / scale;
  function clear(){
     el.removeEventListener('mousemove', update, false);
     this.removeEventListener('mouseup', clear, false);
element.addEventListener('mousedown', function(e) { drag(e,this);}, false);

I have added a jsFiddle of this function working too http://jsfiddle.net/jmnte8cL/

So, what are common simple ways to smooth out the scrolling so it feels a bit less dry that are commonly used in games?