Responsive Sizing for the Canvas

[Scott Ferguson]

Responsive Sizing is not yet available for the Canvas, but I have put together a little demo project to show how you can implement this until it is supported directly.

In this project, the Cat ImageSprite is to be moved to the approximate center of the device/emulator screen.

In order for this to work on any device, the x,y,width and height values of the ImageSprite are set to corresponding percentages of the Canvas Width and Height.

I just twiddled with the percentage values until size and positioning looked good.

You may have a more methodical way to arrive at your percentage values.

Here are the blocks I used:

I used the Do It feature for testing.

Here are the outputs with the percentages shown above with Screen1.Sizing set to 'Fixed' and Canvas Width and Height set to 'Fill Parent'

Emulator:

Seven inch tablet:

Ten inch tablet:

Now Screen1.Sizing is set to 'Responsive' and with the Canvas Width and Height set to 50 percent.

On ten inch tablet:

You can still fill the screen with the Canvas by setting it's WidthPercent and HeightPercent to 100.

I recommend that you set screen Sizing to Responsive for more accurate positioning.

---

sf

[Fra Esp]

Il giorno martedì 6 ottobre 2015 14:57:44 UTC+2, Scott Ferguson ha scritto:

Responsive Sizing is not yet available for the Canvas, but I have put together a little demo project to show how you can implement this until it is supported directly.

In this project, the Cat ImageSprite is to be moved to the approximate center of the device/emulator screen.

In order for this to work on any device, the x,y,width and height values of the ImageSprite are set to corresponding percentages of the Canvas Width and Height.

I just twiddled with the percentage values until size and positioning looked good.

You may have a more methodical way to arrive at your percentage values.

Here are the blocks I used:

I used the Do It feature for testing.

Here are the outputs with the percentages shown above with Screen1.Sizing set to 'Fixed' and Canvas Width and Height set to 'Fill Parent'

Emulator:

Seven inch tablet:

Ten inch tablet:

Now Screen1.Sizing is set to 'Responsive' and with the Canvas Width and Height set to 50 percent.

On ten inch tablet:

ok, but as references both functions ImageSpriteResponsiveXY and ImageSpriteResponsiveWH

[Fra Esp]

Il giorno martedì 6 ottobre 2015 14:57:44 UTC+2, Scott Ferguson ha scritto: