Forums

Adjust UI according to viewport
Last Post 01 Apr 2017 06:59 PM by andy1221. 6 Replies.
Printer Friendly
  •  
  •  
  •  
  •  
  •  
Sort:
PrevPrev NextNext
You are not authorized to post a reply.
Author Messages Resolved
andy1221User is Offline
New Member
New Member
Posts:4


--
16 Mar 2017 10:53 PM
    Hi ,
    I am using EmptyKeys and MonoGame for my project. But I was unable to solve this issue for quite some time:

    My game is rendered in virtual resolution. However when drawing on display with different aspect ratio I would like to achieve pillarboxing / letterboxing effect. For this I adjusted my Viewport which I passed for spritebatch.begin method. Everything draws as intended including user interface but...

    UI "hitboxes" seems to be off as if nothing changed (I know similar questions about resizing UIRoot were asked already here). However these questions didn't mention such viewport changes.

    Am I missing something? Or is there any other solution for this problem? Thanks
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    17 Mar 2017 10:22 AM
    Hmm that is bit of issue. The problem is in this class - http://github.com/EmptyKeys/UI_Engi...enderer.cs

    Normally you would call Resize on UIRoot instance and that would call ResetNativeSize on renderer. New size is set based on back buffer.

    BUT if you are resizing UI yourself already, so that back buffer and viewport are different, you would have to add new method there, which would set NativeScreenWidth and NativeScreenHeight based on viewport.

    Should be simple. Get the sources of MonoGame specific library from GitHub and make your own version.

    Let me know if you have any problem
    andy1221User is Offline
    New Member
    New Member
    Posts:4


    --
    17 Mar 2017 12:26 PM
    I tried this and it only helped partially:

    - now size is changed (based on current viewport width/height) but my viewport is also shifted
    - is there similar simple fix for this too?

    For better illustration this is my very simple main-menu


    Right now the hitboxes ignore the black stripes on sides.
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    17 Mar 2017 03:27 PM
    Hard to guess. I don't know, what did you tried and how your scaling works. If you could make some very simple example, which i could use, that would be great.
    andy1221User is Offline
    New Member
    New Member
    Posts:4


    --
    18 Mar 2017 11:06 AM
    I probably have correct viewport and scale matrix just don't know how to use it with EmptyKeys - everything seems to be drawn correctly.

    Can you think of a simple solution I could apply this scalling? - I mean any solution because my approach has to be rewritten anyway. Thanks for your help.

    EDIT: fixed my previous reply - turned out I messed something before... UI is drawn correctly just hitboxes are off for me
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:674


    --
    21 Mar 2017 10:30 AM
    I need some example, without that it's hard to help you. All rendering is done by MonoGameRenderer class, so you can change anything in there.
    andy1221User is Offline
    New Member
    New Member
    Posts:4


    --
    01 Apr 2017 06:59 PM
    • Accepted Answer
    In case somebody is dealing with similar problem this solution should work (thanks Filip for helping):

    Imagine the game is rendered in fixed virtual resolution. However you want to support drawing on various different resolutions (for example when developing for Android).

    [Motivation]
    If aspect ratios match we just stretch everything to fit monitor. However when aspect ratios don't match we don't want our game to be stretched because the end result looks bad. This effect can be seen on TVs - if the broadcasting is in 4:3 and you have wide-screen TV you want to have black bars on sides. This is exactly what I wanted to achieve.

    [Solution]
    To get this effect working in MonoGame you can create scaling matrix - which is passed to spritebatch.Begin method; and setup new viewport. This should draw everything correctly including UI created in EmptyKeys, however, hitboxes are going to be off.

    To fix hitboxes you have to change this class (if you use MonoGame): http://github.com/EmptyKeys/UI_Engi...seState.cs
    Rewrite properties NormalizedX and NormalizedY so it uses your viewport and then build your own version of the library.

    Hope this might help someone
    You are not authorized to post a reply.