Bret Victor – Inventing on Principle

Very inspiring talk about tools with graphical feedback and finding your principles in life. I love one of the comments on HN: “It’s embarrassing and inspiring how many orders of magnitude higher this guy is playing at. What a presentation.”

GDC 2012: From Console to Chrome

I enjoyed this one, it’s kinda like my lecture on JavaScript performance, but done waaaay better and by someone who actually knows how it works. There is a lot about V8 performance in deep details. My favourite quote: “JavaScript always thinks that everything is ok”.

GDC 2012: Best practices in developing a web game

It should be named “Cool Google APIs for a web game”, but it’s worth watching. It has some good comments on delievering and caching content. There is also a part about localization, monetization and V8 performance. My favourite quote: “Monetization is a dark art”.

Google I/O 2011: WebGL Techniques and Performance

It’s a great intoruction to math and optimizations in WebGL with plenty of do’s and dont’s about use of uniforms and structuring your shaders for performance.

Dialogue with Richard Dawkins, Rowan Williams and Anthony Kenny

Absolutely (well, almost) non-technical video of dialogue between Richard Dawkins and Archbishop Rowan Williams, led by Anthony Kenny. I expected it to be a classic believer-atheist mayhem, but it turned out to be a great discussion. It goes deep into philosophy, concept of mind, conciousness and history of man, proving a great erudicion and articulation skills of both adversaries.

A Walk on the Dart Side: A Quick Tour of Dart

In contrary to the previous video, this lecture turned (at the end) into a flamewar about static/dynamic typing. In fact, most of the presentation is about types and I genuinely hope that Dart introduces a little more than that. Gilad Bracha is obviously a wise and experienced guy, but he is a little too religious about his language choices for me. I consider myself a technology agnostic.

Using Google Closure for Lean and Mean Javascript Projects – New Game 2011

Google Closure compiler suffers from lack of tutorials and documentation (especially on Closure Tools). This presentation is a nice introduction to concepts behind Closure toolset.

I also watched enormous amount of Mythbusters episodes, a great combination of fun and engineering After watching all of the above during one weekend I’m completely brainwashed. I’ll probably wait few months before next lectures weekend, but I’ll be happy to hear about any new videos out there.

• Part 1: Introduction and game loop
• Part 2: Static blocks and keeping score
• Part 3: Adding and moving a block
• Part 4: Collision detection
• Part 5: Audio and scoring

Completed slices and score counting

This function will be quite long but simple. To check if a slice is completed I calculate the maximum number of occupied fields and check every slice (moving on z-axis) if it’s full. This way I can change size of the board and this function should be still working. Try to think about all your functions in such way – if something may ever change, make your code flexible.

Tetris.Board.checkCompleted = function() {
  var x,y,z,x2,y2,z2, fields = Tetris.Board.fields;
  var rebuild = false;

  var sum, expected = fields[0].length*fields.length, bonus = 0;

  for(z = 0; z < fields[0][0].length; z++) {
    sum = 0;
    for(y = 0; y < fields[0].length; y++) {
      for(x = 0; x < fields.length; x++) {
        if(fields[x][y][z] === Tetris.Board.FIELD.PETRIFIED) sum++;
      }
    }
    // to be continued

When the slice is full, we should remove it and shift all the following slices. To make sure that we don’t skip a shifted slice we decrease z once. To make the game more interesting, bonus points are granted if there are multiple slices completed at once.

    if(sum == expected) {
      bonus += 1 + bonus; // 1, 3, 7, 15...

      for(y2 = 0; y2 < fields[0].length; y2++) {
        for(x2 = 0; x2 < fields.length; x2++) {
          for(z2 = z; z2 < fields[0][0].length-1; z2++) {
            Tetris.Board.fields[x2][y2][z2] = fields[x2][y2][z2+1]; // shift
          }
          Tetris.Board.fields[x2][y2][fields[0][0].length-1] = Tetris.Board.FIELD.EMPTY;
        }
      }
      rebuild = true;
      z--;
    }
  }
  if(bonus) {
    Tetris.addPoints(1000 * bonus);
  }

Now, even though we dealt with board information, we still have to make changes to Three.js geometries. We couldn’t do it in previous loop as it could rebuild the geometries twice or even more if multiple slices were completed at once. This loop checks every Tetris.Board.fields with corresponding Tetris.staticBlocks adding and removing geometries where needed.

  if(rebuild) {
    for(var z = 0; z < fields[0][0].length-1; z++) {
      for(var y = 0; y < fields[0].length; y++) {
        for(var x = 0; x < fields.length; x++) {
          if(fields[x][y][z] === Tetris.Board.FIELD.PETRIFIED && !Tetris.staticBlocks[x][y][z]) {
            Tetris.addStaticBlock(x,y,z);
          }
          if(fields[x][y][z] == Tetris.Board.FIELD.EMPTY && Tetris.staticBlocks[x][y][z]) {
            Tetris.scene.removeObject(Tetris.staticBlocks[x][y][z]);
            Tetris.staticBlocks[x][y][z] = undefined;
          }
        }
      }
    }
  }
};

Audio API

Adding audio is very simple with HTML5. Let’s start with adding <audio> elements to index.html.

<audio id="audio_theme" src="music/tetris.mp3" preload="auto"></audio>
<audio id="audio_move" src="music/move.mp3" preload="auto"></audio>
<audio id="audio_collision" src="music/collision.mp3" preload="auto"></audio>
<audio id="audio_gameover" src="music/gameover.mp3" preload="auto"></audio>
<audio id="audio_score" src="music/cash.mp3" preload="auto"></audio>

Using these files in JS is also easy. First create an object to store your sounds:

// before Tetris.init()
Tetris.sounds = {};

To call Audio API we have to retrieve these DOM elements.

// in Tetris.init()
Tetris.sounds["theme"] = document.getElementById("audio_theme");
Tetris.sounds["collision"] = document.getElementById("audio_collision");
Tetris.sounds["move"] = document.getElementById("audio_move");
Tetris.sounds["gameover"] = document.getElementById("audio_gameover");
Tetris.sounds["score"] = document.getElementById("audio_score");

There are numerous methods and you can create you own audio player but for our purposes play() and pause() is enough. You can probably guess where you should add the music

• Tetris.sounds["theme"].play() – in Tetris.init(), right after initialization of sound object.
• Tetris.sounds["theme"].pause() – in Tetris.start().
• else {Tetris.sounds["move"].play();} – in Tetris.Block.move(), if there is no ground collision.
• Tetris.sounds["collision"].play(); – in Tetris.Block.move(), if there is a ground collision.
• Tetris.sounds["score"].play(); – in Tetris.addPoints().
• Tetris.sounds["gameover"].play(); – in Tetris.Block.generate(), where we test for the lost game.

The end

That’s all folks! Our Tetris is fully functional now. I hope it was a fun way to learn Three.js. There are many topics like advanced geometries, shaders, lights, skeletal animation, etc., that were not covered here. I just wanted to show that to create a game they’re not always needed. Actually, the best fun I’ve ever had was with games like Tetris, where gameplay was not directly related to the graphics quality. Obviously, great games often comes with great looks, but if you are not having fun from the first to the last minute, not even the best graphics can help.

If you liked the series, please share and comment. If you want to learn more, you should probably use pure WebGL from now on. You may start with this tutorial. Check also "Building the game" by Brandon Jones.

• Part 1: Introduction and game loop
• Part 2: Static blocks and keeping score
• Part 3: Adding and moving a block
• Part 4: Collision detection
• Part 5: Audio and scoring

Board object

We will start with a new class to store our 3D space information. We need few “const”, “enum” values. They are really neither const nor enum, as there are no such things in JS, but there is a new function in JS 1.8.5 – freeze. You can create an object and protect it from any further modification. It is widely supported in all browsers that may run WebGL and will give us enum-like objects.

window.Tetris = window.Tetris  || {};
Tetris.Board = {};

Tetris.Board.COLLISION = {NONE:0, WALL:1, GROUND:2};
Object.freeze(Tetris.Board.COLLISION);

Tetris.Board.FIELD = {EMPTY:0, ACTIVE:1, PETRIFIED:2};
Object.freeze(Tetris.Board.FIELD);

We will use field enum to store state of our board in fields array. On game start we need to initialize it as empty.

Tetris.Board.fields = [];

Tetris.Board.init = function(_x,_y,_z) {
	for(var x = 0; x < _x; x++) {
		Tetris.Board.fields[x] = [];
		for(var y = 0; y < _y; y++) {
			Tetris.Board.fields[x][y] = [];
			for(var z = 0; z < _z; z++) {
				Tetris.Board.fields[x][y][z] = Tetris.Board.FIELD.EMPTY;
			}
		}
	}
};

Tetris.Board.init() should be called before any block appears in game. I call it from Tetris.init, because we can easily provide board dimensions as parameters:

// add anywhere in Tetris.init
Tetris.Board.init(boundingBoxConfig.splitX, boundingBoxConfig.splitY, boundingBoxConfig.splitZ);

We should also modify Tetris.Block.petrify function, so that it stores information in our new array.

Tetris.Block.petrify = function () {
    var shape = Tetris.Block.shape;
    for (var i = 0; i < shape.length; i++) {
        Tetris.addStaticBlock(Tetris.Block.position.x + shape[i].x, Tetris.Block.position.y + shape[i].y, Tetris.Block.position.z + shape[i].z);
        Tetris.Board.fields[Tetris.Block.position.x + shape[i].x][Tetris.Block.position.y + shape[i].y][Tetris.Block.position.z + shape[i].z] = Tetris.Board.FIELD.PETRIFIED;
    }
};

Collision detection

There are two main types of collisions in Tetris. First one is wall collision, when active block hits a wall or another block while being moved or rotated on x/y axes (e.g. on one level). Second one is ground collision which happens when block is moved on z-axis and hits floor or another block and it’s life cycle is finished.

We will start with board walls collision, which is quite easy. To make code nicer (and faster) I used shorthands again.

Tetris.Board.testCollision = function (ground_check) {
    var x, y, z, i;

    // shorthands
    var fields = Tetris.Board.fields;
    var posx = Tetris.Block.position.x, posy = Tetris.Block.position.y,
        posz = Tetris.Block.position.z, shape = Tetris.Block.shape;

    for (i = 0; i < shape.length; i++) {
        // 4 walls detection for every part of the shape
        if ((shape[i].x + posx) < 0 ||
            (shape[i].y + posy) < 0 ||
            (shape[i].x + posx) >= fields.length ||
            (shape[i].y + posy) >= fields[0].length) {
            return Tetris.Board.COLLISION.WALL;
        }
        // to be continued

Now how to deal with block-block collision? We already store petrified blocks in our array, so we can check if block is intersecting with any of existing cubes. You may wonder why testCollision has ground_check as an argument. It’s a result of a simple observation, that block-block collision is detected in almost the same way for ground and wall collision. The only distinction is movement on z-axis which should cause ground hit.

        if (fields[shape[i].x + posx][shape[i].y + posy][shape[i].z + posz - 1] === Tetris.Board.FIELD.PETRIFIED) {
            return ground_check ? Tetris.Board.COLLISION.GROUND : Tetris.Board.COLLISION.WALL;
        }
        // to be continued

We will also test if position on z-axis in not equal to zero. That means that there are no cubes below our moving block, but it reached the ground level and should be petrified anyway.

        if((shape[i].z + posz) <= 0) {
            return Tetris.Board.COLLISION.GROUND;
        }
    }
};

Collision reaction

It wasn’t so bad, was it? Now lets do something with information we have. We will start in the easiest place, detection of the lost game. We can do it by testing if there is a collision immediately after creating a new block. If it hits the ground, there is no point in playing further.

Add to Tetris.Block.generate after block position is calculated:

    if (Tetris.Board.testCollision(true) === Tetris.Board.COLLISION.GROUND) {
        Tetris.gameOver = true;
        Tetris.pointsDOM.innerHTML = "GAME OVER";
        Cufon.replace('#points');
    }

Movement is also simple. After we change a position we call collision detection, passing the information about z-axis movement as an argument.

If there is a wall collision the move was impossible and we should undo it. We could add few lines to subtract position but I’m lazy and I prefer to call the move function again, but with inverted arguments. It will be never used with z-axis movement so we can pass a zero as z.

If the shape hits the ground, we already have a function hitBottom() that should be called. It will remove active shape from the game, modify board state and create a new shape.

    // add instead of ground level detection from part 3
    var collision = Tetris.Board.testCollision((z != 0));
    if (collision === Tetris.Board.COLLISION.WALL) {
        Tetris.Block.move(-x, -y, 0); // laziness FTW
    }
    if (collision === Tetris.Board.COLLISION.GROUND) {
        Tetris.Block.hitBottom();
    }

And now comes the crazy part. If you run game at this point, you will notice that rotating shape is not permanent. When it hits the ground, it returns to the initial rotation. That’s because we apply rotation to the Three.js mesh (as Tetris.Block.mesh.rotation) but we don’t use it to get coordinates of our cube-based shape representation. To deal with it we need to go through a quick math lesson.

3D math

DISCLAIMER: If you are afraid of math or have little time, you can actually skip this part. It’s important to know what happens inside your engine, but later we will use a Three.js functions for that.

Consider a 3-element vector (which represents position in 3D space). To transform such vector in euclidean space we have to add another vector. It can be represented as:

\[\begin{matrix}x\\y\\z\\\end{matrix}\ + \begin{matrix}\delta x\\\delta y\\\delta z\\\end{matrix} = \begin{matrix}x'\\ y'\\ z'\\\end{matrix} \]

It’s fairly simple. The problem appears when we would like to rotate a vector. Rotation around a single axis affects two of the three coordinates (check if you don’t believe) and equations aren’t that simple. Luckily, there is one method used in almost all computer generated graphics, including Three.js, WebGL, OpenGL and GPU itself. If you remember from high school, multiplying a vector by matrix will result in another vector. There is a number of transformations based on that. The easiest one is neutral transformation (using identity matrix) that does nothing but shows general idea and is used as a base for other transformations.

\[\begin{matrix}x\\y\\z\\w\\\end{matrix}\ * \begin{matrix} 1 & 0 & 0 & 0\\0 & 1 & 0 & 0\\0 & 0 & 1 & 0\\0 & 0 & 0 & 1\end{matrix}\ = \begin{matrix}x\\y\\z\\w\\\end{matrix}\]

Why do we use 4×4 matrices and 4-element vectors instead of 3×3 and 3-elements? It’s used to enable translation by a vector:

\[\begin{matrix}x\\y\\z\\w\\\end{matrix}\ * \begin{matrix} 1 & 0 & 0 & \delta x\\0 & 1 & 0 & \delta y\\0 & 0 & 1 & \delta z\\0 & 0 & 0 & 1\end{matrix}\ = \begin{matrix}x'\\y'\\z'\\w'\\\end{matrix}\]

It’s a nice math trick that makes all equations easier. It also helps with numerical errors and enables us to use even more advanced concepts like quaternions.

Scaling is also simple:

\[\begin{matrix}x\\y\\z\\w\\\end{matrix}\ * \begin{matrix} sx & 0 & 0 & 0\\ 0 & sy & 0 & 0\\ 0 & 0 & sz & 0\\ 0 & 0 & 0 & 1 \end{matrix}= \begin{matrix}x * sx\\y * sy\\z * sz\\w'\\\end{matrix}\]

There are three matrices for rotations, one for every axis.

For x-axis

\[ \begin{matrix} 1 & 0 & 0 & 0\\ 0 & cos \alpha & -sin \alpha & 0\\ 0 & sin \alpha & cos \alpha & 0\\ 0 & 0 & 0 & 1 \end{matrix}\]

For y-axis

\[ \begin{matrix} cos \alpha & 0 & sin \alpha & 0\\ 0 & 1 & 0 & 0\\ -sin \alpha & 0 & cos \alpha & 0\\ 0 & 0 & 0 & 1 \end{matrix}\]

For z-axis

\[ \begin{matrix} cos \alpha & -sin \alpha & 0 & 0\\ sin \alpha & cos \alpha & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{matrix}\]

Another great thing about matrix transformations is that we can easily combine two transformations by multiplying its matrices. If you want to rotate around all three axes, you can multiply three matrices and get something called transformation matrix. It will easily transform a vector that represents a position.

If you are interested in writing your own math library, you can read this tutorial on blog-o-ben. Very good introduction to math and pure WebGL. You may also need to read some good book about physics or graphics. I recommend Ian Millington’s Game Physics Engine Development.

Luckily most of the times you don’t have to work on that. Three.js already has a built in math library and we are going to use it.

Back to rotation

To rotate a shape in Three.js we need to create a rotation matrix and multiply it with shape’s every vector. We will use cloneVector again to make sure that created shape is independent from the one stored as a pattern.

    // append to Tetris.Block.rotate()
    var rotationMatrix = new THREE.Matrix4();
    rotationMatrix.setRotationFromEuler(Tetris.Block.mesh.rotation);

    for (var i = 0; i < Tetris.Block.shape.length; i++) {
        Tetris.Block.shape[i] = rotationMatrix.multiplyVector3(
            Tetris.Utils.cloneVector(Tetris.Block.shapes[this.blockType][i])
        );
        Tetris.Utils.roundVector(Tetris.Block.shape[i]);
    }
    // to be continued

There is one problem with rotation matrix and our representation of the board. Fields are represented as an array which is indexed by integers, while a result of matrix-vector multiplication may be a float. JavaScript is not very good with floating point numbers and it’s almost sure that it will produce positions like 1.000001 or 2.999998. This is why we need a rounding function.

Tetris.Utils.roundVector = function(v) {
    v.x = Math.round(v.x);
    v.y = Math.round(v.y);
    v.z = Math.round(v.z);
};

When we have our shape rotated, it’s very simple to check if collision occurs. I used the same trick with undoing rotation by calling function again, but with inverted parameters. Please note, that collision will never occur when undoing a move. If you want, you can add additional parameter so it won’t be checked again when not needed.

    // append to Tetris.Block.rotate()
    if (Tetris.Board.testCollision(false) === Tetris.Board.COLLISION.WALL) {
        Tetris.Block.rotate(-x, -y, -z); // laziness FTW
    }

Summary

Our Tetris is almost completed. Playing it is already some fun. In following parts of tutorial we will focus on adding more juice to the game – there will be scoring system, some HTML5 audio and eye candies.

• Part 1: Introduction and game loop
• Part 2: Static blocks and keeping score
• Part 3: Adding and moving a block
• Part 4: Collision detection
• Part 5: Audio and scoring

Lets start with a summary. What is a lifecycle of a Tetris block? It’s created at some fixed point, moved and rotated by the player, as time passes it also falls down by itself and at the very end it hits the ground and is turned into a static element. Then a next block is created and the cycle repeats. This description is more or less a plan of methods we should have in our block object.

Preparation

At first create a new file to hold our block object and include it in index.html. The file should start with:

window.Tetris = window.Tetris  || {}; // equivalent to if(!window.Tetris) window.Tetris = {};

This way, even if file parse order is somehow disturbed (which is very unlikely, BTW) you will never overwrite existing objects or use undefined variables. At this point you may want to replace “var Tetris = {};” declaration in our main file as well.

We need one utility function before we continue.

Tetris.Utils = {};

Tetris.Utils.cloneVector = function (v) {
  return {x: v.x, y: v.y, z: v.z};
};

To understand why on Earth would we need it, we have to talk about variables in JS. If we use a number, it’s always passed by value. It means that writing:

var a = 5;
var b = a;

will put number 5 in b, but it won’t be related anyhow to a. However, when using objects:

var a = (x: 5};
var b = a;

b is a reference to the object. Using b.x = 6; will write to the very same object that is referenced by a.

That’s why we need a method to create a copy of a vector. Simple v1 = v2 will mean that there is only one vector in our memory. However, if we access directly numeric parts of vector and make a clone, we would have two vectors and manipulating them will be independent.

The last preparation is definition of shapes.

Tetris.Block = {};

Tetris.Block.shapes = [
	[
		{x: 0, y: 0, z: 0},
		{x: 1, y: 0, z: 0},
		{x: 1, y: 1, z: 0},
		{x: 1, y: 2, z: 0}
	],
	[
		{x: 0, y: 0, z: 0},
		{x: 0, y: 1, z: 0},
		{x: 0, y: 2, z: 0},
	],
	[
		{x: 0, y: 0, z: 0},
		{x: 0, y: 1, z: 0},
		{x: 1, y: 0, z: 0},
		{x: 1, y: 1, z: 0}
	],
	[
		{x: 0, y: 0, z: 0},
		{x: 0, y: 1, z: 0},
		{x: 0, y: 2, z: 0},
		{x: 1, y: 1, z: 0}
	],
	[
		{x: 0, y: 0, z: 0},
		{x: 0, y: 1, z: 0},
		{x: 1, y: 1, z: 0},
		{x: 1, y: 2, z: 0}
	]
];

Note that every shape’s first cube is (0,0,0). It’s very important and will be explained in the next section.

Shape generation

There are three values that describe a block: base shape, position and rotation. At this point we should think ahead about how we want to detect collision.

From my experience I can tell that collision detection in games is always more or less fake. And I’m not talking only about silly JS games. It’s all about performance – geometries are simplified, collisions for specific situations are ruled out first, some collisions are not considered at all and collision response is almost always not accurate. It doesn’t matter – if it looks natural, nobody will ever notice and we save a lot of precious CPU cycles.

So, what is the simplest collision detection for Tetris? All shapes are axis aligned cubes with centers in one of specified group of points. I’m 99% sure that keeping an array of values [FREE, MOVING, STATIC] for every position on the board is the best way to deal with it. This way, if we want to move a shape and space it would need is already occupied – we have a collision. Complexity: O(number of cubes in a shape) <=> O(1). Boo-yah!

Now, I’m a little pedantic and I know, that rotation is quite complex and we should avoid it if possible. That’s why we will keep the basic shape of block in a rotated form. This way we can apply only position (which is simple) and quickly check if we have a collision. It actually doesn’t matter that much in our case, but it would in a game that would be more complex. There is no game small enough to be programmed in a lazy way.

About position and rotation – both of these are used in Three.js. The problem is, however, that we use different units in Three.js and on our board. To keep our code simple, we will store position separately. Rotation is the same everywhere so we will use the built-in one.

First, we take a shape at random and create a copy. This is why we needed cloneVector function.

Tetris.Block.position = {};

Tetris.Block.generate = function() {
  var geometry, tmpGeometry;

  var type = Math.floor(Math.random()*(Tetris.Block.shapes.length));
  this.blockType = type;

  Tetris.Block.shape = [];
  for(var i = 0; i < Tetris.Block.shapes[type].length; i++) {
    Tetris.Block.shape[i] = Tetris.Utils.cloneVector(Tetris.Block.shapes[type][i]);
  }
  // to be continued...

Now we need to connect all the cubes to act as one shape.

There is a Three.js function for that – it takes a geometry and a mesh and merges them. What actually happens here is a merge of internal vertices array. It takes into account position of merged geometry. It is a reason why we needed the first cube to be (0,0,0). Mesh has a position, but geometry hasn’t – it’s always considered to be (0,0,0). It would be possible to write a merge function for two meshes, but it’s more complicated than keeping shapes like we did, isn’t it?

geometry = new THREE.CubeGeometry(Tetris.blockSize, Tetris.blockSize, Tetris.blockSize);
for(var i = 1 ; i < Tetris.Block.shape.length; i++) {
  tmpGeometry = new THREE.Mesh(new THREE.CubeGeometry(Tetris.blockSize, Tetris.blockSize, Tetris.blockSize));
  tmpGeometry.position.x = Tetris.blockSize * Tetris.Block.shape[i].x;
  tmpGeometry.position.y = Tetris.blockSize * Tetris.Block.shape[i].y;
  THREE.GeometryUtils.merge(geometry, tmpGeometry);
}
  // to be continued...

With merged geometry we can use a trick with double materials from part 1 of the tutorial.

Tetris.Block.mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [
  new THREE.MeshBasicMaterial({color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true}),
  new THREE.MeshBasicMaterial({color: 0xff0000})
]);
  // to be continued...

We have to set initial position and rotation for our block (a center of board for x,y and some arbitrary number for z).

  // initial position
  Tetris.Block.position = {x: Math.floor(Tetris.boundingBoxConfig.splitX/2)-1, y: Math.floor(Tetris.boundingBoxConfig.splitY/2)-1, z: 15};

  Tetris.Block.mesh.position.x = (Tetris.Block.position.x - Tetris.boundingBoxConfig.splitX/2)*Tetris.blockSize/2;
  Tetris.Block.mesh.position.y = (Tetris.Block.position.y - Tetris.boundingBoxConfig.splitY/2)*Tetris.blockSize/2;
  Tetris.Block.mesh.position.z = (Tetris.Block.position.z - Tetris.boundingBoxConfig.splitZ/2)*Tetris.blockSize + Tetris.blockSize/2;
  Tetris.Block.mesh.rotation = {x: 0, y: 0, z: 0};
  Tetris.Block.mesh.overdraw = true;

  Tetris.scene.add(Tetris.Block.mesh);
}; // end of Tetris.Block.generate()

If you want, you can call Tetris.Block.generate() from you console.

Moving

Moving a block is actually very simple. For rotation we use Three.js internals and we have to convert angles to radians.

Tetris.Block.rotate = function(x,y,z) {
  Tetris.Block.mesh.rotation.x += x * Math.PI / 180;
  Tetris.Block.mesh.rotation.y += y * Math.PI / 180;
  Tetris.Block.mesh.rotation.z += z * Math.PI / 180;
};

Position is also simple – Three.js needs a position considering block size and our copy doesn’t. There is a simple floor hit check for our entertainment – it will be removed later.

Tetris.Block.move = function(x,y,z) {
  Tetris.Block.mesh.position.x += x*Tetris.blockSize;
  Tetris.Block.position.x += x;

  Tetris.Block.mesh.position.y += y*Tetris.blockSize;
  Tetris.Block.position.y += y;

  Tetris.Block.mesh.position.z += z*Tetris.blockSize;
  Tetris.Block.position.z += z;
  if(Tetris.Block.position.z == 0) Tetris.Block.hitBottom();
};

hit & create again

What is hitBottom for? Remember? If a block life cycle has ended, we should convert it to static cubes, remove it from the scene and generate a new one.

Tetris.Block.hitBottom = function() {
  Tetris.Block.petrify();
  Tetris.scene.removeObject(Tetris.Block.mesh);
  Tetris.Block.generate();
};

We already have generate() and removeObject() is a Three.js function for removing unused meshes. Luckily, in part 2 of this tutorial we wrote a function for static cubes and we now will use it in petrify().

Tetris.Block.petrify = function() {
  var shape = Tetris.Block.shape;
  for(var i = 0 ; i < shape.length; i++) {
    Tetris.addStaticBlock(Tetris.Block.position.x + shape[i].x, Tetris.Block.position.y + shape[i].y, Tetris.Block.position.z + shape[i].z);
  }
};

There is a shorthand for Tetris.Block.shape used – it improves both code clarity and performance, so use this technique every time it’s suitable. In this function you can see why keeping a rotated shape and separated position was a good idea. Thanks to that our code will be pleasant to read and with collision detection it will be even more important.

Connect the dots

Ok, now we have all functions we need for blocks, let’s hook them where needed. We need to generate one block on start, so change Tetris.start() to

Tetris.start = function() {
  document.getElementById("menu").style.display = "none";
  Tetris.pointsDOM = document.getElementById("points");
  Tetris.pointsDOM.style.display = "block";
  Tetris.Block.generate(); // add this line
  Tetris.animate();
};

With every game step we should move the block one step forward, so locate a place in Tetris.animate() where we make a move and change it to:

while(Tetris.cumulatedFrameTime > Tetris.gameStepTime) {
   Tetris.cumulatedFrameTime -= Tetris.gameStepTime;
   Tetris.Block.move(0,0,-1); // add this line
}

Keyboard

I have to be honest – I hate keyboard events. The keycodes are meaningless and they are different for keydown and keypress. There is no good way to poll keyboard state, after second keypress event is repeated 10 times faster than for the first two, etc. If you think about serious game with a lot of keyboard interaction, you will almost certainly build some kind of wrapper for all this bullshit. You may try KeyboardJS, it looks good. I’ll use vanilla JS to show the general idea. To debug it I’ve used console.log(keycode) – it helps a lot to find correct codes

window.addEventListener('keydown', function (event) {
  var key = event.which ? event.which : event.keyCode;

  switch(key) {
    case 38: // up (arrow)
      Tetris.Block.move(0, 1, 0);
      break;
    case 40: // down (arrow)
      Tetris.Block.move(0, -1, 0);
      break;
    case 37: // left(arrow)
      Tetris.Block.move(-1, 0, 0);
      break;
    case 39: // right (arrow)
      Tetris.Block.move(1, 0, 0);
      break;
    case 32: // space
      Tetris.Block.move(0, 0, -1);
      break;

    case 87: // up (w)
      Tetris.Block.rotate(90, 0, 0);
      break;
    case 83: // down (s)
      Tetris.Block.rotate(-90, 0, 0);
      break;

    case 65: // left(a)
      Tetris.Block.rotate(0, 0, 90);
      break;
    case 68: // right (d)
      Tetris.Block.rotate(0, 0, -90);
      break;	

    case 81: // (q)
      Tetris.Block.rotate(0, 90, 0);
      break;
    case 69: // (e)
      Tetris.Block.rotate(0, -90, 0);
      break;
  }
}, false);

If you try to play the game now, you should be able to move and rotate a block. There will be no collision detection, but when it hits the ground, it will be removed and new block will appear on board. Because we don’t apply rotation to the stored shape, static version may be rotated differently.

• Part 1: Introduction and game loop
• Part 2: Static blocks and keeping score
• Part 3: Adding and moving a block
• Part 4: Collision detection
• Part 5: Audio and scoring

Joined or separated?

Think about the way we play Tetris. When the block is moving, we transform and rotate it freely. Cubes that make block are clearly connected and it’s intuitive that their representation in code should be as well. On the other hand, when we try to complete a slice (in 2D – a row) and we succed, the cubes are removed and the block that was their origin doesn’t matter at this point. In fact, it shouldn’t matter – some boxes from a block may be removed and other not. Tracing an origin of a box would require constant splitting and merging geometries and trust me – that would be a crazy mess. In original 2D Tetris sometimes the color of a square was the indicator of the origin block. In 3D however we need a quick way to show z-axis and color is perfect for this.

In our game cubes will be connected when are dynamic and static when they are not. At the end of tutorial we will further optimize static cubes.

Adding a static block

Lets start with a moment when a moving block touches the floor (or another block). The moving block (with merged geometry of few cubes) is transformed into static, separated cubes that don’t move anymore. It’s convenient to keep these cubes in a 3D array.

Tetris.staticBlocks = [];
Tetris.zColors = [
  0x6666ff, 0x66ffff, 0xcc68EE, 0x666633, 0x66ff66, 0x9966ff, 0x00ff66, 0x66EE33, 0x003399, 0x330099, 0xFFA500, 0x99ff00, 0xee1289, 0x71C671, 0x00BFFF, 0x666633, 0x669966, 0x9966ff
];
Tetris.addStaticBlock = function(x,y,z) {
  if(Tetris.staticBlocks[x] === undefined) Tetris.staticBlocks[x] = [];
  if(Tetris.staticBlocks[x][y] === undefined) Tetris.staticBlocks[x][y] = [];

  var mesh = THREE.SceneUtils.createMultiMaterialObject(new THREE.CubeGeometry( Tetris.blockSize, Tetris.blockSize, Tetris.blockSize), [
    new THREE.MeshBasicMaterial({color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true}),
    new THREE.MeshBasicMaterial({color: Tetris.zColors[z]})
  ] );

  mesh.position.x = (x - Tetris.boundingBoxConfig.splitX/2)*Tetris.blockSize + Tetris.blockSize/2;
  mesh.position.y = (y - Tetris.boundingBoxConfig.splitY/2)*Tetris.blockSize + Tetris.blockSize/2;
  mesh.position.z = (z - Tetris.boundingBoxConfig.splitZ/2)*Tetris.blockSize + Tetris.blockSize/2;
  mesh.overdraw = true;

  Tetris.scene.add(mesh);
  Tetris.staticBlocks[x][y][z] = mesh;
};

There is a lot to explain here.

Colors and materials

Tetris.zColors keeps a list of colors that indicate position of a cube on z-axis. I’d like to have a good looking cube, so it should have a color AND outlined border. I’m going to use something that is not very popular in Three.js tutorials – multiMaterials. There is a function in Three.js SceneUtils that takes a geometry and an array (notice brackets []) of materials. If you look in Three.js source:

  createMultiMaterialObject : function ( geometry, materials ) {
  var i, il = materials.length, group = new THREE.Object3D();
  for ( i = 0; i < il; i ++ ) {
    var object = new THREE.Mesh( geometry, materials[ i ] );
    group.add( object );
  }
  return group;
},

It’s a very simple hack that creates a mesh for every material. With pure WebGL there are better ways to achieve the same result (f.e. calling draw two times, once with gl.LINES and second with gl.something) but the usual use of this function is to for example to merge textures and materials at the same time – not different types of drawing.

Position in 3D space

Now, why the hell does position look like that?

mesh.position.x = (x - Tetris.boundingBoxConfig.splitX/2)*Tetris.blockSize + Tetris.blockSize/2;

Our board center on init was placed in the (0,0,0) point. It is not a very good spot, as it means that some cubes will have negative position and others positive. It would be better to specify a corner of an object in our case. Moreover, we would like to think of our boxes positions as a discrete values from 1 to 6, or at least 0 to 5. Three.js (and WebGL, OpenGL and everything else) uses its own units that rather relate to meters or pixels. If you remember, in config we put a value

Tetris.blockSize = boundingBoxConfig.width/boundingBoxConfig.splitX;

that is responsible for conversion. So as a summary:

 // transform 0-5 to -3 - +2
(x - Tetris.boundingBoxConfig.splitX/2)
 // scale to Three.js units
*Tetris.blockSize
 // we specify cube center, not a corner - we have to shift position
 + Tetris.blockSize/2

Nice test

Our game is still very static, but you can open your console and run:

var i = 0, j = 0, k = 0, interval = setInterval(function() {if(i==6) {i=0;j++;} if(j==6) {j=0;k++;} if(k==6) {clearInterval(interval); return;} Tetris.addStaticBlock(i,j,k); i++;},30)

It should animate filling the board with cubes.

Keeping score

A small utility function to keep score:

Tetris.currentPoints = 0;
Tetris.addPoints = function(n) {
  Tetris.currentPoints += n;
  Tetris.pointsDOM.innerHTML = Tetris.currentPoints;
  Cufon.replace('#points');
}

You can call it from console as well.

• Part 1: Introduction and game loop
• Part 2: Static blocks and keeping score
• Part 3: Adding and moving a block
• Part 4: Collision detection
• Part 5: Audio and scoring

Preparation

First you need to download Three.js: https://github.com/mrdoob/three.js

I also use Stats from mrdoob: https://github.com/mrdoob/stats.js

In both cases you need only files from build directory.

Blox is a nice font for menu and points: http://www.dafont.com/blox.font

To use it you have to convert it with Cufon: http://cufon.shoqolate.com/generate/

In my project all JS files go to js folder, music into music folder and html in root.

HTML

I’m lazy so all the CSS goes directly into html header. It’s not as bad as it sounds – it’s very short and there is only one page so caching is unnecessary anyway. There is not much to explain, just some CSS for the intro and score counter. Also you have to include all js and init cufon.

<!DOCTYPE html>
<html>
  <head>
    <title>Three.js Tetris</title>
	<style>
		body {margin: 0; padding: 0; overflow: hidden;}

		#menu {
			position: absolute;
			width: 200px;
			height: 250px;

			top: 50%; left: 50%;
			margin: -125px 0 0 -100px;

			text-align: center;

			border: 3px solid #fff;
			border-radius: 15px;

			background-color: #E36B23;
			box-shadow: 2px 10px 5px #888;
		}

    #menu p {font-weight: bold; color: #fff;}
    #menu p a {color: #fff;}

		#menu button {
			width: 80px;
			height: 25px;

			background-color: #C44032;

			border: 3px solid #fff;
			border-radius: 5px;	

			font-size: 14px;
			font-weight: bold;
			color: #fff;
		}

		#points {
			position: absolute;
			width: 120px;
			height: 16px;	

			padding: 12px;

			top: 20px;
			right: 80px;

			border: 3px solid #fff;
			border-radius: 15px;

			background-color: #E36B23;
			box-shadow: 2px 10px 5px #888;	

			font-size: 14px;
			font-weight: bold;
			color: #fff;	

			text-align: right;

			display: none;
		}
	</style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	</head>
  <body>
	<div id="menu">
		<h1>Three.js Tetris</h1>
    <p>
      Movement: arrows<br>
      Rotation: AD/SW/QE<br>
      Author: <a href="http://www.smashinglabs.pl">smashinglabs.pl</a>
    </p>
		<button id="play_button">Play</button>
	</div>

	<div id="points">
		0
	</div>

	<script type="text/javascript" src="js/Three.js"></script>
	<script type="text/javascript" src="js/Stats.js"></script>
	<script type="text/javascript" src="js/tetris.js"></script>

	<script src="js/cufon-yui.js" type="text/javascript"></script>
	<script src="js/Blox_400.font.js" type="text/javascript"></script>	

	<script type="text/javascript">
		Cufon.replace('#menu h1');
		Cufon.replace('#points');
	</script>
  </body>
</html>

Basic Structure and Three.js init

There are many ways of organizing your game. If you want to host it on a gaming portal, you may need to use some kind of closure (i.e. not use global variables). If your game is very complex, inheritance becomes useful. But for the simple game working fullscreen all these concepts show as hard to maintain and not without some impact on preformace. The project will use one global namespace

var Tetris = {};

All objects, functions and variables will be a member of Tetris. It’s a very useful way to maintain your code and to avoid usage of “this”. To make things even better, every object I use is a singleton. There are some drawbacks – it’s a classic god object and a mixture of everything, but as long as it’s small I don’t care and you shouldn’t either.

We will focus on this structure later, now lets initialize Three.js. I used a tutorial by Aerotwist which is very simple, but plain and good enough. You should probably read it before you proceed.

Tetris.init = function() {
  // set the scene size
  var WIDTH = window.innerWidth,
      HEIGHT = window.innerHeight;

  // set some camera attributes
  var VIEW_ANGLE = 45,
      ASPECT = WIDTH / HEIGHT,
      NEAR = 0.1,
      FAR = 10000;

  // create a WebGL renderer, camera
  // and a scene
  Tetris.renderer = new THREE.WebGLRenderer();
  Tetris.camera = new THREE.PerspectiveCamera(  VIEW_ANGLE,
                                  ASPECT,
                                  NEAR,
                                  FAR  );
  Tetris.scene = new THREE.Scene();

  // the camera starts at 0,0,0 so pull it back
  Tetris.camera.position.z = 600;
  Tetris.scene.add(Tetris.camera);

  // start the renderer
  Tetris.renderer.setSize(WIDTH, HEIGHT);

  // attach the render-supplied DOM element
  document.body.appendChild(Tetris.renderer.domElement);

  // to be continued...

The introduced Tetris.init is creating a Three.js objects and store them in global namespace. There is a renderer, a scene and a camera. I want the game to be fullscreen so I use window.innerWidth and window.innerHeight. You may want to experiment with fullscreen API there. The camera needs to be pulled back and an exact distance should be determined by the size and position of the game world you use.

Our game world is a 3D wireframe box with lines showing where boxes can be dropped. When you work on a game it’s important to realize that the final effect is what matters most. Don’t be afraid to cheat! In this case, there is no good reason to draw lines on bounding box. We may as well use a normal box geometry, place a vertex on every line cross and connect vertices with lines instead of usual triangles. And luckily there is a Three.js syntax just for that!

  // configuration object
  var boundingBoxConfig = {
    width: 360,
    height: 360,
    depth: 1200,
    splitX: 6,
    splitY: 6,
    splitZ: 20
  };

  Tetris.boundingBoxConfig = boundingBoxConfig;
  Tetris.blockSize = boundingBoxConfig.width/boundingBoxConfig.splitX;

  var boundingBox = new THREE.Mesh(
    new THREE.CubeGeometry(
      boundingBoxConfig.width, boundingBoxConfig.height, boundingBoxConfig.depth,
      boundingBoxConfig.splitX, boundingBoxConfig.splitY, boundingBoxConfig.splitZ),
    new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } )
  );
  Tetris.scene.add(boundingBox);

  // first render
  Tetris.renderer.render(Tetris.scene, Tetris.camera);
  // to be continued...

A Three.js API describes CubeGeometry constructor as:

(width <Number>, height <Number>, depth <Number>, segmentsWidth <Number>, segmentsHeight <Number>, segmentsDepth <Number>, materials <Array>, sides <Object>)

and we make use of “segmentX” options to define how many boxes can be fitted into our gameboard. We use also MeshBasicMaterial option wireframe to draw lines instead of triangles.

Last things to do in init function:

  Tetris.stats = new Stats();
  Tetris.stats.domElement.style.position = 'absolute';
  Tetris.stats.domElement.style.top = '10px';
  Tetris.stats.domElement.style.left = '10px';
  document.body.appendChild( Tetris.stats.domElement );

  document.getElementById("play_button").addEventListener('click', function (event) {
    event.preventDefault();
    Tetris.start();
  });
};

We add FPS stats and bind Tetris.start() to the play button. What should be done in start()?

Tetris.start = function() {
   document.getElementById("menu").style.display = "none";
   Tetris.pointsDOM = document.getElementById("points");
   Tetris.pointsDOM.style.display = "block";

   Tetris.animate();
};

Hide instructions, show score box and start first animate() function.

Game loop

You may wonder why there was no setInterval for animation. There is a much better function for that – requestAnimationFrame(). It calls specified functions when the browser is not busy, but no more than 60 times per second. It means that you will have exactly the number of FPS that is possible to render. No need to worry about calculating the best time step for setInterval or clots if you try to render more FPS than it’s possible to calculate. The function is still something new, so on top of our script we will place a compatibility code:

if ( !window.requestAnimationFrame ) {
  window.requestAnimationFrame = ( function() {
    return window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
      window.setTimeout( callback, 1000 / 60 );
    };
  })();
}

Now we need to write animate() function. Tetris is real-time, but a step of game is quite long, like one z-axis move per second. We need to calculate when to move our block forward, so some time-related variables have to be introduced:

Tetris.gameStepTime = 1000;

Tetris.frameTime = 0; // ms
Tetris.cumulatedFrameTime = 0; // ms
Tetris._lastFrameTime = Date.now(); // timestamp

Tetris.gameOver = false;

Now, the animate function in simplified version has to call Three.js render method and call itself again using requestAnimationFrame. This would make our game static, so we need to calculate a passage of time and act if it was long enough.

Tetris.animate = function() {
  var time = Date.now();
  Tetris.frameTime = time - Tetris._lastFrameTime;
  Tetris._lastFrameTime = time;
  Tetris.cumulatedFrameTime += Tetris.frameTime;

  while(Tetris.cumulatedFrameTime > Tetris.gameStepTime) {
    // block movement will go here
    Tetris.cumulatedFrameTime -= Tetris.gameStepTime;
  }

  Tetris.renderer.render(Tetris.scene, Tetris.camera);

  Tetris.stats.update();

  if(!Tetris.gameOver) window.requestAnimationFrame(Tetris.animate);
}

If you noticed stats update, you may think it’s a little redundant. Stats are obviously counting FPS and we do the same thing. You may want to dig into stats code and re-use some data, but I’ve found it simpler to write my own few lines of code. Stats were not intended for such usage and the overhead is close to zero. Besides, if you’d like to remove FPS counter from your game when it’s released, it could be a problem. The less dependencies the better.

And, at last, we should call init() when the page is loaded:

window.addEventListener("load", Tetris.init);

As always, you can download it from github.

I had a lot of feature requests since last version and I hope I covered them all.
Here is what’s new in 3.3.0:

• clustering
• fixAfterResize – fixing issues with loading gMaps in tabs
• changeSettings – works with most of initial options
• mapclick(callback) – bind for map click event
• geocode(address, callback) – shorthand for geocoding
• draggable markers (thanks to theMarvin)

I’m getting close to the point where I’ll consider gMap completed. Now it’s just about the time to improve documentation, which is still in 3.1.0 (sorry for that) and to complete test coverage.

I’d like to share a link to Magic Gallery WordPress Plugin: http://www.magicgalleryplugin.com/ It uses gMap and has a very nice design.

If you want to support my work and make my Christmas even better, please consider donating (button on the right sidebar).

That’s all the news, merry Christmas everyone!

Some highlights of things that has changed:

Trace JIT is no more

I was surprised by the news that trace JIT was removed from Firefox trunk. I hoped that it will grow and replace method JIT completely one day. Post from from David Mandelin explains details behind this  decision.

Method JIT works better than I expected

During my talk I stated that using config object (which e.g. jQuery plugins do) may break JIT and that the safest way is to use integer and float arguments only.

I got a very detailed description from Rob Brackett on how JIT works with objects:

Passing config objects to functions can often cause them to run slower — most engines use a concept of “shape” to JIT code related to objects (shape is basically the set of keys on your object, so {a:”a”, b:”b”} and {a:”c”, b:”d”} are the same shape but {a:”a”, c:”b”} is a different shape). The function will generally have to be JITed once for each shape that is passed in. Some engines stop re-JITing after they’ve seen a certain number of shapes (the threshold is different for different engines) and some do not.

My second statement, about integers and floats was based on NanoJIT capabilities. Since it was removed from Firefox with Trace JIT, I can now safely say that any argument type that fulfill static “shape” description above can be JITed.

Source: http://groups.google.com/group/jsmentors/browse_thread/thread/9286c04c908cd722

Reflow is blocking

I got a question, if reflow has been or could be moved to separated thread, so it won’t be blocking. The short answer is “no”. There are plenty of functions that depend on calculated result and it would require synchronizing very often. The list of functions that require reflow to be completed.

More

It was linked in my slides, but I’d like to say it again – read David Madelin’s slides Know Your Engines from Velocity Conf 2011. It’s the most detailed source about engines I’ve found so far.

I’ve asked some questions on JSMentors group, you may want to check it out.

Bonus: some photos from the event

My main topics were:

• Optimization in general
• DOM
• Reflow/repaint
• Garbage collector
• JIT
• Google Closure (Compiler/Tools/Library)

You can check my slides here. I collected plenty of links and wrote a few examples.

Feel free to comment and criticize. I’ll be happy to add anything that I’ve missed or to correct any mistakes. There are few good optimization resources and I had some doubts in few cases.