Гайд Mimgui для чайников. Описание, пояснения, шаблоны

[MLycoris]

Путеводитель по гайду
2.0 - Типы буферов
2.1 - Основные аспекты
2.2 - Основные функции
2.3 - Функции для оформления мимгуи окна
2.4 - Изменение стиля(темы) мимгуи

Дополнительные возможности
3.0 - Цветной текст
3.1 - Текст по центру
3.2 - Изменение шрифта (размера) текста
3.3 - Цветная кнопка/сепаратор​

Полезные статьи/видео, которые помогут в изучении мимгуи:

Гайд - mimgui — Dear ImGui for MoonLoader

Добро пожаловать в гайд по mimgui. mimgui — это новая графическая библиотека, написанная в результате устаревания предыдущей графической библиотеки Moon ImGui, использующей Dear ImGui v.1.52; использующая в своей основе свежий релиз Dear ImGui v.1.72. Новая библиотека включает в себя все...

www.blast.hk

Гайд - Примеры Mimgui с пояснениями

Введение Данная тема создана, как продолжение гайда "Mimgui для чайников" (обязательно к прочтению) с целью ознакомить начинающих скриптеров с mimgui на практике. Практика - является лучшим способом изучения чего-либо, пример простых скриптов на луа и их разбор поможет лучше понять данную...

www.blast.hk

Вместе с этим, рекомендую к просмотру гайды @chapo

​

2.0 Типы буферов мимгуи​

Считаю, что начать стоит с типов, которые используются для создания буфера к различным функциям Мимгуи​

• imgui.new.bool() - возвращает true/false (по умолчанию false).​
• imgui.new.char[128]() - хранит символы​
• imgui.new.int() - хранит в себе целую цифру/число (1, 2, 3, 4)​
• imgui.new.float() - хранит в себе нецелую цифру/число (1.1, 1.2, 1.3, 1.4)​

В скобках каждого буфера можно задать значение по умолчанию:

• imgui.new.bool(true) - изначально будет возвращать true
• imgui.new.int(2) - начальным значением задана цифра 2

2.1 Основные аспекты
По команде​

local imgui = require 'mimgui'
local encoding = require 'encoding'
encoding.default = 'CP1251'
local u8 = encoding.UTF8
local new = imgui.new

local WinState = new.bool()

imgui.OnFrame(function() return WinState[0] end, function(player)
    imgui.SetNextWindowPos(imgui.ImVec2(500,500), imgui.Cond.FirstUseEver, imgui.ImVec2(0.5, 0.5))
    imgui.SetNextWindowSize(imgui.ImVec2(245, 270), imgui.Cond.Always)
    imgui.Begin('##Window', WinState, imgui.WindowFlags.NoResize)
    imgui.End()
end)

function main()
    sampRegisterChatCommand('cmd', function() WinState[0] = not WinState[0] end)
    wait(-1)
end

По кнопке​

require('lib.moonloader')
local imgui = require 'mimgui'
local encoding = require 'encoding'
encoding.default = 'CP1251'
local u8 = encoding.UTF8
local new = imgui.new

local WinState = new.bool()

imgui.OnFrame(function() return WinState[0] end, function(player)
    imgui.SetNextWindowPos(imgui.ImVec2(500,500), imgui.Cond.FirstUseEver, imgui.ImVec2(0.5, 0.5))
    imgui.SetNextWindowSize(imgui.ImVec2(245, 270), imgui.Cond.Always)
    imgui.Begin('##Window', WinState, imgui.WindowFlags.NoResize)
    imgui.End()
end)

function main()
    while true do wait(0)
        if wasKeyPressed(VK_R) and not sampIsCursorActive() then -- Если нажата клавиша R и не активен самп курсор (во избежании активации при открытом чате/диалоге)
            WinState[0] = not WinState[0]
        end
    end
end

В imgui.Begin можно задать флаги, которые влияют на само окно и их перечень таков (жирным шрифтом отмечены наиболее популярные флаги):

Спойлер: flags

imgui.WindowFlags.NoDecoration - убирает верхнюю бровь, полузнок для изменения окна и любые другие элементы мимгуи окна
imgui.WindowFlags.NoTitleBar - убирает заголовок окна
imgui.WindowFlags.NoResize - запрещает изменять размер
imgui.WindowFlags.NoMove - запрещает передвигать окно
imgui.WindowFlags.AlwaysAutoResize - автоматически ставит размер окна
imgui.WindowFlags.NoBackground - делает фон окна прозрачным
imgui.WindowFlags.Tooltip - включает подсказки
imgui.WindowFlags.ShowBorders - включает обводку элементов
imgui.WindowFlags.NoScrollbar - убирает ползунок прокрутки
imgui.WindowFlags.NoCollapse - запрещает минимизировать окно при двойном клике
imgui.WindowFlags.NoScrollWithMouse - отключает прокрутку колёсиком мыши
imgui.WindowFlags.NoSavedSettings - отключает сохранения настроек в файл
imgui.WindowFlags.AlwaysUseWindowPadding - создает отступы вокруг окна
imgui.WindowFlags.NoInputs - отключает мышь и клавиатуру
imgui.WindowFlags.NoFocusOnAppearing - отключает фокус при переходе от скрытого к видимому состоянию

При использовании больше 1 флага, их следует перечислять через знак +. Пример:

imgui.Begin('##Window', WinState, imgui.WindowFlags.NoMove + imgui.WindowFlags.NoScrollbar + imgui.WindowFlags.AlwaysAutoResize)

[Примечание]:
1. Любую функцию можно прописать, как условие.
Тогда то, что вы пропишите будет выполнятся при взаимодействии с этой функцией. Пример на чекбоксе:

if imgui.Checkbox(u8'Чекбокс', checkboxone) then
    sampAddChatMessage('Вы нажали на чекбокс', -1)
end

2. Зачем нужен ключ [0]?

Для многих функций необходимо создание буфера, которое хранит в себе то или иное значение/состояние. Например, imgui.new.bool() хранит в себе true/false, а imgui.new.int() хранит в себе целую цифру/число. Чтобы получить их значение используется ключ [0] (в имгуи этим ключом служит .v).
Как правило, каждому буферу создается свой псевдоним (( local checkboxone = imgui.new.bool() )), который прописывается в функции и чтобы получить состояние/значение этой функции, после псевдонима ставится ключ [0], к примеру, для получения состояния imgui.Checkbox('Name', checkboxone) ((в самой функции, где указывается псевдоним буфера, ключ использовать не надо)) к его псевдониму необходимо приписать ключ, в итоге получится checkboxone[0].​

2.2 Основные функции​

[imgui.Button] Обычная кнопка

imgui.Button('Button')

Для неё не надо создавать буфер, но для её работоспособности, необходимо прописать её, как условие, например:​

if imgui.Button('Button') then
    sampAddChatMessage('Вы нажали кнопку',-1)
end

[Доп. непопулярные функции с кнопками]

Спойлер: Кликабельно

Используя эти кнопки, их также нужно прописывать, как условие.
Невидимая кнопка

imgui.InvisibleButton('InvisibleButton',imgui.ImVec2(50,24)) -- 50 ширина, 24 высота

Кнопка в виде стрелки

-- Аргумент number: 0 = влево, 1 = вправо, 2 = вверх, 3 = вниз
imgui.ArrowButton('Arrow',number)

Маленькая кнопка

imgui.SmallButton('SmallButton')

[imgui.CollapsingHeader] Вкладка

imgui.CollapsingHeader('Button')

Для неё не надо создавать буфер, но для её работоспособности, необходимо прописать её, как условие, например:​

if imgui.CollapsingHeader(u8'Пример списка') then
    imgui.TextWrapped(u8'Удобная функция, позволяет сэкономить место и красиво оформить скрипт')
    imgui.Separator()
end

[imgui.Checkbox] Поле с галочкой. Возвращает true/false

-- в начале скрипта
local checkboxone = new.bool() -- создём буфер для чекбокса, который возвращает true/false

-- в мимгуи
imgui.Checkbox(u8'Чекбокс', checkboxone)

Для работы чекбокса, вставлять его в условие необязательно:

function main()
    while true do wait(0)
        if checkboxone[0] then
            sampAddChatMessage('Вы поставили галочку в чекбоксе',-1)
            wait(5000)
        end
    end
end

[imgui.RadioButtonBool & imgui.RadioButtonIntPtr] Радиокнопка
Отличия двух этих функций в том, что:
imgui.RadioButtonBool - принимает true/false
imgui.RadioButtonIntPtr - принимает цифру/число
Их можно использовать следующими способами:
1. Либо с помощью буфера мимгуи, например:

-- вне мимгуи
local radioBool = imgui.new.bool()
local radioInt = imgui.new.int()

-- в мимгуи
if imgui.RadioButtonBool('RadioButton',radioBool[0]) then
    radioBool[0] = not radioBool[0]
end
for i = 0, 3 do
    if imgui.RadioButtonIntPtr(tostring(i),radioInt,i) then
        radioInt[0] = i
    end
end

2. С помощью обычных локалок (применимо только к imgui.RadioButtonBool):

-- вне мимгуи
local radioStatus = false

-- в мимгуи
if imgui.RadioButtonBool('RadioButton',radioStatus) then
    radioStatus = not radioStatus
end

[imgui.InputText] Позволяет работать с различным однострочным текстом

-- в начале скрипта
local inputField = new.char[256]() -- создаём буфер для инпута

-- в мимгуи
imgui.InputText(u8"Ваш текст", inputField, 256)

Чтобы считать текст, введённый в инпут, необходимо его декодировать

text = u8:decode(ffi.string(inputField))
sampAddChatMessage(text,-1)

[imgui.InputTextWithHint] InputText с подсказкой

-- в начале скрипта
local inputField = new.char[256]() -- создаём буфер для инпута

-- в мимгуи
imgui.InputTextWithHint(u8'Ещё пример', u8'Введите текст', inputField, 256)

[imgui.InputTextMultiline] Позволяет работать с различным многострочным текстом

-- в начале скрипта
 local TextMultiLine = new.char[256]() -- создаём буфер для imgui InputTextMultiline

-- в мимгуи
imgui.InputTextMultiline("##MyMultilineInput", TextMultiLine, 256) -- если в первом аргументе стоит ##, то следующий текст виден не будет

-- пример использования
imgui.Text(TextMultiLine) -- выводим текст, написанный в многострочном инпуте

Либо декодим, как с обычным инпут текстом

text = u8:decode(ffi.string(TextMultiLine))

[imgui.SliderInt & imgui.SliderFloat] В простонароде "ползунки"

-- в начале скрипта
local SliderOne = new.int(2) -- создаём буфер для SliderInt со значением 2 по умолчанию
local SliderTwo = new.float() -- создаём буфер для SliderFloat

-- в мимгуи
imgui.SliderInt(u8'Первый', SliderOne, 0, 24) -- 3 аргументом является минимальное значение, а 4 аргумент задаёт максимальное значение
imgui.SliderFloat(u8'Второй', SliderTwo, 0, 4) -- 3 аргументом является минимальное значение, а 4 аргумент задаёт максимальное значение

imgui.SliderInt - возвращает целую цифру/число (1, 2, 3, 4)
imgui.SliderFloat - возвращает нецелую цифру/число(1.1, 1.2, 1.3, 1.4)
Чтобы получить значение, в обоих случаях достаточно добавить ключ [0] к названию буфера. Например:

if wasKeyPressed(VK_Q) and not sampIsCursorActive() then
    sampAddChatMessage('В SliderInt вы установили '..SliderOne[0],-1)
elseif wasKeyPressed(VK_E) and not sampIsCursorActive() then
    sampAddChatMessage('В SliderFloat вы установили '..SliderTwo[0],-1)
end

[imgui.VSliderInt & imgui.VSliderFloat] Вертикальные ползунки

Принцип работы тот же, что и у слайдеров выше, разница лишь во внешнем виде

-- В начале
local testSliderInt = new.int()
local testSliderFloat = new.float()

-- В мимгуи
imgui.VSliderFloat('Float',imgui.ImVec2(50,50),testSliderFloat,0,24)
imgui.VSliderInt('Int',imgui.ImVec2(24,100),testSliderInt,0,50)

[imgui.SliderInt2-4 & imgui.SliderFloat2-4] Полузнки с несколькими параметрами

Ползунки, позволяющие записывать несколько параметров в один буфер
Пример использования SliderInt с 4 параметрами:

-- вне мимгуи
local testSliderInt = new.int()

-- в мимгуи
imgui.SliderInt4('SliderInt4',testSliderInt,0,20)

-- пример использования
imgui.Text(string.format('SliderInt[0] = %s\nSliderInt[1] = %s\nSliderInt[2] = %s\nSliderInt[3] = %s',testSliderInt[0],testSliderInt[1],testSliderInt[2],testSliderInt[3]))

Пример использования SliderFloat с 2 параметрами:

-- вне мимгуи
local testSliderFloat = new.float()

-- в мимгуи
imgui.SliderFloat2('SliderFloat2',testSliderFloat,0,20)

-- пример использования
imgui.Text(string.format('SliderFloat[0] = %s\nSliderFloat[1] = %s',testSliderFloat[0],testSliderFloat[1]))

[imgui.Combo] Позволяет работать со списком

-- в начале скрипта
local ComboTest = new.int() -- создаём буфер для комбо
local item_list = {u8'Раз', u8'Два'} -- создаём таблицу с содержимым списка
local ImItems = imgui.new['const char*'][#item_list](item_list)

-- в мимгуи
imgui.Combo(u8'Список',ComboTest,ImItems, #item_list)

Для работы с ним достаточно к названию буфера добавить ключ [0]. Например:

if wasKeyPressed(VK_R) and not sampIsCursorActive() then
    if ComboTest[0] == 0 then -- комбо возвращает значение, поэтому следует указывать при каком пункте выполняется условие
        sampAddChatMessage('Выбран первый пункт',-1)
    elseif ComboTest[0] == 1 then
        sampAddChatMessage('Выбран второй пункт',-1)
    end
end

2.3 Функции для оформления мимгуи окна​

[imgui.Text] Текст без переноса на следующие строчки​

imgui.Text('Primer')

[imgui.TextWrapped] Текст с переносом на следующие строчки

imgui.TextWrapped('I want to fuck a cheeseburger. Just having that cheesy goodness melt all around my cock woild make me fell at easy with the world again.')

[Доп. непопулярные функции с текстом]

Спойлер: Кликабельно

Удалённый (серый) текст

imgui.TextDisabled('Text Disabled')

Текст в виде списка

imgui.BulletText('Bullet Text')

Текст в 2 столбика (вообще хз где он используется)

imgui.LabelText('One','Two')

[imgui.Separator] Горизонтальная линия

imgui.Separator()

[imgui.SameLine] Отменяет перенос нижней функции на следующую строку

imgui.SameLine()

[imgui.PushItemWidth] Изменение ширины функции
Применимо к: SliderInt, SliderFloat, Combo, InputText (мб ещё чему-то, про что забыл)
Вставляется до и после функции, размер которой необходимо изменить. Пример ниже:​

imgui.PushItemWidth(180)
imgui.SliderInt(u8'Пример', test, 0, 60) -- слайдер
imgui.PopItemWidth()

Переместить функцию по горизонтали/вертикали можно следующими способами​

-- Первый способ
imgui.SetCursorPosX(150) -- позволяет задать положение функции по горизнотали
imgui.SetCursorPosY(140) -- позволяет задать положение функции по вертикали
imgui.Button(u8'Кнопка три')

-- Второй способ
imgui.SetCursorPos(imgui.ImVec2(50, 170)) -- 50 = по горизонтали, 170 по вертикали
imgui.Button(u8'Кнопка три')

Видоизменить размер функции можно следующим образом
Применимо к: Button, InputTextMultiline (мб ещё чему-то, про что забыл)

imgui.Button(u8'Кнопка четыре', imgui.ImVec2(160, 35)) -- 160 - ширина, 35 высота

[imgui.BeginChild] Окно внутри другого окна​

if imgui.BeginChild('Name', imgui.ImVec2(160, 60), true) then
    imgui.Text(u8'Пример чайлда') -- содержание чайлда
    imgui.Button(u8'Тестовая кнопка')
    imgui.EndChild() -- обязательно следите за тем, чтобы каждый чайлд был закрыт
end

[imgui.BeginPopupModal] Всплывающее окно

if imgui.Button('Open') then
    imgui.OpenPopup(u8'Пример')
end
if imgui.BeginPopupModal(u8'Пример', _, imgui.WindowFlags.NoResize) then
    imgui.SetWindowSizeVec2(imgui.ImVec2(290, 190)) -- задаём размер окна
    imgui.Text('Test')
    if imgui.Button(u8'Закрыть', imgui.ImVec2(280, 24)) then -- обязательно создавайте такую кнопку, чтобы была возможность закрыть окно
        imgui.CloseCurrentPopup()
    end
    imgui.End()
end

[Вкладки] Вкладки (2 способа)
1-ый способ встроенной функцией:

if imgui.BeginTabBar('Tabs') then -- задаём начало вкладок
    if imgui.BeginTabItem(u8'Основная вкладка') then -- первая вкладка
 
        imgui.EndTabItem() -- конец вкладки
    end
    if imgui.BeginTabItem(u8'Пустая вкладка') then -- вторая вкладка
 
        imgui.EndTabItem() -- конец вкладки
    end
    imgui.EndTabBar() -- конец всех вкладок
end

2-й способ с помощью кнопок

-- вне мимгуи, можно где-нибудь в начале
local tab = 1

-- в мимгуи
if imgui.Button(u8'Первый раздел') then tab = 1 end -- это первая кнопка, которая будет отвечать за переключение на раздел 1
imgui.SameLine()
if imgui.Button(u8'Второй раздел') then tab = 2 end -- это вторая кнопка, которая будет отвечать за переключение на раздел 2
if tab == 1 then
    imgui.Text(u8'Открыт первый раздел')
elseif tab == 2 then
    imgui.Text(u8'Открыт второй раздел')
end

[imgui.IsItemHovered] Действие при наведении
С помощью этой функции, можно сделать простую подсказку при наведении, пример:

imgui.Button(u8'Пример подскази 1')
if imgui.IsItemHovered() then
    imgui.BeginTooltip()
    imgui.Text(u8'Вы навелись на кнопку')
    imgui.EndTooltip()
end
imgui.Text(u8'Пример подсказки 2')
if imgui.IsItemHovered() then
    imgui.BeginTooltip()
    imgui.Text(u8'Вы навелись на текст')
    imgui.EndTooltip()
end

[imgui.IsItemClicked] Действие при клике
Если вписать это, как условие после какой-либо функции, например, обычного текста (imgui.Text), то выполнится прописанное условие

imgui.Text(u8'Текст')
if imgui.IsItemClicked() then
    sampAddChatMessage('Вы нажали на текст', -1)
end

[imgui.Columns] Таблица
Создаёт колонки/столбики в мимгуи окне

-- для удобства зададим ширину каждой колонки в начале
local w = {
    first = 120,
    second = 70,
}
-- == Первая строка
imgui.Columns(3) -- 3 количество столбцов
imgui.Text(u8'Первая') imgui.SetColumnWidth(-1, w.first) -- первый столбик
imgui.NextColumn()
imgui.Text(u8'Вторая') imgui.SetColumnWidth(-1, w.second) -- второй столбик
imgui.NextColumn()
imgui.Text(u8'Третья') imgui.SetColumnWidth(-1, 80) -- либо можете самостоятельно вписывать
imgui.Columns(1)
imgui.Separator()
-- == Вторая строка
imgui.Columns(3)
imgui.Text(u8'Текст под первой') imgui.SetColumnWidth(-1, w.first)
imgui.NextColumn()
imgui.Button(u8'Кнопка') imgui.SetColumnWidth(-1, w.second)
imgui.NextColumn()
imgui.Text(u8'Колонка 3') imgui.SetColumnWidth(-1, 80) -- копируем верхнее
imgui.Columns(1)
imgui.Separator()
-- == Можете задать сколько вам нужно строк

[imgui.ProgressBar] Прогресс бар

Благодаря этой функции, вы можете рендерить прогресс бар в вашем окне мимгуи. Примеры использования

-- Отражаем скорость нашего персонажа в прогресс баре
local speed = math.floor(getCharSpeed(1))
imgui.ProgressBar(speed/100,imgui.ImVec2(100,24),'Speed: '..speed)

-- Отражаем полоску ХП нашего персонажа в прогресс баре
local myHP = getCharHealth(1)
imgui.ProgressBar(myHP/100,imgui.ImVec2(100,24),'HP: '..myHP)

1-ый аргумент - текущее значение чего либо/максимальное
2-ой аргумент - размеры прогресс бара. Можно указать nil и тогда он растянется до конца окна
3-ий аргумент - надпись внутри прогресс бара
Изменить цвет фона прогресс бара можно с помощью параметра
imgui.Col.FrameBg
Изменить цвет самой полоски прогресс бара можно с помощью параметра
imgui.Col.PlotHistogram
[imgui.Dummy] Отступ по вертикали/горизонтали
С помощью этой функции можно сделать отступ по вертикали/горизонтали

imgui.Text('Test1')
imgui.Dummy(imgui.ImVec2(0,24))
imgui.Text('Test2')

[imgui.NewLine] Пустая строка между функциями
Пример использования:

imgui.Text('1')
imgui.NewLine()
imgui.Text('2')

[imgui.Indent] Отступ на текущей строке
Пример использования:

imgui.Text('1')
imgui.Indent(50)
imgui.Text('2')

2.4 Изменение стиля(темы) мимгуи​

Для начала, надо выбрать любой понравившийся стиль. Будьте внимательны, для мимгуи и имгуи они отличаются. Можно выбрать на последних страницах этой темы:

Информация - Стили/Темы для ImGUI

Приветствую всех! В данной теме вы можете делиться своими стилями/темами для ImGUI. Желательно вместе с кодом прикладывать скриншот того, как выглядит в игре. Что-ж, приступим! :dance:

www.blast.hk

Допустим, мне понравилась эта тема

Информация - Стили/Темы для ImGUI

www.blast.hk

Копируем её и вставляем в конце (чтоб в дальнейшем не мазолила глаза)​

Спойлер: пример

function theme()
    imgui.SwitchContext()
    local ImVec4 = imgui.ImVec4
    imgui.GetStyle().WindowPadding = imgui.ImVec2(5, 5)
    imgui.GetStyle().FramePadding = imgui.ImVec2(5, 5)
    imgui.GetStyle().ItemSpacing = imgui.ImVec2(5, 5)
    imgui.GetStyle().ItemInnerSpacing = imgui.ImVec2(2, 2)
    imgui.GetStyle().TouchExtraPadding = imgui.ImVec2(0, 0)
    imgui.GetStyle().IndentSpacing = 0
    imgui.GetStyle().ScrollbarSize = 10
    imgui.GetStyle().GrabMinSize = 10
    imgui.GetStyle().WindowBorderSize = 1
    imgui.GetStyle().ChildBorderSize = 1

    imgui.GetStyle().PopupBorderSize = 1
    imgui.GetStyle().FrameBorderSize = 1
    imgui.GetStyle().TabBorderSize = 1
    imgui.GetStyle().WindowRounding = 8
    imgui.GetStyle().ChildRounding = 8
    imgui.GetStyle().FrameRounding = 8
    imgui.GetStyle().PopupRounding = 8
    imgui.GetStyle().ScrollbarRounding = 8
    imgui.GetStyle().GrabRounding = 8
    imgui.GetStyle().TabRounding = 8

    imgui.GetStyle().Colors[imgui.Col.Text]                   = ImVec4(1.00, 1.00, 1.00, 1.00);
    imgui.GetStyle().Colors[imgui.Col.TextDisabled]           = ImVec4(1.00, 1.00, 1.00, 0.43);
    imgui.GetStyle().Colors[imgui.Col.WindowBg]               = ImVec4(0.00, 0.00, 0.00, 0.90);
    imgui.GetStyle().Colors[imgui.Col.ChildBg]                = ImVec4(1.00, 1.00, 1.00, 0.07);
    imgui.GetStyle().Colors[imgui.Col.PopupBg]                = ImVec4(0.00, 0.00, 0.00, 0.94);
    imgui.GetStyle().Colors[imgui.Col.Border]                 = ImVec4(1.00, 1.00, 1.00, 0.00);
    imgui.GetStyle().Colors[imgui.Col.BorderShadow]           = ImVec4(1.00, 0.00, 0.00, 0.32);
    imgui.GetStyle().Colors[imgui.Col.FrameBg]                = ImVec4(1.00, 1.00, 1.00, 0.09);
    imgui.GetStyle().Colors[imgui.Col.FrameBgHovered]         = ImVec4(1.00, 1.00, 1.00, 0.17);
    imgui.GetStyle().Colors[imgui.Col.FrameBgActive]          = ImVec4(1.00, 1.00, 1.00, 0.26);
    imgui.GetStyle().Colors[imgui.Col.TitleBg]                = ImVec4(0.19, 0.00, 0.00, 1.00);
    imgui.GetStyle().Colors[imgui.Col.TitleBgActive]          = ImVec4(0.46, 0.00, 0.00, 1.00);
    imgui.GetStyle().Colors[imgui.Col.TitleBgCollapsed]       = ImVec4(0.20, 0.00, 0.00, 1.00);
    imgui.GetStyle().Colors[imgui.Col.MenuBarBg]              = ImVec4(0.14, 0.03, 0.03, 1.00);
    imgui.GetStyle().Colors[imgui.Col.ScrollbarBg]            = ImVec4(0.19, 0.00, 0.00, 0.53);
    imgui.GetStyle().Colors[imgui.Col.ScrollbarGrab]          = ImVec4(1.00, 1.00, 1.00, 0.11);
    imgui.GetStyle().Colors[imgui.Col.ScrollbarGrabHovered]   = ImVec4(1.00, 1.00, 1.00, 0.24);
    imgui.GetStyle().Colors[imgui.Col.ScrollbarGrabActive]    = ImVec4(1.00, 1.00, 1.00, 0.35);
    imgui.GetStyle().Colors[imgui.Col.CheckMark]              = ImVec4(1.00, 1.00, 1.00, 1.00);
    imgui.GetStyle().Colors[imgui.Col.SliderGrab]             = ImVec4(1.00, 0.00, 0.00, 0.34);
    imgui.GetStyle().Colors[imgui.Col.SliderGrabActive]       = ImVec4(1.00, 0.00, 0.00, 0.51);
    imgui.GetStyle().Colors[imgui.Col.Button]                 = ImVec4(1.00, 0.00, 0.00, 0.19);
    imgui.GetStyle().Colors[imgui.Col.ButtonHovered]          = ImVec4(1.00, 0.00, 0.00, 0.31);
    imgui.GetStyle().Colors[imgui.Col.ButtonActive]           = ImVec4(1.00, 0.00, 0.00, 0.46);
    imgui.GetStyle().Colors[imgui.Col.Header]                 = ImVec4(1.00, 0.00, 0.00, 0.19);
    imgui.GetStyle().Colors[imgui.Col.HeaderHovered]          = ImVec4(1.00, 0.00, 0.00, 0.30);
    imgui.GetStyle().Colors[imgui.Col.HeaderActive]           = ImVec4(1.00, 0.00, 0.00, 0.50);
    imgui.GetStyle().Colors[imgui.Col.Separator]              = ImVec4(1.00, 0.00, 0.00, 0.41);
    imgui.GetStyle().Colors[imgui.Col.SeparatorHovered]       = ImVec4(1.00, 1.00, 1.00, 0.78);
    imgui.GetStyle().Colors[imgui.Col.SeparatorActive]        = ImVec4(1.00, 1.00, 1.00, 1.00);
    imgui.GetStyle().Colors[imgui.Col.ResizeGrip]             = ImVec4(0.19, 0.00, 0.00, 0.53);
    imgui.GetStyle().Colors[imgui.Col.ResizeGripHovered]      = ImVec4(0.43, 0.00, 0.00, 0.75);
    imgui.GetStyle().Colors[imgui.Col.ResizeGripActive]       = ImVec4(0.53, 0.00, 0.00, 0.95);
    imgui.GetStyle().Colors[imgui.Col.Tab]                    = ImVec4(1.00, 0.00, 0.00, 0.27);
    imgui.GetStyle().Colors[imgui.Col.TabHovered]             = ImVec4(1.00, 0.00, 0.00, 0.48);
    imgui.GetStyle().Colors[imgui.Col.TabActive]              = ImVec4(1.00, 0.00, 0.00, 0.60);
    imgui.GetStyle().Colors[imgui.Col.TabUnfocused]           = ImVec4(1.00, 0.00, 0.00, 0.27);
    imgui.GetStyle().Colors[imgui.Col.TabUnfocusedActive]     = ImVec4(1.00, 0.00, 0.00, 0.54);
    imgui.GetStyle().Colors[imgui.Col.PlotLines]              = ImVec4(0.61, 0.61, 0.61, 1.00);
    imgui.GetStyle().Colors[imgui.Col.PlotLinesHovered]       = ImVec4(1.00, 0.43, 0.35, 1.00);
    imgui.GetStyle().Colors[imgui.Col.PlotHistogram]          = ImVec4(0.90, 0.70, 0.00, 1.00);
    imgui.GetStyle().Colors[imgui.Col.PlotHistogramHovered]   = ImVec4(1.00, 0.60, 0.00, 1.00);
    imgui.GetStyle().Colors[imgui.Col.TextSelectedBg]         = ImVec4(1.00, 1.00, 1.00, 0.35);
    imgui.GetStyle().Colors[imgui.Col.DragDropTarget]         = ImVec4(1.00, 1.00, 0.00, 0.90);
    imgui.GetStyle().Colors[imgui.Col.NavHighlight]           = ImVec4(0.26, 0.59, 0.98, 1.00);
    imgui.GetStyle().Colors[imgui.Col.NavWindowingHighlight]  = ImVec4(1.00, 1.00, 1.00, 0.70);
    imgui.GetStyle().Colors[imgui.Col.NavWindowingDimBg]      = ImVec4(0.80, 0.80, 0.80, 0.20);
    imgui.GetStyle().Colors[imgui.Col.ModalWindowDimBg]       = ImVec4(0.80, 0.80, 0.80, 0.35);
end

Далее, чтобы её задать, необходимо в любом месте кода вписать следующее

imgui.OnInitialize(function()
    theme()
end)

Много интересного, связанного с оформлением мимгуи, вы можете найти в этой теме

Информация - ImGui сниппеты и частые вопросы

Описание Тема создана с целью сбора удачных решений и ответов на частые вопросы по ImGui интерфейсу. В шапке темы я постараюсь их красиво организовывать, чтобы искать необходимое было легче. Оставляйте свои варианты решений ориентируясь на такой шаблон: Название Скриншот Описание Код Пример...

www.blast.hk

Дополнительные возможности​

Авторы этих функций мне неизвестны, но если вы знаете и скажите кто, то укажу его в теме.​

3.0 Цветной текст​

Встроенной функции с использованием HEX в мимгуи нет, поэтому прибегнем к этой

Спойлер: Скопировать в любое место кода

function imgui.TextColoredRGB(text)
    local style = imgui.GetStyle()
    local colors = style.Colors
    local ImVec4 = imgui.ImVec4
    local explode_argb = function(argb)
        local a = bit.band(bit.rshift(argb, 24), 0xFF)
        local r = bit.band(bit.rshift(argb, 16), 0xFF)
        local g = bit.band(bit.rshift(argb, 8), 0xFF)
        local b = bit.band(argb, 0xFF)
        return a, r, g, b
    end
    local getcolor = function(color)
        if color:sub(1, 6):upper() == 'SSSSSS' then
            local r, g, b = colors[1].x, colors[1].y, colors[1].z
            local a = tonumber(color:sub(7, 8), 16) or colors[1].w * 255
            return ImVec4(r, g, b, a / 255)
        end
        local color = type(color) == 'string' and tonumber(color, 16) or color
        if type(color) ~= 'number' then return end
        local r, g, b, a = explode_argb(color)
        return imgui.ImVec4(r/255, g/255, b/255, a/255)
    end
    local render_text = function(text_)
        for w in text_:gmatch('[^\r\n]+') do
            local text, colors_, m = {}, {}, 1
            w = w:gsub('{(......)}', '{%1FF}')
            while w:find('{........}') do
                local n, k = w:find('{........}')
                local color = getcolor(w:sub(n + 1, k - 1))
                if color then
                    text[#text], text[#text + 1] = w:sub(m, n - 1), w:sub(k + 1, #w)
                    colors_[#colors_ + 1] = color
                    m = n
                end
                w = w:sub(1, n - 1) .. w:sub(k + 1, #w)
            end
            if text[0] then
                for i = 0, #text do
                    imgui.TextColored(colors_[i] or colors[1], u8(text[i]))
                    imgui.SameLine(nil, 0)
                end
                imgui.NewLine()
            else imgui.Text(u8(w)) end
        end
    end
    render_text(text)
end

Пример использования:

imgui.TextColoredRGB('{FF0000}Пр{00FF00}им{0000FF}ер')

3.1 Текст по центру​

Спойлер: Скопировать в любое место кода

function imgui.CenterText(text)
    imgui.SetCursorPosX(imgui.GetWindowWidth()/2-imgui.CalcTextSize(u8(text)).x/2)
    imgui.Text(u8(text))
end

Пример использования:

imgui.CenterText('Пример')

3.2 Изменение шрифта (размера) текста​

Если у вас ещё нет следующей функции в коде, то вписываем её в любом месте:​

imgui.OnInitialize(function()
 
end)

Внутрь этой функции будет указываться необходимый шрифт. В качестве примера будет вызываться шрифт impact.ttf с размером шрифта 16

imgui.OnInitialize(function()
    local glyph_ranges = imgui.GetIO().Fonts:GetGlyphRangesCyrillic()
    example = imgui.GetIO().Fonts:AddFontFromFileTTF(getFolderPath(0x14)..'\\impact.ttf', 16, _, glyph_ranges)
end)

Чтобы начать его использовать в нужном месте, перед и после нужной части кода, необходимо вписывать следующее:

imgui.PushFont(example) -- вызываем функцию, которая меняет шрифт
imgui.Text(u8'Текст жирным шрифтом') -- сам текст
imgui.PopFont() -- функция, заменяющая шрифт заканчивается

Как можно наблюдать, это применимо к тексту на других функциях. Пример со скрина:

-- == Обычный шрифт == --
imgui.Text(u8'Текст')
imgui.Button(u8'Обычная кнопка')
-- == Шрифт impact с размером шрифта 16 == --
imgui.PushFont(example)
imgui.Text(u8'Текст с изм шрифтом')
imgui.Button(u8'Кнопка с изм шрифтом')
imgui.PopFont()
-- == == --

3.3 Цветная кнопка/сепаратор​

Цветная кнопка​

Спойлер: кликабельно

function imgui.ColoredButton(text,hex,trans,size)
    local r,g,b = tonumber("0x"..hex:sub(1,2)), tonumber("0x"..hex:sub(3,4)), tonumber("0x"..hex:sub(5,6))
    if tonumber(trans) ~= nil and tonumber(trans) < 101 and tonumber(trans) > 0 then a = trans else a = 60 end
    imgui.PushStyleColor(imgui.Col.Button, imgui.ImVec4(r/255, g/255, b/255, a/100))
    imgui.PushStyleColor(imgui.Col.ButtonHovered, imgui.ImVec4(r/255, g/255, b/255, a/100))
    imgui.PushStyleColor(imgui.Col.ButtonActive, imgui.ImVec4(r/255, g/255, b/255, a/100))
    local button = imgui.Button(text, size)
    imgui.PopStyleColor(3)
    return button
end

Пример использования:

imgui.ColoredButton(u8'Красная кнопка', 'F94242', 50)
imgui.ColoredButton(u8'Зелёная кнопка', '32CD32', 70,imgui.ImVec2(150,24))

1-ый аргумент - название кнопки,
2-ой аргумент - цвет в HEX формате
3-ий аргумент - прозрачность
4-ый аргумент - размер кнопки

Цветной сепаратор

Спойлер: кликабельно

function imgui.ColSeparator(hex,trans)
    local r,g,b = tonumber("0x"..hex:sub(1,2)), tonumber("0x"..hex:sub(3,4)), tonumber("0x"..hex:sub(5,6))
    if tonumber(trans) ~= nil and tonumber(trans) < 101 and tonumber(trans) > 0 then a = trans else a = 100 end
    imgui.PushStyleColor(imgui.Col.Separator, imgui.ImVec4(r/255, g/255, b/255, a/100))
    local colsep = imgui.Separator()
    imgui.PopStyleColor(1)
    return colsep
end

Пример использования:

for i = 100, 10, -10 do
    imgui.ColSeparator('F94242', i)
    imgui.ColSeparator('32CD32', i)
end

1-ый аргумент - цвет в HEX формате
2-ой аргумент - прозрачность

 

[Sadow]

Чтобы считать текст, введённый в инпут, необходимо его декодировать

text = u8:decode(str(inputField))
sampAddChatMessage(text,-1)

Объясни что str это ffi.string

 

[MLycoris]

Объясни что str это ffi.string

Могу ошибаться, но насколько я понял str позволяет считывать введённый текст в инпуте, чтобы в дальнейшем вывести чат, ну или декодировать в кириллицу. Без этого скрипт банально крашит

 

[Sadow]

Могу ошибаться, но насколько я понял str позволяет считывать введённый текст в инпуте, чтобы в дальнейшем вывести чат, ну или декодировать в кириллицу. Без этого скрипт банально крашит

А зачем мне эта информация7 Напиши просто в теме что str это переменная равная ffi.string. Чтобы чайники вопросы не задавали

 

[MLycoris]

А зачем мне эта информация7 Напиши просто в теме что str это переменная равная ffi.string. Чтобы чайники вопросы не задавали

а, понял, щас уточню, спасибо

 

[sdfy]

В imgui.Begin можно задать флаги, которые влияют на само окно и их перечень таков:

Их больше

API Flags - ImGui v1.77

An unofficel documentation scraped from the source files

pixtur.github.io

 

[MLycoris]

Обновил и апаю гайд:
1. Добавлено 2 шаблона
2. Добавлено 2 примера простых скриптов
3. Чутка обновлён дизайн
4. Добавлено чуть больше подробностей
5. Добавлено описание ещё одной полезной функции и 2 варианта написания обычного текста в окошке

 

[the same]

такой вопрос, есть какой либо сильный смысл переходить с imgfui на mimgui ?

 

[chromiusj]

такой вопрос, есть какой либо сильный смысл переходить с imgfui на mimgui ?

хз,я сразу с мимгуи начал,вроде норм,люди говорят что типо мимгуи более оптимизированей для сампика и тд тп,так что наверно да,можешь попробовать

 

[kyrtion]

Обновил и апаю гайд:
1. Добавлено 2 шаблона
2. Добавлено 2 примера простых скриптов
3. Чутка обновлён дизайн
4. Добавлено чуть больше подробностей
5. Добавлено описание ещё одной полезной функции и 2 варианта написания обычного текста в окошке

Там где сортировка по поиске, рекомендую использовать для поиска по маленькой или большой буквы, а список ставить с маленькой или наоборот, так как и на финде.

Функция типа string.rlower или string.rupper

 

[KOHTOP]

Сделай гайд про добавление двух разделов для конфига
И ещё про radiobutton
Буду благодарен

 

[MLycoris]

Сделай гайд про добавление двух разделов для конфига
И ещё про radiobutton
Буду благодарен

Планировал много всего добавить, но ограничение 50к символов не позволяет, мб 2 тему сделаю

 

[KOHTOP]

Планировал много всего добавить, но ограничение 50к символов не позволяет, мб 2 тему сделаю

Давай вторую часть)

 

[AnWu]

Оформи как статью
Цвета излишни, нет смысла, только жирный текст
Убери забор, выделяй текст только там где нужно
Пример с поиском говно, юзай фильтры имгуи

 

[MLycoris]

Оформи как статью
Цвета излишни, нет смысла, только жирный текст
Убери забор, выделяй текст только там где нужно
Пример с поиском говно, юзай фильтры имгуи

Спасибо, поработаю над этим