... please wait
View the source code here: https://github.com/061375/Wes.Mantooth/tree/master/wip/rpg
See The demo here: http://wesmantooth.jeremyheminger.com/wip/rpg/simple.php
Use your computers arrow keys to control the player.
I have been playing around with this idea for a few weeks and finally got a little time to put it together. Wes Mantooth is really just a tool for me to experiment with and hone my abilities in Javascript but thus far I hadn't really built any thing GAME like with my own game engine. ( I plan to start fixing that problem very soon ). Starting with this little RPG example. It's VERY basic at this point, quite jinky and there is A LOT of code. There are certainly some things I can optimizer and put into the engine to automate.
This basic version uses an old trick for setting up the collision map by using a two-dimensional array. Each section of the the matrix corresponds to a 50 x 50 pixel section of the game play area. When a player walks the program takes the ceiling of the x,y (rounds the current position) and associates it to a position in the matrix. Then asks, is this a wall? If "no" the player can walk.Then it looks to the grid and checks if an object exists with any other commands. Currently the only command is an event called "door".
// @param {Array}
var g = [Math.ceil(this.y/50),Math.ceil(this.x/50)];
This process can be optimized. And what's more it should be pretty easy to create a simple editor.
The room was built in a simple free 3-D modeller called Anim8or. It's true that Blender is a better tool, that it still supported. But, I generally use good old Anim8or in most cases because its really simple to use when just throwing together a model. I also like that the source -code output for the model is in a basic text file and is really easy to read and understand. (Perfect for playing around with in code).
It had been awhile since I used Anim8or to model. I used it for years and built some really cool stuff. What was especially tough was the lighting. Eventually I got what I was looking for. The lighting setup is designed so that for future versions I can grid it up as individual tiles to make more complex dungeons.
To make things easier and faster I used a simple background image in HTML with a foreground image rendered as an extra canvas layer. For this simple test it works just fine however the current upper layer is UGLY. This is because I am working from home and I don't Photoshop (I'm stuck using GIMP and it keeps adding a white border around the the PNG).... I will fix it during lunch on Wednesday.
To create the grid I used the Wes Mantooth grid tool located in the draw class.
The room transition is a simple CSS transition. When the player steps on a door time, the program adds a class and stops drawing the game. Since the map is a background image attached to a separate DIV it simply does it's thing and then after a second I begin drawing the game again. I plan to add some simple things like random tables an items.
