Гайд [GameDev] Урок 4. Пробуем работать с ImGUI

[entrypoint]

Всем привет. Как обычно советую ознакомиться с предыдущей статьей. А сегодня мы:

• узнаем что такое ImGui
• почему именно эта библиотека
• попробуем использовать ImGui на практике

Небольшое вступление.
Эта статья будет больше теоретической, нежели практической. Это связано с тем, что в нашем коде не реализовано много вещей, с которыми мы впоследствии, будем взаимодействовать через ImGui. Тем не менее, этот урок поможет нам в будущем, так как он является вводным.
Конец вступления.

Что же такое ImGui. Если говорить проще, то это графический пользовательский интерфейс, разработчиком которого является ocornut. Это достаточно распространенный GUI, для которого существует много биндингов (связок с другими библиотеками), а также модификаций.
Вкратце говоря, это все кнопочки, слайдеры, чекбоксы и др.

Данную библиотеку я выбрал потому что:

• она достаточно проста в использовании
• проста в кастомизации
• достаточно популярна и имеет много модификаций

Ну а теперь к практике. ImGui будет служить нам средством отладки нашей игры, поэтому давайте попробуем отладить нашего персонажа, а точнее скорость его анимации и скорость передвижения. Для этого две целочисленные переменные obj_speed (скорость объекта) и anim_speed (скорость персонажа). Создаем их до главного цикла:

float anim_speed = 0;
float obj_speed = 0;

Далее в рендер окна ImGui добавим два слайдера (можно и Input использовать, но слайдер удобнее) с минимальным значением 0.1 и максимальным 10:

ImGui::SliderFloat("Animation Hero Speed", &anim_speed, 0.1, 10);
            ImGui::SliderFloat("Hero Speed", &obj_speed, 0.1, 10);

Теперь мы можем отладить некоторые параметры персонажа прямо в игре! Но подождите, мы изменили просто переменные. Теперь нам нужно установить эту скорость при помощи соответствующих сеттеров. Этот код вставляем после рендера интерфейса:

Hero.SetAnimationSpeed(anim_speed);
        Hero.SetHeroSpeed(obj_speed);

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

Вот собственно и весь гайд. Получился коротковат, но причиной этого является мой отъезд на 4 дня. Следующий гайд будет объемнее, маштабнее и интересней.

Спасибо за внимание!

​

Спойлер: Полный код урока

#include "imgui.h"
#include "imgui-sfml.h"

#include <SFML/Graphics/RenderWindow.hpp>
#include <SFML/System/Clock.hpp>
#include <SFML/Window/Event.hpp>

using namespace sf;

int main()
{
    sf::RenderWindow window(sf::VideoMode(640, 480), "Window"); // создаем окно с названием "Window" и разрешением 640X480
    window.setVerticalSyncEnabled(true); //устанавливаем вертикальную синхронизацию для плавности картинки
    
    ImGui::SFML::Init(window); //инициализируем окно ImGui с нашим омновным окном
    
    Image tileset_image;
    tileset_image.loadFromFile("data/images/tileset.png" );
    Texture tileset_texture;
    tileset_texture.loadFromImage(tileset_image);
    CPlayer Hero(tileset_texture, 100, 50);
    sf::Clock deltaClock; //создаем "таймер" который будет обновлять окно
    
    while (window.isOpen())  //основной цикл программы, работающий, пока окно открыто
    {
        sf::Event event; //событие, может быть равно "закрытию программы", "нажатию клавиши" и др.
        while (window.pollEvent(event))  //обработчик события
        {
            ImGui::SFML::ProcessEvent(event); // программа принимает на себя событие

            if (event.type == sf::Event::Closed)   // обработчки события, в данном случае, закрытия окна
            {
                window.close();
            }
        }

        ImGui::SFML::Update(window, deltaClock.restart()); // обновляем окно

        if ((Keyboard::isKeyPressed(Keyboard::Left) || (Keyboard::isKeyPressed(Keyboard::A))))
        {
            Hero.SetDX(-Hero.GetHeroSpeed());
        }
        else if ((Keyboard::isKeyPressed(Keyboard::Right) || (Keyboard::isKeyPressed(Keyboard::D))))
        {
            Hero.SetDX(Hero.GetHeroSpeed());       
        }
        else if ((Keyboard::isKeyPressed(Keyboard::Up) || (Keyboard::isKeyPressed(Keyboard::W))))
        {
            Hero.SetDY(-Hero.GetHeroSpeed());
        }
        else if ((Keyboard::isKeyPressed(Keyboard::Down) || (Keyboard::isKeyPressed(Keyboard::S))))
        {
            Hero.SetDY(Hero.GetHeroSpeed());       
        }
        
        ImGui::Begin("ImGui Window"); // создаём окно ImGui
            ImGui::SliderFloat("Animation Hero Speed", &anim_speed, 0.1, 10);
            ImGui::SliderFloat("Hero Speed", &obj_speed, 0.1, 10);
        ImGui::End(); // end window
        Hero.SetAnimationSpeed(anim_speed);
        Hero.SetHeroSpeed(obj_speed);
        Hero.update(Hero.GetAnimationSpeed());
        window.clear(Color::White); // заполняем окно заданным цветом
        window.draw(Hero.GetSprite());
        ImGui::SFML::Render(window);// отображаем окно ImGui в основном окне
        window.display(); // отображаем все это на экране
    }

    ImGui::SFML::Shutdown(); // завершаем работу ImGui при закрытии программы
}

​

 

[Viimp]

спасибо большое. Познавательно очень

 

[VortexTts]

Спасибо большое. Обширно. Будем пробовать.