Skip to content

Latest commit

 

History

History
222 lines (138 loc) · 3.67 KB

slides.md

File metadata and controls

222 lines (138 loc) · 3.67 KB
Raw

## Web Game Design

CodeDay Winter 2018 - 2/7/2018

Hello, I'm Ethan!

  • 🐻 First-year student at UC Berkeley
  • 💻 Helped run CodeDay LA
  • 🛠 I do lots of JavaScript
  • 😋 Enjoys Korean food

👾

Game Design

Pong (~1972)

Pong!

Space Invaders (~1978)

Space Invaders

🌎

Web Game Design

  • Works for (almost) everyone with a browser
  • No native download required
    • All assets downloaded like a webpage
  • Push out updates instantly

Club Penguin

Club Penguin

Messenger Instant Games

Messenger

Snapchat Ads

Snapchat

📃

Resources for this workshop

Open the Links document!

https://bitly.com/webgamedesign

Basics of Web Game Design

An empty canvas

<canvas id="game"></canvas>
let canvas = document.querySelector('#game');
let game = canvas.getContext('2d');

Request animation frame

function gameLoop() {
  // Gets called many, many times
  // Your code goes here!

  game.fillRect(x, y, width, height);
}

requestAnimationFrame(gameLoop);

Inline Exercise 0

Open Basics of Web Game Design CodePen from the Links doc!

What do these do?

game.fillRect(<x value>, <y value>, <width>, <height>);
game.clearRect(<x value>, <y value>, <width>, <height>);

Hint: Try adding two slashes (//) before them (telling the computer to ignore the line) and see what happens!

💫

Enter Phaser.js

A JavaScript framework that abstracts away web technologies like HTML5 Canvas and WebGL

Basics of Phaser

Everything happens in four functions

function preload() {
  // Load images, sounds, etc.
}

function create() {
  // Setup your game world!
}

function update() {
  // Like our gameLoop() function, this gets called many times per second!
}

function render() {
  // Called after game elements are rendered
}

Inline Exercise 1

Open Basics of Phaser CodePen from the Links doc!

Loading assets

(such as images or audio)

  • Occurs in preload function!
game.load.image('sprite-image', '/path/to/image');

Adding sprites

The "characters" or individually moving components of your game.

  • Occurs in create function!
game.add.sprite(50, 50, 'sprite-image');

Moving stuff around

  • Occurs in update function!
sprite.velocity.x = 500;
sprite.velocity.y = 500;

Building a Platform Game with Phaser

Designing a Sprite

Open up the link to Piskel on the Links doc!

Designing a Map

Launch the Tiled app on your computer! (setup files in Web Game Design Drive)

Connecting the Pieces

Download the platformer.zip file from the Web Game Design Drive and open it up in your text editor of choice.

Note: Download Sublime Text (your platform) from the folder if you don't have a text editor you use for code!

Thank you!

ethanl@berkeley.edu https://facebook.com/thatethanlee