I am developing html5 game based on hexagonal grid.
After some investigation I have used :
MelonJS + Tiled + this tricky thing. Everything seems good in this combination, until I started to think about dynamic showing some hexagons, that my player will be able to go.
There are few ideas that comes to mind:
Calculate coordinates and draw on canvas skipping melonjs, but it's bad idea from architecture point.
Adding custom property for each hexagon texture object, but it's too much manual work.
Adding some facade for melonjs in order to work with it or maybe it's already done?
So my question is:
What's the best way to solve this problem in scope of those technologies or maybe should I use another tool?
Depending on how much content you have already developed, did you consider to use a Tiled daily build with support for hexagonal maps?
Of course, since melonJS doesn't support this yet you would either need to implement the hexagonal renderer yourself or try to get the support from melonJS developers to add it. I've opened an issue about this.
I may have misunderstood your question a little, though. If you are talking about an overlay on top of the map that shows the player where he can walk to from his current position, then the way to go would be to draw this yourself after melonJS has rendered the map. I can't help you with exactly how to do this because I don't have that much experience with melonJS.
Related
The main question is pretty simple... I'm making a rather large Organization Chart (or genealogy) and I'm wondering whether I should be using SVG or Canvas.
Some of the requirements might sway the choice:
Must be able to display between 1 to 50,000 nodes/people
Needs to pan and zoom much like a Google/Bing map.
Need to be able to click on a node and pop open a dialog with extra details on the person.
I was initially leaning towards SVG, but I heard somewhere that it would have performance problems when drawing a large number of items. Also, it seems Canvas has better support in older browsers.
Thanks everyone for your input. The following is what I have come up with after exploring some of the advice given.
SVG: This route was very tempting due to its vectorized nature and its integration into the DOM. Sadly the performance of rendering +100k nodes killed this route.
Canvas: Performance wise this seemed to be a winner. However, at this point I will need to explore how to add onClick/onHover functionality to each of the rendered nodes.
Leaflet: This too is a winner. It takes care of a lot of concerns like the map-like navigation, performance and mobile ready. Though it isn't a solution as to 'how' to draw the org chart. However, what is nice about it is that you can feed it image tiles or canvas. Which gives us some choice.
So in the end it is likely that I'll be using image titles to begin with and then migrating to canvas... while keeping my eye on performance advancements in SVG.
Here is an example of a Flood Map using D3.js and topojson.
http://bl.ocks.org/cappelaere/6472064
https://gist.github.com/cappelaere/6472064
It is really taxing D3. Simplification of the topojson at load time does seem to hang Firefox. We really need to get this working to support our disaster management work. It would be great to have adaptive simplification as we zoom in. Any help would be greatly appreciated.
Thanks,
Pat.
Pretty much your only choice for this is to have pre-simplified data sets that are loaded according to the zoom level. That is, after each zoom you would need to determine whether to load a new, higher resolution data set for the region that the user has zoomed into. If so, you would need to clear the existing elements and add the new ones.
This would be quite a bit of effort. At this point, you might as well have pre-rendered bitmap tiles (like in Google Maps for example) and use a library like Leaflet that does the heavy lifting for you. On top of this pre-rendered map, you could still use D3 for dynamic stuff.
I'm planning a website which will use huge schematics, that is, raster images that are not photos. If they were photos and I were interested on displaying them as so, I would use either zoomify, IIPImage or PanoJS. Although all of these solutions offer HTML5 support, they are not entirely satisfactory for my purposes, as they are optimized for JPEGs, use arcane JavaScript or have non-smooth transitions.
So, I was thinking that perhaps I could use leaflet with custom tiles. That is, instead of connecting the javascript to a map server, I could connect it to my own tile-provider with the schematics. My rationale is that leaflet provides smooth rendering, the used tile pieces seem to be png, and that I could even use markers and vector layers. But I came to a stumbling block:
What kind of tiles leaflet expects? Where is information about that? Would the map projection, or other geo-specific aspects that I'm not aware of, be a problem?
Thanks in advance for any help.
Found it!
http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
I'm about to jump into some simple game development with Javascript. I would like to one day transition to 3D development but for now am only going to be doing 2D "top down" objects.
I know that this isn't ideal but I feel like it will help me get familiar with the 3D "environment".
I am using Three.js as it appears to be very well developed and I like that it can do Canvas, WebGL and SVG. However, my very first problem I've come across is, I don't know how to "move" an object. Using just Canvas I can easily take an object I have rendered and modify it's .x or .y property to "move" it. However, for Three.js objects so far all I've found is object.rotation.x, etc. I can move the camera, but this doesn't work because I need objects to move individually.
So I guess what I'm looking for is any resources into Three.js for 2D development, or developing a 2D top-down game in a 3D environment.
The Getting Started article is pretty good.
LearningThree.js got a series on "let's make a 3D Game".
There is a nice searchable reference available too.
Note that the project moves super fast so the API might change
here and there, so keep an eye out on github and when you
update always read the change log to see if you need to update your code.
Gooduck!.
I'm looking for an library, to generate charts on client side.
I found a lot, by searching on web and stackoverflow, like here
https://stackoverflow.com/questions/2227421/good-javascript-library-for-drawing-charts-using-json
or this very good collection:
http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
There are so much alternatives, I'm a bit overwhelmed. Which one can use JSON data, which one is up to date, which one is easy to use (because I'm absolutely new on this topic), which one is robust, works on mobile phone (or not), which project is still alive, etc.
I need different chards, an line chart is mandatory. Also zoom in and zoom out is mandatory.
So I took a closer look on jqplot an flot.
Both providing zoom, but it looks like zooming is more an scaling. Which means: the granularity will not change by zoom in.
Because the graph will have a lot of data/points, i need to consolidate informations before sending them to the client. By zooming in, I need to rise the granularity, so the chart should be able to process new data for the zoomed area. (I hope I've made myself clear.)
Thanks for any kind of attention.
Raphael.js http://raphaeljs.com/
HTML5 Graph http://chrisvalleskey.com/html5-graph/
Google Visualization API: http://code.google.com/apis/chart/interactive/docs/gallery.html
Flot: http://code.google.com/p/flot/
Unfortunately there is no helpful answer, so I like to write down, what i learned the last days for this question.
jqPlot and frot are supporting zooming at an basic level. That means, it's more an scaling.
By looking at the google groups for qjPlot and flot, the support for jqPlot is better (lot's of unanswered questions at the flot group).
jqPlot has an better axis-label-handling by zooming.
jqPlot also provides hooks. By using those hooks, it's seems to be possible to combine zooming and loading new JSON data in order to get an better granularity of the zoomed view.