How to zoom or scale an image inside the game

Monkey Forums/Monkey Beginners/How to zoom or scale an image inside the game

En929

(Posted 2014) [#1]

I'm having trouble creating an in-game animated zoom effect for my TitleScreen. I want to create the effect that my title screen is coming towards the screen from the middle of the screen. Thus, what do I add to my code below to create this effect. Thanks!


Import mojo



Class ScalingTest Extends App
	
	
Global TitleScreen:Image
Global TitleScreenX: Int = 235
Global TitleScreenY: Int = 140
Global TitleScreenW: Int = 200
Global TitleScreenH: Int = 133
Global ScaleX: Int = 1
Global ScaleY: Int = 1


	Method OnCreate()
		
		SetUpdateRate(60)
		
		TitleScreen= LoadImage("HFighter.jpg",TitleScreenW, TitleScreenH,Image.MidHandle)
		
	End
	


	Method OnUpdate()
	
	
	End
	


	Method OnRender()
	

	

	Scale (ScaleX,ScaleY)
	
	
	DrawImage(TitleScreen,TitleScreenX,TitleScreenY)
	

	
	End
	

	
End

Function Main()

	New ScalingTest()

	
End

therevills

(Posted 2014) [#2]

Try using the second version of DrawImage:
http://www.monkeycoder.co.nz/docs/html/Modules_mojo.graphics.html#DrawImage%282%29

So you would have something like this:

Import mojo

Class ScalingTest Extends App
  Field TitleScreen:Image
  Field TitleScreenX: Int = 235
  Field TitleScreenY: Int = 140
  Field TitleScreenW: Int = 200
  Field TitleScreenH: Int = 133
  Field ScaleX: Int = 1
  Field ScaleY: Int = 1

  Method OnCreate()
    SetUpdateRate(60)
    TitleScreen= LoadImage("HFighter.jpg",TitleScreenW, TitleScreenH,Image.MidHandle)
  End

  Method OnUpdate()
    If KeyDown(KEY_UP)
      ScaleX += 1
      ScaleY += 1
    End
    If KeyDown(KEY_DOWN)
      ScaleX -= 1
      ScaleY -= 1
    End    
  End

  Method OnRender()
    Cls
    DrawImage(TitleScreen,TitleScreenX,TitleScreenY,0,ScaleX,ScaleY)
  End
End

Function Main()
  New ScalingTest()
End

Paul - Taiphoz

(Posted 2014) [#3]

If you scale an image thats got no padding you might get artifacts. . So if you notice some odd extra pixels just give your sprite a little extra padding.

En929

(Posted 2014) [#4]

Wow that worked exactly the way I wanted it to scale, thanks. I have one more question. With the above code, how would i get it to scale from the center of the screen?

BTW Paul, thanks for the tip on padding.

therevills

(Posted 2014) [#5]

Draw your image in the middle of the screen using DeviceWidth()/2 and DeviceHeight()/2.

En929

(Posted 2014) [#6]

I tried implementing the DeviceWidth()/2 and Device Height()/2 as below. I'm not sure if I did it correctly, because it's still not going in a straight forward manner like in the link. In the way I have it below, it's still going sideways:


Import mojo

Class ScalingTest Extends App
  Field TitleScreen:Image
  Field TitleScreenX: Int = 235
  Field TitleScreenY: Int = 140
  Field TitleScreenW: Int = 200
  Field TitleScreenH: Int = 133
  Field ScaleX: Int = 1
  Field ScaleY: Int = 1

  Method OnCreate()
    SetUpdateRate(60)
    TitleScreen= LoadImage("HFighter.jpg",TitleScreenW, TitleScreenH,Image.MidHandle)
  End

  Method OnUpdate()
    If KeyDown(KEY_UP)
      ScaleX += 1
      ScaleY += 1
    End
    If KeyDown(KEY_DOWN)
      ScaleX -= 1
      ScaleY -= 1
    End    
  End

  Method OnRender()
    Cls

'Here is where I tried implementing the DeviceWidth()/2 and DeviceHeight()/2,
'but maybe I didn't do it right since is still scaling sideways instead of forward

    DrawImage(TitleScreen,DeviceWidth()/2,DeviceHeight()/2,0,ScaleX,ScaleY)
  End
End

Function Main()
  New ScalingTest()
End

therevills

(Posted 2014) [#7]

Yeah that looks okay... I've cleaned it up a bit and changed the scales to be a float, so try this:

Strict

Import mojo

Function Main:Int()
	New MyApp()
	Return True
End

Class MyApp Extends App
	Field titleScreen:Image
	Field titleScreenX:Int
  	Field titleScreenY:Int
	Field scaleX:Float = 1
	Field scaleY:Float = 1

	Method OnCreate:Int()
		titleScreen = LoadImage("test.png", 1, Image.MidHandle)
		titleScreenX = DeviceWidth() / 2
		titleScreenY = DeviceHeight() / 2
		SetUpdateRate(60)
		Return True
	End
	
	Method OnUpdate:Int()
		If KeyDown(KEY_UP)
			scaleX += 0.1
			scaleY += 0.1
		End
		If KeyDown(KEY_DOWN)
			scaleX -= 0.1
			scaleY -= 0.1
		End
		Return True
	End
	
	Method OnRender:Int()
		Cls
		DrawImage(titleScreen, titleScreenX, titleScreenY, 0, scaleX, scaleY)
		DrawText "Scale :" + scaleX + "," + scaleY, 10, 10
		Return True
	End
End

En929

(Posted 2014) [#8]

Perfect! That worked. Thanks!!!

Gerry Quinn

(Posted 2014) [#9]

if you want something more elaborate (e.g. if your title screen is composed of several images etc.) you can look into the matrix operations and global scale and rotate functions. For a single image, though, you don't need that.

En929

(Posted 2014) [#10]

Yes, while I'm at it, how would the rotation function work with the same code that I have above to get the title jpg to rotate from the center axis? What all do I add to my code for that? Thanks!

Supertino

(Posted 2014) [#11]

There is a rotation flag in the DrawImage function, in your code above you've set it to 0

or as Gerry said there are Matrix commands but for a single image it's best to use the flags in the DrawImage command.

pushmatrix
SetScale 2.0,2.0
SetRotation 45
DrawImage blah1,300,300
DrawImage blah2,100,100
popmatrix

En929

(Posted 2014) [#12]

Supertino, I got the rotation to work too. It's super cool. Thanks1

sionco

(Posted 2014) [#13]

you scale an image thats got no padding you might get artifacts. . So if you notice some odd extra pixels just give your sprite a little extra padding.

I'm scaling tiles, Do you do this with the actual graphic, ie add a transparent border around the graphic in the graphics program ? or in monkey with ImagePaddingXY ?

Paul - Taiphoz

(Posted 2014) [#14]

Use which ever you need for the task, some times it's easier to simply pad them in your art tool, other times when your dealing with heavily packed art you might want to resort to xy padding in code, both should work just fine.