Making video games with TypeScript

BrooklynJS (June 2016)

This Talk

  • What's Manygolf
  • What's TypeScript
  • Some things I used TypeScript for
  • How you can try TypeScript

many.golf

TypeScript!

Static Typing

function multiply(a, b) {
  return a * b;
}

const one = 1;
const two = 'two';

const three = multiply(one, two); // NaN!

Static Typing

function multiply(a: number, b: number): number {
  return a * b;
}

const one = 1;
const two = 'two';

const three = multiply(one, two); // Still NaN!
app.ts(8,29): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Static Typing

interface Person {
  firstName: string;
  lastName: string;
}

const thomas: Person = {
  firstName: 'Thomas',
  lastName: 'Boyt',
};

Static Typing

interface Person {
  firstName: string;
  lastName: string;
}

const thomas: Person = {
  firstName: 'Thomas',
  middleName: 'Albert',
  lastName: 'Boyt',
};
slides.ts (8,3): Type '{ firstName: string; middleName: string; lastName: string; }' is not assignable to type 'Person'.

  Object literal may only specify known properties, and 'middleName' does not exist in type 'Person'. (2322)

Static Typing

interface Person {
  names: string[];
}

const me: Person = {
  names: ['thomas', 'boyt'],
};

// firstName is inferred to be string
const firstName = me.names[0];

Ok,

but why?

Canvas API

  • Tricky to remember!
  • Lots of functions with a bunch of anonymous parameters

Autocomplete

Physics!

  • Manygolf uses a library called p2.js, which has its own official type definitions
  • Makes it easier to discover API
  • Sample code (physics.ts)

Type Definitions!

Messaging Protocol

  • Define a "message schema" once in TypeScript, use in both client and server
  • Can't send type information over the wire, but can just cast a message to a specific type based on a key (e.g. {"type": "playerSwing"})
  • Sample code (protocol.ts)

Protocol Message

Protocol Message

Type Definitions

  • Modules written in JS can have type definitions that annotate the API
  • Some modules ship definitions in their NPM package (Redux, Immutable)
  • Others have third-party definitions on DefinitelyTyped
  • TypeScript 2 will let you install type defs through NPM

Give TypeScript a try!

  • Relatively easy to add to new projects
  • 2.0 version shipping soon with improvements making it easier to get started
  • Build integration: Gulp, Webpack, Rollup...
  • Editor integration: VIM, Atom, VS Code
  • TypeScript Playground: https://www.typescriptlang.org/play/

Give making games a try!

  • Use technology you feel comfortable with
    • For me: Redux, canvas, custom event loop
    • For you: ???
  • But don't feel like you have to roll everything yourself!
    • Math libraries, physics engines
    • Frameworks for games
      • Tiny: Coquette.js 
      • Big: Phaser, Crafty
      • Non-JS to web: Unity, Construct 2, Game Maker

Thank You!

deck

By Thomas Boyt

deck

  • 425
Loading comments...

More from Thomas Boyt