Cocos2dx + ImGUI : For quick debug UI

Extensions
1

Hi all,

I just rewrite implement of ImGui ( C0i version ) with cocos2d-x v3.8.1

Features:

  • Programable pipline
  • Add ImageButton create with SpriteFrameCached
  • Fix Cocos2d-x Implement
  • Auto add ImGUI layer on top whenever create or change Scene
  • All ImGUI v1.4.8 WIP features + Simple Style Change

1, Replace AppDelegate

2, Add ImGUI functions on any where

CCIMGUI::getInstance()->addImGUI([=](){
  ImGui::SetNextWindowPos(ImVec2(650, 20), ImGuiSetCond_FirstUseEver);
  ImGui::ShowTestWindow(&isShowDemo);
}, "Function ID");

this will auto add to pipline

3, Remove ImGUI functions

CCIMGUI::getInstance()->removeImGUI("Function ID");

4, Other

CCIMGUI::getInstance()->getWindow() \\ Return GLFWwindow*
CCIMGUI::getInstance()->setShowStyleEditor(true or false)

6 Likes
2

Great stuff , but you are missing this file from the repository ['Tool/MapEditorScene.h]

g:\dev\cpp\2d\cocos2d-x-3.10\projects\muguilayer\classes\appdelegate.cpp(2): fatal error C1083: Cannot open include file: 'Tool/MapEditorScene.h': No such file or directory
3

Oh sorry, it is my editor file, not relate to this implement, just replace it to your scene inAppDelegate

4

I just put the default hello world scene and i don’t see any editor there ,

auto scene = Scene::create();
	scene->addChild(HelloWorld::create());
    director->runWithScene(scene);

	// auto check when imGUI layer is not added yet.
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) || (CC_TARGET_PLATFORM == CC_PLATFORM_MAC)
	director->getScheduler()->schedule([=](float dt)
	{
		if(director->getRunningScene()->getChildByName("ImGUILayer") == NULL)
		{
			scene->addChild(ImGuiLayer::create(), INT_MAX, "ImGUILayer");
		}
	}, this, 0,false, "checkImGUI");
#endif
    return true;
5

hmm it is not Editor man,
ImGui is a bloat-free graphical user interface library for C++. It outputs vertex buffers that you can render in your 3D-pipeline enabled application. It is fast, portable, renderer agnostic and self-contained (no external dependencies).
You can read more about it here : https://github.com/ocornut/imgui

Image in my post is just demo it is working with cocos2d-x not include my map editor.

1 Like
6

i know what it is . its ok .
my question is how do i set the gui layer on top of the HelloWorld layer .

7

ok here a simple example:

Copy all class and folder to your class folder.
Add include directory ImGui ( what you just copy )

add #include <imgui.h> on header of helloscene
add it on HelloScene init function.

CCIMGUI::getInstance()->addImGUI([=](){
  ImGui::SetNextWindowPos(ImVec2(650, 20), ImGuiSetCond_FirstUseEver);
  ImGui::ShowTestWindow();
}, "test");

done you have demo window of imGui

Gui layer already in top of your scene.
that part check running scene on director if it contain UI layer or not, if not it add layer and CCIMGUI handle the rest. you do not need take care about it.

#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) || (CC_TARGET_PLATFORM == CC_PLATFORM_MAC)
	director->getScheduler()->schedule([=](float dt)
	{
		if(director->getRunningScene()->getChildByName("ImGUILayer") == NULL)
		{
			scene->addChild(ImGuiLayer::create(), INT_MAX, "ImGUILayer");
		}
	}, this, 0,false, "checkImGUI");
#endif
8

Nice tools. little question about you editor, how do you do a grid like in your editor ?

a tile with a spiite wish show a quad with a contour ? or another accurate meaning ?

im going to create my ingame editor, and im not sure how avoid not accurate tech

9

about grid, i just draw it like normal using DrawNode.
I’m not sure what kind of in-game editor you want but i’m not include it in final product so i not care so much about accurate of editor.
Just care about how map running and it’s performance with quality.

10

It’s glad to hear that somebody use my code github.com/c0i/imguix.

1 Like
11

This is crazy cool! Just checking it out now

12

Update - I’m now in love with ImGUI. It’s so flexible and easy to use.

I’m looking to add ImGui to my Win10 builds now. Anyone know where I would start? I think Win10 builds in cocos using OpenGL ES and then wraps it with ANGLE to make DirectX 11 calls. So to add ImGui, would I used OpenGL ES? Or is it possible to call DirectX 11 on top of ANGLE ?

14

Ah, it uses lower-level calls then I expected for a cocos2dx binding. I’m not sure why I always assume more completeness from projects :[

I wonder what would happen if you just added Win10 platform macro where Win32 is tested.

1 Like