Game I/O

Game development workshops

What?

  • Game development workshops
  • Focusing on different aspects of game development
  • Fully web-based

Who?

  • Theo Dedeken
  • Master Computer Science
  • Making games for 6 years
  • Volunteer in the European Solidarity Corps

When?

Date Subject
20 February Basics
12 March Phaser Systems
2 April Pixel Art
16 April Sound Effects and Music
18-20 April Ludum Dare Game Jam

  • Global Game Jam
  • Make a game in 48 hours
  • Over 2000 participants
  • 18/04 - 03:00 -> 20/04 - 03:00
  • Location, Internet, Electricity, Drinks, Snacks

How?

+

Javascript
  • The (one and only) programming language for the web
  • Easy to run, just need a browser
  • Easy to learn
Phaser
  • Game engine for the web
  • Lightweight, mostly 2D support
  • Graphics, Physics, Sounds, Input

Javascript overview

Comments

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.

// Single line comment

/*
Multiline
comment
*/

Variables

// Declaring a variable
let cardboardBox;
// Assigning a value to a variable
cardboardBox = 'cat';
// Declaring and assigning
let answerToUniverseAndEverything = 42;
// Using a variable
cardboardBox;
Naming variables
  • Can be (almost) anything
  • But be clear and consistent
  • camelCase
Data types
Data type Explanation Example
String Text in quotation marks let workshopLeader = 'Theo'
Number Any number let one = 1;
let pi = 3.14;
Boolean True or False,
Yes or No, 1 or 0		 let awesome = true;
Array A collection of data let dataTypes = ['string', 1, false];
Object Everything else let game = new Phaser.Game();
Exercise

Operators

Operator group Symbols Explanation Example
Arithmetic +, -, *, / Calculations 2 * 5 + 4;
Comparison ===, !==, <, >, <=, >= Comparing numbers and objects one < 2;
Logical !, &&, || not, and, or !true;
Assignment = Assigning to a variable let answer = 5;
True or False?

!false ← True

4 < 3 ← False

0 <= 0 ← True

1 > 2 - 3 || false && 2 !== 'two' ← True

Conditionals

let result = 2;
if(result < 0) {
    // If the expression is true go in this codeblock
    alert('The result is negative');
} else if (result > 0) {
    // If statements can be chained
    alert('The result is positive');    
} else {
    // If previous expressions are false, go to this codeblock
    alert('The result is zero');
}

Loops

// A loop expression contains three parts
// initialization; end condition; step action
for (let i = 0; i < 5; i++){
    console.log(i);
}
Can you predict the output of these loops?

Functions

// Function declaration
function multiply(num1, num2) {
    let result = num1 * num2;
    // This function returns a result
    return result;
}

// Calling a function
multiply(2, 5);

Phaser Introduction