Difference between revisions of "Rot.js tutorial, part 1"

From RogueBasin
Jump to navigation Jump to search
Line 14: Line 14:
         <script src="/path/to/the/game.js"></script>
         <script src="/path/to/the/game.js"></script>
     </head>
     </head>
     <body>
     <body onload="Game.init()">
         <h1>Ananas aus Caracas</h1>
         <h1>Ananas aus Caracas</h1>
     </body>
     </body>
Line 21: Line 21:
</div>
</div>


We are going to put all the game code in one file, to maintain simplicity. When making larger games, it is far more useful to split the code across several files.
We are going to put all the game code in one file, to maintain simplicity (when making larger games, it is far more useful to split the code across several files). We do not want to pollute the global name space with our variables; that's why we wrap all our code in an object named "Game".


<div style="padding:5px; background-color:#eee; margin-bottom:2em;">
<div style="padding:5px; background-color:#eee; margin-bottom:2em;">
Line 28: Line 28:
     init: function() {}
     init: function() {}
}
}
</syntaxhighlight>
</div>
== Console output: ROT.Display ==
Being a JS app, our game can modify the HTML page in many ways. However, rot.js encourages only one kind of output: printing to its "tty console", which is represented by a HTML <canvas> tag. In order to draw anything, we first need to create this console and store it for later usage.
<div style="padding:5px; background-color:#eee; margin-bottom:2em;">
<syntaxhighlight lang="javascript">
var Game = {
    display: null,
    init: function() {
        this.display = new ROT.Display();
        document.body.appendChild(this.display.getContainer());
    }
}
</syntaxhighlight>
</div>
Note that this console has a default size of 80x25 cells; if we wanted a different default dimensions, we would configure them via '''ROT.DEFAULT_WIDTH''' and '''ROT.DEFAULT_HEIGHT'''.
== Generating a dungeon map ==
We will use one of rot.js's built-in map generators to create the game level. One of the design paradigms of rot.js is that people should not be forced to use some pre-defined data structures; this is why the generator is ''callback-based''. We will pass our custom function to the generator; it will get called repeatedly during the process.
This might be a good time to check out the [http://ondras.github.com/rot.js/manual/ rot.js manual], which contains useful code samples and usage overview.
How to store the resulting map data? We will use an extremely trivial storage: an ordinary JS object ("hashmap"), indexed by strings (having the format "x,y"), values representing floor tiles. We are not going to store wall / solid cells.
<div style="padding:5px; background-color:#eee; margin-bottom:2em;">
<syntaxhighlight lang="javascript">
Game.map = {};
Game._generateMap = function() {
    var digger = new ROT.Map.Digger();
    var digCallback = function(x, y, value) {
        if (value) { return; } /* do not store walls */


Game.init();
        var key = x+","+y;
        this.map[key] = "·";
    }
    digger.create(digCallback.bind(this));
}
</syntaxhighlight>
</syntaxhighlight>
</div>
</div>


And that's all for part 1. The whole working code is available at [http://jsfiddle.net/rotjs/BmEwg/ jsfiddle.net].
And that's all for part 1. The whole working code is available at [http://jsfiddle.net/rotjs/BmEwg/ jsfiddle.net].

Revision as of 13:39, 12 December 2012

This is the first part of a rot.js tutorial.

Setting up the development environment

Our game is played within a web page; a rudimentary HTML file should be sufficient. 

<!doctype html>
<html>
    <head>
        <title>Ananas aus Caracas: rot.js tutorial game</title>
        <script src="https://raw.github.com/ondras/rot.js/master/rot.js"></script>
        <script src="/path/to/the/game.js"></script>
    </head>
    <body onload="Game.init()">
        <h1>Ananas aus Caracas</h1>
    </body>
</html>

We are going to put all the game code in one file, to maintain simplicity (when making larger games, it is far more useful to split the code across several files). We do not want to pollute the global name space with our variables; that's why we wrap all our code in an object named "Game". 

var Game = {
    init: function() {}
}

Console output: ROT.Display

Being a JS app, our game can modify the HTML page in many ways. However, rot.js encourages only one kind of output: printing to its "tty console", which is represented by a HTML <canvas> tag. In order to draw anything, we first need to create this console and store it for later usage. 

var Game = {
    display: null,

    init: function() {
        this.display = new ROT.Display();
        document.body.appendChild(this.display.getContainer());
    }
}

Note that this console has a default size of 80x25 cells; if we wanted a different default dimensions, we would configure them via ROT.DEFAULT_WIDTH and ROT.DEFAULT_HEIGHT.

Generating a dungeon map

We will use one of rot.js's built-in map generators to create the game level. One of the design paradigms of rot.js is that people should not be forced to use some pre-defined data structures; this is why the generator is callback-based. We will pass our custom function to the generator; it will get called repeatedly during the process.

This might be a good time to check out the rot.js manual, which contains useful code samples and usage overview.

How to store the resulting map data? We will use an extremely trivial storage: an ordinary JS object ("hashmap"), indexed by strings (having the format "x,y"), values representing floor tiles. We are not going to store wall / solid cells. 

Game.map = {};
Game._generateMap = function() {
    var digger = new ROT.Map.Digger();

    var digCallback = function(x, y, value) {
        if (value) { return; } /* do not store walls */

        var key = x+","+y;
        this.map[key] = "·";
    }
    digger.create(digCallback.bind(this));
}


And that's all for part 1. The whole working code is available at jsfiddle.net.

Retrieved from "http://roguebasin.com/index.php?title=Rot.js_tutorial,_part_1&oldid=30576"