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

Get help using Construct 2

Post » Sun Jun 05, 2016 7:53 pm

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
Last edited by Zebbi on Tue Jun 07, 2016 4:44 pm, edited 3 times in total.
B
41
S
12
G
14
Posts: 1,118
Reputation: 11,255

Post » Mon Jun 06, 2016 1:01 pm

Try resizing each image when it is onScreen to WindowWidth & WindowHeight.
https://www.ravenheart.ca/home
I don't check the forums much anymore, but I will receive an email for PMs.

"Someone once told me I bite off more than I can chew...

I told them I would rather choke on greatness than nibble on mediocrity."
B
22
S
6
G
1
Posts: 1,418
Reputation: 4,830

Post » Mon Jun 06, 2016 3:03 pm

gumshoe2029 wrote: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.
B
41
S
12
G
14
Posts: 1,118
Reputation: 11,255

Post » Mon Jun 06, 2016 5:57 pm

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).
B
41
S
12
G
14
Posts: 1,118
Reputation: 11,255

Post » Mon Jun 06, 2016 6:44 pm

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.
B
33
S
18
G
28
Posts: 2,493
Reputation: 20,950

Post » Mon Jun 06, 2016 9:26 pm

99Instances2Go wrote: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?
B
41
S
12
G
14
Posts: 1,118
Reputation: 11,255

Post » Mon Jun 06, 2016 11:06 pm

Based on Browser.ScreenWidth en Browser.ScreenHeight ?
B
33
S
18
G
28
Posts: 2,493
Reputation: 20,950

Post » Tue Jun 07, 2016 7:53 am

99Instances2Go wrote: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?
B
41
S
12
G
14
Posts: 1,118
Reputation: 11,255

Post » Tue Jun 07, 2016 1:08 pm

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.
B
33
S
18
G
28
Posts: 2,493
Reputation: 20,950

Post » Tue Jun 07, 2016 1:11 pm

Zebbi wrote:
gumshoe2029 wrote: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.
https://www.ravenheart.ca/home
I don't check the forums much anymore, but I will receive an email for PMs.

"Someone once told me I bite off more than I can chew...

I told them I would rather choke on greatness than nibble on mediocrity."
B
22
S
6
G
1
Posts: 1,418
Reputation: 4,830

Next

Return to How do I....?

Who is online

Users browsing this forum: Microbex and 24 guests