How to zoom or scale an image inside the game
Monkey Forums/Monkey Beginners/How to zoom or scale an image inside the game
| ||
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 |
| ||
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 |
| ||
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. |
| ||
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. |
| ||
Draw your image in the middle of the screen using DeviceWidth()/2 and DeviceHeight()/2. |
| ||
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 |
| ||
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 |
| ||
Perfect! That worked. Thanks!!! |
| ||
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. |
| ||
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! |
| ||
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 |
| ||
Supertino, I got the rotation to work too. It's super cool. Thanks1 |
| ||
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 ? |
| ||
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. |