Is Canvas Compatibility Possible Across Multiple Resolutions?

[Austin Merrick]

When making games using the canvas I'm running into some difficulties.  I have the canvas on fill so that it fills the rest of the screen like so: https://gyazo.com/22d90d5176efece916bcc36e01f2782f.  The problem is that the resolution keeps changing per phone so I can't get any reliable variables.  The sizes, positions, and speeds of the objects act different on every device since they are on different sized canvases!  Is there anyway I can just automatically scale everything so it's just like it is in the app maker client?  This is starting to drive me crazy.  Thanks for getting through the post, any help is greatly appreciated.

edit: I found this http://www.imagnity.com/tutorials/app-inventor/universal-screen-size-using-app-inventor/ which is helpful, but it does not specifically target canvases.  Would i be able to apply this principle by using the blocks to set the size, positions, and speeds of objects to %'s of the canvas size?  One problem I would imagine that would still cause issues after this would be differences in the ratio between height and width though.  I just want the same gameplay on every device! Is there something I'm missing?

[Min Zarni Aung]

Yes, it is possible to apply that tutorial in your app, you can do it with the canvas. It is right that you will have some problems in different ratio with different devices. But you can adjust that by varying the size of minor sprites, like in your picture, you can make the water level deeper or vice versa.
If you want the whole canvas to be the same ratio, use four border labels or imagea around the canvas, put all inside the arrangement. Then you could only change the thickness of the surrounding labels and leave the canvas with the same ratio you want.

[SteveJG]

You have probably read some of the chapters in Dr. Wolber's free online book (   http://www.appinventor.org/book2      ). You certainly read chapter 17..Creating Animated Apps  (  http://www.appinventor.org/bookChapters/chapter17.pdf  ) and found a very concise description of 'how the Canvas object is designed.'    Knowing that and the official MIT description of the Canvas object (  http://ai2.appinventor.mit.edu/reference/components/animation.html#Canvas  ) will allow you to design an app using Canvas for multiple screen sizes.    

Follow Min Zarni Aung's suggestions.  Also consider the 'cheap' solution:  Set the Canvas pixel height and width using code. Do not allow the Canvas to FillParent.   Uh oh, 

this may mean the Canvas will display 'small' on large tablets. Alternatively, scaling, and a lot of code, is the solution using if..then coding blocks (  http://www.appinventor.org/bookChapters/chapter18.pdf  ).  The links here may provide additional insight:  https://groups.google.com/forum/#!searchin/mitappinventortest/scale$20Canvas%7Csort:relevance  

Scaling objects is not only problematical with AI2,  the issue is complex and you would encounter similar issues if you used the professional compilers like Eclipse, Android Studio 2, B4A etc.  AI2, and  B4A, use techniques to 'automatically' scale the screens using built-in capabilitites.  Nice feature in a tool that is mainly intended as a teaching tool and not a commercial software game development tool.  Eclipse and Android Studio apps are more complicated..they maintain multiple sets of images etc. in a support folder (a simplification).   Less than perfect scaling is the price one pays for a relatively simple development platform versus the professional 'precise' tools.

When you achieve a solution you are satisfied with,the community might appreciate your posting an example of how you solved your scaling issue.

You might also look at this tutorial for ideas    

• Oh My Spikes – Create a game from scratch using App Inventor

Regards,

Steve