Resolución de la interfaz de usuario
I.Cocos Editor
El sistema de diseño automático implica principalmente atributos fijos y atributos extendidos: como se muestra en la figura, en total, la parte superior, inferior, izquierda y derecha del control. se puede modificar Los pasadores y las dos barras elásticas intermedias tienen seis propiedades.
Efecto 1. Cuando cualquiera de los pines está activado, la distancia entre el nodo actual y el borde correspondiente del nodo principal es fija. Cuando se modifica el tamaño de un nodo principal, la distancia entre el nodo actual y el borde correspondiente del nodo principal siempre sigue siendo la misma. 2. Cuando se activan dos pines relativos cualesquiera, la distancia entre el nodo actual y el borde correspondiente del nodo principal es fija. Es decir, cuando se modifica el tamaño del nodo principal, la relación entre la distancia entre el nodo actual y los dos bordes correspondientes del nodo principal siempre permanece sin cambios. 3. Cuando se enciende cualquier barra de estiramiento intermedia (como una barra de estiramiento horizontal), la relación entre el ancho del nodo y el ancho del nodo principal es fija.
Otros 1. Si alguna de las propiedades anteriores no está activada, la posición predeterminada del objeto en relación con la esquina inferior izquierda permanecerá sin cambios. 2. Actualmente, solo los dos tipos de objetos de control (el texto y las fuentes FNT no están disponibles) y los contenedores tienen el atributo de barra extensible.
Conceptos y configuración de código en Cocos2d-x (marco Cocos)
Resolución de diseño y resolución de pantalla: Primero, debemos comprender dos conceptos: Hay dos conceptos en Cocos2d-x Tipos de resoluciones: resolución del dispositivo y resolución de pantalla. La resolución del dispositivo es la resolución real de la plataforma en la que se ejecuta el juego actualmente; la resolución del diseño es la resolución del juego que estamos diseñando. La resolución del diseño es configurable, es el tamaño de resolución que nuestro programa de juego puede "percibir", y cualquier parte de la interfaz que exceda esta área no se mostrará. La resolución del diseño generalmente se establece al inicio
AppDelegate::applicationDidFinishLaunching, el código es el siguiente:
director-gt;getOpenGLView()-gt.setDesignResolutionSize(960, 640, ResolutionPolicy ::FIXED_HEIGHT); (También hay una frase createWithRect en este código, que se usa para crear un emulador de juegos en un sistema de escritorio. Puedes cambiar los dos últimos valores de Rect para cambiar la resolución del dispositivo, pero este valor no tiene efecto en dispositivos móviles). ¿Qué significa este código? Establezca la resolución del diseño en 960, 640 y el esquema de tamaño de la interfaz del juego en un ancho fijo. Este código establece la resolución del diseño en 960, 640 y el esquema de cambio de tamaño de la interfaz del juego en un ancho fijo, pero cuando luego obtenemos la resolución del diseño, las dimensiones que obtenemos no son necesariamente 960, 640. Consulte el código fuente: vaya a la definición de setDesignResolutionSize. Se hicieron algunos juicios y asignaciones y finalmente se llamó a updateDesignResolutionSize. Continúe actualizandoDesignResolutionSize. Parte del código de esta función es el siguiente:
//1. Ejes X e Y cuando se hace zoom: _scaleX= (float)_screenSize.width/ _designResolutionSize.width;
_scaleY= (float)_screenSize.height/ _designResolutionSize.height;
Ajuste la escala y la resolución del diseño de acuerdo con la política de configuración: if(_solvingPolicy== ResolutionPolicy::NO_BORDER){//Establezca los valores de escala de los ejes X e Y al valor máximo
_scaleX = _scaleY = MAX(_scaleX, _ scaleY);
}else if(_solvingPolicy== ResolutionPolicy::SHOW_ALL){//Establezca el valor de escala de los ejes X e Y al más pequeño de ellos
_scaleX = _scaleY = MIN(_scaleX, _scaleY);
}else if(_solvingPolicy == ResolutionPolicy::FIXED_HEIGHT) {
_scaleX = _scaleY; //Fija los ejes X e Y; Al escalar los valores al valor de escala del eje Y, ajusta el ancho de la resolución del diseño para que el ancho de la resolución del diseño aún llene la pantalla después de escalar.
_designResolutionSize.width= ceilf(_screenSize.width/_scaleX);
}else if( _solvingPolicy == ResoluciónPolicy::FIXED_WIDTH) {
_scaleY= _scaleX ; //Fije los valores de escala de los ejes X e Y al valor de escala del eje X y ajuste la altura de la resolución del diseño para que la altura de la resolución del diseño aún pueda llenar la pantalla después de escalar.
_designResolutionSize.height= ceilf(_screenSize.height/_scaleY);
}//Otras estrategias de escalamiento: no ajustar EXACT_FIT. Este código hace principalmente dos cosas: 1. Según. la resolución del dispositivo y la resolución del diseño calculan la relación de escala de la interfaz del juego. 2. Ajuste la resolución del diseño. Según el código fuente anterior, deberíamos comprender fácilmente el significado de varias estrategias de escala: -NO_BORDER consiste en escalar la interfaz del juego proporcionalmente para llenar la pantalla manteniendo sin cambios el tamaño de la resolución del diseño. Se pueden recortar los lados superior e inferior o izquierdo y derecho del juego. -SHOW_ALL (el esquema predeterminado de Cocos 2d-x) escala la interfaz del juego proporcionalmente para que un lado de la resolución del diseño llene la pantalla mientras se mantiene el tamaño de la resolución del diseño sin cambios. El juego puede tener bordes negros en la parte superior e inferior o en los lados izquierdo y derecho. -FIXED_HEIGHT significa fijar la altura de la resolución del diseño, ajustar el ancho de la resolución del diseño para que la relación de aspecto de la resolución del diseño sea la misma que la relación de aspecto de la resolución del dispositivo y luego escalar la interfaz del juego para llenar la pantalla. . -FIXED_WIDTH Igual que el anterior excepto que no se modifica el ancho. -EXACT_FIT es la forma más aproximada de escalar directamente la interfaz del juego para llenar la pantalla, y las relaciones de escala del eje X y del eje Y no son necesariamente las mismas.
Entonces ¿qué opción deberíamos elegir? Inevitablemente deberíamos elegir FIXED_HEIGHT o FIXED_WIDTH, ya que estas son las dos únicas opciones que harán que la interfaz se ajuste automáticamente a la resolución del diseño y llene la pantalla.
A continuación se cargará la interfaz.
La interfaz de carga se completa en HelloWorld::init:
Auto rootNode= CSLoader::createNode("MainScene.csb");
auto size= Director::getInstance()-; gt ; getVisibleSize();
rootNode-gt; setContentSize(tamaño);
ui::Helper::doLayout(rootNode);
addChild(rootNode); ) ) Además de usar createNode para cargar la interfaz y agregarla a HelloWorld, aquí se hacen otras dos cosas:
Establecer el ContentSize de la interfaz de carga y llamar a ui::Helper::doLayout en el; rootNode. Maneja la interfaz de carga.
¿Por qué está diseñado así y por qué debería ejecutarse automáticamente? La primera razón es: es inconsistente con el editor; la segunda razón es: el diseño de ajuste automático del tamaño de la interfaz es pasivo. Si se ajusta activamente, causará una gran pérdida de rendimiento si es necesario recorrerlo nuevamente. cada vez que se establece el tamaño y calcula la posición de todos los nodos secundarios, cuánto tiempo de CPU se desperdiciará. La resolución del dispositivo X/Y es menor que la resolución del diseño X/Y y la estrategia de configuración es de altura fija
Haga clic para ingresar una descripción
La resolución del dispositivo La resolución del diseño X /Y es pequeño y la política está configurada en altura fija
Haga clic para ingresar una descripción
PD: el tipo de enumeración ResoluciónPolicy es una opción predeterminada conveniente proporcionada por el marco. De hecho, podemos obtener la resolución del dispositivo antes de configurar la resolución del diseño y luego ajustar la resolución del diseño nosotros mismos en función de la resolución del dispositivo.