Upgrade your account to a Community Supporter account and remove most of the site ads.

Reply to thread

Message: <blockquote data-quote="Nytmare" data-source="post: 4722544" data-attributes="member: 55178">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 <a href="http://www.walterzorn.com/dragdrop/dragdrop_e.htm" target="_blank">Walter Zorn!</a>) 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. <a href="http://www.guild.net/~nytmare/dnd/malik/" target="_blank">http://www.guild.net/~nytmare/dnd/malik/</a> 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. <ul> <li data-xf-list-type="ul">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.</li> <li data-xf-list-type="ul">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.</li> <li data-xf-list-type="ul">I'm toying with the idea of a "make all the cards their normal size" button or something.</li> <li data-xf-list-type="ul">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.</li> <li data-xf-list-type="ul">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. <img src="https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f61b.png" class="smilie smilie--emoji" loading="lazy" width="64" height="64" alt=":P" title="Stick out tongue    :P"  data-smilie="7"data-shortname=":P" /></li> <li data-xf-list-type="ul">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.</li> </ul>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.]</blockquote>

Verification