Jump to content

[TUT] dxFunctions

iAxel

By iAxel
in Tutorials

Recommended Posts

iAxel Busta

iAxel

Posted
Posted (edited)

[Tutorial] dxFunctions

Hi everybody!

Today, I will make a tutorial for this community...

This tutorial will teach you to click dxElements (dxDrawRectangle, dxDrawText etc.)

For the beginning, create variables

  
--For all screen sizes 
local screenW, screenH = guiGetScreenSize() 
local sW = (screenW / 640) 
local sH = (screenH / 480) 
local tS = (screenW / 640) * 0.5 --Text Size 
  
--dx Button variable 
local dx_button = { 
    --{x, y, width, height, color, text, output text after clicking} 
    {x = sW * 70, y = sH * 200, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Login', o = 'Login button works is fine!'}, 
    {x = sW * 70, y = sH * 225, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Register', o = 'Register button works is fine!'}, 
    {x = sW * 70, y = sH * 250, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Exit', o = 'Exit button works is fine!'} 
} 
  
local isVisible = false 
 

Created? great!

Now we create function

  
--We need a (onClientRender, onClientCursorMove, onClientClick) functions 
--Create Menu and deMenu functions for rendering dxElements 
function Menu() 
    addEventHandler('onClientRender', root, Render) 
    addEventHandler('onClientCursorMove', root, Move) 
    addEventHandler('onClientClick', root, Click) 
end 
  
function deMenu() 
    removeEventHandler('onClientRender', root, Render) 
    removeEventHandler('onClientCursorMove', root, Move) 
    removeEventHandler('onClientClick', root, Click) 
end 
  
function Bind() 
    isVisible = (not isVisible) 
    showCursor(isVisible) 
    loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))() 
end 
bindKey('f', 'down', Bind) 
 

After creating the necessary functions

  
function Render() 
    for i = 1, #dx_button do 
        dxDrawRectangle(dx_button[i].x, dx_button[i].y, dx_button[i].w, dx_button[i].h, dx_button[i].c) 
        dxDrawText(dx_button[i].t, dx_button[i].x, dx_button[i].y, dx_button[i].x + dx_button[i].w, dx_button[i].y + dx_button[i].h, tocolor(255, 255, 255, 255), tS * 1, 'default', 'center', 'center') 
    end 
end 
  
function Move(_, _, x, y) 
    --Cursor x, y position 
    for i = 1, #dx_button do 
        --If the cursor position is equal to dx position, then change the color 
        if (x >= dx_button[i].x and x <= dx_button[i].x + dx_button[i].w) and (y > dx_button[i].y and y < dx_button[i].y + dx_button[i].h) then 
            dx_button[i].c = tocolor(150, 0, 0, 200) 
        else 
            dx_button[i].c = tocolor(0, 0, 0, 0) 
        end 
    end 
end 
  
function Click(b, s, x, y) 
    if (b == 'left' and s == 'up') then 
        for i = 1, #dx_button do 
            --If the dx position is equal to cursor click position, then output message 
            if (x >= dx_button[i].x and x <= dx_button[i].x + dx_button[i].w) and (y > dx_button[i].y and y < dx_button[i].y + dx_button[i].h) then 
                if (dx_button[i].o) then 
                    outputChatBox(dx_button[i].o) 
                end 
            end 
        end 
    end 
end 
 

All this it turns out so

  
local screenW, screenH = guiGetScreenSize() 
local sW = (screenW / 640) 
local sH = (screenH / 480) 
local tS = (screenW / 640) * 0.5 
  
local dx_button = { 
    {x = sW * 70, y = sH * 200, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Login', o = 'Login button works is fine!'}, 
    {x = sW * 70, y = sH * 225, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Register', o = 'Register button works is fine!'}, 
    {x = sW * 70, y = sH * 250, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Exit', o = 'Exit button works is fine!'} 
} 
  
local isVisible = false 
  
function Menu() 
    addEventHandler('onClientRender', root, Render) 
    addEventHandler('onClientCursorMove', root, Move) 
    addEventHandler('onClientClick', root, Click) 
end 
  
function deMenu() 
    removeEventHandler('onClientRender', root, Render) 
    removeEventHandler('onClientCursorMove', root, Move) 
    removeEventHandler('onClientClick', root, Click) 
end 
  
function Bind() 
    isVisible = (not isVisible) 
    showCursor(isVisible) 
    loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))() 
end 
bindKey('f', 'down', Bind) 
  
function Render() 
    for i = 1, #dx_button do 
        dxDrawRectangle(dx_button[i].x, dx_button[i].y, dx_button[i].w, dx_button[i].h, dx_button[i].c) 
        dxDrawText(dx_button[i].t, dx_button[i].x, dx_button[i].y, dx_button[i].x + dx_button[i].w, dx_button[i].y + dx_button[i].h, tocolor(255, 255, 255, 255), tS * 1, 'default', 'center', 'center') 
    end 
end 
  
function Move(_, _, x, y) 
    for i = 1, #dx_button do 
        if (x >= dx_button[i].x and x <= dx_button[i].x + dx_button[i].w) and (y > dx_button[i].y and y < dx_button[i].y + dx_button[i].h) then 
            dx_button[i].c = tocolor(150, 0, 0, 200) 
        else 
            dx_button[i].c = tocolor(0, 0, 0, 0) 
        end 
    end 
end 
  
function Click(b, s, x, y) 
    if (b == 'left' and s == 'up') then 
        for i = 1, #dx_button do 
            if (x >= dx_button[i].x and x <= dx_button[i].x + dx_button[i].w) and (y > dx_button[i].y and y < dx_button[i].y + dx_button[i].h) then 
                if (dx_button[i].o) then 
                    outputChatBox(dx_button[i].o) 
                end 
            end 
        end 
    end 
end 
 

This way we are able to click dxElement

That's all! :oops:

p.s Do not judge strictly, this is my first tutorial :)

Edited by Guest
Link to comment
iAxel Busta

iAxel

Posted
  • Author
Posted
What's the point of using loadstring? all it is doing in your code, is execute one function or the other, there's no need to use loadstring to do that. 
loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))()

What then you propose to use?

And the code for the test

Link to comment
iAxel Busta

iAxel

Posted
  • Author
Posted
What's the point of using loadstring? all it is doing in your code, is execute one function or the other, there's no need to use loadstring to do that. 
loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))()

What is wrong with the use loadstring?

You can give more information?

Link to comment
ixjf Crime Partner

ixjf

Posted
Posted
What's the point of using loadstring? all it is doing in your code, is execute one function or the other, there's no need to use loadstring to do that. 
loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))()

What is wrong with the use loadstring?

You can give more information?

It's both ugly and overcomplex. Also, I wouldn't call this a tutorial at all. Where is the explanation? Where is anything? You just put a bunch of lines of code there and expect people to understand it. Do not excuse yourself with "it's my first tutorial" - see, that is the problem with this section - you don't know what you're doing.

Link to comment
iAxel Busta

iAxel

Posted
  • Author
Posted
What's the point of using loadstring? all it is doing in your code, is execute one function or the other, there's no need to use loadstring to do that. 
loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))()

What is wrong with the use loadstring?

You can give more information?

It's both ugly and overcomplex. Also, I wouldn't call this a tutorial at all. Where is the explanation? Where is anything? You just put a bunch of lines of code there and expect people to understand it. Do not excuse yourself with "it's my first tutorial" - see, that is the problem with this section - you don't know what you're doing.

I said that perhaps was wrong calling this tutorial

And If you have not noticed, I described only in right places, I should describe each function? I am a newbie, but I know what features necessary for anything other.

Perhaps I am wrong...

Correct me, I need it in the future

Link to comment
ixjf Crime Partner

ixjf

Posted
Posted

You barely explained what your code was doing, other than a random few comments that won't help.

To begin, "For the beginning, create variables": you write 15 lines of code without explaining what anything is for (for your information, you forgot a closing bracket after the last element of dx_button)) - for example, how do the initial 6 lines help you in any way to accomplish what you were supposed to do? You aren't direct to the point, and add a bunch of code that will only confuse the person reading it. You could provide a working example separated from the explanation in the end of the post.

"Created? great! Now we create function": Yet again, you just provide a bunch of code without much explanation, expecting a beginner to understand the loadstring call or what that function even does. It would be much cleaner and easier to read as:

if ( isVisible ) then 
    Menu () 
else 
    deMenu () 
end

Of course, then you could also give proper names to your variables and functions. For example, 'ShowMenu' and 'HideMenu', or simply 'SetMenuVisible' and rename your variable to 'isMenuVisible'.

And then you finally provide the code that is actually meaningful here - how to detect mouse hover/clicks on a DX rectangle. Again, without much explaining.

And that's about it, isn't it?

In the end, if you were to write a proper tutorial, it would all come down to a few lines of talk, one or two lines of code and an image to aid understanding the math for the mentally slow, as this is merely comparing whether the cursor is within a given rectangle (mouse_x >= rectangle_x && mouse_y >= rectangle_y && mouse_x <= (rectangle_x + rectangle_width) && mouse_y <= (rectangle_y + rectangle_height)). In fact, a beginner may have bigger chances of understanding how to do it by looking here: https://github.com/KennyShields/LoveFra ... il.lua#L36 than with this "tutorial".

Link to comment
iAxel Busta

iAxel

Posted
  • Author
Posted
You barely explained what your code was doing, other than a random few comments that won't help.

To begin, "For the beginning, create variables": you write 15 lines of code without explaining what anything is for (for your information, you forgot a closing bracket after the last element of dx_button)) - for example, how do the initial 6 lines help you in any way to accomplish what you were supposed to do? You aren't direct to the point, and add a bunch of code that will only confuse the person reading it. You could provide a working example separated from the explanation in the end of the post.

"Created? great! Now we create function": Yet again, you just provide a bunch of code without much explanation, expecting a beginner to understand the loadstring call or what that function even does. It would be much cleaner and easier to read as:

if ( isVisible ) then 
    Menu () 
else 
    deMenu () 
end

Of course, then you could also give proper names to your variables and functions. For example, 'ShowMenu' and 'HideMenu', or simply 'SetMenuVisible' and rename your variable to 'isMenuVisible'.

And then you finally provide the code that is actually meaningful here - how to detect mouse hover/clicks on a DX rectangle. Again, without much explaining.

And that's about it, isn't it?

In the end, if you were to write a proper tutorial, it would all come down to a few lines of talk, one or two lines of code and an image to aid understanding the math for the mentally slow, as this is merely comparing whether the cursor is within a given rectangle (mouse_x >= rectangle_x && mouse_y >= rectangle_y && mouse_x <= (rectangle_x + rectangle_width) && mouse_y <= (rectangle_y + rectangle_height)). In fact, a beginner may have bigger chances of understanding how to do it by looking here: https://github.com/KennyShields/LoveFra ... il.lua#L36 than with this "tutorial".

I was mistaken, I apologize for my carelessness, and I thank for your help :)

Link to comment
  • 1 month later...
  • Moderators
Citizen Jacker

Citizen

Posted
  • Moderators
Posted
What's the point of using loadstring? all it is doing in your code, is execute one function or the other, there's no need to use loadstring to do that. 
loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))()

What is wrong with the use loadstring?

You can give more information?

You can just do this instead:

if isVisible then 
    Menu() 
else 
    deMenu() 
end

It's easier to read, and so, to maintain. It's faster that using the loadstring function. This loadstring function is a time consuming compared to a simple if - else statement.

So it's not because that your code looks shorter than it is shorter to execute.

So avoid using loadstring if you can do it another way, especially if it's used inside onClientRender or onClientPreRender, you can produce the FPS drops by doing "heavy" tasks in those events.

Link to comment
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...