Zachary Lester

Building Roguelike Games with rot.js - Part 3

Sat, 18 Jul 2015 11:13:00 +0000

Welcome to Part 3 of my rot.js game tutorial. As always, you can check out the source code for the library itself over at Ondřej Žára’s github, look at the documentation for the library at his github.io site, and find the tutorial code over at my own github page.

In Part 1 of the tutorial, we creted a basic “hello world” application in rot.js. In Part 2, we refactored our original code to be more modular. This tutorial will about using rot.js’ built-in modules to create our first randomly generated dungeon map.

First up we’ll be creating an empty object to store our map’s values and widening our display to 80x40 to give our Map generator some room to create an interesting dungeon:

// ...

// Parameter stores

display: null,

container: null,

map: {},

gameOptions: {
  width: 80,
  height: 40
},

// ...

Next, we’ll create two new helper functions, createMap and drawMap; the former to randomly generate the values for our first dungeon, and the later to render those values on the screen:

// ...

createText: function(colors, string) {
  return colors + string;
},

createMap: function() {
  var digger = new ROT.Map.Digger();
  digger.create(function (x, y, ele) {
    if (ele) {
      return;
    }
    var pos = x + ',' + y;
    // This line determines what symbol is drawn on the map
    this.map[pos] = ".";
  }.bind(this));
  this.drawMap();
},

drawMap: function() {
  for (var loc in this.map) {
    var posArr = loc.split(",");
    var x = parseInt(posArr[0], 10);
    var y = parseInt(posArr[1], 10);
    this.display.draw(x, y, this.map[loc]);
  }
},

// ...

Note that we need to use the bind method for the callback we pass into digger in order to let the digger object know what the correct context of “this.map” is - without the .bind, the digger will think that we want to set the values of Digger.map, which doesn’t exist. If the ‘this’ keyword looks scary to you, I highly recommend checking out MDN’s article on the subject as a starting point - the “As an object method” subheading may prove the most useful. If you’re unfamiliar with the bind keyword, check out the article for bind as well.

Finally, we need to call createMap from within our init function:

// ...

  // Game Setup
  
  init: function() {
    this.display = this.createDisplay(this.gameOptions.width, this.gameOptions.height);
    this.container = this.createContainer(this.display);
    
    document.body.appendChild(this.container);

    this.colorCombos.whiteBlack = this.createColors(this.colors.white, this.colors.black);
        this.colorCombos.greenRed = this.createColors(this.colors.green, this.colors.red);

    var title = this.createText(this.colorCombos.greenRed, "rot.js Tutorial");
    this.display.drawText(0, 0, title);
    this.createMap();
  }

};

Game.init();

The index.html for our game has remained the same, whiel our newly refactored game.js will be as follows:

// game.js

var Game = {

  // Helper functions

  createDisplay: function(displayWidth, displayHeight) {
    return new ROT.Display({width: displayWidth, height: displayHeight});
  },

  createContainer: function(displayObject) {
    return displayObject.getContainer();
  },

  createColors: function(foregroundColor, backgroundColor) {
    return "%c{" + foregroundColor + "}%b{" + backgroundColor + "}";
  },

  createText: function(colors, string) {
    return colors + string;
  },

  createMap: function() {
    var digger = new ROT.Map.Digger();
    digger.create(function (x, y, ele) {
      if (ele) {
        return;
      }
      var pos = x + ',' + y;
      this.map[pos] = ".";
    }.bind(this));
    this.drawMap();
  },

  drawMap: function() {
    for (var loc in this.map) {
      var posArr = loc.split(",");
      var x = parseInt(posArr[0], 10);
      var y = parseInt(posArr[1], 10);
      this.display.draw(x, y, this.map[loc]);
    }
  },

  // Parameter stores
  
  display: null,
  
  container: null,
  
  map: {},

  gameOptions: {
    width: 80,
    height: 40
  },

  colors: {
    white:  ROT.Color.toRGB([255,255,255]),
    black: ROT.Color.toRGB([0,0,0]),
    red: ROT.Color.toRGB([255,0,0]),
    green: ROT.Color.toRGB([0,255,0]),
  },

  colorCombos : {},

  // Game Setup
  
  init: function() {
    this.display = this.createDisplay(this.gameOptions.width, this.gameOptions.height);
    this.container = this.createContainer(this.display);
    
    document.body.appendChild(this.container);

    this.colorCombos.whiteBlack = this.createColors(this.colors.white, this.colors.black);
        this.colorCombos.greenRed = this.createColors(this.colors.green, this.colors.red);

    var title = this.createText(this.colorCombos.greenRed, "rot.js Tutorial");
    this.display.drawText(0, 0, title);
    this.createMap();
  }

};

Game.init();

As always, you can view and download the full source code over at my tutorial’s Github Repo. If you have any questions, feel free to drop me a line.

Coderbyte Video Tutorial - Easy - FirstReverse

Sun, 12 Jul 2015 11:21:01 +0000

Coderbyte Video Tutorial - First Reverse

Building Roguelike Games with rot.js - Part 2

Fri, 19 Jun 2015 14:09:00 +0000

Welcome to Part 2 of my rot.js game tutorial. As always, you can check out the source code for the library itself over at Ondřej Žára’s github, look at the documentation for the library at his github.io site, and find the tutorial code over at my own github page.

In Part 1 of the tutorial, we creted a basic “hello world” application in rot.js. This tutorial will about refactoring the previous code into a more object-oriented approach, which will make our code more modular as our game grows and also have the added benefit of keeping as few variables as possible in the global scope.

First up we’ll be wrapping all of the code we wrote in a object will arbitrarily name “Game” save for our invocation of the init function:

var Game = {

// All Previous Code

};

init();

Next, we’ll have to convert all of our previous function declarations into methods for our new game object.

Instead of using the var keyword to declare functions like our previous code in part 1

var createDisplay = function(displayWidth, displayHeight) {
  return new ROT.Display({width: displayWidth, height: displayHeight});
};

var createContainer = function(displayObject) {
  return displayObject.getContainer();
};

We’ll now make each function a method of the Game object:

var Game = {
  
  // ...
  
  createDisplay: function(displayWidth, displayHeight) {
    return new ROT.Display({width: displayWidth, height: displayHeight});
  },

  createContainer: function(displayObject) {
    return displayObject.getContainer();
  },
  
  // ...
};

Be sure to note the comma after each method!

For the sake of clarity, I’ve moved our parameter stores to below our helper functions, and intialized the variables “display” and “container” to null to show that we haven’t yet created either, but expect to at some point in the future. They’ll be added to our Game object in much the same way the methods were:

// ...

  display: null,
  
  container: null,
  
  gameOptions: {
    width: 50,
    height: 30
  },

  colors: {
    white:  ROT.Color.toRGB([255,255,255]),
    black: ROT.Color.toRGB([0,0,0]),
    red: ROT.Color.toRGB([255,0,0]),
    green: ROT.Color.toRGB([0,255,0]),
  },

  colorCombos : {},

// ...

Our init function also becomes a method of Game, and as such is now invoked with Game.init() rather than simply init().

// ...

  init: function() {
    this.display = this.createDisplay(this.gameOptions.width, this.gameOptions.height);
    this.container = this.createContainer(this.display);
    
    document.body.appendChild(this.container);

    this.colorCombos.whiteBlack = this.createColors(this.colors.white, this.colors.black);
        this.colorCombos.greenRed = this.createColors(this.colors.green, this.colors.red);

    var title = this.createText(this.colorCombos.greenRed, "rot.js Tutorial");
    this.display.drawText(0, 0, title);
  }

// End of the Game Object
};

Game.init();

Note that I’ve removed our “Hello World” declaration in preparation for us actually adding the map to the screen in Part 3. This section of the tutorial was shorter in length than most of the others, but refactoring your code in anticipiation of future additions will always save you heartache in the long run.

While the index.html for our game has remained the same, our newly refactored game.js will be as follows:

// game.js

var Game = {

  // Helper functions

  createDisplay: function(displayWidth, displayHeight) {
    return new ROT.Display({width: displayWidth, height: displayHeight});
  },

  createContainer: function(displayObject) {
    return displayObject.getContainer();
  },

  createColors: function(foregroundColor, backgroundColor) {
    return "%c{" + foregroundColor + "}%b{" + backgroundColor + "}";
  },

  createText: function(colors, string) {
    return colors + string;
  },

  // Parameter stores
  
  display: null,
  
  container: null,
  
  gameOptions: {
    width: 50,
    height: 30
  },

  colors: {
    white:  ROT.Color.toRGB([255,255,255]),
    black: ROT.Color.toRGB([0,0,0]),
    red: ROT.Color.toRGB([255,0,0]),
    green: ROT.Color.toRGB([0,255,0]),
  },

  colorCombos : {},

  // Game Setup
  
  init: function() {
    this.display = this.createDisplay(this.gameOptions.width, this.gameOptions.height);
    this.container = this.createContainer(this.display);
    document.body.appendChild(this.container);
    this.colorCombos.whiteBlack = this.createColors(this.colors.white, this.colors.black);
    this.colorCombos.greenRed = this.createColors(this.colors.green, this.colors.red);
    var title = this.createText(this.colorCombos.greenRed, "rot.js Tutorial");
    this.display.drawText(0, 0, title);
  }

};

Game.init();

As always, you can check out the full source code over at my tutorial’s Github Repo. If you have any questions, feel free to drop me a line.

Building Roguelike Games with rot.js - Part 1

Sat, 13 Jun 2015 14:21:01 +0000

I recently discovered rot.js, an awesome javascript library for creating roguelike games. I saw a couple tutorials for it online, though thought it would be useful for both myself and anyone else that wanted to learn how to use the library to create a tutorial series as the inaugural post series for my brand-spankin’ new blog.

You can check out the source code for the library itself over at Ondřej Žára’s github, look at the documentation for the library at his github.io site, or check out a complete copy of the tutorial code itself over at my own github page.

Setting up index.html

First up we’ll set up the index.html page so as to import both the library itself (rot.js) along with the game code (game.js).

<!DOCTYPE html>
<html>
  <head>
    <title>rot.js Tutorial Roguelike</title>
  </head>
  <body>
    <script src="./rot.js"></script>
    <script src="./game.js"></script>
  </body>
</html>

Note that “./rot.js” and “./game.js” are relative paths that tell the browser to “look in the same folder that index.html is currently in for rot.js and game.js”.

Creating our game’s logic

Next up is game.js. Note that we’ll be refactoring both the game code and file structure in later tutorials, but for now will be leaving all of the game’s logic in this script.

First, we declare three parameter stores to hold our game’s options (just the width and height of the game window for the time being), a few colors using the ROT.Color.toRGB function, and a color combinations store, which we’ll leave empty for now.

// game.js

// Parameter stores
var gameOptions = {
	width: 50,
	height: 30
};

Note that each color needs to be set with the ROT.Color.toRGB function, which accepts an array of RGB values as its only parameter. For instance, we’d create blue by passing in [0,0,255]:

var blue = ROT.Color.toRGB([0,0,255])

I’ve only included colors we’ll be using in our initial Hello World application for now.

var colors = {
	white: ROT.Color.toRGB([255,255,255]),
	black: ROT.Color.toRGB([0,0,0]),
	red: ROT.Color.toRGB([255,0,0]),
	green: ROT.Color.toRGB([0,255,0]),
};

var colorCombos = {};

Next, we’ll be creating our helper functions that will create our game’s display, the display’s container, foreground/background colors, and text to append to the game display.

// Helper functions

var createDisplay = function(displayWidth, displayHeight) {
	return new ROT.Display({width: displayWidth, height: displayHeight});
};

var createContainer = function(displayObject) {
	return displayObject.getContainer();
};

Note that createColors accepts two ROT.Color.toRGB()-created colors as its parameters. Since we’ve already created several colors in the colors parameter stores, we can pass them to our helper function using dot notation:

var blueFGwhiteBG = createColors(colors.blue, colors.white);

var createColors = function(foregroundColor, backgroundColor) {
	return "%c{" + foregroundColor + "}%b{" + backgroundColor + "}";
};

var createText = function(colors, string) {
	return colors + string;
};

Finally, we declare our initialization function, which creates our game display (accessing the width and height parameters from our previously declared gameOptions parameter store), creates a container for our display, and appends the display to our index.html page.

// Game Setup
var init = function() {
	var display = createDisplay(gameOptions.width,gameOptions.height);
	var container = createContainer(display);
	document.body.appendChild(container);

	colorCombos.whiteBlack = createColors(colors.white, colors.black);
	colorCombos.greenRed = createColors(colors.green, colors.red);

	var title = createText(colorCombos.greenRed, "rot.js Tutorial");
	var greeting = createText(colorCombos.whiteBlack, "Hello, World!");
	display.drawText(0, 0, title);
	display.drawText(18, 14, greeting);
};

init();