Aprenda & desarrollo de Juego de Maestro Cocos2D

Cocos2D’s clase de CCRenderTexture es cubierto de misterios. La parte de ello porque esto tiene una aura baja a ello, y el más seguramente porque esto simplemente trabaja diferentemente que la mayor parte de nodos Cocos2D. En este seminario usted aprenderá todos sobre CCRenderTexture y para qué usted puede usarlo. In this tutorial you’ll learn all about CCRenderTexture and what you can use it for.

El proyecto de demostración de CCRenderTexture le dirigirá a través de usos básicos de CCRenderTexture con 6 ejemplos, incluso toma de un screenshot, dibujo con sus dedos y aplicación del aspecto borroso de movimiento de pantalla completa.

Como prima también he añadido un ejemplo para CCMutableTexture2D (aka CCTexture2DMutable) que muestra como usted puede poner pixeles en una textura mudable.

• Como crear CCRenderTexture
• Como dar nodos en CCRenderTexture
• Como dibujar la materia de OpenGL en CCRenderTexture
• Como crear elfos de CCRenderTexture
• Como crear screenshots con CCRenderTexture
• El dibujo / Haciendo bosquejos con CCRenderTexture
• Aspecto borroso del Movimiento de Fullscreen con CCRenderTexture
• Pixeles de juego con CCTexture2DMutable aka CCMutableTexture2D
• El proyecto de demostración de CCRenderTexture

La creación de CCRenderTexture es tan fácil como creando cualquier otro CCNode. Usted sólo tiene que especificar la anchura de la textura y la altura y poner la posición de la textura dar. Ya que CCRenderTexture hereda de CCNode usted puede añadirlo sólo entonces como el niño: Since CCRenderTexture inherits from CCNode you can then just add it as child:

La talla de textura puede ser cualquier talla, no tiene que ser el poder de dos. Por supuesto, el dispositivo puede crear una textura que es el poder de dos, entonces la misma precaución se aplica en cuanto a cualquier textura. Por ejemplo, si la talla de textura es 130×260 la textura interna tendrá una talla de 256×512 – el siguiente poder más alto de dos dimensiones. La textura usará más memoria en consecuencia. For example, if the texture size is 130×260 the internal texture will have a size of 256×512 – the next higher power of two dimensions. The texture will use more memory accordingly.

Usted también puede especificar un formato de pixel de textura opcional

Lo siguiente es una lista de formatos de pixel de textura apoyados. El más notablemente usted no puede crear PVR o de 8 bites dan texturas, sólo las texturas de 16 bites y de 32 bites no comprimidas. El intento de crear una textura dar con un formato de pixel diferente que éstos lleva a un accidente. Attempting to create a render texture with a different pixel format than these leads to a crash.

En ausencia recién creado dan la textura es totalmente transparente, entonces usted no verá nada. La manera más fácil de hacer algo con la textura dar debe limpiar la textura entera con un color. En este caso con valores completamente arbitrarios entre 0.0f a 1.0f: In this case with completely random values between 0.0f to 1.0f:

¡Imagine!

No, realmente usted no tiene a. Hay una imagen de ejemplo con un color claro arbitrario a la derecha. ¡Sólo mire! ======>> Just look! ======>>

Obviamente usted querrá hacer más con su dar la textura, como el dibujo de nodos (elfos, etiquetas, efectos de partícula, etc.) en la textura. El dibujo en una textura dar puede pasar en cualquier método, no tiene que ser hecho en el método de empate. Pero la interpretación realmente tiene que pasar entre las llamadas a la textura dar comienzan y terminan métodos. But rendering does have to happen between the calls to the render texture’s begin and end methods.

Para comienzan también hay beginWithClear que limpia la textura entera con un color uniforme y valor alfa. El limpiado es recomendado a menos que usted quiera un efecto caleidoscope. Cualquier CCNode puede ser dibujado en la textura simplemente enviando el nodo el mensaje de visita que lo dibujará: Any CCNode can be drawn onto the texture simply by sending the node the visit message which will draw it:

Tenga presente que el mensaje de visita dibuja el nodo, no el método de empate. Si usted tiene un nodo que hace el dibujo de encargo en su método de empate, y usted quiere dar aquel nodo en una textura dar, usted tendrá que mover el código de dibujo del método de empate al método de visita.

Vaya a crear y dibujar un elfo en la textura dar. Note que es pródigo crear un nuevo elfo cada vez usted dibuja en una textura dar, en particular si usted actualiza la textura dar a menudo (varias veces por segundo). En este caso usted querría esconder los nodos que usted dibuja. In that case you would want to cache the nodes you’re drawing.

Hay varios puntos importantes para llevarse de esto. En primer lugar, ya que la textura dar es ya un niño de nuestra escena, los nodos dados en la textura dar no necesariamente tienen que ser niños también. Enviando a mano el nodo el método de visita, es dibujado en la textura dar. Normalmente esto pasa automáticamente si el nodo es añadido como un niño a la jerarquía de escena. No añadiéndolo, podemos dibujar el nodo a mano en la textura dar pero no será dibujado en cualquier momento o en ninguna otra parte. By manually sending the node the visit method, it gets drawn onto the render texture. Normally this happens automatically if the node is added as a child to the scene hierarchy. By not adding it, we can draw the node manually onto the render texture but it won’t be drawn anytime or anywhere else.

También hicimos el uso del elfo de la textura dar. La propiedad de elfo es el elfo que la textura dar añade a sí para mostrar la textura. La textura dar sí mismo se comporta como CCNode estándar. Esto significa que contentSize de la textura dar y anchorPoint serán 0,0 – tan si usted tiene que hacer el uso de éstos usted tendrá que tomarlos del elfo de la textura dar en cambio. The render texture itself behaves like a standard CCNode. This means that the render texture’s contentSize and anchorPoint will be 0,0 – so if you need to make use of these you will have to take them from the render texture’s sprite instead.

Circular, usted realmente puede enviar el mensaje de visita más que una vez a cada nodo. Así usted puede dar el mismo elfo con propiedades diferentes, como cambios en color, posición, rotación o filtración de textura:

Usted puede usar hasta funciones de mezcla diferentes para cada nodo al cual usted envía la visita. Ray Wenderlich tiene un ejemplo para este caso de uso en su seminario de Enmascaramiento de Elfo.

Éste es fácil a contestar. Como usted envía el mensaje de visita a nodos, usted también puede llamar cualquier orden de dibujo de OpenGL entre comenzar y terminar métodos de la textura dar. Aquí está un ejemplo simple: Here’s a simple example:

Es importante subrayar que usted puede hacer esto en cualquier método, por ejemplo cada marco en el método de actualización. Usted no es obligado a dar órdenes de OpenGL en CCRenderTexture dentro del método de empate de un nodo.

A la derecha usted verá el resultado de este código. Sólo un manojo de líneas, más o menos. Y ya que también a menudo preguntan a esto: sí, usted puede dibujar líneas encorvadas con Cocos2D usando ccDrawCubicBezier o ccDrawQuadBezier. And since this is also often asked: yes, you can draw curved lines with Cocos2D using either ccDrawCubicBezier or ccDrawQuadBezier.

Usted puede crear uno o varios nodos CCSprite que usan la textura de elfo de CCRenderTexture. Los elfos recién creados cambiarán siempre que usted actualice la textura dar. Usted no tiene que crear un nuevo dan la textura para cada nuevo elfo, tampoco usted tiene que crear un nuevo elfo siempre que usted actualizara la textura dar. He visto esto en unos ejemplos de pareja y creo que algunos del "malo dan el tallo de cuestiones” de rendimiento de textura de recrear innecesariamente dan texturas y elfos, en vez de reutilizar los existentes. You do not need to create a new render texture for each new sprite, nor do you need to create a new sprite whenever you updated the render texture. I’ve seen this in a couple examples and I believe that some of the “bad render texture performance” issues stem from needlessly re-creating render textures and sprites, instead of re-using the existing ones.

Aquí está como usted puede crear un elfo de CCRenderTexture:

Un error común es que CCRenderTexture se deriva de CCTexture2D. Esto no hace, por lo tanto usted no puede crear un elfo de un objeto de CCRenderTexture. En cambio usted tendrá que usar sprite.texture de CCRenderTexture para crear un nuevo elfo. Y ya que la textura dar es al revés, usted tiene que tirar el elfo recién creado, por otra parte es dibujado al revés. Instead you will have to use the CCRenderTexture’s sprite.texture to create a new sprite. And since the render texture is upside down, you have to flip the newly created sprite, otherwise it is drawn upside down.

Para hacer su vida un poco más fácil, aquí está una categoría CCSprite que permite que usted cree un CCSprite directamente de CCRenderTexture. Este código también está en el proyecto de demostración:

Si usted crea un CCSprite de CCRenderTexture, usted puede notar que CCRenderTexture es dado diferentemente que el CCSprite la utilización de la textura de la textura dar. Esto es porque los modos de mezcla son diferentes para elfo de CCRenderTexture y objetos de CCSprite regulares. Esto causará CCRenderTexture (abandonado) ser dado opaco, mientras que el CCSprite (derecho) tiene áreas transparentes. This will cause the CCRenderTexture (left) to be rendered opaque, whereas the CCSprite (right) has transparent areas.

Una de las preguntas con frecuencia hechas es “¿cómo crear un screenshot con Cocos2D?”. Varias soluciones han sido creadas con el tiempo, agarrando el parachoques de marco de OpenGL por ejemplo. Pero realmente la solución más fácil y más flexible es usar simplemente CCRenderTexture para tomar un screenshot. La ventaja potente de CCRenderTexture consiste en que usted puede saltar nodos específicos, o sólo tomar un screenshot de una capa específica y sus niños. Usted también no tiene que preocuparse del ahorro del screenshot, ya que CCRenderTexture tiene puede hacer esto con sus métodos saveBuffer. Various solutions have been created over time, grabbing the OpenGL frame buffer for example. But truly the easiest and most flexible solution is to simply use a CCRenderTexture to take a screenshot. The powerful advantage of CCRenderTexture is that you can skip specific nodes, or only take a screenshot of a specific layer and its children. You also don’t need to worry about saving the screenshot, since CCRenderTexture has can do that with its saveBuffer methods.

El proyecto de demostración contiene una clase CCScreenshot que permite que usted tome un screenshot que comienza con un nodo específico. Esto también envuelve el trozo molesto de crear un camino a la carpeta de documentos del app – el único lugar donde usted puede salvar nuevos archivos sobre y dispositivo iOS:

La toma del screenshot sí mismo está muerta simple. En primer lugar, CCRenderTexture con la talla del área de pantalla es creado. Podemos visitar sólo entonces el nodo que fue pasado al método. El método saveBuffer entonces salva el screenshot. We can then just visit the node that was passed to the method. The saveBuffer method then saves the screenshot.

Esto vale la pena mencionar que la textura dar no es explícitamente limpiada. Ya que es un recién creado dan la textura, es limpiado ya. La vocación clara otra vez sería pródiga. Calling clear again would be wasteful.

El formato de saveBuffer es explícitamente hecho guardar el archivo como PNG. La falta saveBuffer método sin el parámetro de formato no debería ser usada, ya que esto guardará el archivo como JPG. He explicado en una entrada de bitácora más temprana por qué JPGs son el formato del archivo peor posible para dispositivos iOS: JPGs son terriblemente lentos para cargar. PNG es el formato preferido. Para CCRenderTexture JPG y PNG son las sólo dos opciones de formato. I’ve explained in an earlier blog post why JPGs are the worst possible file format for iOS devices: JPGs are terribly slow to load. PNG is the preferred format. For CCRenderTexture JPG and PNG are the only two format choices.

Los screenshot dan la textura es devuelto por si usted quiera crear inmediatamente un CCSprite de la textura dar. La creación del screenshot es tan simple entonces como llamando screenshotWithStartNode con un nombre de fichero y el nodo inicial apropiado, por ejemplo la escena o sólo una de sus capas:

Note que la carga del archivo screenshot.png del disco es más lenta que la creación de nuevo CCSprite de una textura ya existente. Pero si usted realmente carga el archivo screenshot, usted debería asegurarse para quitarlo de CCTextureCache. El escondite de textura sólo verá que usted trata de cargar el mismo nombre de fichero otra vez. Si hay ya una textura en la memoria con aquel nombre del archivo, screenshot.png actualizado no será cargado aunque sus contenido hayan cambiado. Permitir recargar la llamada de archivo screenshot.png removeTextureForKey con el camino entero al archivo screenshot: The texture cache will only see that you’re trying to load the same file name again. If there’s already a texture in memory with that filename, the updated screenshot.png will not be loaded even though its contents have changed. To allow reloading the screenshot.png file call removeTextureForKey with the full path to the screenshot file:

Note que después de salvar CCRenderTexture con saveBuffer como un PNG o archivo JPG, usted ya no tiene que tirar (scaleY =-1) el elfo cuando usted crea nuevo uno del archivo screenshot.

El screenshot al derecho muestra screenshot recientemente tomado dibujado sobre la escena actual, y despacio descoloración y alejar.

Sólo no espere crear un screenshot, o hasta sólo un con el tamaño de pantalla da la textura (sin salvar) sin un retraso de rendimiento sensible hasta en los últimos dispositivos. Esto no es definitivamente algo que usted querrá hacer mientras su juego comienza, pero es absolutamente fino para tomar un screenshot para un savegame o después de ganar el juego, por ejemplo.

Éste pica un rasguño y graba al agua fuerte un esbozo. En otras palabras: como usar CCRenderTexture para un dibujo o dibujar el programa. La diferencia principal que aquí es esto usted no quiere limpiar la textura dar cada vez usted comienza a dibujar a ella: how to use CCRenderTexture for a drawing or sketching program. The main difference here being that you do not want to clear the render texture every time you begin drawing to it:

Importante para considerar es el hecho que las posiciones de toque deben ser convertidas al espacio de nodo del elfo de la textura dar. La tentativa de convertir la posición de toque al espacio de nodo de la textura dar no le dará los resultados correctos. Además, ya que la textura del elfo es al revés, la coordenada de touchLocation.y también debe ser invertida de modo que el origen (0, 0) la coordenada esté con eficacia en la esquina izquierda superior de la textura. Furthermore, since the sprite’s texture is upside down, the touchLocation.y coordinate must also be inverted so that the origin (0, 0) coordinate is effectively at the upper left corner of the texture.

Otra curiosidad a unos puede ser como soy capaz de iterar sobre los objetos de UITouch. Es la práctica común para "coleccionar" toques en una serie o simplemente reteniendo el NSSet. En este caso fui con una serie. Cada nuevo toque es añadido a la serie, y siempre que un toque se termine es quitado: In this case I went with an array. Each new touch is added to the array, and whenever a touch ends it is removed:

Mientras un dedo permanece en la pantalla que el objeto de UITouch* correspondiente permanece en la memoria y sólo actualiza sus propiedades. Iterando sobre los toques ponen en orden puedo dibujar nodos en la posición de cada dedo, aun cuando uno o varios dedos no se mueven. Esto permite el elfo que es dado con la opacidad muy baja para hacerse más opaco el más largo usted sigue tocando la misma posición, desde la interpretación del mismo elfo tiempos múltiples sin limpiar la textura dar se hacen una operación aditiva. This allows the sprite that is rendered with very low opacity to become more opaque the longer you keep touching the same location, since rendering the same sprite multiple times without clearing the render texture becomes an additive operation.

Hacer bosquejos con una textura dar tiene un inconveniente significativo: usted no puede deshacer. Lo que es dibujado en la textura permanece para siempre. Usted no puede llevarse el más reciente, o cualquiera, dibujar órdenes. Usted sólo puede limpiar la textura entera y dejar al usuario comenzar. What is drawn onto the texture remains forever. You can not take away the most recent, or any, draw commands. You can only clear the entire texture and let the user start over.

Sin embargo, usted puede conseguir algunos resultados chulos como visto en el screenshot.

Una vez que yo era capaz de dar los contenido de la pantalla en una textura separada, yo tenía la idea de poner en práctica una utilización de efecto de aspecto borroso de movimiento CCRenderTexture. El principio es relativamente simple:

• Cree múltiple dan texturas
• Dé la pantalla corriente en "lo menos recientemente dibujado para” dar la textura
• Dibuje todos dan texturas con la opacidad creciente, en el pedido de lo menos recientemente dibujado a hasta el que que fue actualizado sólo con los contenido de la pantalla

Esto crea un efecto de aspecto borroso no haciendo nada más que añadir imágenes de la oposición con la transparencia creciente. Usted puede ver el efecto final en el screenshot a la derecha.

La primera tarea es crear las texturas dar, en ausencia 4. Más y el precio de marco se cae demasiado lejos, cualquiera menos y el efecto simplemente tan pronunciado como me gustaría esto ser. Ya que quiero el efecto de aspecto borroso de dar normalmente con la transparencia, creo un CCSprite de cada uno dan la textura y sólo añaden los nuevos elfos a la lista de niños de la escena. Las texturas dar son retenidas en una serie en cambio. Para ser capaz de conseguir CCSprite correspondiente de cada uno dan la textura también adjudico el renderSprite a la propiedad userData de la textura dar: Since I want the blur effect to render normally with transparency, I’m creating a CCSprite from each render texture and only add the new sprites to the scene’s children list. The render textures are retained in an array instead. To be able to get the corresponding CCSprite from each render texture I also assign the renderSprite to the render texture’s userData property:

Ahora viene la parte inteligente. Ya que la escena sólo debería ser dibujada en una textura dar, y luego la escena debería dibujarse de los 4 dan elfos de textura, decidí superponer el método de visita y explícitamente no llamo la realización súper. Esto permite que yo consiga control lo que es dado donde. That allows me to gain control over what is rendered where.

Primero comienzo dibujando todos los nodos enturbiados por el movimiento (etiqueta == 10) en actualmente seleccionado dan la textura. Entonces pido de nuevo las texturas dar de lo menos recientemente dibujado a más recientemente dibujado con el aumento z pedido y aumento de la opacidad. Al mismo tiempo la llamada a selectNextRenderTexture también asegurará que la siguiente visita dibujará a lo menos recientemente dibujado dan la textura. At the same time the call to selectNextRenderTexture will also ensure that the next visit will draw to the least recently drawn render texture.

Finalmente, simplemente llamo la visita en cualquier nodo que no tenga la etiqueta 10 para darlos. Esto incluye los elfos de textura dar más cualquier otro nodo como etiquetas o el botón trasero.

Quité la imagen de fondo para esta demostración de modo que el efecto de aspecto borroso de movimiento sea más evidente. Como sensible sin embargo es una gota en el rendimiento, por ejemplo en un iPod 4 a aproximadamente 40 fps. Esto es muy probable debido al hecho que hay 4 texturas fullscreen dadas. This is very likely because of the fact that there are 4 fullscreen textures being rendered.

El ejemplo de aspecto borroso de movimiento en el proyecto de demostración irá en bicicleta cada 20 segundos de limpiado o de no limpiado las texturas dar. En el caso último usted puede crear un efecto parecido a caleidoscope, como visto en el screenshot a la derecha.

Otra pregunta con frecuencia hecha: ¿Cómo poner/ponerse pixeles de una textura con Cocos2D?

Hay una clase CCTexture2DMutable comúnmente usada que flota alrededor de que fue al principio fijado aquí por Lam Hoang Pham. Hay una variedad de versiones que flotan alrededor pero la clase CCTexture2DMutable más moderna (por manucorporat) está aquí.

Con esto, usted puede crear un elfo que usa una textura mudable:

Usted puede echar entonces la textura de aquel elfo a un CCMutableTexture2D y llamar su método setPixelAt de cambiar el color del pixel en la posición dada. Cuando usted es hecho actualizando la textura mudable, usted también tiene que llamar se aplican de modo que los cambios se hagan visibles:

La adquisición de un pixel es hecha de una moda similar con pixelAt:

El proyecto de demostración dibuja un color que cambia a pixeles arbitrarios en la textura. La textura es aumentada y la filtración de textura es apagada de modo que los pixeles sean más fácilmente visibles.

De la curiosidad hice una subclasificación de experimento CCRenderTexture y modificación del método init entonces esto usaría CCTexture2DMutable. Mientras esto trabajó perfectamente en el Simulador, esto se estrella en dispositivos iOS actuales. Entonces parece que usted no puede casarse con CCRenderTexture y CCTexture2DMutable. So it seems you can not marry CCRenderTexture and CCTexture2DMutable.

A fin de poner o cambiar los pixeles en CCRenderTexture usted puede usar órdenes de dibujo de OpenGL regulares, o hacer el uso de métodos de dibujo de conveniencia Cocos2D’s como ccDrawPoint.

Agárrelo aquí. Este proyecto también está disponible en mi depósito github donde recibo todo el código fuente iDevBlogADay. where I host all of the iDevBlogADay source code.

El código es libre de usar y modificar lo que quiera. Todo mi código está según la Licencia de MIT, el CCTexture2DMutable no tiene ninguna licencia claramente identificable, pero fue dicho ser utilizable “tan libremente como usted desea”.

¡Como de costumbre, si usted tiene cualquier pregunta no dudan en preguntar! ¡Y si usted disfrutó de este correo no olvidan de piar, como o más - un esto, gracias!