Scrolling on a canvas

Can anyone make this code work so that it scrolls smoothly ?
- at the moment it scrolls but it lags

Local x = GadgetWidth(Desktop())
Local y = GadgetHeight(Desktop())
'Graphics
Global background = LoadImage("background.jpg") 
'variables
Global mapXcenter = ImageWidth(background)/2
Global mapYcenter = ImageHeight(background)/2
Global characterX = 400
Global characterY = 300

Global Xoffset,Yoffset
Global ScrollBoarder = 100
'GUI
Local MyWindow:TGadget = CreateWindow("2DWindow",0,0,x,y)
Local MyCanvas:TGadget = CreateCanvas(0, 0 ,ClientWidth(MyWindow)-200  ,ClientHeight(MyWindow)  , MyWindow) 

Global mx:Int = 0
Global my:Int = 0
ActivateGadget MyCanvas
'MAIN LOOP
Repeat

 WaitEvent() 
 
  Select EventID()
  Case EVENT_WINDOWCLOSE
 	End
  Case EVENT_MOUSEMOVE
	
     mx=EventX()
     my=EventY()

	'scroll the map
	If EventX() < ScrollBoarder Then Xoffset:+10
	If EventX() > 800 - ScrollBoarder Then Xoffset:-10
	If EventY() < ScrollBoarder  Then Yoffset:+10
	If EventY() > 600 - ScrollBoarder Then Yoffset:- 10
		

	RedrawGadget(MyCanvas)	   

  Case EVENT_GADGETPAINT
 	SetGraphics CanvasGraphics (MyCanvas) 
	Cls
 	DrawImage background,(400-mapXcenter)+Xoffset,(300-mapYcenter)+Yoffset
	
	
	Flip

  
	
 End Select

Forever

What are you trying to accomplish?

It seems to scroll fairly consistently, as long as you keep moving the mouse. Is that how you want it to behave, or should it continue scolling without mouse movement as well?

The ultimate solution would be a rewrite I'm afraid..

What you want is an event-hooked function or method in a type which updates the map according to a given timer (which is also event-hooked)..

@xlsior

I'm trying to get it so that when the mouse is at the edge of the screen the image scrolls and when the mouse isnt at the edge of the screen it dosent scroll. But I can't get it to scroll smoothly its all jerky.

Event-hooks and timers are what you want.. really..

First you could may split the mouse movement and the scrolling.
The mouse move event set the scroll direction and the timer updates the canvas.

try this quick hack:

SuperStrict

Global background:TImage = LoadImage("background.jpg") 
Global mapXcenter:Int = ImageWidth(background)/2
Global mapYcenter:Int = ImageHeight(background)/2
Global characterX:Int = 400
Global characterY:Int = 300

Global Xoffset:Int,Yoffset:Int
Global ScrollBoarder:Int = 100
Global Scroll:Int


Global	Canvas1:TGadget

Local UpdateCanvas:TTimer = CreateTimer:TTimer( 120 )

Local Window1:TGadget = CreateWindow:TGadget("Window1",75,62,436,272,Null,WINDOW_TITLEBAR|WINDOW_RESIZABLE |WINDOW_STATUS |WINDOW_CLIENTCOORDS )
	Canvas1:TGadget = CreateCanvas:TGadget(0,0,436,272,Window1:TGadget,Null)
		ActivateGadget( Canvas1:TGadget )
		SetGadgetLayout( Canvas1:TGadget,EDGE_ALIGNED,EDGE_ALIGNED,EDGE_ALIGNED,EDGE_ALIGNED )

Repeat
	WaitEvent()
	Select EventID()
		Case EVENT_WINDOWCLOSE
			Select EventSource()
				Case Window1	Window1_WC( Window1:TGadget )
			End Select

		Case EVENT_MOUSEMOVE
			Select EventSource()
				Case Canvas1	Canvas1_MM( Canvas1:TGadget , EventX() , EventY() )
			End Select

		Case EVENT_GADGETPAINT
			Select EventSource()
				Case Canvas1	Canvas1_GP( Canvas1:TGadget )
			End Select

		Case EVENT_TIMERTICK
			Select EventSource()
				Case UpdateCanvas	UpdateCanvas_Timer( UpdateCanvas:TTimer )
			End Select

	End Select
Forever

Function Window1_WC( Window:TGadget )
	DebugLog "Window Window1 wants to be closed"
'	HideGadget( Window:TGadget )

	End
End Function

Function Canvas1_MM( Canvas:TGadget , x:Int , y:Int )
	Scroll=0
	If x<ScrollBoarder Then Scroll:|1
	If x>(ClientWidth(Canvas)-ScrollBoarder) Then Scroll:|2
	If y<ScrollBoarder Then Scroll:|4
	If y>(ClientHeight(Canvas)-ScrollBoarder) Then Scroll:|8
End Function

Function Canvas1_GP( Canvas:TGadget )
	DebugLog "Canvas Canvas1 needs to be redrawn"
	SetGraphics CanvasGraphics ( Canvas )
	SetViewport 0,0,GadgetWidth( Canvas ),GadgetHeight( Canvas )
	Redraw(Canvas)
End Function

Function UpdateCanvas_Timer( Timer:TTimer )
	'DebugLog "Timer UpdateCanvas ticked"
	Redraw(Canvas1)
End Function

Function Redraw(Canvas:TGadget)
	SetGraphics CanvasGraphics ( Canvas )
	SetViewport 0,0,GadgetWidth( Canvas ),GadgetHeight( Canvas )
	Cls
	If Scroll&1 Then Xoffset:-2
	If Scroll&2 Then Xoffset:+2
	If Scroll&4 Then Yoffset:-2
	If Scroll&8 Then Yoffset:+2
 	DrawImage background,(400-mapXcenter)+Xoffset,(300-mapYcenter)+Yoffset

	Flip
End Function

@JSP
Thankyou. It works!