Tecnología

Pablo M. Francisco Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Creacion de un Game con HTML5 Javascript Utilizando el framework Phaser



En este tutorial iniciaremos un nuevo juego utilizando el Framework "Phaser", usando HTML y CSS3. Phaser es un framewprk/engine muy completo y facil de usar.



Hola amigos, como ven en el video, el juego es muy simple de jugar, apenas tenes que comer las frutas para mantenerte en vuelo y cuidar para que las estrellas negras no te toquen o mueres. Si tienen un smartphone Android puden descargarlo desde GooglePlay en este link: Hungry Bird .

Iniciamos nuestro proyecto creando las carpetas necesarias en nuestro servidor (recuerdo que para probar el proyecto localmente necesitamos un server, yo utilizo XAMP server).

Las carpetas son las que utilizamos siempre en el desarrollo de una web en HTML5:

img - para las imagenes y sprites,

css - para nuestar hoja de estilos,

js - para el script del juego.




Creamos nuestro index.html en el root de la carpeta:

<!DOCTYPE html>

<html>

  <head>

    <meta charset ="en"/>

<title>Hungry Bird</title>

<meta name="mobile-web-app-capable" content="yes">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-          scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />

<script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>

  </head>

<body>

<script src="js/game.js"></script>

</body>

</html>

Nuestro index.html será solo eso, nada en el cuerpo (body), apenas el llamado a nuestro script que se encuentra en la carpeta "js" con el nombre game.js.

En el head tenemos la llamada al Framework Phaser : que haremos uso en nuestro juego.

Bien, creamos ahora nuestro script.

Nuevo documento guardamos con el nombre "game.js" en la carpeta "js"

Aqui les pongo el script completo con sus comentarios:

//Iniciamos el script observando el tamaño de la pantalla que abre nuestro juego, si es desktop o mobile:

var innerWidth = window.innerWidth;

var innerHeight = window.innerHeight;



var gameRatio = innerWidth/innerHeight;

//Creamos nuestro CANVAS directamente en javascript, que será creado en realidad por el Framework Phaser:

var game = new Phaser.Game(Math.ceil(480*gameRatio), 480, Phaser.AUTO, "", { preload: preload, create: create, update: update });

Como se puede ver con estas lineas creamos el elemento Canvas y iniciamos el juego:

Preload - se encarga de cargar todos los elementos del juego como imagenes, fondo, sprites y etc.

Create - inicializamos estos elementos para que se vean ( posicionen) en nuestro Canvas.

Update - mantiene el estado acyual del juego, o sea, aqui las funciones que crean sus movimientos, score y etc.)

function preload() {

   game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;



   game.scale.setScreenSize(true);

//Aqui cargamos todas las img del juego:

    game.load.image("sky", "img/fondo2.png");

    game.load.image("ground", "img/platform.png");

    game.load.image("star", "img/star.png");

    game.load.spritesheet("dude", "img/bird.png", 26, 18);

    game.load.image("platform","img/platform.png");

    game.load.image("frutilla","img/frutilla.png");

    game.load.image("cuadroscore","img/gameover.png");

    game.load.image("estrellas","img/star.png");



    game.load.image("blackstar","img/blackstar.png");

}

//Creamos todas las variables del juego:

var platform;

var player;

var platforms;

var cursors;

var sky;

 scoreText: Phaser.Text;

 score = 0;

var ground;

var ledge;

var style={font: "20px Revalia"};

var frutillas;

var estrellas;

var blackstar;

var text;

var cuadroScore;

function create() {

//Aqui posicionamos los elementos en el canvas al inicio del juego.

 //  Usaremos physics para las colisiones y movimiento, para eso  Arcade Physics system

    game.physics.startSystem(Phaser.Physics.ARCADE);

//Posicionamos el background (fondo ), yo le di el nombre de "sky" en Preload, y tenemos que seguir con ese mismo nombre.

 sky= game.add.tileSprite(0, 0, 1024, 640, "sky");



  game.physics.enable(sky, Phaser.Physics.ARCADE);

//  Plataforma que es el piso del juego



    platforms = game.add.group();

//  Tambien usaremos Physics para el piso.

    platforms.enableBody = true;

 // Creamos el piso.



    ground = platforms.create(0, game.world.height - 30, "ground");

//  Usamos scale para que el piso sea del ancho total del canvas. (tamaño original del  sprite es 400x32)



    ground.scale.setTo(3,1);

//  Esto previene que si nuestro player lo toca, el piso salga del canvas



    ground.body.immovable = true;

// Definimos nuestro jugador:



    player = game.add.sprite((game.world.width/2-50), game.world.height - 450, "dude");

//  Noo olvidar de utilizar Physics



    game.physics.arcade.enable(player);

//  Definimos las propriedades Physics del jugador.

    player.body.bounce.y = 0.2; //que se mueva estando parado

    player.body.gravity.y = 650;// gravedad que inside sobre el jugador tirandolo para abajo



    player.body.collideWorldBounds = true; // aqui definimos que no se salga del Canvas cuando vuele.

//Aqui definimos la animacion de nuestro jugador.

    player.animations.add("left", [0, 1, 2, 3], 10, true);

    player.animations.add("right", [4, 5, 6, 7], 10, true);

    player.animations.add("rightup",[8,9,10,11], 10, true);

    player.animations.add("rightup",[12,13,14,15], 10, true);

NOTA: Para que nuestro jugador mueva sus alas (animacion) definimos el sprite de la siguiente manera:



en Photoshop o su editor preferido creamos las imagenes del pajaro moviendo sus alas.

si notamos en el script definimos animation right y definimos la posicion de cada img del pajaro, o sea 4,5,6,7. Si contamos desde el inicio que siempre se inicia con 0 , tenemos el pajaro volando a la derecha).

//Creamos el cuadro de Score del juego:

this.scoreText = this.add.text(16, 16, "score: 0",{font: "15px Revalia",fill:"#ff00ff"});

lo posicionamos en la parte superios izquierda (16,16), y le damos los estilos que queremos al texto.

//EN EL PROXIMO TUTORIAL CREAREMOS NUESTROS ENEMIGOS Y FRUTAS.

}

function update() {

//Damos movimiento a nuestro fondo para que parezca que nuestro jugador realmente vuela:

sky.tilePosition.x -=0.5;

//el fondo se mueve medio pixel a la derecha(Position.x) durante el juego.

//Aqui definimos como controlaremos nuestroo jugador:

Al dar click con el mouse o tocar la pantalla de nuestro smartphone llamaremos una funcion Saltar:

game.input.onTap.add(saltar);

}

function saltar(){

//Movemos el jugador para arriba (velocity.y)

player.body.velocity.y = -280;

 //animamos el jugador volando para arriba y derecha.

player.play("rightup");









}

Bien, hasta aqui llegamos con este tutorial, espero les sea de ayuda. Esta semana publicaré la ultima parte deste tutorial. Saludos a todos.

Fuente: este post proviene de Pablo M. Francisco, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

¿Seguro que estamos seguros?

Todos los pagos y compras online, todos los "Me gusta", comentarios, mensajes, twits, chats, todas las gestiones que hacemos por internet dejan un rastro que contiene nuestros datos personal ...

Mobile marketing trends 2015

This my first post in english. Please try to understand any mystakes :). Today 80% of consumers are concerned about mobile marketing. Thousands of mobile phone users world wide were surveied on their ...

Etiquetas: general

Recomendamos

Relacionado

general

Creacion de Juego con HTML5 y JavaScript parte II

En esta segunda parte del tutorial para crear un Juego con HTML5 Y javascript, daremos movimiento a nuestros "actores". Bienvenidos a otro tutorial de HTML5! Hoy daremos secuencia a esta serie de tutoriales de programacion de videojuegos con HTML5 CSS3 y Javascript. Como ya vimos en el tutorial anterior el armado de nuestro canvas y los jugadores que son apenas dos rectangulos uno rojo ...

general desarrollo web html5 ...

Creacion de Juego con HTML5 y JavaScript

En esta nueva serie de tutoriales y videos, veremos los aspectos generales para la creacion de un game con HTML5, JavaScript y jQuery. Bienvenidos a otro tutorial de HTML5!Hoy iniciaremos la creación de un simple videojuego (bastante simple :)), utilizando apenas HTML5 y Javascript. hablaremos de algunos aspectos basicos de programacion con JavaScript, dando por hecho que ya tenés un poco de noció ...

general desarrollo web html5 ...

Dia #3 – Estructura básica de html5

Estructura básica Aunque gran parte de la atención que se tiene sobre HTML5 gira en torno a las nuevas API, y sus 30 nuevos elementos con la nueva semántica que se puede utilizar en tradicionales páginas estáticas, también en las franja de controles de formularios. Vamos a tocar un poco el tema de lo básico como veníamos tratando hasta ahora, Vamos a ver un poco la estructura básica y algunas mejo ...

general desarrollo web html5 ...

Día #10 Hablemos de los Videos en HTML5

En este tutorial o artículo, vamos a ver de pronto no todo acerca los videos en HTML5 pero si lo más relevante e importante de esta nueva etiqueta Video. HTML ha hecho cambios muy grandes en la web, que quizás la gente común no note pero a los que trabajamos en este campo se no se nos hacen grandioso, una de estas mejores es la de poder incluir directamente video y audio en el código, para depende ...

rendimiento

Mejora el rendimiento de tu web utilizando jascript asíncrono

El rendimiento es algo fundamental para la mejora de la experiencia de usuario y, junto a la calidad de los contenidos que se ofrecen en una web, un gran impulsor del posicionamiento en buscadores. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix. GTMetrix es un servicio de análisis rendimiento de l ...

general html5 programación ...

Día #7 Hablemos de los Microdatos en Html5 (Microdata)

Existe una nueva forma de marcar una frontera semántica en HTML5, se trata de las nuevas posibilidades que tenemos de definir una estructura semántica más fuerte y más personalizada utilizando los microdatos (microdata) que nos van a permitir desarrollar mejor las estructura web dándole una gran prioridad al trabajo del SEO y la indexación a los diferentes buscadores. Los microdatos van a permiten ...

internet

IMPEDIR QUE COPIEN TEXTO DE SU PÁGINA EN BLOGGER

Para impedir que otros usuarios copien texto de su página web y la peguen en la de ellos, hay un par de códigos que nos van a servir. Existen dos códigos: (Se les agrega a <body>, es decir, antes de </body> que está al final de la plantilla) 1) PARA IMPEDIR QUE COPIEN SOMBREANDO CON EL MOUSE Y HACIENDO CLIC CON EL BOTÓN DERECHO <script language="Javascript" type="tex ...

avanzado BLOG blogging ...

Cómo instalar un slider de imágenes en blogger

Esta semana he recibido un correo con esta duda: ¿Cómo instalar un slider de imágenes debajo del cabecero en blogger? Y no es la primera vez que me preguntan por el mismo tema. Este tipo de correos no puedo contestarlos uno a uno, prefiero anotar las dudas y cuándo se repiten mucho, desarrollar un tutorial en el blog, para que pueda verlo todo el mundo. Si me conoces un poco, ya sabes que no soy m ...

Aplicaciones Android Estrategia ...

There is no game para Android: El juego que no es un juego

Por mucho que se empeñe el creador de este juego para Android, There is no game SI es un juego. Según reza Kamizoto, el padre de la criatura, No hay ningún juego. No hay nada que hacer. No toques nada. De verdad, no toques NADA. Así es como se nos presenta el inicio de esta aventura: un escenario vacío en el que una voz en off nos confirma la ausencia de juego. Pero que no haya juego no significa ...

Codigo Javascript Código Diseño web ...

Control de eventos con JavaScript

En el mundo de la programación, JavaScript es uno de los lenguajes más utilizados y vigentes, aún con el paso del tiempo y la aparición de nuevas formas. Conocer a fondo diferentes trucos y mecanismos de JavaScript puede servir para asegurarnos el mejor rendimiento de nuestra web o de los programas que utilizaremos para diseñarlas. Control de eventos con JavaScript Imagina que tienes un formulario ...