Need help zooming in...

Monkey Forums/Monkey Programming/Need help zooming in...

SLotman

(Posted 2013) [#1]

I posted this exact same question on blitzbasic.com a long time ago, when I was working with monkey html5 demo and had no access here on the forum.

Since I suspect my chances of getting a reply is way better here, I'm trying it again ^_^

The thing is: I have a halfway done minefield style game, but I'm stuck with this zooming problem.

I'm trying to zoom where the player touches (or at the center of a 2 fingers position) on a small part of the screen (a 600x600 area) - but for the life of me, I can't figure out how to do it properly!

Not only it needs to zoom in around where the player clicks, but it shouldn't show "black borders", so the visible area shouldn't scroll outside it's dimensions. (I think this 'black borders' part I solved... but that's it)

Here's (a simplified version of) what I have:

#If TARGET="glfw"
	#GLFW_USE_MINGW=True
	#GLFW_WINDOW_WIDTH=800
	#GLFW_WINDOW_HEIGHT=600
	#GLFW_WINDOW_FULLSCREEN=False
#End

Import autofit
Import mojo

Class color
   Field R:Int, G:Int, B:Int
End Class

Class zoomTest Extends App
   Field colors:color[100]      ' just to hold all colors on screen
   Field zoomX:Float, zoomY:Float ' position where you clicked on screen
   Field curZoom:Float            ' current zoom level
   Field zoomEnabled:Bool         ' are we zooming in?
   
   Method OnRender()
      UpdateVirtualDisplay()      

      Cls
      
      PushMatrix() 
      
      If zoomEnabled Then
         ' update zoom
         If (curZoom<1.499) Then
            curZoom = curZoom + (1.5-curZoom) * 0.15
            If curZoom > 1.499 Then curZoom = 1.5
         Else 
             curZoom = 1.5
         End If

         ' new, scaled position with current zoom
         Local centerX:Float = zoomX*curZoom
         Local centerY:Float = zoomY*curZoom
         
         ' the "real" visible area is still 600x600, so center this new position
         Local posX:Float = 300-centerX
         Local posY:Float = 300-centerY
         
         ' do not let it go outside the whole player area, showing blakc borders
         ' here blocks upper and left part from showing black borders
         If posX>0 Then posX=0
         If posY>0 Then posY=0
         
         ' here blocks right and bottom parts from showing black borders         
         Local diff:Float = (600.0*curZoom)-600.0
         If posX<-diff Then posX=-diff
         If posY<-diff Then posY=-diff  
         
         ' actually moves and zoom to this new position
         Translate posX, posY
         Scale curZoom, curZoom
      End If

      ' draw grid
      For Local y:Int = 0 Until 10
	      For Local x:Int = 0 Until 10
	         SetColor colors[x+y*10].R, colors[x+y*10].G, colors[x+y*10].B
	         DrawRect x*64, y*64, 63, 63
	      Next
      Next
      SetColor 255,255,255
      DrawText "play area", 10,10

      ' restore the matrix, so it's possible to draw the right-fixed panel      
      PopMatrix()
      
      ' draw "fixed" panel
      SetColor 255,0,0
      DrawRect 600,0,200,600
      SetColor 255,255,255
      DrawText "Fixed area", 600,10
   End Method
   
   Method OnUpdate()
       If MouseHit(MOUSE_LEFT) 
          If zoomEnabled=False Then
	        zoomX = VMouseX()
	        zoomY = VMouseY()
	        curZoom = 1
	        zoomEnabled = True
          Else
            zoomEnabled = False
          End If
       End If
       
		 If KeyHit(KEY_ESCAPE) Then Error ""

   End Method
   
   Method OnCreate()
      SetUpdateRate 60
      SetVirtualDisplay 800,600
      
      colors = New color[10*10]
      For Local f:Int=0 Until 10*10
         colors[f] = New color()
         colors[f].R = Rnd(255)
         colors[f].G = Rnd(255)
         colors[f].B = Rnd(255)
      Next
      
      zoomEnabled = False
      curZoom = 1
   End Method
End Class

Function Main()
   New zoomTest()
End Function

If you click on the upper-left corner, the zoom behaves as expected. Anywhere else, it "jumps" around and behaves erratically.

Bear in mind, the final zoom position appears to be correct - just when moving from no scale to zoomed in, the "play area" bounces around.

I don't even know how I'm going to implement scrolling into this zoomed area, or even how to pick a rectangle from it... but without even solving this zoom problem, there is no point to even waste time on this.

Has anyone implemented zoom into their games and could spare some hints?

Edit: commented the code a little more.

Midimaster

(Posted 2013) [#2]

I did the same on my Cheese-Box game...

Download it on your Android Smartphone to test, whether this is what you are looking for:

https://play.google.com/store/apps/details?id=com.midimaster.cheesebox&feature=search_result

I created a simple gesture class which returns "increasing" or "decreasing" flags when the user has the fingers on the display.

So TempZoom() returns 0.95 or 1.00 or 1.05 as a multiplication factor for current Scaling#.

And TempX() and TempY() return -0.1 or 0.0 or +0.1 as a addition value for current point of origin ScrollX# and ScrollY#.

The smoothyness of "Zoom In"'s and "Zoom Out"'s are not trivial. I struggled around for some time, but in the end I was content with this results:

Method ProcessGameGesture:Void()			
	Scaling=Scaling*Gestures.TempZoom()
	If Scaling<1 Then Scaling=1
	If Scaling>1.75 Then Scaling=1.75
	
	ScrollX=ScrollX - Gestures.TempX()		
	ScrollY=ScrollY - Gestures.TempY()		
	If (ScrollX<0)
		ScrollX=0
	Elseif (((DeviceHeight()-ScrollX)*Scaling)<DeviceHeight())
		ScrollX=(DeviceHeight()*Scaling-DeviceHeight())/Scaling
	Endif
	If (ScrollY<0)
		ScrollY=0
	Elseif (((DeviceHeight()-ScrollY)*Scaling)<DeviceHeight())
		ScrollY=(DeviceHeight()*Scaling-DeviceHeight())/Scaling
	Endif
End

To infer the real game coordinates form the zoomed and moved screen is very simple:

....
RealX#=TouchX(0)
RealX=RealX/Scaling + ScrollX

Hope I could help....