[Tutorial] LuaEngine Development Tutorial (5) - Using LuaEngine UI

LuaEngine’s UI component can provide the function of displaying data in real time in the game. LuaEngineUI integrates the ImgUI function. You can draw the data display window by yourself according to the ImgUI method bound in https://github.com/MSeys/sol2_ImGui_Bindings. It is very convenient for mod development.

Please note that LuaEngine has stripped the ImgUI function from the body since version 1.1.5. You cannot use the ImgUI function if you only install LuaEngine. You need to install the LuaEngineUI module separately, and remove the DX11 support. If you need to use the ImgUI function, you need to ensure that the game runs in DX12 mode.

Do you remember the teleport script we taught you to write in the second tutorial? We take this script as an example and teach you how to use the UI function. The goal of our tutorial is to display the recorded coordinates in real time in the game, and add a button to delete the coordinates and teleport immediately.

From the script we wrote before, we can see that the key to teleportation is the coordinates we recorded before. Next, we use the UI function to draw a window, and write these three coordinates in the window, so that we have achieved the first step of displaying the recorded coordinates in real time.

To draw a window in the game, the first step is to create a function on_imgui that is built-in by LuaEngine. Then we can find from the ImgUI binding document that the method of creating a window is ImGui.Begin and ImGui.End. Next, we write the code into the script and reload it in the game to see the effect.

You can see that a small window appears in the game (what, your window is very small, just a small square? Is it possible that you can enlarge it). Next, the content we want to display will be drawn in this window.

We can find from the binding method that ImGui.Text can display text in the window, and ImGui.InputFloat3 can display a group of three float type data in the window. These two can meet our requirements. Next, we write the code to display the coordinates.

Here I used two methods to write the code to display the coordinates. You can see that both methods can achieve our requirements. When using InputFloat3, we additionally specify the display of five decimal places and the read-only attribute.

Next, we add two buttons. According to the binding document, ImGui.Button is the button function. Our two buttons are used to clear the coordinates and teleport immediately. The code is the same as before using the shortcut keys. Next, we reload the code and see the effect.

Here we only keep the display method of InputFloat3. You can choose according to your own needs in actual use. You can see that the two buttons are displayed in the window. Click and try, the function is normal.

Here we pay attention to the code. In the first line of on_imgui, we added local Data_Player = engine.Player:new(). Do you remember what this is for? Yes, this is the code for instantiating player data. We still need to instantiate it again when calling player data in on_imgui. If we don’t have this line of code, we can’t access the player data.

This tutorial is basically over. ImgUI has many functions and is very flexible. If you want to use ImgUI well, I suggest you learn how to use ImgUI specifically. The functions demonstrated here are enough to use as auxiliary development scripts.


Since lua does not have the function of binary operation, it cannot perform shift calculation. Here is a code to assist the shift calculation of the flag. You can use bitmod(ImGuiWindowFlags.NoBackground, ImGuiWindowFlags.NoTitleBar) to merge the values of the two flags.

function bitmod(numberA, numberB)

    local byteA = byte2bin(numberA)

    local byteB = byte2bin(numberB)

   

    for k, v in ipairs(byteA) do

        if byteA[k] == 0 and byteA[k] ~= byteB[k] then

            byteA[k] = 1

        end

    end


    return tonumber(table.concat(byteA), 2)

end

function byte2bin(n)

    local t = {}

    for i=7,0,-1 do

        t[#t+1] = math.floor(n / 2^i)

        n = n % 2^i

    end

    return t

end


by Alcedo Update on 2024-01-11
By giving a Reward you can download the attachment(s) instantly.(amount is set by author) The gift of a rose leaves a lasting impression.
Default
Newly
1