Forums » Help » How to scroll the game's screen on phone?

Is there any class to achieve the function? I use finger to scroll the game's canvas,and scene will follow my finger touch.
I thought the way is change all the entities's coordinate that will move accordingly.
Another way is use iScroll lib, but I don't know how to use it.

I haven't worked with mobile devices but I assume that a touch results in a click and moving is a drag... so wouldn't something like this work?

http://pointofimpactjs.com/snippets/view/13/click-and-drag-screen

iScroll lib gives you scrolling... but not for a canvas.

Thanks Graphikos. The link you have given is very helpful to me.

But it also has a problem.It's can't work when I set the boundary.

	if(this.screen.y >= 0 && this.screen.y <= 60){
					this.screen.y -= ig.input.mouse.y - this.mouseLast.y;
					this.mouseLast.y = ig.input.mouse.y;
				}

You can try it and will find the problem.
The cause is update(), the screen.y may reach -1, and the if() is false

Yes, because -1 is not greater than or equal to 0, so you have to set up a new branch to cope with this.screen.y < 0...

I tryed this code:

if(ig.input.state('mouseLeft')) {
				if(this.screen.y<0){
					this.screen.y = 0;
				}else if(this.screen.y>60){
					this.screen.y = 60;
				}
				this.screen.y -= ig.input.mouse.y - this.mouseLast.y;
				this.mouseLast.y = ig.input.mouse.y;
			}

But I found when I get to the boundary, the canvas is shaking.......

It appears that the screen is moving over on update, then the next loop it finds that it has gone too far, so it resets the screen position...repeatedly.

Where you have this.screen.y -= ig.input.mouse.y you should first check if that value will cause the screen to go beyond it's bounds and if so, don't actually do it.
this might work:

nextPos = ( this.screen.y - (ig.input.mouse.y - this.mouseLast.y);
if ( nextPos > 0 || nextPos < 60){
this.screen.y -= ig.input.mouse.y - this.mouseLast.y;
}

Skywalker's logic is right: to avoid the "shaking", you have to check the position first then move if it's inside the border.
His code didn't quite work for me though, as I could still scroll past the borders.

nextPos = this.screen.y - (ig.input.mouse.y - this.mouseLast.y);
if (nextPos > 0	|| nextPos < this.bottomBorder) {
  this.screen.y -= ig.input.mouse.y - this.mouseLast.y;
}

What did work for me, however, was this:

//---//
this.rightBorder = ig.game.backgroundMaps[0].pxWidth - ig.system.width;
this.bottomBorder = ig.game.backgroundMaps[0].pxHeight - ig.system.height;
//---//
if (this.screen.y - (ig.input.mouse.y - this.mouseLast.y) < 0) {
 this.screen.y = 0;
 } else {
   if (this.screen.y - (ig.input.mouse.y - this.mouseLast.y) > this.bottomBorder) {
     this.screen.y = this.bottomBorder;
   } else{
     this.screen.y -= ig.input.mouse.y - this.mouseLast.y;}
 }
this.mouseLast.y = ig.input.mouse.y;