Note: The GameAPI is an effort to implement browser-based games, primarily RPGs, in Drupal. Read the original design document or check out the official forums. The following post has been crossposted there as well.
So, Er, How's It Going?
The first three bullets of the original proposal were:
- All game data stored in external files.
- The default game data files are multi-genre.
- A gamesapi is created, much like the nodeapi.
And the framework is in place. It's not much of a framework, but is certainly past the realm of "proof of concept" and into the territory of "welp, it works". In the coming months, it'll be edging ever close to "aah, this is why he wanted it this way." And, naturally, there are docs and examples in the CVS. It all works too.
The next stage is centered around character creation, and I had hoped to finish that mini-milestone this month. However, after numerous false starts with multiple page forms (to allow race selection to determine what actual classes are available, for instance) and a desire for "characters should be nodes", only recently, per chx's example, do I feel confident about getting it Right. I'll be working on that approach shortly.
Map making: Interface and Design
The real reason for this post, however, is to discuss the map interface. There was some minor and preemptive talks about it on the Gamegrene forums, but I didn't really have a firm grasp on what I was looking for. I believe that now I do, and it's flexible enough to satisfy most needs, whilst being entirely optional. This is solely a design, and little thought has been given to the actual code involved.
What I envisioned the system needed (in a totally non-scientific way):
- Rooms in external files, per our previous design goals.
- Multiple rooms in a single file (ie. cities).
- Cardinal directions and linking with other rooms.
- Ability to "cost" (in Action Points) to enter the room.
- Rooms can be literal rooms, "forest path", or "Planet Xenon".
- Implemented in such a way that visual maps are possible.
- Rooms are containers of NPCs, equipment, or random encouters.
- Travelling between rooms needs to be quick, and slow.
Most of the above stuff doesn't need further explanation. It is important, however, that "rooms" can be as big or as little as the user needs, and can contain other rooms, to any depth. It should be quite possible to travel on your spaceship through a solar system (the biggest room possible), choose a planet (a huge room), transport to a city (a big room), visit the bar (still smaller), and rent a bedroom (the smallest). Naturally, if you don't need that granularity, you can certainly just do an "overworld" (visible city locations, terrains, roads) and a "dungeon" (a literal dungeon, a house in the forest, the inside of a city). Entirely up to you. Rooms can be as big or as small as you'd like, and you can mix and match.
In addition, traveling between rooms needs to be as quick, or as slow, as necessary. If I'm at one city, and I want to go to another I've been to in the past, I shouldn't be forced to see page load after page load of mundane "you're travelling on the road to Iganefta" descriptions or, for that matter, click each room/direction necessary to actually get there. I should be able to just look at a map, click on the icon for Iganefta, and be "transported" there (perhaps with some random encounters along the way). On the other hand, when I'm in a dungeon, I shouldn't be able to just click on the Altar of Quest Winning from the entrance and be taken there - I should be forced to travel through each and every room, fighting monsters, solving traps, finding clues, and so forth. Naturally, unless I have a map (or have been here before), there should be a "fog of war" so that exploration and discovery is still possible (even on an "overworld" level ie. "oOOh, I haven't been in this part of the forest before").
How should all this look visually? Take a look at this quick mockup of an overworld (herein, "overworld" is used as "a view of the biggest rooms possible" - terrain, in this case). First, our visual map is a Drupal block, which can be disabled if you've developed something better. Blocks that are grey have not been explored (fog of war). Blocks that are white have been visited by the character. The green ones are cities. Again, realize that this is a mockup, and not indicative of any final coloring or visual decisions. "X" marks the character's current location. The player can travel between "rooms" by clicking a white square (either adjoining or not, as this is the overworld, where travelling is boring) or choosing the adjourning cardinal directions for the particular room the character is in. If the character visits a square with adjoining grey squares, they become visible.

Hovering over a particular (visited) room shows a tooltip that contains a little picture of the room (optional) and some additional meta info. I'm undecided on whether to attempt to use hex tiles (from the GPL'd Battle of Wesnoth project) on the map itself (so that you'd always see them) or whether to just keep them in the hovers. It'd certainly be a beautiful map if you saw them all the time, but I worry about layering information on TOP of it (like character location).
Also in the screen shot is a "Travel to:" dialog. These would be major locations (as defined by the room files) that the player could automatically travel to without incident. Players would also be able to bookmark their own favored locations ("Trading Posting #12" or some such) for a small cost in custom travel fare (Action Points, AP, but that's a discussion for later). If anyone knows World of Warcraft, these bookmarks can be considered custom flight paths, with a cost in AP as opposed to copper and silver.
Comments, concerns, death threats?
| Attachment | Size |
|---|---|
| screenshot6.png | 54.44 KB |
Comments
Sense Connectors
Exciting! Great work, Morbus. I like where you've been going with the Game API.
I'm wondering how you intend to implement senses between rooms, which can get really tricky. Specifically, you mention what I'll term meta-rooms, which can contain other rooms. There are lots of possibilities with this, but it can cause some headaches as well.
For instance, you might have a meta-room of a valley, with several subrooms of identical valleys (with various monsters, etc.). This example wouldn't really cause any problems with senses, as we can fairly safely assume that something that happens in field[4,6] can't be seen in field[4,7], because the distance between them might be acres away. At the same time, this allows a weather effect to affect all the fields there.
On the other hand, you might have another example, with a meta-room of a toy store filled with zombie snoopy dolls. The sub-rooms are the checkout counters, three aisles, and a washroom in the back. One might intend for the checkout counter to be able to see everything that happens in the three aisles, and the aisles can see what's going on at the checkout counter, but the aisles can't see each other. (Unless you shove aside the boxes of rabid barbies, but that's a complexity the author would have to program.) None of them can see what's going on in the washroom, where the robotic pogostick is waiting in ambush. However, all of the sub-rooms (except the washroom) can hear anything said in any of the other sub-rooms.
You might have something like an optional "sense-connector" that might allow properly flagged information to pass one or both ways through the connectors. But maybe this is too complex for what we're going for, and it's certainly something that could be added later in the game, if we did decide to. Just putting this out there so it can be thought about, if it hasn't already.
Might want to look at how TADS does it, for instance. (I got the idea of sense-connectors from there, but this is an age-old problem from muds & moo's.)
Exits between rooms could be a whole other can-of-worms, fit for its own discussion. (Think doors, movable boulders, trapdoors, stairways, escalators, transdimensional portals...)
- Aaron
Spindowners (a text-based sci-fi mmorpg being developed with the upcoming Game Module)
Thoughts
- this sounds useful of course, but the "without incident" part bothers me a little.
I think using some kind of images for the map would be a step in the right direction. I should mention that in the past I've also looked at creating a map from Battle of Wesnoth tiles. The hexagonal shapes make it quite awkward.
Nice progress.
Yeah, the hexagonal shapes
Yeah, the hexagonal shapes *are* awkward, but there's ultimately two possibilities: square boxes that are a little smaller than the hexagonal shape, which cut off the edges (making the hexes appear as squares), or actually figuring out the CSS to make them line up properly (possible, I'm sure, but entirely crossbrowser? Ahahahah).
The bigger problem, IMO, is the Wesnoth algorhythm. Grab the latest Wesnoth, boot up the Map Editor, and lay about 30 mountains down. Shortly after laying down 30 of the same tiles, magic happens, and you get one complete mountain range that looks all pretty, as opposed to 30 of the same boring tiles. They rig this up based on not-hexes and transparencies, and so on and so forth (check the source folders and you'll eventually find all their tilesets). It's not something I'm looking forward to in duplicating. However, after roughly a month of searching six months ago, I could find no other *high quality* set of map tiles, or a community that is always producing more (their "Game Art" forum). Wesnoth tiles, in my head, are a Definite, but how to actually implement them is the matter still in the air.
http://www.disobey.com/
http://www.gamegrene.com/
http://www.disobey.com/
Hexagons, HTML, and pretty blending graphics
A hexagonal map translates badly into HTML. While a square map is a grid - i.e. a table - and good clean HTML.
The other nice part of their tiles is the blended edges between different tilesets. They've put quite a bit of effort into avoiding the hexagon look by adding lots of small graphics that blend one type of terrain into another. I think that's over the top for a browser game to be honest, although certainly something that could be considered in the future.
I think a nice grid of cropped tiles (as per your suggestion) would be perfectly acceptable.
Peanuts
The trick to hexagonal grids is that they are simple square grids with either alternating rows or columns shifted half a square.
Using CSS positioning, this is trivial to implement. Overlapping can be achieved with negative margins, or just plain old absolute positioning (requires coordinates per square).
The technique of CSS sprites is useful to look at. You could download all tiles in a single image for speed, and use CSS classes to apply them (rather than wasteful img tags for example).
--
If you have a problem, please search before posting a question.
The big downside of using
The big downside of using only DIVs and CSS seems to be that it's immediately breakable by just turning off CSS, or if a browser decides to mess with the box model or whatever you finicky CSS people call it. Or am I horrifically wrong? I kinda like the idea of the stodgy old table that, while you can change the appearance of it, it's difficult to change the actual layout of it (strictly from CSS or a browser mod, I mean), which means that the map would always be kept "in tact". Does the CSS positioning you're thinking about work perfectly in every browser that Drupal cares about? We'd have to use relative positioning, I'd imagine, not absolute.
On the other hand, as for the table cells slightly smaller than the hex, I worry about how well that'll eventually look - we'd never be able to use Wesnoth's beautifying algorhythm (which makes the mountains look like this instead of row after row of the same mountain tile) and some of the tiles just may not link together well when forced to a square (such as a castle keep).
http://www.disobey.com/
http://www.gamegrene.com/
http://www.disobey.com/
Here's a first stab at an
Here's a first stab at an attempt (URL will eventually expire, so don't bookmark or expect longevity). Thoughts? Better approaches, UnConeD? I've only tested in FF 1.5 and Safari, but it displays fine there. Also note that the math is probably off - I only eyeballed the pixels.
http://www.disobey.com/
http://www.gamegrene.com/
http://www.disobey.com/
This approach has been
This approach has been tested awesome under FF (1.08 and 1.5), Safari, Konq, and some version of Opera. Naturally, the transparency of the PNG fails in IE. GIFs only have 1-bit transparency, but when the tiles are shrunk small enough for block-usage, will we notice it? Will have to test.
http://www.disobey.com/
http://www.gamegrene.com/
http://www.disobey.com/
And a 15x15 version, using
And a 15x15 version, using GIF - here we can see that worrying about transparencies is pretty pointless, though the true size will probably be 20x20 or some such.
http://www.disobey.com/
http://www.gamegrene.com/
http://www.disobey.com/
So, I've done a number of
So, I've done a number of more demos, all centered around 24x24, which I think is probably gonna be a "final" size - it's proportional to 72x72, and allows us to do a roughly 8x6, 8x7, maybe 8x8 map in a block without being too scrollbar crazy. Thanks to UnConeD, the IE issue is also fixed, so that we can use the PNGs and awesome transparency. Now, realize that these demos don't have the overlays - because of that, some folks have worried that it'd be hard to know where to click (ie., in the wrong hex, right on the intersection of two hexes, etc.) or which hex the currently displayed overlay actually corresponds to.
There are a few solutions - the cleanest may in fact be using a ripoff of Google Maps - the "speech bubble" overlay, with the corner pointing directly at the hex it corresponds to (as opposed to just a square box, above). That, however, is something I won't be able to demo up for a while. Take a look at these demos:
Comments on these? Which do you like better? New approaches to try?
http://www.disobey.com/
http://www.gamegrene.com/
http://www.disobey.com/
IE and the Hovers
Yes, the third fails in IE. Maybe there's a javascript solution. Or alternatively, you could have a link in every div with a css like this:
Keep up the good work!
- Aaron
Spindowners, a text-based sci-fi mmorpg being developed with the upcoming Game API.
Certainly possible - there
Certainly possible - there will, eventually, be a link in each one anyways (for a user to click on to go there).
http://www.disobey.com/
http://www.gamegrene.com/
Developer of Drupal's game.module
http://www.disobey.com/
hmm..
seems like no one is interested in building RPG for Drupal huh? :( this and another node has been dead for over a year now
Au contraire
There is even an RPG module for Drupal:
http://drupal.org/project/rpg
The GameAPI module is currently on hold though, indeed.
Games Group
New group at http://groups.drupal.org/games-and-game-apis for those watching...
Aaron Winborn
Spindowners (A web text-based sci-fi rpg in development...)
Advomatic (Web Design for Progressive Advocacy, Grassroots Movements, and Really Cool Causes)