dear imgui 安裝 - 使用 imgui-SFML

Dear imgui 並沒有侷限底層使用的繪圖 API,其本身及提供很多支援,甚至可以很方便地移植到其他繪圖 API 上。

  • 官方維護的 bindings:
    • DirectX 9~12
    • OpenGL 2/3/ES/ES2
    • Vulkan
    • Metal

官方推薦使用方式是到 imgui/examples 挑你要的 example 整合到你的專案裡頭。

imgui-SFML

由於我使用了 SFML 這個函式庫來開發,所以使用由 eliasdaler 維護的 imgui-SFML binding。
imgui-SFML 提供了 CMake 支援,可以很容易的整合進 CMake 專案裡頭。

1
2
find_package(ImGui-SFML REQUIRED)
target_link_libraries(my_target PRIVATE ImGui-SFML::ImGui-SFML)

Setup

imguiimgui-SFML clone 下來,並 cd 到 imgui-sfml/

1
2
3
git clone https://github.com/eliasdaler/imgui-sfml.git
git clone https://github.com/ocornut/imgui.git
cd imgui-sfml

建立目錄 build/ 之後 cmake 產生編譯檔案(我用 msys2 作為 Windows 下的編譯環境,因為有良好的 package system 以及 gnu-toolchain)。

1
2
3
4
mkdir build && cd build
cmake -G "MSYS Makefiles" -DIMGUI_DIR=`pwd`/../../imgui -DBUILD_SHARED_LIBS=OFF -DIMGUI_SFML_BUILD_EXAMPLES=OFF -DCMAKE_INSTALL_PREFIX:PATH=/mingw32 ..
make -j6
make install
  • cmake 參數解釋

    • -DIMGUI_DIR= imgui 所在之路徑(絕對路徑)
    • -DBUILD_SHARED_LIBS= 指定是否建立共享函式庫(dll/so/dylib)
    • -DIMGUI_SFML_BUILD_EXAMPLES= 是否要建置 imgui-SFML 的範例
    • -DCMAKE_INSTALL_PREFIX:PATH= 安裝目錄的前綴
  • CMakeLists.txt

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    cmake_minimum_required(VERSION 3.1)

    project(imgui_sfml_example
    LANGUAGES CXX
    )

    set(CMAKE_CXX_STANDARD 14)

    add_executable(imgui_sfml_example
    main.cpp
    )

    if(APPLE)
    set(SFML_STATIC_LIBRARIES False)
    set(SFML_DIR "/usr/local/Cellar/sfml/2.5.1")
    elseif(MSYS)
    set(SFML_STATIC_LIBRARIES False)
    set(SFML_DIR "/mingw32/lib/cmake/SFML")
    else()
    message(WARNING "Not supported")
    endif()

    find_package(SFML 2.5 COMPONENTS system window graphics network audio REQUIRED)
    target_link_libraries(imgui_sfml_example
    sfml-system sfml-window sfml-graphics sfml-network sfml-audio
    )

    find_package(ImGui-SFML REQUIRED)
    target_link_libraries(imgui_sfml_example
    ImGui-SFML::ImGui-SFML
    )

    if(MSYS)
    target_link_libraries(imgui_sfml_example
    # -mconsole / -mwindows
    )
    endif()
  • main.cpp

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    #include <imgui.h>
    #include <imgui-SFML.h>

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

    int main()
    {
    sf::RenderWindow window(sf::VideoMode(1280, 720), "");
    window.setVerticalSyncEnabled(true);
    ImGui::SFML::Init(window);

    sf::Color bgColor;

    float color[3] = { 0.f, 0.f, 0.f };

    // let's use char array as buffer, see next part
    // for instructions on using std::string with ImGui
    char windowTitle[255] = "ImGui + SFML = <3";

    window.setTitle(windowTitle);
    window.resetGLStates(); // call it if you only draw ImGui. Otherwise not needed.
    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());

    // begin window
    ImGui::Begin("Sample window");

    // Background color edit
    if (ImGui::ColorEdit3("Background color", color)) {
    // this code gets called if color value changes, so
    // the background color is upgraded automatically!
    bgColor.r = static_cast<sf::Uint8>(color[0] * 255.f);
    bgColor.g = static_cast<sf::Uint8>(color[1] * 255.f);
    bgColor.b = static_cast<sf::Uint8>(color[2] * 255.f);
    }

    // Window title text edit
    ImGui::InputText("Window title", windowTitle, 255);

    if (ImGui::Button("Update window title")) {
    // this code gets if user clicks on the button
    // yes, you could have written if(ImGui::InputText(...))
    // but I do this to show how buttons work :)
    window.setTitle(windowTitle);
    }
    ImGui::End(); // end window

    window.clear(bgColor); // fill background with color
    ImGui::SFML::Render(window);
    window.display();
    }

    ImGui::SFML::Shutdown();
    }
  • CMakeLists.txtmain.cpp 放於同一目錄,並執行以下指令進行編譯

    1
    2
    3
    mkdir build && cd build
    cmake ..
    make



如果你覺得這篇文章很棒,請你不吝點讚 (゚∀゚)

推薦文章