Share
Una de las acciones más comunes utilizadas para una aplicación de iPhone o iPad es el evento táctil. Un evento no es útil si no desencadena una acción significativa. Este tutorial cubre cómo adjuntar un evento táctil a un botón personalizado y cómo activar la animación de un objeto. Al final, el resultado es un simple controlador de juego en pantalla, que puede extenderse hasta los límites de su imaginación..
Abre Xcode y comienza un nuevo proyecto. Seleccione la aplicación basada en la vista. Nombra la aplicación "saltando", para que puedas seguirla fácilmente.
Después de descargar el archivo de proyecto adjunto, abra la carpeta "Imágenes". Aquí encontrará todos los recursos de imágenes que necesitamos para este proyecto, incluidas tres imágenes de sprite de Ryu de Streetfighter creadas por PanelMonkey. Tendrá que copiar las imágenes en la carpeta de recursos del proyecto arrastrándolas desde la carpeta en el Finder hasta el panel "Grupos y archivos" en Xcode.
En la solicitud de Xcode que aparecerá, asegúrese de marcar la casilla "Copiar elementos en la carpeta del grupo de destino (si es necesario)".
Todas las imágenes necesarias para el proyecto ahora deben copiarse en la misma carpeta donde se encuentra el archivo del proyecto. Ahora, para mantener limpia la carpeta de recursos, agrupemos todas las imágenes que acabamos de importar juntas. Seleccione todas las imágenes manteniendo presionado el comando y haciendo clic en cada archivo. Ahora haga clic izquierdo o ctrl + clic y seleccione "Grupo" en el menú resultante. Nombra al grupo como desees. Nombré las mías "imágenes".
Construye y ejecuta la aplicación en el estado actual. No debería haber errores de compilación y el simulador debería mostrar una pantalla plana y gris..
Dentro de jumpingAppDelegate.m, modifique el método didFinishLaunchingWithOptions agregando la siguiente línea:
// Asigne una nueva vista, agregue esta línea: self.viewController = [jumpingViewController alloc]; [ventana addSubview: viewController.view];
Esto asignará un nuevo controlador de vista. Este paso es necesario porque no usaremos Interface Builder para crear nuestra vista para nosotros.
En el archivo de encabezado del controlador de vista (jumpingViewController.h), dentro de la interfaz, declare una nueva propiedad agregando:
UIImageView * jugador;
Luego, antes de @end, agregue:
@property (no atómico, retener) reproductor UIImageView *;
Esto nos permitirá usar "jugador" como propiedad de clase para una imagen.
El archivo de encabezado ahora debería verse así:
#importar@interface jumpingViewController: UIViewController jugador de UIImageView *; @propiedad (no atómica, retener) reproductor UIImageView *; @fin
Nuestro siguiente paso es agregar los elementos gráficos y de interfaz a esta vista.
Abra el archivo jumpingViewController.m y elimine los métodos comentados existentes. Deja las que no están comentadas..
En la parte superior, después de @implementation jumpingViewController, agregue:
@synthesize jugador;
Actualice el método dealloc a lo siguiente:
- (void) dealloc [jugador liberado]; [super dealloc];
A continuación, inserte el siguiente método:
- (void) addButton UIButton * button = [[UIButton buttonWithType: UIButtonTypeCustom] initWithFrame: CGRectMake (240, 150, 50, 50)]; // Establecer la imagen del botón [button setBackgroundImage: [UIImage imageNamed: @ "button.png"] forState: UIControlStateNormal]; // Adjuntar un evento [button addTarget: self action: @selector (buttonPressed) para ControlEvents: UIControlEventTouchUpInside]; // Agregar el botón a la vista [self.view addSubview: button];
El método addButton se llamará más adelante para, adivinó, agregar el botón a la vista. Lo primero que debes notar es que este es un botón personalizado. En segundo lugar, buttonPressed es el nombre de un método que se llamará cuando se dispare el evento táctil.
Continúe y defina un método de botón presionado temporalmente insertando lo siguiente:
- Botón (vacío) Presionado NSLog (@ "Botón presionado");
NSLog () enviará un mensaje a la consola, al que se puede acceder desde el menú, bajo Ejecutar (cmd + shift + R).
Nuestro nuevo botón debería aparecer en la pantalla después de que la vista se haya cargado. Para que esto ocurra, agregue el siguiente método:
- (void) loadView // Asigne la vista self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Establecer el color de fondo de la vista self.view.backgroundColor = [UIColor blackColor]; // Crear la imagen de fondo UIImageView * bg = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // Crear el botón [auto addButton];
Este método viene por defecto para los controladores de vista. Estamos agregando una imagen de fondo y enviando el mensaje addButton.
Guarde su trabajo y luego genere y ejecute el proyecto. Debería ver la imagen de fondo y el botón rojo. Si la ventana de la consola está abierta, al tocar el botón debería aparecer un mensaje en la consola a través de NSLog ().
Para inicializar nuestro objeto UIImageView, agregue lo siguiente en jumpingViewController.m, arriba del método addButton:
- (void) initPlayer self.player = [[UIImageView alloc] initWithFrame: CGRectMake (10, 100, 77.0, 94.0)]; [Autoestima normal]; // opaco para un mejor rendimiento self.player.opaque = YES; [self.view addSubview: self.player]; - (void) normalStance [self.player setImage: [UIImage imageNamed: @ "ryu.png"]];
Este código inicializará un objeto UIImageView y lo agregará a la vista principal. El método normalStance resultará útil más adelante..
Ahora enviaremos el mensaje de initPlayer a la vista principal. Hacemos esto modificando el método loadView de la siguiente manera:
- (void) loadView // Asigne la vista self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Establecer el color de fondo de la vista self.view.backgroundColor = [UIColor blackColor]; // crear la imagen de fondo UIImageView * bg = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // crear el botón [auto addButton]; // ahora inicializa el jugador [self initPlayer];
Construye y corre. Apareció un personaje en la pantalla, a la derecha.?
Ahora viene la parte divertida. Por encima de addButton, agregue:
- (void) cleanStance [self.player setImage: nil]; self.player.animationImages = nil; - (void) jumpStance [autolimpieza]; NSArray * imageArray = [[NSArray alloc] initWithObjects: [UIImage imageNamed: @ "jump1.png"], [UIImage imageNamed: @ "jump2.png"], nil]; self.player.animationImages = imageArray; self.player.animationDuration = 0.3; self.player.contentMode = UIViewContentModeBottomLeft; [self.view addSubview: self.player]; [self.player startAnimating];
El primer método agregado elimina cualquier imagen asociada al objeto del jugador. Usamos esto para limpiar los cuadros de animación utilizados anteriormente. El segundo método agrega una animación simple a nuestro objeto jugador. Esto aparecerá mientras el objeto se está moviendo..
Después del método jumpStance, agregue:
- salto (vacío): imagen (UIImageView *) [self JumpStance]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations];
Este método realmente mueve el objeto del jugador. Primero cambia el conjunto de imágenes, luego lo mueve 40 píxeles verticalmente.
La línea:
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
Agrega un efecto de suavizado a la animación, para que se vea más realista..
Cambie el método buttonPressed para verse así:
- (void) buttonPressed [self jump: self.player];
Construye y corre. Al presionar el botón ahora, el personaje saltará, pero permanecerá congelado en el aire. Buen progreso! Vamos a bajarlo ahora.
Sobre el método de salto previamente agregado, agregue:
-(void) fall: (NSString *) animationID finalizado: (NSNumber *) contexto final: (void *) context [self cleanStance]; [Autoestima normal]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; [UIView setAnimationDuration: 0.2]; self.player.transform = CGAffineTransformMakeTranslation (0, 0); [UIView commitAnimations];
Este método hace que el personaje vuelva a su estado normal y lo mueve a la posición inicial..
Ahora, cambia el método de salto para que se vea como:
- salto (vacío): imagen (UIImageView *) [self JumpStance]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; // Ejecutar caída después de que finalice la animación [UIView setAnimationDelegate: self]; [UIView setAnimationDidStopSelector: @selector (otoño: terminado: contexto :)]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations];
Construye y corre. Presiona el botón rojo ahora y nuestro personaje debe saltar y aterrizar de nuevo en el suelo. Eso es!
Ahora debe tener una comprensión básica de algunos de los más utilizados clasificados como: UIButton, NSLog, UIImageView y cómo ejecutar animaciones. Se puede aplicar un enfoque similar para agregar otros botones en la pantalla, que pueden desencadenar diferentes eventos, por lo que su objeto de destino puede realizar otras acciones. No dude en ponerse en contacto conmigo o seguirme en Twitter @tudorizer.
Accentsconagua