Tiled Map - drag & click

Started by
3 comments, last by Finalspace 6 years, 9 months ago

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

Advertisement

This is a very decent tilemap editor:

http://www.mapeditor.org/

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.

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

This topic is closed to new replies.

Advertisement