All the image sprites get messed up when I test the game on a device

[Daniel6]

Hey guys! I really hope that somebody can help me.

I've been working on my game for quite some time now and have put a lot of hours into it. I recently asked a friend to test it on their Android phone. They downloaded it, but to my surprise, all the ImageSprites were shifted to the left and didn’t line up where they’re supposed to be.

In the MIT App Inventor editor, everything looks perfectly aligned, but when testing it on a phone, all the sprites are out of place.

As an example: Those food items should be at the spot where they're in the picture however when you test it, they're on the red area.

Can somebody please help me?

[ABG]

FAQ Section: Screens

Screen Design Advice Building apps with many screens Many similar screens Responsive Design (mirrored for non-English) Universal screen sizes (mirrored for non-English) Screen Switching Tabbed Screens Demo - @TimAI2 Switch screens correctly - 2 methods - @Anke Aug '23 Choosing a Switching Technique - @Anke Nov 22 Effects of Companion on Screen and app closing - Boban How do I open Screen1? - vknow360 and others How do I switch screens? (manager) - Taifun How to start from Screen2 S…

See articles 3 and 4 on responsive design.

Take into account the screen height and width when sizing and positioning components and sprites.

FAQ Section: Canvas, Sprites, Balls, Animation

Sprite Origin Docs - @Taifun Scott Ferguson Easing Demo Gravity Exercise from the defunct Scott Ferguson Library Transparent Color Number 16777215 on Canvas - @Ryan_Patridge Fit Canvas to Image using JavaScript - TimAI2 Off Screen Visible Canvas trick - Italo Canvas larger than screen - Scott Ferguson Draggable Canvas blog entry - Emile Wong 2018 Color extraction - Scott Ferguson Flood Fill - Scott Ferguson Gradients sample - Italo Multi Touch Pixelation - Italo Rotate an ImageSprit…

Also, check for sprite cannibalism.

[Daniel6]

What's sprite cannibalism?

[TIMAI2]

@Daniel6

What's sprite cannibalism

Handling Sprite Cannibalism with AnyComponent

When sprites get locked together, we usually refer to Scott Ferguson's example of how to overcome this sprite cannibalism. This was written before the any component blocks came along. Also see here. Following the same method as above, it is possible to use the any component blocks to do the same thing: [image]

[Daniel6]

Oh I see! I've read that there is an option to fix it without changing everything. Right? How exactly do I make that work?

Also, I am a bit confused what percentage I should put for ImageSprites.

[TIMAI2]

The canvas is not necessarily affected by responsive vs fixed sizing, depends what you are doing.

What are your canvas dimensions/settings and your sprite positional settings?

I will assume you have responsive sizing on for your app, which is the default.

[Daniel6]

That's my Canva's sizing settings. But what the issue is: all canvas are moved when testing the game.

Those on the left are just place holder images for now but everything gets moved to the left when testing

[TIMAI2]

Looks like you have a canvas size ratio of 1.5 : 1

Two choices:

Set the width of your canvas to e.g. 360w & 240h (this should fit most phones in portrait) or 510w : 340h if using landscape. You may then have to adjust the positioning of all your sprites. Ensure you have Origin for each sprite set to 0.5/0.5, then you can set the centres.

Keep width at 100 percent, and position your sprites based upon a percentage of that width (get the canvas width and calculate position. You may need to calculate canvas height as well, to keep the size ratio.