1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. GTA Network forum is now in archive mode.

Fixing UIs with non-16:9 screens

Discussion in 'Snippets' started by Katalina, May 17, 2017.

  1. Katalina

    Katalina Member Developer

    Likes Received:
    May 14, 2017
    This follows exactly what GTA5 itself does. If you use this snippet's offset and place something directly over the map in 16:9, it will be directly over the map (to the exact pixel) in 21:9 and 16:10. (just know that 16:10 hasn't been tested and also looks ultra weird in GTA5 anyway.)

    This code does run for 16:9 as well because of precision issues, but the math otherwise is precise enough to end up as 0 anyway.

    let offsetX = 0
    const screenSize = API.getScreenResolutionMantainRatio()
    let screenX = screenSize.Width
    const screenY = screenSize.Height
    if (screenX / screenY > 1.7777) {
      // aspect ratio is larger than 16:9 (in reality, this trips for 16:9 too)
      const idealBox = Math.ceil(screenY * 1.7777)
      // ex: 2850 - 1920 == 660 / 2 == 330
      offsetX = (screenX - idealBox) / 2
      // and gotta set the ideal box to make it work
      screenX = idealBox
    Now, any time you draw something to the screen, add offsetX to your X position.

    Further, if you always want something on the right edge of the screen, offsetX * 2 will push it all the way over in every resolution.


    ported into @Stuyk's pure JS menus (which actually breaks in 21:9 without this, hint hint.)

    a flight avionics HUD
    Last edited: May 18, 2017
    Ahmad45123 and Meinhof like this.
  2. Vance

    Vance Well-Known Member

    Likes Received:
    Aug 31, 2016
    Great work! Keep it up! I really like your aircraft indicators.
    Katalina likes this.
  3. VFRZ

    VFRZ Active Member

    Likes Received:
    Dec 29, 2016
    Nice ! very useful, thanks :=)

Share This Page