Responsive design with image sprites

MIT App Inventor Help
1

Hello, so I am trying to build up a "room" for my character in a game. I have carpet, table, bed etc.

  1. How can I set their coordinates (so that they will be ok in every screen size)
  2. I know we can do "set imagesprite's height to (screen height/2)" but how can I do this if I want to place the image on the bottom of the screen?
  3. The images' sizes are alright now but what happens on a bigger screen?

Thank you so much you will save my life if you can solve my problems. Sorry for grammar mistakes I am unfortunately not a native speaker.

2

This sounds like a good application for SVG graphics in a WebViewer, if your device is recent enough to show them. (The stock AI2 emulator isn't.)
circle pad viewbox webviewer_SVG.aia (3.7 KB)

when button1 click
when button1 click987×636 55.4 KB

(draggable blocks)

You can build up your graphics using the AI2 text JOIN blocks, and feed them directly to a WebViewer for display, like in the attached sample.

SVG has good scalability compared to pixel graphics.

3

The emulator is on version 2.0 - of android. Try using AI Companion or download the app on your real phone. :grin:

4

I forgot to mention GenyMotion Free.

5

To set a sprite at the bottom of the screen simply subtract the sprite's height from the canvas height and use that number as the sprite's Y.

6

Also, when your app starts, you need to divide the available pixels in your canvas (canvas width or height) by the amount of tile sprites you want to place in it and use that as the sprite's width or height.
That way, no matter the size of the canvas, you will always have the same amount of tiles available.

2 Likes