GuiGetScreenSize: Difference between revisions

From Multi Theft Auto: Wiki
Jump to navigation Jump to search
(Adding some tips to help you make a GUI elements or DX drawings in all resolutions.)
No edit summary
 
(15 intermediate revisions by 10 users not shown)
Line 5: Line 5:
==Syntax==  
==Syntax==  
<syntaxhighlight lang="lua">
<syntaxhighlight lang="lua">
float float guiGetScreenSize ()
float float guiGetScreenSize()
</syntaxhighlight>  
</syntaxhighlight>
{{OOP||GuiElement.getScreenSize||}}


===Returns===
===Returns===
Line 15: Line 16:
<syntaxhighlight lang="lua">
<syntaxhighlight lang="lua">
--setup a function when the resource starts
--setup a function when the resource starts
function checkResolutionOnStart ( theResource )
function checkResolutionOnStart ()
--if the resource started isnt this resource, don't bother initiating the function
if theResource ~= getThisResource() then return end
local x,y = guiGetScreenSize() --get their screen size
local x,y = guiGetScreenSize() --get their screen size
if ( x <= 640 ) and ( y <= 480 ) then --if their resolution is lower or equal to 640x480
if ( x <= 640 ) and ( y <= 480 ) then --if their resolution is lower or equal to 640x480
Line 25: Line 24:
end
end
--attach the function to the event handler
--attach the function to the event handler
addEventHandler ( "onClientResourceStart", getRootElement(), checkResolutionOnStart )
addEventHandler ( "onClientResourceStart", resourceRoot, checkResolutionOnStart )
</syntaxhighlight>
</syntaxhighlight>


==Tips==
 
==Using guiGetScreenSize to fit GUI & DX drawing in all resolutions==
To get the precise coordinates of a GUI element or DX drawings, you need to decide which edges of the screen you want to have them positioned against, then you just need to find the difference between your screen size and your position values.
To get the precise coordinates of a GUI element or DX drawings, you need to decide which edges of the screen you want to have them positioned against, then you just need to find the difference between your screen size and your position values.


Line 37: Line 37:
end
end


addEventHandler ( "onClientResourceStart", getRootElement(), DXtext )
addEventHandler ( "onClientRender", getRootElement(), DXtext )
</syntaxhighlight>
</syntaxhighlight>
Now if you want it to fit on all resolutions. Then follow these steps:
Now if you want it to fit on all resolutions. Then follow these steps:
Line 44: Line 44:
<syntaxhighlight lang="lua">
<syntaxhighlight lang="lua">
local sWidth,sHeight = guiGetScreenSize() -- The variables
local sWidth,sHeight = guiGetScreenSize() -- The variables
dxDrawText(tostring "Hello World!",684.0,731.0,732.0,766.0,tocolor(0,255,255,175),1.0,"bankgothic","left","top",false,false,false)
dxDrawText( "Hello World!",684.0,731.0,732.0,766.0,tocolor(0,255,255,175),1.0,"bankgothic","left","top",false,false,false)
</syntaxhighlight>
</syntaxhighlight>


2. Subtract each of the DX text's position values from the screen size manually (remembering the resolution is 1024x768):
2. Divide each of the DX text's position values by the screen size manually (remembering the resolution is 1024x768):


*'''Left''' position value is 684, 1024-684 = 340
*'''Left''' position value is 684, 684/1024 = 0.668
*'''Top''' position value is 731, 768-731 = 37
*'''Top''' position value is 731, 731/768 = 0.952
*'''Right''' position values is 732, 1024-732 = 292
*'''Right''' position values is 732, 732/1024 = 0.715
*'''Bottom''' position value is 766, 768-766 = 2
*'''Bottom''' position value is 766, 766/768 = 0.997


You may want to use a calculator to help you count.
You may want to use a calculator to help you count.


3. Now with the answer above remove all of the position values and replace it with the guiGetScreenSize variable subtract with the answer. Which would be:
3. Now with the answer above remove all of the position values and replace it with the width or height variable multiplied by the answer. Which would be:
<syntaxhighlight lang="lua">
<syntaxhighlight lang="lua">
local sWidth,sHeight = guiGetScreenSize() -- The variables
local sWidth,sHeight = guiGetScreenSize() -- The variables
dxDrawText(tostring "Hello World!",sWidth-340, sHeight-37, sWidth-292, sHeight-2,tocolor(0,255,255,175),1.0,"bankgothic","left","top",false,false,false)
dxDrawText("Hello World!",sWidth*0.668, sHeight*0.952, sWidth*0.715, sHeight*0.997,tocolor(0,255,255,175),1.0,"bankgothic","left","top",false,false,false)
</syntaxhighlight>
</syntaxhighlight>


Line 66: Line 66:
function DXtext ()
function DXtext ()
local sWidth,sHeight = guiGetScreenSize() -- The variables
local sWidth,sHeight = guiGetScreenSize() -- The variables
dxDrawText(tostring "Hello World!",sWidth-340, sHeight-37, sWidth-292, sHeight-2,tocolor(0,255,255,175),1.0,"bankgothic","left","top",false,false,false)
dxDrawText("Hello World!",sWidth*0.668, sHeight*0.952, sWidth*0.715, sHeight*0.997,tocolor(0,255,255,175),1.0,"bankgothic","left","top",false,false,false)
end
end


addEventHandler ( "onClientResourceStart", getRootElement(), DXtext )
addEventHandler ( "onClientRender", getRootElement(), DXtext )
</syntaxhighlight>
</syntaxhighlight>


We can also do it by ourself doing some calculations in the code. This works in all resolution, adjusting the scale to all screen-sizes.
<syntaxhighlight lang="lua">
local sx, sy = guiGetScreenSize( )


 
addEventHandler( "onClientRender", root,
 
function( )
    dxDrawText( "Hello World!", sx*( 684/1024 ), sy*( 731/768 ), sx*( 732/1024 ), sy*( 766/768 ), tocolor(0,255,255,175), sx/1000*1.0,"bankgothic","left","top",false,false,false )
end
)
</syntaxhighlight>


==See Also==
==See Also==
{{GUI_functions}}
{{GUI_functions}}
{{GUI_events}}

Latest revision as of 05:37, 6 November 2023

This function retrieves the local screen size according to the resolution they are using.

Syntax

float float guiGetScreenSize()

OOP Syntax Help! I don't understand this!

Method: GuiElement.getScreenSize(...)


Returns

This returns two floats representing the player's screen resolution, width and height.

Example

This example checks whether a player is using a low resolution, and warns them that GUI may appear incorrect. 

--setup a function when the resource starts
function checkResolutionOnStart ()
	local x,y = guiGetScreenSize() --get their screen size
	if ( x <= 640 ) and ( y <= 480 ) then --if their resolution is lower or equal to 640x480
		--warn them about GUI problems.
		outputChatBox ( "WARNING: You are running on a low resolution.  Some GUI may be placed or appear incorrectly." )
	end
end
--attach the function to the event handler
addEventHandler ( "onClientResourceStart", resourceRoot, checkResolutionOnStart )


Using guiGetScreenSize to fit GUI & DX drawing in all resolutions

To get the precise coordinates of a GUI element or DX drawings, you need to decide which edges of the screen you want to have them positioned against, then you just need to find the difference between your screen size and your position values.

For example, there is a DX text. It fits on 1024x768 resolution. 

function DXtext ()
dxDrawText(tostring "Hello World!",684.0,731.0,732.0,766.0,tocolor(0,255,255,175),1.0,"bankgothic","left","top",false,false,false)
end

addEventHandler ( "onClientRender", getRootElement(), DXtext )

Now if you want it to fit on all resolutions. Then follow these steps:

1. Add width and height variables to get GUI's screen size, here we use sWidth and sHeight. 

local sWidth,sHeight = guiGetScreenSize() -- The variables
dxDrawText( "Hello World!",684.0,731.0,732.0,766.0,tocolor(0,255,255,175),1.0,"bankgothic","left","top",false,false,false)

2. Divide each of the DX text's position values by the screen size manually (remembering the resolution is 1024x768):

  • Left position value is 684, 684/1024 = 0.668
  • Top position value is 731, 731/768 = 0.952
  • Right position values is 732, 732/1024 = 0.715
  • Bottom position value is 766, 766/768 = 0.997

You may want to use a calculator to help you count.

3. Now with the answer above remove all of the position values and replace it with the width or height variable multiplied by the answer. Which would be: 

local sWidth,sHeight = guiGetScreenSize() -- The variables
dxDrawText("Hello World!",sWidth*0.668, sHeight*0.952, sWidth*0.715, sHeight*0.997,tocolor(0,255,255,175),1.0,"bankgothic","left","top",false,false,false)

So the final results will be a DX text which will fit on all resolutions which will be: 

function DXtext ()
local sWidth,sHeight = guiGetScreenSize() -- The variables
dxDrawText("Hello World!",sWidth*0.668, sHeight*0.952, sWidth*0.715, sHeight*0.997,tocolor(0,255,255,175),1.0,"bankgothic","left","top",false,false,false)
end

addEventHandler ( "onClientRender", getRootElement(), DXtext )

We can also do it by ourself doing some calculations in the code. This works in all resolution, adjusting the scale to all screen-sizes. 

local sx, sy = guiGetScreenSize( )

addEventHandler( "onClientRender", root,
	function( )
	     dxDrawText( "Hello World!", sx*( 684/1024 ), sy*( 731/768 ), sx*( 732/1024 ), sy*( 766/768 ), tocolor(0,255,255,175), sx/1000*1.0,"bankgothic","left","top",false,false,false ) 
	end
)

See Also

General functions

Browsers

Buttons

Checkboxes

Comboboxes

Edit Boxes

Gridlists

Memos

Progressbars

Radio Buttons

Scrollbars

Scrollpanes

Static Images

Tab Panels

Tabs

Text Labels

Windows

Input

GUI


Retrieved from "https://wiki.multitheftauto.com/wiki/GuiGetScreenSize?oldid=78534"