So I'm trying to make a visual novel Esc app for an assignment, and I want to overlay 2 images. One to be the background, and another to be a character sprite. I tried using a canvas as the background and using the image_sprite inside the canvas, but I couldn't figure out a way to make it work. ; ' - '
The specific problem I'm having is that the Character Sprite I add to the canvas does not scale with the canvas when switching to different screen sizes. I can only change the size of the character sprite via pixels, when using the automatic or fill parent options the image is very zoomed in and extends outside of the screen.
So then when i size the image to fix in one screen size, it no longer fits in another.
set the Canvas size in pixels to the smallest device you want to display, perhaps 505 H x 320 W
set the Canvas Background with an image consistent with the Canvas size.
set the ImageSprite's size appropriate to the Canvas size
In that way the the sprite size will always be appropriate despite the Screen size on various devices. The Canvas will always be the same size in pixels on all devices in the appropriate dimensions if you use Responsive Screen Sizing . Users with higher resolutions will use the small Canvas and see a 'smaller' Canvas. However you can use a Fixed ScreenSizing to up size the Canvas on the higher resolution devices.
Use Fixed ScreenSizing instead of Responsive to simulate the small screen size on higher resolution device screens to get a full screen 'look'.
I did try setting the image size using pixels in that way. I do want them to scale up for larger screens, the problem I'm facing is the Canvas and Character sprite are not scaling in the same way. the canvas increases in size to fit the screen, but the character sprite does not. I need the character sprite to be centered on the background, so when I switch to a larger screen, the canvas scales, but the sprite is left in the corner, and no longer fits the page.
If you set the ImageSprite in pixels and the Canvas both in pixels, they should scale appropriately to various sized screens on other devices. Are you using Fixed Screen sizing?
Do not depend on Automatic or Fill Parent. Use only pixels and you should be ok.
This way the imageSprite will maintain a size related to the canvas (adjust the "0.25" to your liking), and be centred on the canvas. (You can replace canvas.height with canvas.width if you have, for example, a square image and the canvas is not square). The clock is needed to give the canvas time to catch up with itself! You may need to increase the interval if 50ms is not enough for your devices.
