Jump to content
  • Advertisement
Sign in to follow this  
firekiller

how to make browser hex based interface

This topic is 2980 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

hello,

I have been looking for a tutorial to make a browser based hex-tile interface, i want it to be sort of like the map screen in travian where you click one of the tiles and it brings up a new page with data about that particular tile.

When the map is loaded it will pull data from the database that tells the browser what image to load for each tile and the link that the browser needs to go to when the tile is clicked.

Is this as simple as doing an image map with absolute positioning in CSS with layers? I have done tests with image maps and have been sucessfull but not sure how it will work across different browsers and screen sizes.

I am relativly new with this and am willing to put in the time to learn thing but need to know where to start.

Share this post


Link to post
Share on other sites
Advertisement
Took a quick look at travian (had never seen it before, and wanted to have a base knowledge of what you were talking about).

Me, I'd go with position:absolute and left and top styles on <img> tags, personally.

The multi-browser thing is always a sticking point.

That's why I have IE, FF, Safari, Chrome, and Opera all installed on my machine.

I also write my javascript in a dialect understood by all of the above browsers.

Share this post


Link to post
Share on other sites
I am currently making something similar, i just got my hex map to be almost perfect. I use html5 canvas and a hex picture.

For the database part, you can stick an array in a variable in sql. or whatever. So thats how i plan on storing my map data.

To do that click action part, you could probably use javascript, i might do a 'hover over the tile' and do a small description of that specific tile. I haven't gotten that far yet, still working on the map, making it randomly generate different terrain.

Share this post


Link to post
Share on other sites
You're welcome to take a look at the jQuery plugin I put together for making hex maps. Basically it uses three layers of nested divs. On my latest project I'm using canvas, but it's not supported on all browsers yet. I also have an A* pathfinding implementation to go along with the plugin. If you don't want to use jQuery I imagine you can pull out most of the key ideas, but jQuery or another library certainly simplifies dealing with cross-browser differences. The api for the plugin is documented in the comments at the top.

http://www.musehill.com/jQuery.hexMap.js
http://www.musehill.com/aStarHex.js

I hope that's helpful.

--Tom

PS My javascript has improved a lot in the last year so please be kind to my coding abilities :)

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!