Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Categories
- 2K All Categories
- 199 Site Announcements
- 65 News and Announcements
- 134 General Discussion
- 823 Fractal Mapper
- 210 Fractal Mapper General
- 607 Maps and Symbols
- 32 Skwyre Virtual Table Top
- 29 Skwyre General Discussion
- 3 Skwyre How-To
- 350 AstroSynthesis
- 262 AstroSynthesis General
- 88 AstroSynthesis Plug-ins and Scripts
- 105 The Keep
- 105 The Keep General
- 59 ScreenMonkey General
- 18 ScreenMonkey Setup and Configuration
- 302 Inspiration Pad Pro
- 302 Inspiration Pad Pro General
- 134 NBOS Character Sheet Designer
- 134 Character Sheet Designer General
SM Idea
Ok - I know I'm posting a lot - but I really like SM and would like to see it grow into an even better product. :-)
Idea: (Actually it is a two prong idea)
1. Load in the background image and do not change it until the GM changes it. Make the icons for the players lay on top of the background image. This can be done by inserting a table which is size "X". Size "X" is determined by the GM beforehand. Make a single blank GIF file (so it is transparent). Insert the images into the appropriate table entry for their location on the map. When a player clicks on one of the other blank GIF squares, transpose the two images. This is the simplest method to be able to move the characters from point A to point B on the map without having to reload everything over and over. Further, because everything is contained within a table, you can allow for a grid system on the browser side. The grid's color is pre-set by the GM and is set to a size by the GM's picking of the image size. This might be a bit confusing so let me re-iterate what I just said.
A. The map becomes a background image on the webpage.
B. All of the player icons are put into a table which is X-by-Y in size (to cover the map). The number of rows and columns is determined by taking the X & Y size of the image and dividing it by the X & Y size of the icons and then adding two on to each amount (so you have one additional table cell around the map).
C. When a player wants to move their icon, they click on a new table cell which causes the Javascript to do an "onClick" callback. All the callback does is to move the icon from its current position in the table to the new location. This change is returned to the main program/server as a callback either through AJAX's methodology, or by just making an offscreen DIV area where you can pump in the new information as a FORM and then do a form.submit() Javascript call.
Because the form isn't re-submitting itself each time, the map stays like it is (unless the GM loads a new scenario/map). The form which is submitted can return a simple one line command like "reload", or "continue", or "ack" even which the currently running Javascript program can interpret on what to do. It does this by making a simple setTimeout function which checks the DIV for a return value and acts accordingly when it receives it.
2. A slightly different methodology would be to have the main program cut the map up into the appropriate number of tiles and insert each tile into the appropriate table area as a background picture for that cell. Again, invisible (or transparent) GIF images can reside within each table's cell which is exchanged with a player's icon. Each image (even a player's icon) can have an onClick callback put onto it which allows the browser to detect where the player wants to move to and acts accordingly.
3. Last, but not least, is to load the map into a DIV area (so it is constrained) and use absolute positioning to set up where the icons show up on the map. Map's z-index would be zero (0), treasure could be one, items (like chairs and stuff) would be two, and players would be three (so they are always on top). Using absolute positioning would make the movement be exactly where the player wanted to go (unlike with the table above where everyone/thing would be placed into a given square on the grid) and, as with #1, and #2 above - a separate DIV area off the map is used to send/receive commands. Which are then interpreted and acted upon by the main program.
If the above is not clear let me know. :-)
Idea: (Actually it is a two prong idea)
1. Load in the background image and do not change it until the GM changes it. Make the icons for the players lay on top of the background image. This can be done by inserting a table which is size "X". Size "X" is determined by the GM beforehand. Make a single blank GIF file (so it is transparent). Insert the images into the appropriate table entry for their location on the map. When a player clicks on one of the other blank GIF squares, transpose the two images. This is the simplest method to be able to move the characters from point A to point B on the map without having to reload everything over and over. Further, because everything is contained within a table, you can allow for a grid system on the browser side. The grid's color is pre-set by the GM and is set to a size by the GM's picking of the image size. This might be a bit confusing so let me re-iterate what I just said.
A. The map becomes a background image on the webpage.
B. All of the player icons are put into a table which is X-by-Y in size (to cover the map). The number of rows and columns is determined by taking the X & Y size of the image and dividing it by the X & Y size of the icons and then adding two on to each amount (so you have one additional table cell around the map).
C. When a player wants to move their icon, they click on a new table cell which causes the Javascript to do an "onClick" callback. All the callback does is to move the icon from its current position in the table to the new location. This change is returned to the main program/server as a callback either through AJAX's methodology, or by just making an offscreen DIV area where you can pump in the new information as a FORM and then do a form.submit() Javascript call.
Because the form isn't re-submitting itself each time, the map stays like it is (unless the GM loads a new scenario/map). The form which is submitted can return a simple one line command like "reload", or "continue", or "ack" even which the currently running Javascript program can interpret on what to do. It does this by making a simple setTimeout function which checks the DIV for a return value and acts accordingly when it receives it.
2. A slightly different methodology would be to have the main program cut the map up into the appropriate number of tiles and insert each tile into the appropriate table area as a background picture for that cell. Again, invisible (or transparent) GIF images can reside within each table's cell which is exchanged with a player's icon. Each image (even a player's icon) can have an onClick callback put onto it which allows the browser to detect where the player wants to move to and acts accordingly.
3. Last, but not least, is to load the map into a DIV area (so it is constrained) and use absolute positioning to set up where the icons show up on the map. Map's z-index would be zero (0), treasure could be one, items (like chairs and stuff) would be two, and players would be three (so they are always on top). Using absolute positioning would make the movement be exactly where the player wanted to go (unlike with the table above where everyone/thing would be placed into a given square on the grid) and, as with #1, and #2 above - a separate DIV area off the map is used to send/receive commands. Which are then interpreted and acted upon by the main program.
If the above is not clear let me know. :-)