Cómo utilizar el editor cocostudioui para implementar la interfaz de configuración e incluir código

Instale el programa CocoStudio

y prepare los materiales necesarios

Cree un nuevo proyecto, asígnele el nombre "ChaosFight" y configure la Resolución (según las necesidades reales), complete manualmente la resolución aquí. Complete manualmente la resolución aquí.

Importe los materiales del juego al proyecto, agregue un control de cuadro de imagen a la interfaz y muestre el fondo.

Agregue controles según sea necesario. En esta interfaz principal, agregamos un Hay. cuatro botones de texto debajo del cuadro de imagen, cuatro botones de imagen en la fila de abajo y dos botones de texto y un cuadro de texto (cuadro de texto) en la parte inferior.

Al editar, debemos prestar atención a los siguientes puntos:

Al configurar el botón de imagen, puede configurar la imagen para que se muestre cuando esté deshabilitado. Todos los controles en los que se puede hacer clic requieren que la propiedad "interactiva" esté habilitada.

Al configurar los atributos del botón, la imagen predeterminada es consistente con la imagen del efecto de clic (también puede ser inconsistente. Si la imagen del efecto de clic no está configurada, no se mostrará cuando se realice el clic real y estará en blanco)

Exportar cada parte del archivo de recursos

2.2.2.2 En segundo lugar, necesitamos una interfaz de usuario secundaria para "cambiar la contraseña". Interfaz:

Cree un nuevo proyecto e importe recursos relacionados.

Diseñe la interfaz como se muestra a continuación:

Aquí, hemos agregado tres conjuntos de cuadros de contraseña. Al diseñar un grupo de tres controles similares, hay otro pequeño truco: primero localizamos un área de control, como el área de "Contraseña anterior", y luego unificamos la estructura de árbol de los controles relacionados, como se muestra en la figura:

Haga clic en la estructura del objeto a la derecha, podemos copiar el "nodo" de la rama de todo el árbol y luego pegarlo en el árbol, como se muestra en el área "Nueva contraseña" en la En la figura anterior, los controles relacionados se recopilan en el nodo "Nueva contraseña", y luego arrastrar este nodo puede lograr esto muy bien. Arrastrando este nodo, se puede completar el posicionamiento relativo de los elementos internos.

Modificar atributos relacionados, reglas de nomenclatura y exportar recursos

3? Escriba el código para controlar la lógica de la página

Cree un nuevo proyecto, introduzca la biblioteca de extensión CocoGUILIB y los archivos de recursos exportados por el editor de UI (siga las instrucciones oficiales en tiempo real para conocer los pasos para crear el proyecto, diferentes versiones Las instrucciones son diferentes, estamos usando 2.1.4e

Tenga en cuenta que este proyecto es creado por la biblioteca de extensión CocoGUILIB y el editor de interfaz de usuario

Tenga en cuenta que este proyecto es Creado por la biblioteca de extensión CocoGUILIB y el editor de interfaz de usuario.

)

Cree una nueva clase de escena para cargar nuestros recursos de UI

y escriba la lógica relevante. El código clave es el siguiente (implementando funciones de control de lógica de carga y salto) Todos los códigos Es decir, recursos del proyecto: Dirección de descarga del código del proyecto: haga clic para descargar el proyecto completo

#ifndef TestCpp_ChaosFight_ h

#define TestCpp_ChaosFight_h

#include "cocos2d.h"< / p>

#include "CocosGUI.h"

USING_NS_CC;

USING_NS_CC_EXT.

clase ChaosFightUI: CCLayer pública{

público:

escena CCScene* estática();

virtual bool init();

CREATE_FUNC(ChaosFightUI);

vacío tbChangePwdCallback (CCObject* pSender);

void tbBindingEmailCallback(CCObject* pSender);

void tbChangeRoleCallback(CCObject* pSender);

void tbLogoutCallback(CCObject* pSender); )

void btnSoundEffectCallback(CCObject* pSender);

void btnMusicEffectCallback(CCObject* pSender);

void btnSavingElectricityCallback(CCObject* pSender); >

void btnVideoCallback(CCObject* pSender);

void tbAboutCallback(CCObject* pSender);

void tbClearCacheCallback(CCObject* pSender); btnXCallback (CCObject* pSender);

void tbOkCallback(CCObject* pSender);

privado:

UILayer* ul; * ulPwd;

UIButton* btnX;

UITextButton* tbOk;

UITextField* tfOldPwd;

UITextField* tfNewPwd; >

UITextField* tfNewPwdConfirm;

};

#endif

#include "ChaosFight.h"

CCScene* ChaosFightUI : :scene(){

CCScene * escena = CCScene::create();

CCLayer* capa = ChaosFightUI::create();

escena - >addChild(capa);

regresar escena;

}

>

bool ChaosFightUI::init(){

bool bRef = false;

do{

CC_BREAK_IF(!CCLayer::init()) ;

ul = UILayer::create();

// Establece la etiqueta de la capa UI

this->addChild(ul, 0, 100 );

ul->addWidget( CCUIHELPER->createWidgetFromJsonFile("ChaosFight_1/ChaosFight_1.json"));

// Obtener un control único y agregar evento de clic

UITextButton* tbChangePwd =dynamic_cast(ul->getWidgetByName("tbChangePwd"));

UIButton* btnVideo = Dynamic_cast< UIButton*>(ul-> getWidgetByName("btnVideo"));

UITextButton* tbAbout = Dynamic_cast< UITextButton*>(ul->getWidgetByName("tbAbout" ))

UITextButton* tbClearCache =dynamic_cast(ul->getWidgetByName("tbClearCache"));

// Establecer color de fuente

tbChangePwd->setTextColor(0, 0, 0);

tbBindingEmail->setTextColor(0, 0, 0);

tbChangeRole->setTextColor (0 , 0, 0);

tbLogout->setTextColor(0, 0, 0);

tbAbout->setTextColor(0, 0, 0);

tbClearCache->setTextColor(0, 0, 0);

// Agregar eventos de manejo para que el control agregue eventos de manejo

tbChangePwd->addReleaseEvent(this, coco_releaseselector( CaosFightUI: ;

tbClearCa

che->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbClearCacheCallback tbClearCacheCallback));

bRef = true;

} while(0);

return bRef ;

}

void ChaosFightUI::tbChangePwdCallback( cocos2d::CCObject *pSender){

// Crea la interfaz loadChangePwd ulPwd como atributo de miembro de clase para su reutilización

ulPwd = UILayer::create();

ulPwd->addWidget( CCUIHELPER->createWidgetFromJsonFile("ChaosFightPassword_1/ChaosFightPassword_1.json"));

this->addChild(ulPwd);

ulPwd->setAnchorPoint(CCPoint(0.5,0.5));

CCSize winSize = CCDirector::sharedDirector()->getWinSize();

ulPwd->.setPosition(CCPoint(winSize.width / 2 - 250, winSize.height / 2 - 180));

// Obtener Haga clic en el botón Aceptar

tbOk =dynamic_cast( ulPwd->getWidgetByName("tbOk"));

tbOk->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::getWidgetByName ("tfNewPwd"));

tfNewPwdConfirm =dynamic_cast(ulPwd->getWidgetByName("tfNewPwdConfirm"));

tfOldPwd->setColor(ccc3(0, 0, 0));

tfNewPwd->.setColor(ccc3(0, 0, 0));

tfNewPwdConfirm->setColor(ccc3(0, 0, 0)) ;

ul->setTouchEnabled(false);

}

void ChaosFightUI::tbBindingEmailCallback(cocos2d:::tbLogoutCallback(cocos2d::CCObject *pSender) {

CCMessageBox("Cerrar sesión", "título");

}

void ChaosFightUI:.btnSoundEffectCallback(cocos2d::CCObject *pSender){

CCMessageBox("Efecto de sonido", "título");

}

v

oid ChaosFightUI:.btnMusicEffectCallback(cocos2d::CCObject *pSender){

CCMessageBox("music", "title");

}

void ChaosFightUI: .btnSavingElectricityCallback(cocos2d::CCObject *pSender){

CCMessageBox("Ahorro de electricidad", "título");

}

void ChaosFightUI:.btnVideoCallback (cocos2d::CCObject *pSender){

CCMessageBox("credits", "title");

}

void ChaosFightUI::tbAboutCallback( cocos2d： CCObject *pSender){

CCMessageBox("Acerca de", "título");

}

void ChaosFightUI::tbClearCacheCallback(cocos2d:.tbOkCallback(cocos2d ::CCObject *pSender){

// Obtener el valor del cuadro de texto e imprimirlo

const char* value = tfOldPwd->getStringValue();

CCLog(valor);

ul->setTouchEnabled(true);

this->.removeChild(ulPwd);

}

Los resultados finales de la ejecución son los siguientes: Interfaz de usuario secundaria

Interfaz: control del cuadro de entrada de texto: