Keep your hand up if you've ever made a video game
Look Around!!!!
What is a game?
Something that ~ entertains ~
Something that ~ delights ~
The user controls (mostly) what happens
There (usually) is something to learn or a goal to acheive
It exists to entertain, educate, or can just be art
What is an app?
Something that ~ entertains ~
Something that ~ delights ~
The user controls (mostly) what happens
There (usually) is something to learn or a goal to acheive
It exists to entertain, educate, or can just be art
Why not take the skills we use every day at our job, and apply them to games?
Game Dev Benefits
No Linters
No Pull Requests
No Code Reviews
NO RULEZ
( unless you want )
It's about the
✨ user journey ✨
Time to Plan!
User Flow
Game Storyboarding
Game Mechanics
Movement / Mobility
Rules
Scoring
Game Genres
Platformer, FPS, Adventure, RPG, RTS, MOBA, Beat em up, Shoot em up, Fighters, Survival, etc, etc, etc.
What are we making?
We're making an action platformer✨ catformer ✨
What library?
Phaser,Pixi,p5,Construct,Crafty,Twine.
And it goes on! These are browser based and consist of WebGL or Canvas elements. MDN Game Engines and Tools
Phaser!
A HTML5 & JavaScript platform that's a 2D game engine supporting Web, Android, and IOS platforms.
Phaser Setup
window.onload = function() {
// Always add new variables you are defining to this scope
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
// Set up sprites and spritesheets to be preloaded
}
function create() {
// Create elements on the game canvas
}
function update() {
// Things that constantly run here
}
};
Sprites
Spritesheets
What you need for animations
As many frames as you want, of all equal size
left, right, up, down
Physics can be applied to them
function preload() {
game.load.spritesheet('rick', 'assets/rick-spritee.png', 76, 44, 5);
}
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.world.setBounds(0,0, 800, 600);
// The player and its settings
player = game.add.sprite(52, game.world.height - 150, 'rick');
// We need to enable physics on the player
game.physics.arcade.enable(player);
}
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.world.setBounds(0,0, 800, 600);
// The player and its settings
player = game.add.sprite(52, game.world.height - 150, 'rick');
// We need to enable physics on the player
game.physics.arcade.enable(player);
// Player physics properties. Give the little guy a slight bounce.
player.body.bounce.y = 0.1;
player.body.gravity.y = 800;
player.body.collideWorldBounds = true;
// Add animation for Rick Loop
player.animations.add('loop');
}
function update() {
rick.animations.play('loop', 5, true);
};
// Always add new variables you are defining to this scope
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }),
rickLooking,
RICK_FRAME_LOOK_LEFT = 2,
RICK_FRAME_LOOK_RIGHT = 3;
function update() {
if (cursors.left.isDown)
{
// Move to the left
player.body.velocity.x = -150;
player.animations.play('left');
rickLooking = 'left';
}
else if (cursors.right.isDown)
{
// Move to the right
player.body.velocity.x = 150;
player.animations.play('right');
rickLooking = 'right';
}
else
{
// Stand still
player.animations.stop();
if (rickLooking == 'left') {
player.frame = RICK_FRAME_LOOK_LEFT;
} else {
player.frame = RICK_FRAME_LOOK_RIGHT;
}
}
// Allow the player to jump if they are touching the ground.
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -350;
}
}
Platforms
Now we need to give him a platform to stand on!
function preload() {
game.load.image('platforms', 'assets/hardwood.png');
}
function create() {
// The platforms group contains the ground
platforms = game.add.group();
// We will enable physics for any object that is created in this group
platforms.enableBody = true;
// Here we create the ground.
var ground = platforms.create(0, game.world.height - 64, 'platforms');
// This stops it from falling away when you jump on it
ground.body.immovable = true;
}
function update() {
game.physics.arcade.collide(player, platforms);
}
Collision Detection
Setting world boundaries for player
Knowing if player gets hit by enemies
Landing on platforms
Interacting with useful objects
Walls you can't go through
function preload() {
game.load.image('treats', 'assets/treats.png');
}
function update() {
game.physics.arcade.collide(player, treats);
}
Scoring
// Always add new variables you are defining to this scope
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }),
score = 0,
scoreText;
function create() {
scoreText = game.add.text(16, 16, 'score: 0', { font: 'bold 18px Arial', fill: '#000', });
}
