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.
how to make browser hex based interface
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.
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.
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.
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.
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 :)
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 :)
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
