Scrolling a Picture Larger Than Visible Area in Monkey X

A little tutorial on scrolling a picture that is larger than the visible area of the screen in Monkey X.

In this example we will be using a picture of 1280 x 960 pixels in “native” resolution of 640 x 480 pixels. The source is primarily meant to Android target but works for example to desktop target too.

The picture is scrolled by moving a finger on the Android device. In order to avoid the picture to “jump” after not scrolling the picture, variables related to scrolling speed must be set to zero.

Lets have a look at the source code:

Import mojo

Function Main()
	New MyApp
End

Class MyApp Extends App

	Field bg:Image
	Global touchX,touchY:Float
	Global prevTX,prevTY:Float
	Global scaleX,scaleY:Float
	Global scrollX,scrollY:Float
	Global touchXD,touchYD:Float
	Global scroll:Bool
	
	Method OnCreate()
		' Change this to picture, you want to use
		bg = LoadImage("bg1280x960.png")

		SetDeviceWindow(640,480,0)
		scaleX = DeviceWidth() / 640.0
		scaleY = DeviceHeight() / 480.0
		
	End
	
	Method OnUpdate()

		touchX = TouchX()
		touchY = TouchY()
		
		touchX = touchX / scaleX
		touchY = touchY / scaleY
										
		If TouchDown(0) > 0 Then
			If scroll = True Then
		
				' touchXD & touchYD variables prevent the picture
				' to "jump", if scrolling is stopped and user then
				' touches somewhere on the screen

				touchXD = touchX
				touchYD = touchY
			Else
				' if not scrolling, values below are set to zero,
				' because when the scrolling starts again, otherwise
				' scrollX & scrollY could change too much because of
				' values of previous scrolling
				
				touchXD = 0
				touchYD = 0
				prevTX = 0
				prevTY = 0
			Endif
			
			scroll = True
			
			scrollX = scrollX - (touchXD - prevTX)
			scrollY = scrollY - (touchYD - prevTY)
		
			prevTX = touchX
			prevTY = touchY
		Else
			scroll = False
		Endif

	End

	Method OnRender()
		PushMatrix()
		Scale(scaleX,scaleY)
				
		If scrollX > 0 Then scrollX = 0
		If scrollX < -(1280 - 640) + 1 Then scrollX = -(1280 - 640) + 1
		If scrollY > 0 Then scrollY = 0
		If scrollY < -(960 - 480) + 1 Then scrollY = -(960 - 480) + 1
		
		DrawImage bg,scrollX,scrollY
		PopMatrix()
	End
	
End Class

Examine the source code and learn. Source code license: Public Domain.

Below is a video related to this post:

 

%d bloggers like this: