Cocos2d-x v3.1 GUI system-Environment Building (7)

Cocos2d-x v3.1 GUI system-Environment Building (7)

Because the generated project by default does not import the library required by the GUI system to the project when using the GUI system of the Cocos2d-x, therefore, we must import the library into the project and make some configuration for the project to use the GUI system. In this article, we will first configure the Windows environment and introduce the organizational structure in the GUI system. Then we will write a simple demo to test the environment we configured, finally, we configure the android environment and use this demo for testing.

Windows environment Configuration

In the project directory, we first find the dependent library. The GUI system mainly relies on the "libgui" Library and the "libgui" Library also relies on the "libcocosstudio" library. However, the "libcocosstudio" Library also relies on the "libextensions" library, therefore, we must import all three databases. In the project directory, projectpath is used to represent the project directory. The local directory is D: \ cocosproject \ Cocos \ tutorial ". "Libgui" is placed in the "projectpath \ cocos2d \ Cocos \ UI" directory, and the "libcocosstudio" library is placed in the "projectpath \ cocos2d \ Cocos \ Editor-support \ cocostudio" directory, the "libextensions" inventory is placed in the "projectpath \ cocos2d \ extensions" directory, and there is a subdirectory "proj. win32 ", the vs project file we need is in it. Import to solution, for example:

After importing these projects into the solution, we need to configure the "tutorial" project's additional inclusion directory, and configure the import and export of the "tutorial" project, that is, the above three libraries. As shown in:

Organizational structure of the GUI system

From the above class graph structure, all gui objects are integrated into node, so they also have the node feature. The detailed information will be introduced in a later article. Let's take a look at a simple demo.

PS: The image size is too large. Double-click the image to display the original size.

Test demo

1. For convenience, add the following code to the "init" function in the "helloworldscene. cpp" file:

  1:  m_pTestText  = Text::create("test gui", "Arial", 20);
  2:  m_pTestText->setPosition(Vec2(visibleSize.width*0.5f, visibleSize.height*0.7f));
  3:  addChild(m_pTestText);
  4:  auto button = Button::create("btn-play-normal.png", "btn-play-selected.png");    
  5:  button->setPosition(Vec2(visibleSize.width*0.5f, visibleSize.height*0.6f));
  6:  button->addTouchEventListener(this, toucheventselector(HelloWorld::OnTouchButton));
  7:  addChild(button);

2. Add the header "cocosgui. H" of the GUI system in the "helloworldscene. cpp" file and introduce the namespace "UI". The Code is as follows:

  1: #include "CocosGUI.h"
  2: 
  3: using namespace cocos2d::ui;

3. Add a callback function declaration and define a member variable in helloworldscene, as shown below:

  1: void OnTouchButton(cocos2d::Ref* pObject, cocos2d::ui::TouchEventType eType);
  2: 
  3: cocos2d::ui::Text*   m_pTestText;

4. then define the implementation in the source file. Because it has been bound above, this function is called when you click the button. In this function, when you click the button, the displayed text of m_ptesttext is modified, the Code is as follows:

  1: if(m_pTestText != nullptr)
  2: {
  3:    m_pTestText->setText("Button is pushed!");
  4: }

, As follows:

Environment configuration of the Android platform

The configuration on the Android platform is very simple, in the "projectpath \ proj. the android \ JNI directory contains an android. MK file, we only need to remove the "#" in front of lines 4, 6, 17 and 19.

  1: # LOCAL_WHOLE_STATIC_LIBRARIES += box2d_static
  2: # LOCAL_WHOLE_STATIC_LIBRARIES += cocosbuilder_static
  3: # LOCAL_WHOLE_STATIC_LIBRARIES += spine_static
  4: LOCAL_WHOLE_STATIC_LIBRARIES += cocostudio_static
  5: # LOCAL_WHOLE_STATIC_LIBRARIES += cocos_network_static
  6: LOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static
  7: 
  8: 
  9: include $(BUILD_SHARED_LIBRARY)
 10: 
 11: $(call import-module,.)
 12: $(call import-module,audio/android)
 13: 
 14: # $(call import-module,Box2D)
 15: # $(call import-module,editor-support/cocosbuilder)
 16: # $(call import-module,editor-support/spine)
 17: $(call import-module,editor-support/cocostudio)
 18: # $(call import-module,network)
 19: $(call import-module,extensions)