Little tutorial on scrolling a map/world made with my Map Editor.
First, the source code in full:
Import mojo2 Import brl Function Main() New MyApp End Class MyApp Extends App Field canvas:Canvas Field gfxShapes:Image Field touchX,touchY:Float Field prevTX,prevTY:Float Field scaleX,scaleY:Float Field scrollX,scrollY:Float Field touchXD,touchYD:Float Field scroll:Bool Field map:Int[] Field worldHeight:Int, worldWidth:Int Field mapX:Int Field mapY:Int Method OnCreate() canvas = New Canvas() gfxShapes = Image.Load("shapes.png") SetDeviceWindow(640,480,0) scaleX = DeviceWidth() / 640.0 scaleY = DeviceHeight() / 480.0 Local mapFile:=FileStream.Open("cerberus://data/map.dat","r") worldWidth = mapFile.ReadInt() worldHeight = mapFile.ReadInt() map = map.Resize(worldWidth * worldHeight) For Local i:Int = 0 To worldWidth * worldHeight - 1 map[i] = mapFile.ReadInt() Next mapFile.Close() mapX = 0 mapY = 0 End Method OnUpdate() touchX = TouchX() touchY = TouchY() If TouchDown(0) > 0 Then scrollX = (touchX - prevTX) scrollY = (touchY - prevTY) If Abs(scrollX) > Abs(scrollY) Then If scrollX < 0 Then mapX = mapX - 1 Else mapX = mapX + 1 Else If scrollY < 0 Then mapY = mapY - 1 Else mapY = mapY + 1 Endif If mapX < 0 Then mapX = 0 If mapX > worldWidth - 40 - 1 Then mapX = worldWidth - 40 - 1 If mapY < 0 Then mapY = 0 If mapY > worldHeight - 30 - 1 Then mapY = worldHeight - 30 - 1 Endif prevTX = touchX prevTY = touchY End Method OnRender() canvas.PushMatrix() canvas.Scale(scaleX,scaleY) For Local y:Int = 0 To 30 - 1 For Local x:Int = 0 To 40 - 1 canvas.DrawRect(x * 16, y * 16, gfxShapes, 0, map[mapX + x + (mapY + y) * worldWidth] * 16, 16, 16) Next Next canvas.Flush() canvas.PopMatrix() End End Class
Quite straight forward, but some words about the code.
In the Map Editor dat-file, the first 4 byte integer declares the width of the map, the second the height of the map in tiles. The size of the map is read first, then the map itself.
The scrolling is made with touch screen in mind.
The meaning of the Abs(…)-sentence is, that in which direction in the touch screen the finger is being moved most and then the map is scrolled into that direction.
The 256 color shapes of the world are from an Ultima IV remake and are free to be used. The original project is “xu4”, if my memory servers me right.
The source above is placed to public domain as a license.
Please, if you make a game (in any programming language) utilizing my code, show me, what you have achieved. I’m big fan of games of this kind of genre.
For the end a video regarding this post. At the beginning of the video there’s some scrolling: