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

Discussion in 'Tutorials & Examples' started by eric Allen, Jun 28, 2015.

  1. eric Allen

    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

    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.


    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


    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: Jun 28, 2015
    pro_grammer and Jaames like this.
  2. Jaames

    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 :)
    eric Allen likes this.
  3. sorex

    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 likes this.
  4. eric Allen

    eric Allen Member Licensed User

    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
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice