How do I resize a sprite for mobiles

Get help using Construct 2

Post » Mon Nov 16, 2015 4:38 am

Ok, I've been doing some testing on how to make a flexible app (not a game).

First, I set the project into crop mode. Then I created a sprite and position and resize it based on viewport and window sizes. From there, I can 'arrange' the objects on it and have everything automatically rearrange itself depending on whether the mobile device is rotated vertically or horizontally.

For example:

I use ViewportLeft(0)+20 and ViewportTop(0)+20 to set the x,y coordinates for the location of the sprite.
I then do WindowWidth-40 and WindowHeight-40 to set the height and width of the sprite. Then I position my controls on top of that sprite and position them based on it's size and position.

On a desktop, when I resize the browser (works on Chrome, Edge and IE) and reset the layout, it works perfectly. The sprite stays perfectly centered and perfectly sized.

However, when I test this on an Android Chrome or the stupid Samsung Browser, the x,y are correct but the sprite height and width are too large. I'm thinking this has to do with the fact that these browsers are reporting their full size and not the size of the actual browser window (i.e. they're adding in the URL bar to their height).

So here's my question. When I decide to deploy, go full screen and get rid of that URL bar, should this size properly?
B
15
S
5
Posts: 124
Reputation: 1,687

Post » Mon Nov 16, 2015 1:11 pm

I've been making adaptive app-layouts almost the same way..
The best way is to stay consistent..
instead of using windowwidth and windowheight, keep using the viewportleft, right, top and bottom..

Windowwidth - 40 would become: viewportright(0)-viewportleft(0)-40
windowheight - 40 : viewportbottom(0)-viewporttop(0) -40

the horizontal center of your layout : viewportleft(0)+0.5*(viewportright(0)-viewportleft(0))

Etcetera..

I put most of these values in variables and update them on any change in the windowsize, having different ways of showing things for landscape and portrait and depending on the amount of pixels availabe..

One thing that could be happening on mobile is the app is called fullscreen so when the "on start of layout" event is executed the windowsize is different than a few ticks later when the browser adress bar "re-appears" (This is just a guess/possibility, but can be easily caught by also using the browser-objects "on resized" event to call the set layout function)
I told my dentist I had trouble with my teeth and asked her to fix it without looking in my mouth..
B
54
S
16
G
8
Posts: 6,160
Reputation: 19,775

Post » Mon Nov 16, 2015 2:31 pm

AH HAH! Thank you! I may have read one of your posts earlier about using this technique. I was looking at what happened when I ADDED the bottom and top. I didn't even think about subtracting the top from the bottom to get the size. DUH!

Once I did that, to set the size, it properly resized everything in both the desktop and the mobile and it resized properly when I rotated the mobile.

Now, I can make an app that works both in landscape and portrait!
B
15
S
5
Posts: 124
Reputation: 1,687

Post » Tue Nov 17, 2015 1:45 am

Dunno if you'll see this LittleStain but here's a tool I found invaluable for testing these values

quirktools.com/screenfly
B
15
S
5
Posts: 124
Reputation: 1,687

Post » Tue Nov 17, 2015 1:52 am

Fengist wrote:Dunno if you'll see this LittleStain but here's a tool I found invaluable for testing these values

quirktools.com/screenfly


Thanks, I'll have a look..

When you put @ in front of the name, in my case @LittleStain the user gets a notification..
I told my dentist I had trouble with my teeth and asked her to fix it without looking in my mouth..
B
54
S
16
G
8
Posts: 6,160
Reputation: 19,775


Return to How do I....?

Who is online

Users browsing this forum: BadMario, stevenode and 6 guests