...and the General Awesomeness of the Modern Browser. A 2014-era look at emerging game development tech in the browser, as well as some fundamental design patterns. Given as a guest lecture to University of Ulster IMD students.
- Graduated from UUC with BA Hons in Media Studies 2004 -2009 - Part-time freelance web designer/developer 2008-2011 - Full-time e-commerce developer & graphic designer (+ sysadmin, POS maintenance, networking, tech support, etc…) 2011 - Joined rehabstudio as Intermediate PHP Developer 2012 - Cross-trained in Python and HTML5 tech 2013 - Senior Developer specializing in JavaScript architecture 2014 - Head of Frontend Development
Pixels At Dawn 7DFPS Jam 2013 pixelsatdawn.jamgam.es Dark Soils Ludum Dare 29 ‘Beneath The Surface’ darksoils.jamgam.es Wyrmhole Ludum Dare 30 ‘Connected Worlds’ wyrmhole-ld30.appspot.com
setInterval() - called as close to 60FPS as possible - managed by the browser - waits for the next screen repaint to complete - preserves CPU usage, battery life, etc - is asynchronous (doesn’t make the program wait)
state: - responding to user input - updating positions - checking for collisions - adding and removing things - tracking score - etc. render() clears the canvas, then draws the current frame of everything visible in the game: - backgrounds - things (e.g player, enemies, bullets) - effects (explosions, particles, etc) - UI (score etc)
(properties) and functions (methods). A set of properties and methods, contained in an Object, can be used to describe something - a person, a car, an order, a game, a spaceship, whatever. Objects are useful for organizing your game code into different components and making it easier to understand as it grows.
be extended to create new ones which inherit its properties and methods, while also having their own. You can create ‘base’ Objects which describe shared behavior and properties, and extend them to describe more specific things. In-game things are likely to have common features e.g. position, speed, health, ability to draw themselves, ability to explode, etc.
is currently being pressed as part of our update() cycle, but JavaScript only allows something to happen when a key is pressed (or released). Compare ‘polling’ (if) vs. ‘events’ (when). To get around this we set up an Object of key codes and toggle a boolean variable whenever the key is pressed or released. We can then check the value of the boolean at any time e.g. during update().
a gameplay view, win screen, etc. We can use Objects to describe these ‘scenes’ with their own update and render methods. The game can then track which one is active, and ensure only that one gets updated and drawn in our main loop. Scenes should have their own ‘set up’ and ‘clean up’ methods, so they can be properly used in our game - e.g. multiple plays through the game in a single session.
to use Unity* doesn’t mean you know how games** work Learn the concepts, not just the tools These tools take care of the donkey work (in theory)... ...but you still need to understand what’s going on to be effective at using them * or THREE.js, or Phaser, Melon, Impact, jQuery, Backbone, React, Angular, Underscore, etc… ** or 3D engines, or web apps, or compilers, etc...
the browser THREE.js - Current industry standard for WebGL work - Abstraction library for common WebGL functionality - One-file include for core lib - Highly extensible - Tons of examples Is NOT a game framework, but has many game-friendly features. threejs.org
in which everything lives. Is empty by default. Needs a Camera inside it before we can ‘see’ (render) anything. Camera Lives in the Scene and can be positioned, angled, rotated etc. like everything else. We render what the Camera sees per frame to get our 3D view. Light Ambient, Directional, Point, Spot, Hemisphere. Affects the colour, shading and shadows of the things in our Scene.
shape of something. Box, Sphere, Plane, Polygon, complex (e.g. imported Blender model), etc. Knows nothing of color, texture, etc. Material Describes the appearance of something. Color, ambient light, specularity, texture (image), shading, etc. Mesh A Material applied to Geometry. Represents a ‘thing’ / ‘entity’ in our Scene. Has x, y, z, rotation, scale, etc. Meshes are the building blocks of our 3D application.
global Scene and Camera, plus a new Renderer which uses them. We add the Renderer’s canvas element to our DOM so we can see what the Renderer will draw to it. We add a cube Mesh by combining a box-shaped Geometry with a built-in basic green Material. We tell the Renderer to draw this Mesh as a wireframe so we can see it easily. In the main loop, the update() method adjusts the X and Y rotation of the cube Mesh slightly each frame, so the cube appears to spin in place.
njmcode
bkuhlmann
77web
quiver
manfredsteyer
ivargrimstad
shinoa
ryunakayama
joergneumann
benjaminkim
seike460
.png){kind=avatar}
elith
tomokusaba
cassininazir
pedronauck
destraynor
iamctodd
denniskardys
mojombo
danielanewman
samanthasiow
tanoku
chriscoyier
addyosmani
sonatard
![+ Neil McCallion Head of Frontend Development at +rehabstudio [email protected]](https://files.speakerdeck.com/presentations/10cb68688fe04a7b960f102f0406d636/slide_2.jpg){kind=link}
