Playing Via the Tubes

[Nytmare]

One of my players recently got a new job that has him working out of town about 2 weeks of every other month. Instead of letting this interrupt our already shakey game schedule, we decided that we'd see if we could figure out a way to have him play with us online.

For our first attempt, I rigged a microphone and camera pointed at our game table, and we used Google's new video chat.

I have a monitor that faces our players that I use to show maps and other images that don't need/deserve to be printed out. I made a webpage that has these images automatically uploaded whenever they are shown to the other players, so that he'd be able to see exactly what they were seeing.

We normally use character cards instead of a sheet, but to make things easy (or at least that's what we assumed) I just printed a pdf of the character builder character sheet.

On to the problems!

Part 1 - The Camera and Google Video Chat
This was rough for a couple of reasons. We use chits and not minis, so we really needed to get as close to a birds-eye view as we could to be able to distinguish who was who. Gmail's video chat worked, but I wasn't thrilled with it. It automatically mirrors the image for you, assuming that it would help me with my view of my own face. This is unfortunately confusing as hell if you're trying to operate a camera looking at something from your point of view. Gmail's video chat also doesn't allow you to increase the size of your view of what the camera was looking at, so I had an inch wide video feed of a 4 foot wide map.

Part 2 - The Player's View Webpage
This worked about as well as I hoped. The only problem we had was on his end of things because the view this was giving him of the map (north up) was a flipped upside down version of what the webcam was showing him (south up). I don't really have the ability to rig the camera from the "right" angle, and don't want to add the extra steps involved in flipping the maps 180 degrees for his point of view, but thankfully it only took a little bit of mental gymnastics for him to set things right in his head.

Part 3 - The Character Sheet
This was probably the worst part for him. Not only was it a pain cause he wasn't used to the layout of the sheet, but the information was spread across 4 pages which, in addition to juggling between a map and a camera, just made finding any piece of character information a long and drawn out process.

Part 4 - The End Part
I was struck with inspiration last night after I ate dinner, which unfortunately led to me becoming possesed and staying up till 9:00 in the morning programming. I realized that there was probably a (somewhat) manageable javascript out there, that would allow me to stick the individual character cards on a webpage, that he'd then be able to drag around individually and organize the way he wanted.

After I found exactly what I wanted (actually what I found was WAY better than what I had originally imagined, thank you Walter Zorn!) and started piecing things together, I realized I could stick the "player monitor" on the page as well and save him from having to ALT TAB to anything other than the video feed.

Once I had the map on there, I didn't really have any excuse not to put his chit on there so that he could visually position himself. After I added him, I figured I should add his friends as well and that while I was at it I should add a bunch of non descript colored counters for marks or bad guys or whatever else he might want them for.

http://www.guild.net/~nytmare/dnd/malik/ Sorry to anyone who isn't using a screen resolution at least 1280 pixels wide. Since it was only really meant for "him", I sized things to specifically take advantage of his resolution.

This is what it currently looks like, there are still a handful of things I need to iron out. The code is a real mess, and I'm pretty sure that I did most of it while I was unconcious.

• I need to figure out how to get the map image to refresh properly, it's not playing well with the drag and drop javascript for some reason.
• I'm thinking about adding a box around the power cards like the one I've got for the character cards, so that they can be manipulated all at once.
• I'm toying with the idea of a "make all the cards their normal size" button or something.
• It would be nice if the counters on the map scaled automatically with the map image, but I'm pretty sure I'll be happier NOT having to deal with that hassle.
• I was thinking about a form with text boxes and whatnot to track hitpoints and notes, but that would be an obnoxious amount of information to lose to an accidental refresh. Maybe it's finally time for me to learn how to do cookies.
• A die roller maybe? He needs one. He travels light which means "sans dice", but I don't want things to get cluttered, and I'm worried that adding any new elements (especially big elements) might push things over the edge.

So two questions: "What would you want out of a page like this if you were stuck having to use it?" and "if you are already playing a game over the internet, what tools have you found work really well for you?"


[EDIT - I was just informed that it wasn't working correctly in IE. It's still not as pretty as it is in Chrome and IE, but it's at least working now.]

 

[Garthanos]

There was a tool I played with some, I am trying to remember its naem (... it had a behind the hood apache server set up on both ends) but the main point was everyone involved saw moves to the pieces mostly simultaneously the GM could move monsters about and the players would see it and vice versi. It was free and you could hack the interface to your hearts content.... my friend had me doing that part since I am rather adroit at js html hacking... sounds like you might like it.

 

[Nytmare]

There was a tool I played with some, I am trying to remember its naem (... it had a behind the hood apache server set up on both ends) but the main point was everyone involved saw moves to the pieces mostly simultaneously the GM could move monsters about and the players would see it and vice versi.

I've got a couple programs like that lurking around on my computer somewhere, but what I was really angling for with that map was something where the player had a little set of tools, and that once we started playing, I didn't have to adjust my DMing routine at all. I just move stuff around on the real life map like normal, and if he needs to, he can move stuff around on his virtual sketchpad to help himself view things tactically.

Though, I guess it might help translate his directions on where to stick his chit on the real board. We had a couple instances of "Left, no left. MY left" last time we played, and that might get to be a pain if we don't come up with a workable shorthand.

As it stands, this is only meant as a one player/special circumstance kind of thing. I've already warned my other players that me coming up with this stuff isn't an excuse for them to decide that they are going to play from home cause they don't feel like putting on pants.

If I were running things for a totally web based game, I'd use something like what you're talking about in a heartbeat though.

 

[AbdulAlhazred]

Well, I'm sure someone else will suggest it pretty soon, so I might as well be the one. Maptool. It does require you to run a maptool server instance and he has to connect, but that part is simple and reliable enough.

You can load up any number of maps into maptool. The remote player can view whichever ones he needs to and you can display whatever ones the players need to look at on the local screen. It also has VERY extensive macro support, text chat, etc. At this point there are macro sets supporting virtually ALL aspects of 4e play, including initiative management. You can also display power cards, character sheets of whatever type you want to make up, etc.

I've found it to have a high quality interface and it is quite a robust and full featured piece of software. Best, its entirely free and cross platform.

I've been running my 4e campaign entirely using maptool for the past 6 months now. It would be BETTER to play face-to-face, no doubt, but maptool does make a more than just adequate substitute when that isn't feasible, and it has been improving by leaps and bounds almost faster than you can keep up. The users are numerous and highly active, and the developers likewise. Overall seems BY FAR the best VTT solution you can get, possibly even considering the various commercial ones.

Sure beats a web based system. We tried that, and I'm no slouch at doing dynamic web app stuff. You just cannot really make a reliable enough tool that way as it stands now. Web tech gets better all the time and it probably will get there in the next couple of years, but drag-n-drop at this point is way too flaky in javascript.

 

[Nytmare]

Newest version is now at:

http://www.guild.net/~nytmare/dnd/malik/

and now has a die roller and a scratch pad that he can track HPs, surges, and crossbow bolts with. It works in Firefox, but is only really "pretty" in Chrome.

A less updated version, that still works with IE can be found at :

http://www.guild.net/~nytmare/dnd/malik/ie.html


I'm still trying to get the map to refresh itself automatically, but I think that's the last real hurdle.

 

[MadLordOfMilk]

I was actually curious about ways people have worked out having one person play online with the rest of the group at the table. Unfortunately, I don't have the web skills to pull something like what you've done off, but if I were playing remotely I think just the webpage part would work wonders.

Having not been able to play with it myself, I can't really comment on how well it works or not, but as a player I can't really think of another thing I'd want on the page. If I had a way to help test it out, I'd offer to, but I don't think I can :\

 

[MadLordOfMilk]

Yesterday we had a friend who lives out of state play online with us. Thankfully, out of the ~4 laptops lying around, one of us had one with a built in webcam. We connected to our out-of-state friend using Skype, and aimed the webcam at the battle mat, so he was able to get a rough view of everything. Using skype and the camera/microphone built into the laptop, we were able to all talk freely as if he was in the room

As far as dice rolls, we basically just trusted him to be honest with them. He's not the type to fudge his die rolls. Though the video feed of the mat wasn't the best, I did send him a spoiler-free version of what the map looked like. We kinda did this impromptu, but I used a slightly modified delve from Dungeon Delve so I was able to just take the pic out of the PDF.

For running his character, I'm not sure exactly what was used on his end, but I'm assuming it was primarily looking at the sheet from the character builder. Setting up something like that webpage might still be pretty useful to him, but he'll be playing from home so it's not as big of a deal. I think the nicest part of the webpage is having everything where you can move it around easily, along with being able to update the map on the page.

 

[Nytmare]

That's odd. I thought I had replied to you yesterday, but it doesn't appear to have gone through.

Thanks for the vote of confidence, and the offer to help, even if you aren't able to.

We haven't had a chance to actually put it to work yet, our game this last week was postponed and it's going to be a while till he's out of town again, but we did sit down online and hammer on it some to see what, if anything we wanted to tweak.

The only things I'm unhappy with at this point (aside from the cluttered mess the javascript is currently in) are that I can't get the map to refresh itself automatically (which in all honesty is hardly an issue) and the fact that I can't hook up the webcam at an angle that shows him the whole table. I really see the dance of continuously repositioning the camera as the thing that's going to eat up the most time.

His main complaints at this point are that he'd rather use the virtual card interface at the table instead of real cards and that he likes my die roller better than the one he insists on using on his blackberry.

I don't have much sympathy for him.

 

[MadLordOfMilk]

Could you put the map in a separate frame and just refresh that? I have no idea how doable or not that is, just the first thing that popped in my head. I also have no clue how that'd interact with the javascript for moving stuff around.

As far as positioning the camera, what about rigging something with a lab stand? You'd have to play with it, but it might work. If you don't know what a lab stand is, this is from the first hit on google. Depends on how much you wanna spend, of course.

 

[Nytmare]

Could you put the map in a separate frame and just refresh that?

The problem is that the drag and drop part of the script wants you to tell it what all of the images on the page are as soon as the page loads, and the map refreshing part of the script works by constantly renaming the map image and then changing over to the new name. I'm fine with it though because the player should be hitting that reset button to clear all the pieces whenever there's a new map anyway, so... *shrug*

As far as positioning the camera, what about rigging something with a lab stand?

A lab stand would unfortunately eat up table space. I think that what I really need is a better camera. Auto focus and a wider lens will solve the two biggest issues. I don't want to just trade off one set of problems for another though.