Like in movies, documentaries or anything video-related, zooming an image in and/or panning an image to show off a scenery of certain areas of it goes a long way to make your game more immersive or a little more dynamic than just with static images.
Zoom method VS size and crop method
# Size and Crop method
show fawn_cg with dissolve:
size(1920,1080) crop (100,400,960,540)
# Zoomed position method
show fawn_cg with dissolve:
xpos 0.88 ypos 1.28 xanchor 0.5 yanchor 1.0 zoom 2.0
# Back to the whole image
scene fawn_cg with dissolveThe first two code snippets roughly will give you the same zoomed-in image:
- Zoom the image in at 200%
- Move the image 100px off the left of the window and 400px off the top
- Or move it 12% off the left side and 28% off the bottom
I personally prefer the zoom method, as this is what I get when picking the image location through the 3D camera, saving me a lot of trial and error that I previously had when using the size and crop method.
Panning an image with linear
# Size and crop method scene meeting_leos with dissolve: size (1920, 1080) crop (720, 531, 1012, 548) linear 12 crop (720, 100, 1012, 548) # Zoomed position method scene meeting_leos with dissolve: xpos 0.5 ypos 1.0 xanchor 0.66 yanchor 0.93 zoom 2.0 linear 12 yanchor 0.59
Forgive the potato gif. These are hard to make without weighing too much. I promise it looks much better in the actual game.
- Like in the first example, you state a position that’s preferably zoomed-in
- “linear” moves the image at a steady speed. You can also use “ease” and “easein” for different speed settings. Different warping methods are explained here.
Won’t my zoomed-in image be blurry?
If your images are the same size as the game window (in our case 1920×1080 px), then yes it’s going to happen. If you can, I really recommend you to make your assets as large as possible, and then scale them down for your game build. You’ll thank yourself later for doing this. That said, stretched images don’t look much worse than a lot of games or youtube videos stretched in fullscreen.
If the stretching is really a concern to you (as it was for me), and you don’t have a bigger version of your images in handy, then you could try upscaling your image with waifu2x. It’s a free and open-source program that can denoise and upscale images with almost no quality loss.
We used it to upscale our “close” sprites, for the backgrounds and most of our current CGs. To make the files lighter, we converted them to jpg with the quality to 97% and frankly, I didn’t start to notice any difference until I zoomed the newly upscaled image at more than 300%. Note that upscaling images may require you to adjust your game code with the new resolution.
First image is the vanilla one, second one’s resolution was doubled with waifu2x. If you’re unsure about using it, you can try out the web version.
And that wraps up this Making-of! There is plenty more I could say about image upscaling and panning, but this will do for now.
If you have any questions or need some help with doing what was demonstrated here, feel free to ask Two and a Half or me on Twitter. We don’t bite!