GeekGold Bonus for All Supporters at year's end: 1000!
10,385 Supporters
$15 min for supporter badge & GeekGold bonus
14 Days Left

Support:

Recommend
4 
 Thumb up
 Hide
18 Posts

BoardGameGeek» Forums » Board Game Design » Board Game Design

Subject: dragable map in web browser rss

Your Tags: Add tags
Popular Tags: [View All]
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmbmb
I've been working with svg graphics lately, and I was thinking that wargames could be done in svg. So I spent some time this weekend and put a "proof of concept" together. This is all in svg / javascript (ecmascript) / html. You can drag the map around, and change some zoom levels. You can do a "view source" to see all the code.

http://www.wargalley.com/svg/test.html
Works in Firefox, Safari, IE9, Chrome.

Right now, you can't do much. But, it could be developed into a full fledged wargame, with ajax going to a server backend, to provide map and unit data from a database, and to enable multiplayer. No flash, no "app store", no plugins needed.
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Kai Bettzieche
Germany
Ladenburg
Baden Württemberg
flag msg tools
designer
badge
Avatar
mbmbmbmbmb
I cannot really "drag" it - in FF I can only move it by using the arrows.

By "dragging" I understand rather a "click, hold and drag" mechanic ..

Nice idea, though
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
DC
United States
Grand Rapids
Michigan
flag msg tools
badge
Avatar
mbmbmbmbmb
It drags correctly for me, using Chrome and Safari (click, hold, and drag). Nice idea...
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Joe Mucchiello
United States
Edison
New Jersey
flag msg tools
designer
Personally, I would use a HTML5 canvas for this. I've done a few proof-of-concept things with this and agree you could do it all without plugins. That's 1% inspiration. The real trick expending the 99% perspiration.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Kevin Long
United States
Brush Prairie
WA
flag msg tools
designer
badge
Avatar
mbmbmbmbmb
If your thinking game - try Flash - its very easy and powerful compared to the days of old for going the wargame route.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Joe Mucchiello
United States
Edison
New Jersey
flag msg tools
designer
treece keenes wrote:
If your thinking game - try Flash - its very easy and powerful compared to the days of old for going the wargame route.

Flash has very little that HTML5 does not for a game in a browser. They exist all over the net.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmbmb
jmucchiello wrote:
Personally, I would use a HTML5 canvas for this. I've done a few proof-of-concept things with this and agree you could do it all without plugins. That's 1% inspiration. The real trick expending the 99% perspiration.


But, you can't attach events to things you draw to the canvas, can you? SVG elements can listen to events.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jonathan Harrison
United States
Fisher
Illinois
flag msg tools
So long ...
badge
... and thanks for all the fish.
Avatar
mb
schattentanz wrote:
I cannot really "drag" it - in FF I can only move it by using the arrows.

By "dragging" I understand rather a "click, hold and drag" mechanic ..

Nice idea, though

Opera handles it correctly, as expected.

Be interesting to see what you do with this.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
James Hutchings
Australia
Unspecified
Unspecified
flag msg tools
mbmbmbmbmb
Using Firefox, I could move the map and the unit together, but I couldn't move the unit while keeping the map in place.

To me it would make more sense if the map was fixed (or had scroll bars) and you could move the units around.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmbmb
yes, I put that one unit on the map just to show how it may look on a map. The main point of this exercise was to see if the map could be dragged around in a cross-browser compatible manner.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Joe Mucchiello
United States
Edison
New Jersey
flag msg tools
designer
Cisco Serret wrote:
jmucchiello wrote:
Personally, I would use a HTML5 canvas for this. I've done a few proof-of-concept things with this and agree you could do it all without plugins. That's 1% inspiration. The real trick expending the 99% perspiration.


But, you can't attach events to things you draw to the canvas, can you? SVG elements can listen to events.

Depends on what you are mapping. The canvas itself can receive events.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmbmb
I was thinking about this a bit. What could be done is floating divs, that have event handling attached to them, and whatever canvas drawing operations needed could be done on them. Each "counter" could be a floating div. That way the events could be hooked up with the divs. You could apply canvas drawing operations, or svg, whichever is best (or even both).

1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Atilla Kármán
Hungary
Budapest
flag msg tools
badge
Avatar
mbmbmbmbmb
Cisco Serret wrote:
I was thinking about this a bit. What could be done is floating divs, that have event handling attached to them, and whatever canvas drawing operations needed could be done on them. Each "counter" could be a floating div. That way the events could be hooked up with the divs. You could apply canvas drawing operations, or svg, whichever is best (or even both).



I did the very same in order to create a Twilight Imperium map generator.
That means a hell of a lot divs in the page, but haven't had any problem with it so far.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Steen
Denmark
Taastrup
DK
flag msg tools
badge
Avatar
mbmbmbmbmb
I'm working on something similar, but without the SVG though, but rather going with oldschool graphics. (PNG, JPEG etc...) How do you think SVG would do representing something completely hypothetical like the tiles from Steam? I'm coding a Java backend set of webservices. I've still got quite some way to go, but also got loose plans for coding an AI player for the game.

I don't get why you want event listeners in a boardgame. I suspect you want everything sent to the backend, to be saved in a database for persistance of the game...?
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Cisco Serret
United States
Austin
Texas
flag msg tools
OverText
badge
WOOF!
Avatar
mbmbmbmbmb
event handlers for things like counters, map, charts, etc.
For example if you click on a counter, and you have a "mouse click" listener on it, a menu comes up asking you if you want to "move" the counter, get "info" on the counter, "change" the stacking position of the counter, "select" it for participating in an attack on a hex, etc. Not necessarily for sending data back to the server.

I was wondering if having a ton of divs, with custom drawing operations on each one, would cause browsers to slow down to a crawl. Atilla says he didn't see a problem, so thats a good sign.

svg graphics can get pretty complex, even approaching bitmapped graphics look. A program called "inkscape" (free) can import a png and create a svg out of it. Although, the svg created is much bigger than the raster file.

The best thing is to have a gifted artist who can trace out bitmapped graphics and create good, slim, vector graphics out of it. I'm not a gifted artist though.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Atilla Kármán
Hungary
Budapest
flag msg tools
badge
Avatar
mbmbmbmbmb
Cisco Serret wrote:
event handlers for things like counters, map, charts, etc.
For example if you click on a counter, and you have a "mouse click" listener on it, a menu comes up asking you if you want to "move" the counter, get "info" on the counter, "change" the stacking position of the counter, "select" it for participating in an attack on a hex, etc. Not necessarily for sending data back to the server.

I was wondering if having a ton of divs, with custom drawing operations on each one, would cause browsers to slow down to a crawl. Atilla says he didn't see a problem, so thats a good sign.

svg graphics can get pretty complex, even approaching bitmapped graphics look. A program called "inkscape" (free) can import a png and create a svg out of it. Although, the svg created is much bigger than the raster file.

The best thing is to have a gifted artist who can trace out bitmapped graphics and create good, slim, vector graphics out of it. I'm not a gifted artist though.


Well I'm save to say a ton of divs containing a single png wont do any harm at all. I don't "speak" svg at all, so I can't say anything about that.

This is the output of my map generator for Twilight Imperium, but these divs are pretty simple. If you stuff them with event handlers that won't cause any slowing, I'm sure of that.

http://safedrive.hu/~atilla/TI/php/map_generator.php
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Joe Mucchiello
United States
Edison
New Jersey
flag msg tools
designer
Stony wrote:
I'm working on something similar, but without the SVG though, but rather going with oldschool graphics. (PNG, JPEG etc...) How do you think SVG would do representing something completely hypothetical like the tiles from Steam? I'm coding a Java backend set of webservices. I've still got quite some way to go, but also got loose plans for coding an AI player for the game.

I've thinking about doing Railways of the World using an HTML5 canvas, drawing the track tiles rather than overlay potentially hundreds of floating divs for a full game'a worth of tiles. RotW maps have a lot more tiles than Steam, of course.

Where are you going to host a Java backend?
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Steen
Denmark
Taastrup
DK
flag msg tools
badge
Avatar
mbmbmbmbmb
jmucchiello wrote:
Where are you going to host a Java backend?

I've got a NAS running both Tomcat and a MySQL database. So it will be hosted at home, merely making use of my own internet connection.

I'm not too concerned about capacity, as I'm just aiming at being able to play with my buddies. I don't want to violate any copyrights, so it is rather unlikely to become a public service. Unless someone like Mayfair want to pick it up once it is done, but I won't hold my breath.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Front Page | Welcome | Contact | Privacy Policy | Terms of Service | Advertise | Support BGG | Feeds RSS
Geekdo, BoardGameGeek, the Geekdo logo, and the BoardGameGeek logo are trademarks of BoardGameGeek, LLC.