Elements the Game Forum - Free Online Fantasy Card Game
Other Topics => World of Elements => Forum Archive => WoE Archive => Topic started by: Scaredgirl on July 07, 2010, 03:10:49 pm
-
Coding:
How to make the map?
We have several options here. I will open the discussion by listing three.
Option 1 - html + tables (mainly for beta)
We make an image of the map (resources, hexagons, everything) and put it as a background image of a regular web page. We then insert a huge, invisible table on top of it. Table it set up so that the rows and columns align with the background image. When we then add things like player names on the table, it looks as it the names are on the map itself. In other words there are two different layers, one for map and the other for player data.
Pros:
+ super fast to set up
+ fast loading
+ browser safe
Cons:
- kind of ugly
- updating might be time-consuming
Option 2 - css
Using css, we make hexagon shaped pieces which we then use to build the map with. Here's an example of that technique: http://www.cssplay.co.uk/menus/hexagon.html
Here's another one using jQuery as a Flash substitute: http://ncmarinescience.com/
Pros:
+ looks more professional than option 1
+ fast loading
+ browser safe
Cons:
- graphics cannot go over hexagon borders (look at mountains in the current map)
Option 3 - Flash
We do the whole thing with Flash (same technique Elements uses).
Pros:
+ most flexible (we can pretty much do whatever we want)
+ most professional looking
+ most potential
Cons:
- long loading time
- takes a lot of time to code
There are other options as well of course.
Post your ideas here.
-
I would say flash, especially since this is in the beta stages, we dont want to start with something, then decide to expand, only to realize we reached the limitations of css, and cant do what we wanted without reworking the entire thing in a different language.
-
I agree, Flash would be the best choice in the long run, but I think we should use html/tables for the beta and testing, to make sure the whole system working before making a map on Flash.
-
I agree, Flash would be the best choice in the long run, but I think we should use html/tables for the beta and testing, to make sure the whole system working before making a map on Flash.
I agree with this, although as I stated in chat I really don't see why flash would take so long (I'm not a coder, so I don't have any actual knowledge) because SG has said (I don't have the actual quote but it went something like this) "If it were a simple drag-and-drop program, that would be easy. I could do it in a matter of hours".
I'm pretty sure that's all it would have to be, since, after all, all it has to do is show who is where. Movers would drag people from place to place, so basically it just has to be the map as a backround "layer" and matching hexagonal tiles superimposed over top of it, with the players represented as probably elemental marks (Or Chess pieces, whatever) on a with their names somewhere on the hexagon, that could be picked up and moved through flash.
Anyways, that's how I see it.
-
I agree, Flash would be the best choice in the long run, but I think we should use html/tables for the beta and testing, to make sure the whole system working before making a map on Flash.
I agree with this, although as I stated in chat I really don't see why flash would take so long (I'm not a coder, so I don't have any actual knowledge) because SG has said (I don't have the actual quote but it went something like this) "If it were a simple drag-and-drop program, that would be easy. I could do it in a matter of hours".
I'm pretty sure that's all it would have to be, since, after all, all it has to do is show who is where. Movers would drag people from place to place, so basically it just has to be the map as a backround "layer" and matching hexagonal tiles superimposed over top of it, with the players represented as probably elemental marks (Or Chess pieces, whatever) on a with their names somewhere on the hexagon, that could be picked up and moved through flash.
Anyways, that's how I see it.
Like I said earlier, it's going to be much more complex than a simple drag-and-drop.
We have:
- territories belonging to a specific element (owner keeps changing)
- quest (constantly changing)
- player-built houses/castles
- "living map"
etc.
-
Hmm, well, I'm okay with flash, I could probably get all of that to work =/
-
Hmm, well, I'm okay with flash, I could probably get all of that to work =/
Cool. It's a pretty big project so I hope you know what your are getting yourself into. :)
Others have voiced interest as well. Lets first see what kind of talent we have here, and then make the decision on how we are going to do this.
-
Yea. Right now Adobe is being pissy because I entered my product code incorrectly, so I'm trying to get the license code back from my school. It won't open at current =(
-
Yea. Right now Adobe is being pissy because I entered my product code incorrectly, so I'm trying to get the license code back from my school. It won't open at current =(
Well, I do have my code for CS4. <.< >.>
-
Gl1tch, maybe we could team up? I use Cs4, so whatever you use should be compatible. And Flash ftw! :)
-
Yea. Right now Adobe is being pissy because I entered my product code incorrectly, so I'm trying to get the license code back from my school. It won't open at current =(
Well, I do have my code for CS4. <.< >.>
There are licensing laws. If you give it to me, Adobe will ban the code and then neither of us will be able to use it.
-
In that event, I say a collaboration? :)
-
Perhaps it's too late to make suggestions, but I find that frequently for map/gameboard images where I need to move tokens etc around a powerpoint file often works well.
You can set the map as the background, then just click & drag to move icons for players etc.
Certainly won't be as polished as a flash program though. Maybe for a beta?
-
So... what was the verdict? Who, if anybody, is making the map? It sounds like the entire project is on hold...
-
Perhaps it's too late to make suggestions, but I find that frequently for map/gameboard images where I need to move tokens etc around a powerpoint file often works well.
You can set the map as the background, then just click & drag to move icons for players etc.
Certainly won't be as polished as a flash program though. Maybe for a beta?
Powerpoint would be too clumsy and it cannot be used with a browser.
So... what was the verdict? Who, if anybody, is making the map? It sounds like the entire project is on hold...
I think the map I made looks good enough for beta. Million dollar question still remains: what coding language should we use?
The more I think about this, the less I think we should use Flash. Main problem is that the file would be pretty big, and every time I want to check some small detail, I need to load the whole thing. A regular web page would be much better imo. Then again Flash would be more versatile which is always a plus. I don't know..
-
Even if it just for the beta, use the simplest option available. Let us at least generate interest. If it all works out and everybody enjoys it, then we can expand into making it into a flash file, if needed.
-
I vote for html. My poor laptop couldn't possibly handle a map in Flash. It already takes half a minute to load my decks. I don't care one bit how primitive it might look.
-
I put together a google docs file using Bloodshadow's map and a couple element icons as tokens to move around the map to show what I meant.
https://docs.google.com/present/edit?id=0AUldniqIQatQZGN6bnZqcjJfNGZyenIybmNx&hl=en&authkey=CJSCj4AI
For an actual beta we could edit the permissions so only moderators can move the pieces.
If you still think it's too clumsy I understand.
-
I put together a google docs file using Bloodshadow's map and a couple element icons as tokens to move around the map to show what I meant.
https://docs.google.com/present/edit?id=0AUldniqIQatQZGN6bnZqcjJfNGZyenIybmNx&hl=en&authkey=CJSCj4AI
For an actual beta we could edit the permissions so only moderators can move the pieces.
If you still think it's too clumsy I understand.
It's way too basic in its current form.
I made a map here: http://elementscommunity.org/forum/index.php/topic,9052.0.html
As you can see, the difference is that my version has numbered hexagons, terrains and cities. We need something like that to make the event work.
-
I just grabbed the first map image I found because I wanted to see if the technique was workable before I spent too long fleshing it out.
I've changed the background image to your map and altered the settings so other people should be able to edit the file as well.
Let me know how it's working.
https://docs.google.com/present/edit?id=0AUldniqIQatQZGN6bnZqcjJfNGZyenIybmNx&hl=en&authkey=CJSCj4AI
-
I have to say, I think Ratcharmers idea is really nice, we could use it really well for the beta testing, however, for the real games, I am afraid the map might be to small this way to fit a lot of players on one hexagon.
-
Yeah, it's primarily meant for the beta. About the only way to "enlarge" it seems to be to add more pages with some sort of a "this way to page 4" going on. So yes, it'd be very awkward with a big group.
The main thing I think this would be useful for is a test run to generate interest.
That being said, how do we determine which bauble is which player? I was originally thinking I'd add text with the player names to the baubles, but that might not fit well in the map (it'd be pretty cramped and hard to read). Maybe we could add numbers to each bauble (ala poison counters) and then just have a table with :entropy 1 = Zeru :fire 1 = Antagon etc?
-
Well, we could have multiple maps running at the same time if we had enough volunteers.
-
I love ratcharmer's idea: so freakin' easy to use. We could make the icons smaller and put numbers on them to represent players, too.
-
I love ratcharmer's idea: so freakin' easy to use. We could make the icons smaller and put numbers on them to represent players, too.
Yeah, or letters, like :aether A, :aether B, and so on.
-
You will have to download it because it is an .exe, but it's worth looking at and i swear there is nothing bad on it.
http://rapidshare.com/files/428522774/WoE_BETA.exe
I made it using game maker.
EDIT: okay so my only choice was rapidshare. It sucks to wait that long for it, but just bear with it.
-
@timerclock: the link seems to be down, or at least it isn't working for me
-
@timerclock: the link seems to be down, or at least it isn't working for me
ummm okay i'll try and fix it. I'll edit my post when it's fixed
Okay I fixed it but its on rapidshare.
-
I've added a few more icons to the map, including :aether I, :aether II, and :aether III. Let me know if the tally marks are readable.
If anyone knows a better way to add text etc over top of the icons let me know. All the ways I've tried so far have been really awkward. Or you can just make your own and add them to the map if you prefer.
https://docs.google.com/present/edit?id=0AUldniqIQatQZGN6bnZqcjJfNGZyenIybmNx&hl=en&authkey=CJSCj4AI
@timerclock: how do I move pieces etc?
-
I've added a few more icons to the map, including :aether I, :aether II, and :aether III. Let me know if the tally marks re readable.
If anyone knows a better way to add text etc over top of the icons let me know. All the ways I've tried so far have been really awkward. Or you can just make your own and add them to the map if you prefer.
https://docs.google.com/present/edit?id=0AUldniqIQatQZGN6bnZqcjJfNGZyenIybmNx&hl=en&authkey=CJSCj4AI
@timerclock: how do I move pieces etc?
use the number pad
8=up
4=left
6=right
2=down
and you can guess the rest, 5 & 0 have no purpose
-
It seems to me that the current google docs map is closer to being ready to use than the .exe file, but the .exe has more promise for a long-term solution. (i.e. it should be able to handle larger maps etc.)
I propose that we use the .ppt for early testing etc then switch to the .exe later. Any objections?
Speaking of the .ppt file, it's actually almost ready to use. I need to come up with some workable player icons but that's really all that's left before testing (unless there's something else I've missed).
Would anyone be interested in a limited scope pvp-thing to work out any kinks in using the map? I'm not a pvp organizer so I can't do rewards or anything, but it should be fun and it'll help with getting this project going . . .
-
yea i think that the .exe will be much more flexible and durable for the long term. I can keep working on it in my spare time, but unless we get city maps and sprites out faster, i won't be able to do much of anything.
-
I believe SG wants map to be viewable by browser, so I would guess that all versions that require download of a file (ppt, exe) are not an option. Also, who downloads .exe from untrusted source?
-
I believe SG wants map to be viewable by browser, so I would guess that all versions that require download of a file (ppt, exe) are not an option. Also, who downloads .exe from untrusted source?
oh well that could be a problem then. I'll make it anyway for self-satisfaction, and my problem with not finishing something I already started plays a part too :). I'll send it to SG when it's all complete and purty, if she likes it: good for me, if she doesn't then i can play it :D. And, are you saying you don't trust me? I swear i'm not one of those trolls who puts viruses in their .exe's. My stuff is always legit lol.
-
And, are you saying you don't trust me? I swear i'm not one of those trolls who puts viruses in their .exe's. My stuff is always legit lol.
No offense, but you are just another anonymous dude on the internet that just weeks ago became a part of this community. I'm speaking only for myself, but I wouldnt be comfortable downloading program file from anyone on any forum.
-
And, are you saying you don't trust me? I swear i'm not one of those trolls who puts viruses in their .exe's. My stuff is always legit lol.
No offense, but you are just another anonymous dude on the internet that just weeks ago became a part of this community. I'm speaking only for myself, but I wouldnt be comfortable downloading program file from anyone on any forum.
lol I would probably do the same in your position too.
-
And, are you saying you don't trust me? I swear i'm not one of those trolls who puts viruses in their .exe's. My stuff is always legit lol.
No offense, but you are just another anonymous dude on the internet that just weeks ago became a part of this community. I'm speaking only for myself, but I wouldnt be comfortable downloading program file from anyone on any forum.
Well, you can always scan it before opening it...
-
I believe SG wants map to be viewable by browser, so I would guess that all versions that require download of a file (ppt, exe) are not an option. Also, who downloads .exe from untrusted source?
Click on this link:
https://docs.google.com/present/edit?id=0AUldniqIQatQZGN6bnZqcjJfNGZyenIybmNx&authkey=CJSCj4AI&hl=en
It takes you to the google docs .ppt file, viewable in your browser, no downloading needed. You can even move icons around etc.
If it helps any I've downloaded, scanned & used timerclock's .exe file. It's exactly what he says it is. I was just figuring that a way to embed the file was one of the things that still needed solved.
*edit* P.S. I'm going to be playing around with various icons a lot. Let me know if you see any that look workable.
-
And, are you saying you don't trust me? I swear i'm not one of those trolls who puts viruses in their .exe's. My stuff is always legit lol.
No offense, but you are just another anonymous dude on the internet that just weeks ago became a part of this community. I'm speaking only for myself, but I wouldnt be comfortable downloading program file from anyone on any forum.
What about forums that are dedicated to games and are official that provide mods made by community member? Or do you just not go on them websites?
-
I see a fourth option, using SVG. It's a vector graphic format (like Flash) that use tags like HTML and that can be styled with basic (but special) CSS, and it work with most browsers (as always, not with IE 8 and past, but it should work with the future IE 9). With the HTML 5 buzz and general browsers standardization, it could prove to be a robust and nice alternative to Flash. And, being XML based, the SVG could be modified easily, and even generated. I tested SVG a bit some times ago, and with minimum knowledge of the SVG language, I made this sample : http://helltgivre.free.fr/isoplus/isoplussvg.php (don't work with IE unless you install the Adobe SVG Viewer).
An other option is to dynamically generate a picture of the map with a programming language, and maybe add interactivity with HTML image map.
Speaking of coding, most, if not all, the round management, and all stuff happening in WoE could be tracked automatically with a proper interface. But that's an other topic...
-
I vote CSS ease of update and ease of load are a priority above all else.
-
ummm okay so it looks like we have plenty of options to choose from, but can someone tell me exactly what we want this map to do?
Also, rather than names, just have the players use their avatar as a marker on the map. It's way easier that way.
-
Also, rather than names, just have the players use their avatar as a marker on the map. It's way easier that way.
A lot of people have the same avatar though . . .
-
Also, rather than names, just have the players use their avatar as a marker on the map. It's way easier that way.
A lot of people have the same avatar though . . .
then they can make an avatar, I guess?
-
I say we use Flash. While I'm not a hardcore coder, based on my experience with Flash I think we could make our map very customizable, interactive and easier to maintain.
I will try to make a simple sample map with data and player population per location. Will post it very soon.
-
Since Planplan is already picked for this job, maybe he can give us the answer here on which language is he planning to use. I'm sure people could then step in and help, if help is needed in any part of the coding (writing boring functions, organizing database and whatnot).
-
Since Planplan is already picked for this job, maybe he can give us the answer here on which language is he planning to use. I'm sure people could then step in and help, if help is needed in any part of the coding (writing boring functions, organizing database and whatnot).
I completely forgot this. Well anyway, just to reiterate my case for flash here's the link for the sample.
http://samplemap.hostwebs.com/ (http://samplemap.hostwebs.com/)
Try clicking on hex #1, 2, 3, 4. (I temporarily stopped after reading the above post). The data on the left (lore/info/players) changes as you click a location. Data is dynamically updated through xml (notepad-editable) so modifying/updating player lists and location information and even images is easy (copy-paste-edit). New features can be easily implemented and you don't even need the coder around to do it. Also, this flash swf file is currently only 60KB.
-
i'm really liking the SVG option as exampled by Planplan
-
I see a fourth option, using SVG. It's a vector graphic format (like Flash) that use tags like HTML and that can be styled with basic (but special) CSS, and it work with most browsers (as always, not with IE 8 and past, but it should work with the future IE 9). With the HTML 5 buzz and general browsers standardization, it could prove to be a robust and nice alternative to Flash. And, being XML based, the SVG could be modified easily, and even generated. I tested SVG a bit some times ago, and with minimum knowledge of the SVG language, I made this sample : http://helltgivre.free.fr/isoplus/isoplussvg.php (don't work with IE unless you install the Adobe SVG Viewer).
An other option is to dynamically generate a picture of the map with a programming language, and maybe add interactivity with HTML image map.
Speaking of coding, most, if not all, the round management, and all stuff happening in WoE could be tracked automatically with a proper interface. But that's an other topic...
Pretty cool stuff. That's definitely one very nice option. I have almost zero experience with SVG myself, so I guess I need to look into that a bit more.
Since Planplan is already picked for this job, maybe he can give us the answer here on which language is he planning to use. I'm sure people could then step in and help, if help is needed in any part of the coding (writing boring functions, organizing database and whatnot).
I completely forgot this. Well anyway, just to reiterate my case for flash here's the link for the sample.
http://samplemap.hostwebs.com/ (http://samplemap.hostwebs.com/)
Try clicking on hex #1, 2, 3, 4. (I temporarily stopped after reading the above post). The data on the left (lore/info/players) changes as you click a location. Data is dynamically updated through xml (notepad-editable) so modifying/updating player lists and location information and even images is easy (copy-paste-edit). New features can be easily implemented and you don't even need the coder around to do it. Also, this flash swf file is currently only 60KB.
Looks pretty good. Having a data window there on the left might work.
But from a usability standpoint, there's a major problem.
Lets say I want to get all the information from one hex. That would require ridiculous amounts of clicking. Instead of the accordion navigation, why not just have all the information in one window? And if there's not enough space, you could have all the data in shorter from, and the ability to click for more information. For example instead of listing all the players, you only list how many there are. And if you click the number, it shows who they are.
-
Looks pretty good. Having a data window there on the left might work.
But from a usability standpoint, there's a major problem.
Lets say I want to get all the information from one hex. That would require ridiculous amounts of clicking. Instead of the accordion navigation, why not just have all the information in one window? And if there's not enough space, you could have all the data in shorter from, and the ability to click for more information. For example instead of listing all the players, you only list how many there are. And if you click the number, it shows who they are.
Yeah, you're right it does take a lot of clicks to see everything. One reason I used the accordion was I thought descriptive text per location would be long and to minimize the size of the swf file. I'll get rid of the accordion and see what i can fit in there. I guess a clickable image that links to a forum post would do for the lore so there will space left for the info and player trees. I will update this when i make progress.
-
Since Planplan is already picked for this job, maybe he can give us the answer here on which language is he planning to use. I'm sure people could then step in and help, if help is needed in any part of the coding (writing boring functions, organizing database and whatnot).
I completely forgot this. Well anyway, just to reiterate my case for flash here's the link for the sample.
http://samplemap.hostwebs.com/ (http://samplemap.hostwebs.com/)
Try clicking on hex #1, 2, 3, 4. (I temporarily stopped after reading the above post). The data on the left (lore/info/players) changes as you click a location. Data is dynamically updated through xml (notepad-editable) so modifying/updating player lists and location information and even images is easy (copy-paste-edit). New features can be easily implemented and you don't even need the coder around to do it. Also, this flash swf file is currently only 60KB.
This looks incredibly useful, even in a bare-bones state. I can immediately think of a million features I'd like to add, but as it is it looks fantastic.
-
Just finished a small naive test with SVG generation of an hexagonal map : http://helltgivre.free.fr/elements/hexmap/hexmap.php
It's not optimized at all, but work great. For those who are interested, here also the (small) CSS : http://helltgivre.free.fr/elements/hexmap/svg.css
Look like Google made a small Javascript + Flash tool to allow SVG to fallback to Flash if not supported.
Since Planplan is already picked for this job, maybe he can give us the answer here on which language is he planning to use. I'm sure people could then step in and help, if help is needed in any part of the coding (writing boring functions, organizing database and whatnot).
I'm not the only one choosing. We have different options, each with pros and cons. I tend to prefer technology that don't rely on paid software (like Flash), but sometimes they could be the best choice.
Also, I don't mind working with someone else.
I completely forgot this. Well anyway, just to reiterate my case for flash here's the link for the sample.
http://samplemap.hostwebs.com/ (http://samplemap.hostwebs.com/)
Try clicking on hex #1, 2, 3, 4. (I temporarily stopped after reading the above post). The data on the left (lore/info/players) changes as you click a location. Data is dynamically updated through xml (notepad-editable) so modifying/updating player lists and location information and even images is easy (copy-paste-edit). New features can be easily implemented and you don't even need the coder around to do it. Also, this flash swf file is currently only 60KB.
Pretty good work, maybe you should take a look at my card generator codes, you might give me precious advice ! :P
Love the XML stuff, but maybe it could prove a bit painful at the long run to use a raw file like this. When movers need to update positions, they can't update it at the same time. I think having a user interface to update a database, and, when the round finish, why not generate the new XML from the database.
Also, all map data are public ? Or some public and some others private/tied to account or element ?
-
I would quite like some of the map data to be private in some way. If there's not an elegant solution to this, I don't see why we can't just have the private data be added to each user's character sheet or the Element's private forums rather than the map itself.
-
Just finished a small naive test with SVG generation of an hexagonal map : http://helltgivre.free.fr/elements/hexmap/hexmap.php
It's not optimized at all, but work great. For those who are interested, here also the (small) CSS : http://helltgivre.free.fr/elements/hexmap/svg.css
That map looks boring. I mean it has only one terrain, snow, and all hexes are empty. I think we need to make it more exciting.
Seriously though.. I can see the huge potential. Simply put, it's perfect. I was hoping to have some kind of hover effect because it's the fastest way to get the information you need. The less clicking, the better.
To get the project moving forward, I am now officially making SVG our map technology of choice. "Coding Wars" are now over. I would like to thank everyone who participated by posting suggestions and their custom made map codes. Unfortunately we can only pick one. Hopefully you guys didn't waste too much time, and if you did, I hope you at least had fun doing so (or learned something useful in the process).
The map project will now be moved to private forums to avoid ruining the surprise. It will still be visible to all WoE Organizers, but others will have to wait for beta.
Planplan will be in charge of the technical production of the map. He may do it solo, or with a team, whatever works best. So Planplan, just let me know how you want to do it, and how non-coders can maybe help you with the process.
And even if you don't make it to the map coding team, don't worry, there will probably be other coding jobs available very soon.
Now lets form a line and slowly walk to the private forums, letting this topic die in peace. Thank you.
-
@Planplan I would love to see those deck generator codes myself. :D
@All The sample was really just barebones and was just to show that Flash can maintain its ease of customization without making the swf file too large. I was planning to make the data come out when you hover instead of clicking on it and of course some animation to go with it. As Planplan pointed out, XML generated from a database would surely be the best option to use for data in the final design. Since it's already decided, I'm scrapping the flash idea and will wait anxiously for the completed svg map. And we all know that with Planplan making it, the final map is sure to be epic :)
blarg: