Оглавление
Pablo Monteserín. Aprender desarrollo de videojuegos para móviles y web con Phaser.js
Presentación. DESARROLLO DE VIDEOJUEGOS PARA MÓVILES Y WEB CON PHASER.JS CON 100 EJERCICIOS PRÁCTICOS
A QUIÉN VA DIRIGIDO
LA FORMA DE APRENDER
LOS ARCHIVOS NECESARIOS
Cómo leer los libros “Aprender...”
Índice
Introducción al desarrollo de videojuegos con Phaser.js ¿Qué va a aprender con este libro?
Ejecutar en el servidor
Pasos a seguir en la ejecución de nuestro código Phaser:
Descargar y cargar Phaser
Editores de código
Sublime text
Visual Studio Code
Atom
Estructura básica del videojuego: El HTML
Estructura básica del videojuego: El Javascript
La variable config
La clase escena
Redimensionado de la pantalla. Método resize
Primeros pasos
Ejecutando archivos en el servidor. Errores típicos al ejecutar nuestro código en el servidor
Elige tu propia aventura: Introducción
Los libros de elige tu propia aventura y las novelas visuales
Elige tu propia aventura: Métodos, fondos y botones. Métodos fundamentales del juego:
Cargamos el fondo
Opción pulsada
Elige tu propia aventura: Cambio de escena. Evalúa opción
Cambio de escena
Elige tu propia aventura: Escena nave
Acierta la imagen: Introducción y carga de fondo. Introducción
Cargar fondo
Acierta la imagen: Carga de imágenes inferiores
Acierta la imagen: Detectar pulsaciones
¿Qué diferencia hay entre usar una función o una arrow function?
Acierta la imagen: Generar solución aleatoria. Solución random
Evaluar la solución
Acierta la imagen: Caras inferiores aleatorias y refrescar
Refrescar la imagen
Acierta la imagen: Marcardor de puntos
1. Cargar una tipografía externa
2. Poner marcador
3. Incrementar el marcador
Acierta la imagen: Temporizador
Acierta la imagen: Perder el juego
Publicación
Fall Down: Introducción e imagen de fondo. Fall down
Cargamos el fondo
Fall Down: Misiles
Múltiples misiles
Detectar pulsación
Fall Down: Posiciones random y perder el juego. Misiles variados
Misiles en posiciones aleatorias
Perder
Cargar escena de perder
Fall Down: Los misiles explotan
Galería de tiro: Fondo y cargas de sprites. Cargamos el fondo
Carga de sprites
Carga de las animaciones de los sprites
Galería de tiro: Sprites. Encapsular creación del sprite
Asignar desplazamiento horizontal
Carga de varios sprites
Galería de tiro: Posición y desplazamiento. Carga de los sprites en posiciones aleatorias
Las orugas deben mirar en la dirección de su desplazamiento
Múltiples bichos
Galería de tiro: Disparo y animaciones. Detectar pulsación
Animación de explosión
Flappy Bird: Carga del fondo y el héroe
Flappy Bird: Animación y físicas. Spritesheet y físicas
Salto con tecla espacio
Salto haciendo click en la pantalla
Flappy Bird: Animación de saltar. Animación de saltar
Seguir volando
Flappy Bird: Las tuberías
Aumentando el hueco entre tuberías
Flappy Bird: Colisiones y mejora de las tuberías. Colisión con tuberías
Poner tapas a las tuberías
Tuberías aleatorias
Flappy Bird: Fin de juego y fondo animado. Escena fin de juego
Fondo animado
Pong: Introducción e imagen de fondo. Introducción
Poner imagen de fondo
Pong: La pelota. Poner la pelota en pantalla
La pelota gira
La pelota se mueve
Pong: Físicas: así, no. La forma que no me gusta – componentes de velocidad independientes
La forma que me gusta – haciendo aleatorio el ángulo
Pong: Físicas: así, sí. La pelota se mueve con un ángulo correcto
Pong: Rebote contra las paredes
La forma que no me gusta – sin aprovechar el sistema de físicas de Phaser
Aprovechando el sistema de físicas de Phaser
Pong: El jugador. Colocar al jugador
Mover al jugador con el teclado
Dos formas de recoger los eventos del teclado
Pong: Controles visuales
Controles visuales para el movimiento
Pong: Colisión y dos jugadores. Colisión con el player
Ladrillo inamovible
Dos jugadores
Problema controles táctiles para varios jugadores
Pong: Perder. Perder
Invalidar alert
Volver a jugar
Pong: Marcador y mejorar colisiones. Poner marcador
Aumentar el marcador
Ajustar areas de colisión
Pong 20: Limitar el area de juego
Carrera espacial: Introducción. Introducción
Carrera espacial: Fondo y sprites animados. Imagen de fondo
Carga Sprite animado
Cargar los sprites con una función
Carrera espacial: Mover jugador. Mover el jugador hacia adelante
Rotar
Carrera espacial: Controles visuales
El método setData
Carrera espacial: Controles visuales II ¿Para qué sirve la propiedad direccionHorizontal?
Carrera espacial: Girar los controles visuales
Carrera espacial: Physics Editor
Cómo usar Physics Editor
Carrera espacial: Integrando el JSON generado
Carrera espacial: Corrigiendo las posiciones de matter
La luna rebota
Carrera espacial: Detectar vueltas I
Carrera espacial: Detectar vueltas II y poner marcador. Detectar vueltas 2
Poner marcador
Carrera espacial: Aumentar marcador
Carrera espacial: Evitar trampas y ganar el juego. Evitar que los jugadores hagan trampas
Alguien gana el juego
Carrera espacial: Portada
Carrera espacial: Cargar música
Cargando sprites de sonidos
Música libre de derechos
Plataformas: Introducción, estructura y fondo. Introducción
Estructura básica y fondo
Plataformas: Tiled: Instalación y creación de un mapa. Tiled. Instalación
¿Qué haremos con Tiled?
Creación de mapas
Creación de un mapa
Plataformas: Tiled: Interfaz
Menú Ver
Paneles. PANEL CAPAS
PANEL TILESET
Atajos del teclado y del ratón
Plataformas: Tiled: Dibujando ¡A dibujar con Tiled!
Plataformas: Cargar player con JSON de Tiled. Consideraciones para dibujar
Exportando json desde Tiled
Importamos el json en Phaser para cargar el protagonista en escena
Plataformas: Uso de clases para cargar al jugador
Programación orientada a objetos en Phaser
Plataformas: Carga de layers
Cargamos la capa de fondo
Cargamos la capa de las plataformas
Cargamos la capa de la hierba
Plataformas: Bounding box y movimiento. Ajustando la bounding box del prota
Plataformas: Movimiento del jugador. El jugador se mueve
Estos métodos deben estar definidos dentro de la clase Player:
Algunos juegos indies. Super Meat Boy
Cup Head
Braid
Plataformas: Animación
Plataformas: Saltar y caer. Saltar
Animación de saltar
Plataformas: Controles visuales. Controles visuales
Plataformas: Controles visuales II
Plataformas: La cámara. La cámara sigue al prota
La cámara sigue al prota horizontalmente
El fondo se repite
Plataformas: Añadir un enemigo. Añadir un enemigo
Enemigo con clase
Plataformas: Enemigo con animación y movimiento. Enemigo con animación
Enemigo se mueve
Plataformas: Enemigo inteligente
Plataformas: Enemigo muere
Enemigo explota
Plataformas: Player explota
Plataformas: Método para inserción de enemigos
Plataformas: Herencia e insertar oruga. Enemigo con Herencia
Insertar oruga
Plataformas: Insertar avispa dando vueltas
Plataformas: Estados de la avispa
Estados de la avispa
Plataformas: Avispa detecta player y lo persigue. Avispa detecta a Player
Avispa persigue a Player
Plataformas: Avispa ataca y vuelve. Avispa ataca
Avispa vuelve
Plataformas: Avispa continúa volando, player dañado. Avispa continúa volando
La avispa siempre mira al protagonista
El prota recibe daño
Plataformas: El jugador sale despedido por los aires
Plataformas: Reactivar controles y llegada a meta. Reactivar los controles del jugador
Añadir la meta
Plataformas: Limitando movimiento cámara
Plataformas: Perder y fin de juego. Escena de fin de juego
Escena de perder tras explotar
Escena de perder tras caer por el precipicio
Carreras con Tiled I. Cargamos el fondo
Sprite animado
Carreras con Tiled II. Cargar los cuatro coches usando una función
Carreras con Tiled: Mover y controles visuales. Mover coches hacia delante
Rotar player
Controles visuales
Carreras con Tiled: Controles visuales y colisión con pared
Colisión con las paredes
Carreras con Tiled: Marcadores y detectar vueltas
Marcadores
Detectar vueltas
Carreras con Tiled: Detectar vueltas y evitar trampas
Evitar trampas
Carreras con Tiled: Evitar trampas y fin del juego
Fin del juego
Juegos extra: Mazmorras y fall down game
Mazmorras (carpeta: mazmorras)
Fall Down Game (carpeta: cupido)
Otro de plataformas (carpeta: selva)
Juegos extra: Plataformas y carreras
Otro de carreras (carpeta:formula1)
