I'm attempting to make an isometric hex-based map using HTML5 Canvas. I want it to be confined to a div in the center of the screen and be a viewport on a much bigger map, so the player can drag it around within that window and zoom in/out. I also want each hex to be clickable so later on I can do actions when the player clicks a given hex.
Can anyone point me to a good tutorial to get me started on something like that?
Looking for a good Canvas tutorial
- Jackolantern
- Posts: 10891
- Joined: Wed Jul 01, 2009 11:00 pm
Re: Looking for a good Canvas tutorial
Mozilla has a nice one here. Also, you can check out this site. That should be enough to get you started
Of course, Canvas isn't the answer to all browser-based game development. If you want to easily manage on-screen clicks through Javascript-like click events, you may want to go with a pre-Canvas DOM solution such as gameQuery.
Of course, Canvas isn't the answer to all browser-based game development. If you want to easily manage on-screen clicks through Javascript-like click events, you may want to go with a pre-Canvas DOM solution such as gameQuery.
The indelible lord of tl;dr
Re: Looking for a good Canvas tutorial
Thanks, Jack. I'd seen the html5canvastutorial site before - they have some nice stuff there.
I'm not familiar with gameQuery - is it easy to work with?
I'm not familiar with gameQuery - is it easy to work with?
- Jackolantern
- Posts: 10891
- Joined: Wed Jul 01, 2009 11:00 pm
Re: Looking for a good Canvas tutorial
It is in the style of jQuery (it is actually a jQuery plugin), so if you know jQuery, it will feel quite natural. It is a DOM-based game engine that started right before the big explosion of HTML5. So each item in the game will actually be a DOM-based item instead of the entire screen being one bitmap context, which is the way HTML5 canvas works. It can make certain game types easier to work with
The indelible lord of tl;dr