Cómo utilizar los controles ImageView y Slider

Este artículo registra el uso de dos controles:

ImageView

1. Primero, cree un proyecto llamado "SpriteTest" en Cocos Studio. Luego importé los recursos necesarios al proyecto, importé tres imágenes, que son el niño, la niña y la niña_3 más familiares (se dice que el triángulo es el más fuerte, entonces, ¿qué pasa con el triángulo amoroso?)

1. Exporte el proyecto creado al directorio de Recursos del proyecto Cocos2d-x.

2. Abra el proyecto Cocos2d-x y agregue el archivo .json importado anteriormente. El código es el siguiente:

cocos2d::ui::Widget* image_sp = GUIReader:: getInstance()- >widgetFromJsonFile(" SpriteTest_1.json");//Leer el archivo json

this->addChild(image_sp,2);

Después de eso, ejecute el programa y Aparecerán los tres protagonistas. Sí, no es un gran problema.

Una cosa que quiero señalar aquí es que en Cocos2d-x, el tamaño de la ventana de mi simulador es 960*640, y en el proyecto Cocos Studio, configuré el tamaño de la ventana en 480*320, así que cuando Cuando se ejecuta el programa, encontrará que image_sp se muestra en la posición de origen en la parte inferior izquierda.

3. Creo que image_sp es demasiado complicado para mostrarlo en la esquina inferior izquierda, así que quiero moverlo a la esquina superior derecha. El código es el siguiente:

image_sp->setPosition(Point(300,200));

Bueno, de hecho se ha movido después de ejecutarlo, por lo que parece que este widget no está un gran problema. Entré en su código fuente para ver qué más.

4. A continuación quiero sacar a un niño para que juegue solo. ¿Pero cómo? ¿Usar Sprites? Debes saber que este es Cocos Studio. Tuve una idea: cambiar el Menú a Botón, luego el Sprite debería cambiarse a Imagen. Por cierto, escribí rápidamente el código para intentarlo, pero no pude escribirlo. Finalmente, me di cuenta de que era un truco.

Finalmente, fui a Prueba para mirar el código y descubrí que se usaba ImageView.

ImageView* niño = static_cast(Helper::seekWidgetByName(image_sp, "niño"));

niño->setPosition(Point(240,200) );

Bueno, no hay problema en ejecutarlo.

5. Ingresemos el código fuente de ImageView. Después de leer el código fuente, resulta que solo hay unas pocas líneas, ¡así que no es difícil! Elijamos algunas API clave y echemos un vistazo.

static ImageView* create();//similar a create() de Sprite

static ImageView* create(const std:：string& imageFileName, TextureResType texType = UI_TEX_TYPE_LOCAL);//similar

void loadTexture(const std::string& fileName, TextureResType texType = UI_TEX_TYPE_LOCAL);//initWithFile() de Sprite similar.

No hay nada que decir, solo cambiar la sopa no cambia el medicamento.

La única diferencia es TextureRestType, que debería ser el tipo de textura desde el que se lee el valor, y hay dos:

typedef enum

{

UI_TEX_TYPE_LOCAL = 0,

UI_TEX_TYPE_UI_TEX_TYPE_ LOCALPLIST = 1

}TextureResType;

// UI_TEX_TYPE_LOCAL lee la imagen directamente desde el directorio de recursos, que es la forma predeterminada de crear una ImageView inicializado

p>

// UI_TEX_TYPE_UI_TEX_TYPE _LOCALPLIST debería leer el archivo plist.

6. El último paso es omitir cocostudio e intentar crear un objeto directamente con ImageView. Aquí primero creo un objeto con Sprite para ver si se puede cargar en image_sp. posible. Finalmente mira el código (hay tres chicos)

ImageView* boy = static_cast(Helper::seekWidgetByName(image_sp, "boy")); //extraído con image_sp en

boy ->setPosition(Point(240, 200));

auto boy_cx = Sprite::create("boy.png"); //crear con Sprite

boy_cx ->setPosition(Point(200, 100));

image_sp->addChild(boy_cx,2);

auto boy_cc = ImageView::create("boy.setPosition (Punto (300,100));

image_sp-> addChild(boy_cc,2);

------------------- -------------------------------------------- -------------- ---- ---------------------------------------------- ---- ---

Control deslizante

A continuación, comencemos a usar el control deslizante, que es el ControlSlider en Cocos2d-x

1. Cree un proyecto y luego arrastre el control deslizante a la escena. En la configuración de propiedades, cambié el nombre y dejé todo lo demás como predeterminado. Debido a que se utilizan las imágenes de recursos propios del sistema, el efecto de visualización en Cocos2d-x. /p>

2. Importe el archivo .json del control deslizante en Cocos2d-x y cárguelo en la escena.

El código es el siguiente:

cocos2d::ui::Widget* slideUI = GUIReader::getInstance()->widgetFromJsonFile("SlideUI/SlideUI_1.json"); ->. addChild(slideUI,2);

3.

Slider* slide = static_cast(Helper:. seekWidgetByName(slideUI, "slide")

diapositiva->setPosition(Point(500,200));

De hecho, la razón por la que incluyo este paso en cada artículo es porque quiero entender cuál es el nombre de clase del control deslizante en Cocos2d-x. Por ejemplo, el nombre de clase de ProgressBar en Cocos2d-x es:

LoadingBar.

4. Echemos un vistazo al código fuente de Slide:

// Crear una diapositiva es un poco inusual porque no existe una API para cargar recursos directamente en create

static Slider* create()

// Hay varias formas de cargar. recursos:

p>

//a Carga la barra de fondo. ¿Conoces la barra de fondo? Es la imagen de fondo que muestra toda la barra de progreso cuando el progreso es 0

void loadBarTexture(const std::string& fileName,TextureResType texType = UI_TEX_TYPE_LOCAL

//b Load); y barra de arrastre, es decir, una barra de arrastre que se desplaza en el control deslizante

void loadSlidBallTextures(const std::string& normal,//No muestra la imagen cuando se toca

const std ::string& presionado, //Mostrar imagen al tocar

const std::string& deshabilitado,//No mostrar imagen al tocar

TextureResType texType = UI_TEX_TYPE_LOCAL

);

// Arriba Esta API puede cargar tres imágenes a la vez.

void loadSlidBallTextureNormal(const std::string& normal,TextureResType texType = UI_TEX_TYPE_LOCAL);

void loadSlidBallTexturePressed(const std::string& texType = UI_TEX_TYPE_LOCAL);

void loadSlidBallTextureDisabled(const std::string&disabled,TextureResType texType = UI_TEX_TYPE_LOCAL);

//TextureResType se ha mencionado en la descripción anterior.

Como se mencionó en la descripción anterior, UI_TEX_TYPE_LOCAL significa cargar imágenes de textura directamente desde el directorio de recursos, mientras que

//UI_TEX_TYPE_PLIST significa cargar texturas a través de un plist.

//c Cargando barra de progreso

void loadProgressBarTexture(const std:：string& fileName, TextureResType texType = UI_TEX_TYPE_LOCAL

void setPercent(int percent); //establecer el progreso

int getPercent();//leer el progreso

void addEventListenerSlider(Ref* target,SEL_ SlidPercentChangedEvent selector);//agregar devolución de llamada de evento

5. La siguiente es una forma sencilla de crear un control deslizante:

Automático m_slide = Slider::create();

m_slide->. .png" );

m_slide-> loadSlidBallTextures("SlideUI/sliderThumb.png","");

m_slide->loadProgressBarTexture("SlideUI/sliderProgress.png");

m_slide->setPosition(Point(200,200));

m_slide->setPercent(50);

m_slide->addEventListenerSlider(this,sliderpercentchangedselector(HelloWorld ::.

this->addChild(m_slide,3);

// La siguiente es la declaración de la función de devolución de llamada:

void sliderCallback(Ref). * remitente, tipo SliderEventType)

// Vaya a SliderEventType y vea qué parámetros tiene:

typedef enum

{

SLIDER_PERCENTCHANGED

}SliderEventType;

// Bueno, solo hay uno, y es saltar a la función de devolución de llamada cada vez que cambia el progreso de la diapositiva.

// La siguiente es la implementación de la función de devolución de llamada:

void HelloWorld::sliderCallback(Ref* sender,SliderEventType type)

{

cambiar (tipo)

{

caso SLIDER_PERCENTCHANGED:

CCLOG("Cambio porcentual de diapositiva");

descanso; >

}

}

Eh, eso es todo.

6 Resumen.

Personalmente, Slider todavía no es tan bueno como el ControlSlider original de Cocos2d-x y no hay muchas API.

Después de todo, ControlSlider también tiene que establecer el valor máximo, el valor mínimo de Slider, el valor máximo permitido para deslizarse, etc.