While I admit I get sucked into too many sessions of World of Warcraft, I’ve always enjoyed playing the classic roguelike games such as NetHack and Dungeon Crawl Stone Soup. If you’ve never played these games before I highly encourage you to check them out.
Yeah there’s definitely an explosion of ASCII, but the incredibly deep gameplay more than makes up for it.
Just to make sure everything is up and running, this first post will consist of getting the basic canvas up and running!
We will start with a very basic game structure. This will be contained in the
part1 tag of the code repository.
first things first - initialize the project
Let’s get a new project going to set everything up. Enter your favorite project home and create a new directory for this rogue adventure magnifique - Baby Rogue!
npm install webpack webpack-dev-server html-webpack-plugin babel-core babel-loader babel-preset-env --save-dev
setup and test webpack configuration
Rather then repeating myself, I’ve created a mini deep-dive on getting setup with Webpack.
install rot.js library
With our basic Webpack configuration out of the way, let’s dive right away into starting up with Rot.js.
npm install rot-js --save
This will grab the latest version of the
Rot.js library from NPM. Due to the magic and powerful Webpack, that’s
all we have to do. No extra configuration step is needed.
Let’s help test and verify all of our configuration, by creating a reference to rot.js within our application.
npm start should now open up your favorite browser to
with our current version.
Now let’s add a small function from
Rot.js which checks to see if our current environment can support the library
or not via
creating a basic ROT.Display
We’re almost done the first installment here. Our last task to accomplish is to get our basic ROT.Display canvas displaying Baby Rogue.
start with a new Class - Engine
Because why not? With a name like Engine you just KNOW it’s going to be re-factored many times over, so let’s not even worry about it and bite the bullet.
ROT.Display object tries to work with character-sized cells for dividing up the Canvas for drawing. In other
words, the object doesn’t use the standard
640x480 pixel dimensions, but things like
80x20 cells. In our class
contructor, if we’re not defining the
20 by default.
Here’s where the magic of
ROT.Display starts. We’re creating our display object, then to properly fit and
communicate with our browser’s DOM, we use
.appendChild to stick our underlying container element to the
drawing ASCII to our Display
Our last task to test out our
#part1, codebase is to draw text to our
.display. It’s a rather simple and
straightforward function with
ROT.Display uses the concept of a
background, which (if you were around in those days), is
a throwback to the early days of 2D graphics programming when graphics cards used
optimal sprite displays.
This lets us get really creative with putting levels together, or really any kind of display we want to use where we can display one color of character on top of a different color.
So here’s the deal:
- format a string putting the two colors together
- finally, use
drawText()to position where you want the text, and what text to display.
We’ll tackle more in
#part2 of our Adventure! Remember you can grab the source code for