A.M.P.A. del I.E.S. Felipe II
Inicio      ¿Quienes somos?      ¿Qué hacemos?      Actividades      Asociarse
1º de E.S.O.
2º de E.S.O.
3º de E.S.O.
4º de E.S.O.
1º de Bachiller
2º de Bachiller
Taller: Creación de Videojuegos

      El AMPA presenta el taller de creación de un videojuego del tipo “plataformas” para navegadores web (PC, Android, …). A través de la creación de un videojuego totalmente funcional, se verán las bases de producción de un videojuego. No se necesitan conocimientos previos de programación.

Martes de 17:00 a 18:30
En el aula de informática 3.3 del IES Felipe II.

      Disculpad los errores que podáis detectar, y que os agradeceríamos nos comunicaseis para resolverlos a la mayor brevedad.

Obtener el software para el taller:
    Notepad ++  [Editor de código gratuito]
    XAMPP  [Distribución de Apache gratuito]
    Phaser  [Framework javascript gratuito]
    XnView  [Visor de imágenes]
    Gimp  [Editor de gráficos]

Obtener recursos para el taller:
    FreeSFX  [Sonidos gratuitos]
    The spriters resource  [Sprites gratuitos]
    Sprite database  [Sprites gratuitos]

Para obtener información de forma gratuita:
    HTML 5  [Docs HTML oficial]
    HTML 5  [Cursos HTML oficiales]
    CSS 3  [Docs CSS3 oficial]
    Phaser 2.6.2  [Docs Phaser oficial]
    Creative Commons  [CC - Derechos de autor]




Código del taller:

Fichero: index.html
Fichero inicio o cargador de nuestro video-juego.

<!DOCTYPE html> <html> <head> <!-- Indica la codificación de caracteres (charset) --> <!-- Evita la vulnerabilidad UTF-7 XSS Cheat Sheet --> <meta charset="utf-8" /> <!-- Carga el framework de Phaser --> <script type="text/javascript" src="js/phaser.min.js"></script> <!-- Carga la programación de nuestro juego --> <script type="text/javascript" src="js/juego.js"></script> <!-- Carga la hoja de estilos --> <link href="css/estilo.css" rel="stylesheet" type="text/css"> <!-- Título de la página --> <title>Taller del A.M.P.A.</title> </head> <body> <h1>BIGOTES</h1> <p> Ver pre-ALPHA<br> Creado en el taller <b>Creación de vídeo juegos</b>.<br> Patrocinado por el AMPA </p> <!-- Cargamos la imagen del logotipo de nuestro juego --> <img class="imgcenter" src="assets/bigotes.png" alt="Logotipo del juego" width="128px" height="108px"><br> <!-- Iniciamos el canvas de nuestro juego --> <canvas> Su navegador no soporta canvas :( --><br> Actualice su equipo. </canvas> <!-- Posicionamos el canvas del juego --> <p id="PosicionJuego"></p> <!-- Enlace a la página del taller --> <p> <a href="http://www.ampafelipeii.es/taller.html" title="Taller” style="color:#aa0000"> Web del taller </a> </p> </body> </html>

Fichero: css/estilo.css
Define el estilo de la página index.html, definiendo tipos de letra, tamaño, colores, centrados, ...

@charset "utf-8"; /* serif -- serifas, remates */ /* font-family, "times", "courier", "arial" */ /* generic-family, "serif", "sans-serif", "cursive", "fantasy", "monospace" */ h1 { font-size: 60px; font-family: Arial, Helvetica, sans-serif; text-align: center; } p { font-size: 18px; font-family: Courier, Helvetica, monospace; line-height: 2; letter-spacing: 10px; text-align: center; } .imgcenter{ display: block; margin-left: auto; margin-right: auto; border:none; } a { color:#55ff00; text-decoration:none; } /* Enlaces base */ a:visited { color:#ff0000; } /* Enlace visto */ a:hover { color:#00ff00; } /* Enlace seleccionado */ a:active { color:#0000ff; } /* Enlace al pulsar */

Fichero: js/juego.js
Código específico del juego.

// Creamos una nueva instancia/objeto tipo Game // Variable de definición básica del espacio del juego. // // 600,400 - Tamaño de la ventana o canvas, longitud horizontal, // longitud vertical. // // Phaser.AUTO - Método de renderizado. Puede ser Phaser.CANVAS, Phaser.WEBGL // o Phaser.AUTO,este último elegirá el que este disponible. // // 'Posicion' - Este argumento se utiliza si se desea que el juego se // introduzca en un elemento html. La cadena será igual al ID // del elemento. Al dejar como una cadena vacía (empty string) // el juego se añadirá al final del body // // preload() - Función de carga de todos los componentes a utilizar en el // juego (imágenes, sonidos, fondos, sprites, etc) // // create() - Función que añadirá los componentes al juego. Asignamos la // posición inicial, el tamaño, etc. // // update() - Función que indicara la lógica del juego, las acciones. // Qué hacer al presionar una tecla, al chocar con un enemigo. var game = new Phaser.Game ( 800, 400, Phaser.CANVAS, 'PosicionJuego', { preload: preload, create: create, update: update, render:render } ); // Definimos las variables que necesitamos, aunque se autodefinen _______________ var jugador; var fondo; var suelo; var plataforma1; var plataforma2; var escenografia1; var escenografia2; var termino; var tecla_movimiento; var anim_izquierda; var anim_derecha; // ______________________________________________________________________________ // Función de Phaser.Game: ______________________________________________________ // preload - Precargamos los elementos de juego para estar disponibles __________ function preload() { // Cargamos la imagen de fondo de la escena a su ID (en memoria) game.load.image ('img_fondo', 'assets/fondo-00_1024x723.jpg'); // Carga la imagen del suelo a su ID (en memoria) game.load.image ('img_suelo', 'assets/suelo-02 540x28.png'); // Carga la imagen de la plataforma1 a su ID (en memoria) // Una sola imagen puede reutilizarse en varios puntos game.load.image ('img_plataforma1', 'assets/suelo-01 270x28.png'); // Carga la imagen de escenografía a su ID (en memoria) // Una sola imagen puede reutilizarse en varios puntos game.load.image ('img_casa1', 'assets/casa_halloween-05 252x230.png'); // Carga la imagen de final de juego a su ID (en memoria) game.load.image ('img_termino', 'assets/casa_halloween-01 162x261.png'); // Carga la imagen avatar del jugador a su ID (en memoria), al ser parte // de un paquete de sprites usamos el metodo spittesheet y definimos la // grilla base ('nombre_animación', 'fichero', ancho_px, alto_px) game.load.spritesheet ('img_jugador', 'assets/bigotes-4.png', 128, 108); } // ______________________________________________________________________________ // Función de Phaser.Game: ______________________________________________________ // create - Posicionamos los elementos del juego ________________________________ function create(){ // Define el tamaño de nuestro mundo game.world.setBounds(0, 0, 4000, 723); // Agregamos el fondo de la escena // Indicamos el punto inicial superior derecho para incluir el gráfico // Los objetos se cargar como capas, una encima de otra según las cargamos // aquí en create. Pondremos el jugar el último, salvo caso especifico // game.stage.backgroundColor = '#124184'; // Fondo de color uniforme // Agregamos la imagen simple de fondo fondo = game.add.sprite(0, 0, 'img_fondo'); fondo.width = 1524; // Agregamos la plataforma inicial donde está el personaje // Indicamos el punto inicial superior derecho para incluir el gráfico plataforma1 = game.add.sprite(0, 200.5, 'img_plataforma1'); plataforma1.width = 270; // Útil si modificamos valores originales // Agregamos el elemento de escenografía (ancho x alto) // Indicamos el punto inicial superior derecho para incluir el gráfico escenografia1 = game.add.sprite(250, 470, 'img_casa1'); escenografia1.width = 252; // Útil si modificamos valores originales escenografia1.height = 230; // Útil si modificamos valores originales // Agregamos el elemento de escenografía (ancho x alto) // Indicamos el punto inicial superior derecho para incluir el gráfico escenografia2 = game.add.sprite(502, 470, 'img_casa1'); // Agregamos la puerta final del juego (ancho x alto) // Indicamos el punto inicial superior derecho para incluir el gráfico termino = game.add.sprite(500, 50, 'img_termino'); // Agregamos el suelo // Indicamos el punto inicial superior derecho para incluir el gráfico suelo = game.add.sprite(0, game.world.height - 28, 'img_suelo'); suelo.width = 500; // Más ancho suelo.height = 28; // Agregamos la bandeja // Indicamos el punto inicial superior derecho para incluir el gráfico plataforma2 = game.add.sprite (50, game.world.height - 100, 'img_plataforma1'); plataforma2.width = 150; // Agregamos el personaje o avatar de nuestro jugador // Indicamos el punto inicial superior derecho para incluir el gráfico // Los objetos se cargar como capas, una encima de otra según las cargamos // aquí en create. Pondremos el jugar el último, salvo caso especifico jugador = game.add.sprite(10, 10, 'img_jugador'); // Agregamos el tipo de "física" de nuestro juego // ARCADE: se generan rectángulos y se comprueba si se superponen entre sí // Es el único motor que además cuenta soporte en la API de Partículas // NINJA: Es capaz de manejar formas complejas y rotaciones // P2JS: Motor físico completo, colisiones complejas (fuerzas y aceleraciones) game.physics.startSystem(Phaser.Physics.ARCADE); // Áctivamos las físicas de los elementos // Al activar la física, pueden chocar y empujarse. game.physics.arcade.enable(jugador); // Áctivamos la física del jugador game.physics.arcade.enable(suelo); // Áctivamos la física del suelo game.physics.arcade.enable(plataforma1); // Áct. la física de la plataforma1 game.physics.arcade.enable(plataforma2); // Áct. la física de la plataforma2 game.physics.arcade.enable(termino); // Áctivamos la física del fin // Gravedad en nuestro jugador (eje, velocidad) jugador.body.gravity.y = 200; // Definimos la velocidad inicial de nuestro jugador jugador.body.velocity.x = 0; // Con teclas poner 0 jugador.body.velocity.y = 0; // Con teclas poner 0 // Definimos las colisiones por defecto del jugador con nuestro mundo jugador.body.collideWorldBounds = true; // No sale de nuestro mundo // Fijar plataforma. Aplicar game.physics.arcade.collide en update() plataforma1.body.immovable = true; // Deja quieto el objeto en la escena plataforma2.body.immovable = true; // Deja quieto el objeto en la escena // Fijar suelo. Aplicar game.physics.arcade.collide en update() suelo.body.immovable = true; // Deja quieto el objeto en la escena termino.body.immovable = true; // Deja quieto el objeto en la escena // Definimos la animación a izquierda (left), sin usarla // 'ID', [fotogramas], velocidad de animación, jugador.animations.add('anim_izquierda', [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29], 30, true); // Definimos la animación a derecha (right), sin usarla // 'ID', [fotogramas], velocidad de animación, jugador.animations.add('anim_derecha', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], 30, true); // Leemos las teclas pulsadas (cursoras) en la var del sistema tecla_movimiento = game.input.keyboard.createCursorKeys(); // Sigue al jugador como punto base dentro del mundo game.camera.follow(jugador); } // ______________________________________________________________________________ // Función de Phaser.Game: ______________________________________________________ // update - Indicamos la lógica del juego _______________________________________ function update() { // Revisara constantemente la colisión entre jugador y suelo game.physics.arcade.collide(jugador, suelo); // Revisara constantemente la colisión entre jugador y plataformas game.physics.arcade.collide(jugador, plataforma1); game.physics.arcade.collide(jugador, plataforma2); // Asociamos nuestro jugador al movimiento de las teclas cursoras if (tecla_movimiento.left.isDown) // Mover a la izquierda (left) { jugador.body.velocity.x = -190; jugador.animations.play('anim_izquierda'); } else if (tecla_movimiento.right.isDown) // Mover a la derecha (right) { jugador.body.velocity.x = 190; jugador.animations.play('anim_derecha'); } else { // Resetear la posición y reiniciarla a "parado" jugador.body.velocity.x = 0; // Lo para con velocidad 0 jugador.animations.stop(); // Paramos la animación jugador.frame = 5; // Seleccionamos el frame de parado }; // Salto del jugador. Infinito si se mantiene pulsada // Un salto por pulsación con onUpCallback // game.input.keyboard.onUpCallback = function(key){ if (tecla_movimiento.up.isDown) // Mover arriba (up) { jugador.body.velocity.y = -190; jugador.animations.stop(); // Paramos la animación jugador.frame = 5; // Torcemos el jugador al saltar, efecto superman jugador.angle = 30; } else { jugador.angle = 0; // Recolocamos el angulo de salto } // Revisara constantemente la colisión entre jugador y suelo if (game.physics.arcade.collide(jugador, termino)) { // FIN DEL JUEGO jugador.kill(); // Eliminamos el proceso jugador // Incluimos texto para explicar el final // F5 es una función de recarga, estandar en los navegadores game.add.text(200, 250, 'GANASTE', {font:'80px Arial', fill: '#ffffff'}); game.add.text (300, 350, 'F5 para jugar', {font:'30px Arial', fill: '#000'}); }; } // ______________________________________________________________________________


Asociación de madres y padres de alumnos del I.E.S. Felipe II
C/ Valdebernardo, N° 1 - Moratalaz   ( Madrid - España )
buzon@ampafelipeii.es

Aviso legal
Creative Commons