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í.
Creado: