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: