Talking about Game development, HTML5, Javascript, Monetize and Phaser.
Ever wanted to build a portfolio of mobile and desktop HTML5 games? Of course you do, since mot of my blog readers. I am showing you a course which will guide you through the creation of HTML5 games with the awesome Phaser framework, which are completely cross-platform, and can run both on desktop computers and mobile phones from day one. In addition to building the games, you’ll also learn how to build your games as native applications using PhoneGap Build, to publish them on Apple App Store or Google Play. I am talking about HTML5 Game Development Mini-Degree published by Zenva, the e-learning company which taught game development to over 250,000 students from all over the world.
The course consist in several videos which will explain you how to build HTML5 Phaser games step by step, from the game design document to the coding itself.
To help people like me who are not native English speakers, english subtitles are provided to ensure you can’t miss a single word.
Back to the course, it will teach you how to:
* Create cross-platform games with Phaser 3
* Craft worlds with physics, sprites and tilemaps
* Use animations and impactful camera effects
* Publish to mobile platforms using PhoneGap
Obviously while you learn these concepts, you will be building actual games like a road crossing game, a virtual pet game, a platformer and a top down action RPG.
Each step of the course has its source code available for you to play and experiment, and it’s really clean and easy to modify, as you can see from this excerpt:
// this is called up to 60 times per second
gameScene.update = function(){
// don't execute if we are terminating
if(this.isTerminating) return;
// check for active input (left click / touch)
if(this.input.activePointer.isDown) {
// player walks
this.player.x += this.playerSpeed;
}
// treasure overlap check
let playerRect = this.player.getBounds();
let treasureRect = this.goal.getBounds();
if(Phaser.Geom.Intersects.RectangleToRectangle(playerRect, treasureRect)) {
console.log('reached goal!');
// end game
return this.gameOver();
}
// get enemies
let enemies = this.enemies.getChildren();
let numEnemies = enemies.length;
for(let i = 0; i< numEnemies; i++) {
// enemy movement
enemies[i].y += enemies[i].speed;
// check we haven't passed min or max Y
let conditionUp = enemies[i].speed < 0 && enemies[i].y <= this.enemyMinY;
let conditionDown = enemies[i].speed > 0 && enemies[i].y >= this.enemyMaxY;
// if we passed the upper or lower limit, reverse
if(conditionUp || conditionDown) {
enemies[i].speed *= -1;
}
// check enemy overlap
let enemyRect = enemies[i].getBounds();
if(Phaser.Geom.Intersects.RectangleToRectangle(playerRect, enemyRect)) {
console.log('Game over!');
// end game
return this.gameOver();
}
}
};
It’s a fantasy-themed Road Crossing Game with cool camera effects, collision detection, and everything you need to create a game like Frogger.
Phaser 3 was released only a few weeks ago, so you will understand the importance of being among the first to learn it: you will forerun other developers if you master the framework before they do.
That’s why I recommend you to get HTML5 Game Development Mini-Degree while it’s in early access, you will build a great portfolio of games and you will also get a certification to show on your curriculum or on your LinkedIn profile. Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.
