Jump to content
  • Advertisement
Sign in to follow this  
hotsaucebg3

HTML5 Tiled Map - drag & click

This topic is 369 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, what I need to achieve is very simple HTML5(and Jquery)  draggable tiled game map with players on it(for my mmorts), like the ones below. I'm not asking for someone to make it for me, just need some directions where to start and what to use(since my game has database should I use it for the map too?). Also I need to click on players's castles, but I think in canvas this is not possible.

I want the map to be big, about 25000x25000px, but rendering that big image all at once would not be the way, obviously.

EDIT: Can someone move this topic to beginners section, i think posted it in wrong place.

Call-of-Gods-Wild-Map.jpg

7Vzxq.jpg

Edited by hotsaucebg3

Share this post


Link to post
Share on other sites
Advertisement
On 7/14/2017 at 11:23 PM, hotsaucebg3 said:

Also I need to click on players's castles, but I think in canvas this is not possible.

Why would it not be possible?

As long as you can get some kind of click event and a mouse position clicking something in a game is basically possible in any medium.

Share this post


Link to post
Share on other sites

If you dont want to use a external editor, you can simply write your own.

In Javascript this is a piece of cake, especially with HTML5 and Canvas.

 

- Just define a tilemap array, a tilesize and a way to store mouse position and button states.

- Add a event listener for mousemove, mousedown, mouseup and convert the client coordinates into screen coordinates and store the button states respectively. (You need to take the canvas scale into account!):

var mouseX = e.clientX * (canvas.width / canvas.offsetWidth);
var mouseY = e.clientY * (canvas.height / canvas.offsetHeight);

- In your render loop, you convert the mouse coordinates into world coordinates and calculate the tile position for the current mouse position (Its a simple divide by the tile size) and draw rectangle by the tile position multiplied by the tile size (You may need to take camera translation and scale into account as well)

- At this point you have all tools you need to make your own tilemap editor.

 

You need some reference, here is one:

http://root.xenorate.com/final/jsstuff/platformer/demos/realcollisions.html

Edited by Finalspace

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!