Tabla de contenido
(5) Prostitución blanca confeccionada
(6) Casos de uso específicos de C ++
1. Introducción al blog
Recientemente, hay algunas demandas. Espero mostrar algunas relaciones de perspectiva 3D en el efecto 2D. Me tomé el tiempo para estudiar las ideas de implementación. Echemos un vistazo al efecto después de la implementación.
2. Contenido
(1) Principio
Podemos ver que en el ejemplo al principio, la imagen tiene un efecto de perspectiva muy obvio de casi grande y pequeño. Aquellos que han usado cocos2dx deben saber que hay algo llamado animación de cuadrícula en la acción de cocos. Usando la animación de cuadrícula, puede lograr algunos efectos de animación 3D de cambio de página y movimiento de pantalla. Ahora que se puede lograr el efecto de cambio de página, en teoría debería poder cambiar una imagen en cualquier estructura para mostrar, el efecto al principio se hace con referencia a la animación de la cuadrícula.
(2) Análisis de código
Primero estudiamos parte del código fuente que viene con cocos, y después de conocer las ideas generales de solución, comenzamos a transformar la estructura que necesitamos.
Script relacionado: CCNodeGrid GridBase Grid3D CCActionPageTurn3D
El siguiente es el efecto de un simple paso de página:
auto gridNode = NodeGrid::create();
auto sp = Sprite::create("Hello.png");
gridNode->addChild(sp);
sp->setPosition(Vec2(360, 640));
gridNode->runAction(PageTurn3D::create(5,Size(100,100)));
Consejos: el blogger aquí solo extrae el contenido efectivo en el código fuente y otros atributos del método adjunto, si está interesado en revisarlo usted mismo, el siguiente contenido debe combinarse con el código fuente para que sea fácil de entender.
NodeGrid:
NodeGrid es una clase heredada de Node. La información principal es que reescribe el método de visita de Node. También existe una variable privada de tipo GridBase.
En la función de visita reescrita, cuando _nodeGrid existe y está activo, se llama a un método set2DProjection de _nodeGrid y se ejecuta el método onGridBeginDraw antes de renderizar. Después de llamar al método begainDraw, cuando _nodeGrid existe y está activo, llama al método setProjection del director, restablece la ventana gráfica y, a continuación, llame al método onGridEndDraw.
Veamos los métodos de begainDraw y endDraw, llamando respectivamente a los métodos beforeDraw y afterDraw de _nodeGrid, por lo que la función de NodeGrid está básicamente aquí. Utilice la reescritura del método visit de Node para volver a renderizar el último contenido mostrado en la pantalla.
GridBase:
GridBase crea una instancia de Texture2D en el método init y establece esta textura como el búfer gl, es decir, todo el contenido que mostramos se dibujará primero en esta textura y luego modificaremos la textura.
Dibujar y restablecer la ventana gráfica en beforeDraw y afterDraw
Grid3D:
Grid3D es heredado de GridBase y complementa GridBase en ciertos aspectos, el método getOriginalVertex se utiliza para obtener las coordenadas originales de la cuadrícula correspondiente, y el método setVertex es para establecer las nuevas coordenadas de la cuadrícula correspondiente.
CCActionPageTurn3D ：
En el método de actualización de PageTurn3D, podemos ver que se llama al método setVertex para restablecer las coordenadas de la cuadrícula.
Como se mencionó anteriormente, ya podemos saber aproximadamente cómo se implementa una animación 3DAction
1. Primero construiremos un Nodo de alojamiento. Los objetos agregados a este Nodo no serán renderizados directamente en la pantalla.
2. Cree una nueva textura para recibir información de vértices que se debe representar en la pantalla.
3. Divida esta textura en una cuadrícula de filas de col * de acuerdo con el tamaño personalizado
4. Vuelva a calcular la información del vértice de coordenadas de cada cuadrícula.
5. Finalmente, renderice el estilo calculado en la pantalla.
(3) Grid3D personalizado
En realidad aquí, siempre que pueda comprender el contenido anterior, ¿qué debe hacer a continuación?
1. Necesitamos crear un nuevo GridBase3D, esta clase combina GridBase y Grid3D, y la ventana gráfica final debe dibujarse con una ventana 3D.
2. Cree una nueva clase NodeGrid3D, que es básicamente la misma que NodeGrid, pero GridBase se reemplaza con GridBase3D
3. Finalmente, llamamos manualmente al método setVertex de GridBase3D para mostrar los resultados que desee.
(4) Problemas encontrados
El blogger no dará una introducción detallada a la nueva clase aquí y enumerará algunos problemas en la producción.
1. En la visualización normal, los sprites más allá de la pantalla no se renderizarán. Cuando cambias el eje Z de la cuadrícula, los sprites que no puedes ver aparecerán en el campo de visión, pero debido a que no se renderizaron antes, todavía no se puede procesar. Para
Solución: reescribe una clase Sprite, hereda Sprite, reescribe el método Draw, para que el sprite se renderice en cualquier situación
2. Si configura una ventana gráfica 3D, hay algo llamado sección lejana y sección cercana, es decir, cuando Z es demasiado grande o demasiado pequeña, no se renderizará.
Solución: establezca manualmente el valor de la sección lejana
(5) Prostitución blanca confeccionada
El código ya no se publica. Si lo necesita, vaya al github de blogger para descargarlo usted mismo. Después de descargarlo, colóquelo directamente en el directorio libcocos2d y podrá usarlo después de recompilarlo.
(6) Casos de uso específicos de C ++
这里给个上述例子的写法演示
//创建NodeGrid3D
auto gridNode = NodeGrid3D::create();
scene->addChild(gridNode);
//创建GridBase3D 参数： Size（100,500）网格100*500 720*2048 texture的尺寸 5000远截面距离
auto grid3D = GridBase3D::create(Size(100, 500), 720, 2048, 5000);
gridNode->setGrid3D(grid3D);
//创建精灵添加在NodeGrid3D上
for (int i = 0; i < 5; i++)
{
auto sp = SpriteAll::create("Hello.png");
gridNode->addChild(sp);
sp->setPosition(Vec2(360,160+322*i));
sp->runAction(MoveBy::create(8, Vec2(0, -1000)));
}
//重新设置网格的顶点信息
for (int col = 0; col < 100; col++)
{
for (int row = 0; row < 500; row++)
{
auto vPos = grid3D->getOriginalVertex(Vec2(col, row));
//纵坐标大于150的网格Z值被修改
if (row > 150) {
auto zValue = -(row - 150) * 5;
grid3D->setVertex(Vec2(col, row), Vec3(vPos.x, vPos.y, zValue));
}
}
}
(7) Ejemplo de Lua
以为博主用的是 Cocos2dX+Lua 所有这里添加一段绑定Lua的用例
local gNode = cc.NodeGrid3D:create()
local grid3D = cc.GridBase3D:create(cc.size(100,500),720,2048,5000)
gNode:setGrid3D(grid3D)
for i=1,100 do
for j=1,500 do
local v3 = grid3D:getOriginalVertex(cc.p(i,j))
if j > 300 then
local zValue = (300 - j) * 15;
grid3D:setVertex(cc.p(i, j), cc.vec3(v3.x, v3.y, zValue));
end
end
end3. Empuje
github: https://github.com/KingSun5/Cocos2dx_3DGrid
4. Conclusión
Si crees que el artículo del blogger está bien escrito, es posible que desees prestar atención al blogger y dar me gusta a la publicación del blog. Además, la capacidad del blogger es limitada. Si hay algún error en el artículo, comenta y critica. .
Grupo de intercambio QQ: 806091680 (Chinar)
Este grupo fue creado por el blogger de CSDN Chinar, ¡lo recomiendo! ¡Yo también estoy en el grupo!
Este artículo es un artículo original, por favor vuelva a imprimir la fuente del famoso autor y manténgase en la parte superior. ! ! !