Adjust the positioning/sizing of of items to aspect ratio?

EDIT: I've fixed the issue, here's an updated example: https://www.dropbox.com/s/o23zh7ss0k2sg ... .capx?dl=0

I have a sliding mobile menu where each "page" is 640px x 1136px; the pages are just different background images that are 640px x 1136px wide, and the content on top, here is my capx: https://www.dropbox.com/s/o23zh7ss0k2sg ... .capx?dl=0

And here is the tutorial I used: https://www.scirra.com/tutorials/726/sw ... hange-page

Now, the issue is when using on devices with an aspect ratio greater than the width of 640px. Initially, the first and last pages were offset; I fixed this by slightly extending the first background to the left and the last background to right, off the boundaries, and setting "unbounded scrolling" on. But I need to ensure that:

• Each background image is the resized to be the same width as the mobile device's width (bigger/smaller than 640px)
• Each "page" of contents are evenly spaced from each other, relative to the mobile devices individual "page" width
• The "scrollto" code is updated to match the width of the mobile device width (currently, each page slides 640px left or right

Where should I start with this? Here's the original tutorial capx: https://static3.scirra.net/uploads/arti ... wipe2.capx

Try resizing each image when it is onScreen to WindowWidth & WindowHeight.

Try resizing each image when it is onScreen to WindowWidth & WindowHeight.

I'm trying to resize the images with viewportright(0)-viewportleft(0) and since I need to move the backgrounds and the "page" sprites/spritefonts which are all positioned relatively at each sequential 640px area, I was thinking of moving each object in family with MenuPart.X+viewportright(0)-viewportleft(0)-640 which would theoretically move everything slightly, but neither has worked. Should I post my own capx? It's really just the same as the capx I put in the first post from the tutorial.

I also tried using:

For each Family(MenuStuff)

Set X position of Family(MenuStuff) = Self.X+viewportright(0)-viewportleft(0)-640

Which work perfectly on desktop (read: doesn't change anything!) which has the width of 640px for the viewport, but on Canvas+ running on my tablet, the viewport is SLIGHTLY wider (maybe 30px each side) and needs some way of adjusting each item so it's moved to right a bit on a device where the ratio leads to a wider viewport (and for the backgrounds, resized and repositioned).

There is something as the 'aspect ratio'. Width/Height (in pixels). Yes.

But there is also a thing thats called 'Non-square pixels'.

Look up the screen resolution in pixels. Calculate the aspect ratio. I suppose that is 640px x 1136px ?

Take a ruler. Measure screen. Calculate the aspect ratio. If they are not the same, the device has 'Non-square pixels'.

I think you problem is there somewhere. Latest Android is using 'dips' as a unit, in stead of 'square pixels'. It means Density-independent Pixels. And thats ALL i know. Wich is, i know, not that mutch.

A bit to lazy to read all this too, sorry.

https://developer.android.com/guide/pra ... pport.html

gl.

There is something as the 'aspect ratio'. Width/Height (in pixels). Yes.

But there is also a thing thats called 'Non-square pixels'.

Look up the screen resolution in pixels. Calculate the aspect ratio. I suppose that is 640px x 1136px ?

Take a ruler. Measure screen. Calculate the aspect ratio. If they are not the same, the device has 'Non-square pixels'.

I think you problem is there somewhere. Latest Android is using 'dips' as a unit, in stead of 'square pixels'. It means Density-independent Pixels. And thats ALL i know. Wich is, i know, not that mutch.

A bit to lazy to read all this too, sorry.

https://developer.android.com/guide/pra ... pport.html

gl.

Thanks, I've found the screen width of the tablet is 710px, and I've set up the events on C2 to resize and position them to 710px, but it doesn't work. I've included here the stripped down menu with all the images replaced and the visual behaviors removed: https://www.dropbox.com/s/o23zh7ss0k2sg ... .capx?dl=0

This will give an idea of what I'm working with, if the tablet device happens to be different (710px wide in my case) instead of my default 640px, how can I reposition everything, resize the backgrounds and adjust the pagewidth for the sliding mechanism so everything looks the same whatever the width of the viewport on each device?

Based on Browser.ScreenWidth en Browser.ScreenHeight ?

Based on Browser.ScreenWidth en Browser.ScreenHeight ?

I think it's my calculations that aren't working, I'm not able to figure out how to shift everything so it works responsively for each device?

It should not be a problem. The Browser object can request fullscreen. I also gives you ScreenWidth en ScreenHeight. Those are your swipe distances. Wat i miss ? I do miss something, just dunno what.

> Try resizing each image when it is onScreen to WindowWidth & WindowHeight.

>

I'm trying to resize the images with viewportright(0)-viewportleft(0) and since I need to move the backgrounds and the "page" sprites/spritefonts which are all positioned relatively at each sequential 640px area, I was thinking of moving each object in family with MenuPart.X+viewportright(0)-viewportleft(0)-640 which would theoretically move everything slightly, but neither has worked. Should I post my own capx? It's really just the same as the capx I put in the first post from the tutorial.

Right, and you can move them wherever you want. WindowHeight and WindowWidth return the physical size of the screen that they are being displayed on in pixels. So when the backgrounds are on screen, you can automatically resize them to the size of the screen.

>

> > Try resizing each image when it is onScreen to WindowWidth & WindowHeight.

> >

> I'm trying to resize the images with viewportright(0)-viewportleft(0) and since I need to move the backgrounds and the "page" sprites/spritefonts which are all positioned relatively at each sequential 640px area, I was thinking of moving each object in family with MenuPart.X+viewportright(0)-viewportleft(0)-640 which would theoretically move everything slightly, but neither has worked. Should I post my own capx? It's really just the same as the capx I put in the first post from the tutorial.

>

Right, and you can move them wherever you want. WindowHeight and WindowWidth return the physical size of the screen that they are being displayed on in pixels. So when the backgrounds are on screen, you can automatically resize them to the size of the screen.

I've fixed the issue, here my example fixed up, it now works on any screen width (as far as I know!): https://www.dropbox.com/s/o23zh7ss0k2sg ... orman.capx