Android Tutorial game scailing (ui game objects ... etc)

eric Allen

Member
Licensed User
So Erel pointed out to me about my question about ui and scailing. He said to use percentages. So I did some research. I looked up how to do it in html5 and verious other languages. So I was fooling around with it in vb with a picture box and from. So I set it up like so and it works.


This is what your game is made for
Dim nativew as int = 1080
Dim nativeh as int = 1920

This is your device resolution
Dim virtualw = devices screen width
Dim virtualh = devices screen height

Dim scaleratiow as int = virtalw/nativew
Dim scaleratioh as int = virtualh/nativeh

Your ratio values will be whole or decimal numbers depending on if your scaling up or down

Now all your x and y positions will be x*scaleratiow or y*scaleratioh and same with widths and heights.

It will position all your elements in same spots on different resolutions and scale them at same time. This will work in b4a, vb, etc any language. This is the rough and dirty of it I will modify it more with examples and clean it up. So far this is what I learned and others would like to know who are new to this as well.

Gameview is a godsend ty Erel

Edit:
As you can see I have same app opened 4 times and i scaled them down to different 16:9 resolutions and then one to a ridiculous resolution just to show you that it truly scales to fit.



B4X:
Module resize
    Public gWidth = 1920 'Native Game ResW
    Public gHeight = 1080 'Native Game ResH

    Public vWidth = 1600 'Device With
    Public vHeight = 900 'Device Height

    Public ScaleRatioH = vHeight / gHeight
    Public ScaleRatioW = vWidth / gWidth


    Public PlayerWidth = 1280
    Public PlayerHeight = 514

    Public PlayerX = 64
    Public PlayerY = 64

    Public cDialogWidth = 1920
    Public cDialogHeight = 498

    Public cDialogX = 0
    Public cDialogy = (gHeight / 2) - (cDialogHeight / 2)

    Public Sub size_objects()


        With Form1
            .PicPlayer.Width = PlayerWidth * ScaleRatioW
            .PicPlayer.Height = PlayerHeight * ScaleRatioH
            .PicPlayer.Location = New System.Drawing.Point(PlayerX * ScaleRatioW, PlayerY * ScaleRatioH)

            .picDialog.Width = cDialogWidth * ScaleRatioW
            .picDialog.Height = cDialogHeight * ScaleRatioH
            .picDialog.Location = New System.Drawing.Point(cDialogX * ScaleRatioW, cDialogy * ScaleRatioH)
        End With


    End Sub

    Public Sub ResizeView()

        vWidth = Form1.Width
        vHeight = Form1.Height
        ScaleRatioH = vHeight / gHeight
        ScaleRatioW = vWidth / gWidth
        size_objects()

   



    End Sub
End Module
This code is recyclable and you just have to modify it for your needs.
Ill be doing black bars next for making your game 16:9 on most any resolution. Letter box
 
Last edited:

Jaames

Active Member
Licensed User
I knew about all this, but it is nice to have some kind of reminder you made in case we forget things. Thanks :)
 

sorex

Expert
Licensed User
indeed, it's not that it is a new thing. an image viewer or resize tool from the 80s/90s that showed a preview thumbnail is using the same logic.

but it might be useful for some people who don't know how to calculate things like this.
 

eric Allen

Member
Licensed User
indeed, it's not that it is a new thing. an image viewer or resize tool from the 80s/90s that showed a preview thumbnail is using the same logic.

but it might be useful for some people who don't know how to calculate things like this.
Definitely, it's something I never new how to do and I'm new to 2d but doing one resolution is easy. When it came to multiple I was having trouble then I came across that info and I was like no way that easy lol
 
Top