Cómo usar TexturePacker para crear animaciones de artillería móvil en cocos2d
Descargo de responsabilidad: todos los artículos originales de este blog están cuidadosamente escritos por time_anime y están destinados únicamente al aprendizaje y la comunicación y no están destinados a la difusión comercial.
Al mismo tiempo, ¡no elimine esta declaración cuando la reimprima!
Este artículo presenta cómo utilizar las herramientas SpriteSheet (forma elfa) y TexturePacker para crear animaciones (Animación) en cocos2d. Si no está seguro acerca del formulario del asistente, consulte esta publicación de mi blog.
En este tutorial, te mostraré cómo usar cocos2d para animar a un artillero girando. Al mismo tiempo, usaré la hoja de sprites para hacer que la animación se ejecute de manera más eficiente y cómo permitir que el usuario haga clic con el mouse para determinar la dirección en la que camina el soldado de artillería girando su cintura.
Primero, creamos un nuevo proyecto cocos2d y lo llamamos PaoPaoBing. ¡curandero!
Si nunca has usado una hoja de sprites, puedes considerarla como una imagen gigante en la que puedes colocar muchos, muchos sprites. Correspondiente a la hoja de sprites, también hay un archivo plist. Este archivo especifica la posición y el tamaño de cada sprite independiente en este "panorama general". Cuando necesite usar este sprite entre códigos, puede ser muy conveniente usar esta información en. el archivo plist para obtener el sprite. ¿Por qué esto mejoraría la eficiencia? ¡Porque cocos2d lo ha optimizado! Si usa spritesheet para obtener sprites, cuando haya muchos sprites en la escena, si estos sprites comparten una hoja de sprites, entonces cocos2d usará una llamada OpenGL ES para representar estos sprites. Sin embargo, si se trata de un solo sprite, habrá N llamadas de OpenGL ES, lo cual es bastante costoso. En resumen: usar una hoja de sprites es más rápido, ¡especialmente si tienes muchos sprites! (El uso de spritesheet también puede reducir el tamaño de la memoria ocupada por el juego.
Dado que necesitas usar spritesheet, por supuesto, puedes crearla manualmente con un editor de imágenes y luego crear un plist para especificar la posición y tamaño de cada sprite en la hoja de sprites. Entonces, ese sería un comportamiento muy SB, porque encontramos una buena herramienta: TexturePacker, que puede ayudarnos a generar todo esto automáticamente.
¡La versión PJ que uso, ambas! MAC y Windows. Sí, y la interfaz funcional es básicamente la misma. Estudiemos el uso de esta herramienta.
Primero, agregaremos 8 cuadros de animación a esta herramienta. El software se lo proporcionará automáticamente. Organice las 8 imágenes en una imagen. Luego haga clic en el botón Publicar en la barra de herramientas para generar los archivos png y plist sintetizados. Recuerde seleccionar Copiar. atributos a HelloWorldLayer.
#import
#import "cocos2d.h"
@interface HelloWorldLayer: CCLayerColor
{
CCSprite * _bear;
CCAction * _walkAction
CCAction * _moveAction
}
@property; (nonatomic,retain)CCSprite * oso;
@property(nonatomic,retain)CCAction * walkAction
@property(nonatomic,retain)CCAction * moveAction; p>+(CCScene *) scene;
@end
Agregue el siguiente código a la implementación de HelloWorldLayer:
@synthesize bear = _bear
@synthesize walkAction = _walkAction;
@synthesize moveAction = _moveAction;
Agregue el método dealloc:
self.bear = nil; /p>
self.walkAction = nil;
self.moveAction = nil;
1. Marcos y texturas del Buffer Sprite
Primero, llama al addSpriteFramesWithFile de CCSpriteFrameCache y luego pase el archivo plist generado por TexturePacker como parámetro. Este método hace lo siguiente:
Busca archivos de imagen en el directorio del proyecto que tengan el mismo nombre que el parámetro ingresado, pero que tengan un sufijo .png. Luego agregue este archivo al CCTextureCache compartido. (En nuestro ejemplo, se carga xiaobing.png)
Analice el archivo plist, rastree las posiciones de todos los sprites en la hoja de sprites y use el objeto CCSpriteFrame internamente para rastrear esta información.
[[CCSpriteFrameCache shareSpriteFrameCache]addSpriteFramesWithFile:@"xiaobing.plist"];
2. Cree un nodo por lotes de sprites:
CCSpriteBatchNode * spriteSheet = [CCSpriteBatchNode batchNodeWithFile:@"xiaobing.png"];
[self addChild:spriteSheet];//Agregue este CCSpriteBatchNode a la escena
3 Recopilar lista de fotogramas:
p. >//Para crear una serie de fotogramas de animación, simplemente iteramos a través de los nombres de nuestras imágenes (se nombran según xiaobing001.png -> xiaobing008.png) y luego usamos el CCSpriteFrameCache compartido para obtener cada fotograma de animación. .
//Recuerde, ya están en el caché porque llamamos al método addSpriteFramesWithFile anteriormente.
NSMutableArray * walkAnimFrames = [matriz NSMutableArray]
for (int i = 1; i <= 8; i ++)
{
[walkAnimFrames addObject:[[CCSpriteFrameCache shareSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"xiaobing%.3d.png",i]]]
}
/ /Crear objeto de animación, creamos un objeto CCAnimation pasando la lista de cuadros de sprites y configuramos la velocidad de reproducción de la animación en 0,1 segundos para que sea el intervalo de tiempo de reproducción de la animación
CCAnimation *walkAnim = [CCAnimation AnimationWithSpriteFrames:walkAnimFrames retraso: 0.1f];
CGSize winSize = [CCDirector shareDirector].winSize
//Primero crea un sprite a través de spriteframe
self.bear = [ CCSprite spriteWithSpriteFrameName:@"xiaobing001.png"];
//Coloca el minion en el centro de la pantalla y recorre todos los cuadros de animación
_bear.position = ccp(winSize. ancho/ 2, winSize.height/2);
self.walkAction = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:walkAnim]]
//[_bear runAction:_walkAction];
[spriteSheet addChild:_bear];
4. Responder a eventos táctiles:
Primero agregue el siguiente código en el método init: habilite la función táctil.
self.isTouchEnabled = YES;
-(void) ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
NSLog(@"¡Cuando comienza el toque!");
}
-(void) ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[_bear stopAllActions];
//Convierte el punto de contacto en el punto del sistema de coordenadas local que queremos usar
UITouch * touch = [toca cualquierObjeto];
NSLog(@"Después de que finaliza el toque, el evento responde...");
CGPoint touchLocation = [toca ubicaciónInView:[toca vista] ] ];
touchLocation = [[CCDirector shareDirector] convertToGL:touchLocation];
touchLocation = [self convertToNodeSpace:touchLocation] //Convierte el punto de contacto en las coordenadas locales que queremos; utilizar el punto de amarre.
float bearVelocity = 480.0/8.0; //Establece la velocidad de movimiento del oso: digamos que el oso tarda 3 segundos en moverse de un extremo de la pantalla del iPhone (480 píxeles de ancho) al otro. , simplemente divide 480 píxeles por 3 segundos
CGPoint moveDifference = ccpSub(touchLocation, _bear.position);//Calcula el movimiento del eje X y del eje Y
// Calcular el oso Equivalente a qué tan lejos se han movido los ejes x e y. Simplemente usamos las coordenadas táctiles para restar las coordenadas actuales del oso. Aquí usamos una función auxiliar ccpSub de cocos2d para lograr esta función.
float DistanceToMove = ccpLength( moveDifference);
// Calcula la distancia real que se movió el oso (Cocos2d también proporciona una función auxiliar para hacer esto). para encontrar una longitud.
float moveDuration = distanciaToMove/bearVelocity;
self.moveAction = [acciones CCSequence:[CCMoveTo actionWithDuration:moveDuration position:touchLocation],
[CCCallFunc actionWithTarget: self selector:@selector(bearMoveEnded)],
nil];
[_bear runAction:_walkAction]
[_bear runAction:_moveAction]; p>
p>
}
-(void) bearMoveEnded
{
[_bear stopAction:_walkAction]
<; p>}Este método de respuesta se llama respuesta táctil estándar. Un artículo futuro explicará específicamente el tacto.