Carry over tile map to a website

Questions
1

I am working on a map in Tiled Map Editor that I want to use as the basis for a web application / website. On the website, there will be a interactive map with the same basic structure as the tiled map.

If possible, the website will be created using HTML, CSS and JavaScript. I imagine a good way to start would be to export the map as a JavaScript file and then find a way to incorporate this into my website?

The most important information I need to carry over is probably the position and class of each individual tile. I will also need to recreate the isometric perspective from the TMX file.

I’m a noob, but somewhat familiar with JavaScript :slight_smile:

2

I’d suggest you look at Phaser, which has built-in support for rendering Tiled maps in a browser (unless you’re looking to implement more of this yourself). There are many other options as well, check out the Libraries and Frameworks page in the manual for a list.

Just to answer this, no, I don’t think exporting the map as a .js file is currently a good way to go. This was a bit of a hacky solution to allow including a map in an HTML file using a regular script tag and avoid the need for a manual HTTP request. I’d suggest to pick an engine and have a look at the recommended way of shipping Tiled maps for that engine.

3

Thank you for the reply!

To clarify, my website is not a game, even though it will contain some level of interactivity. It’s better to think of it as a normal website that is structured like a tile map.

It’s important that the website is as light-weight as possible. The code needs to be simple enough that it can run directly in the browser without the help of additional plugins/resources. Loading times is a big no-no. I need to have complete control over the code so that I can change it over time.

Ideally, the website shouldn’t contain any bit of code or functionality that isn’t strictly needed (tailor made) for the website.

With this in mind, do you still believe Phaser is a good choice?

The bulk of the website will be something like:

  • A grid with isometric perspective and x number of tiles
  • Tiles, and other types of data, that is loaded into the grid
  • Some level of point-and-click based interactivity, to allow the user to extract and possibly add data to the grid

I don’t want to rely too heavily on third party resources if it means giving up control or adding extra stuff that I don’t need. But maybe Phaser is just a great tool to help me get where I want?

From the Phaser website: “The only browser requirement is the support of the canvas tag.”

Is this standard in modern web browsers?

4

Yes, this tag is now over 15 years old and supported by all browsers. (I just looked this up, and it really surprised me… HTML5 is the new thing, right? Right!? :sob: )

But I can’t tell you whether Phaser is light-weight enough for your use-case. There are a few alternatives linked in the manual, but I don’t know which one is the leanest. You’d just have to give it a try.

To avoid JavaScript you could generate static HTML to display your map, but since you mentioned interactivity I doubt this is a good option. I’m also not sure whether that’s actually going to be more light-weight, since by rendering the tiles with JavaScript (especially through an efficient renderer like included with Phaser), you avoid the overhead of HTML elements.

5

The interactivity is on the level of a website where you can click around and type messages and use search tools etc.

I think I will start by trying to build the website on my own with HTML, CSS and JavaScript, just to get into the process and see how far I can get. It will be a good learning experience. If the result is poor, I will consider using external resources.

Since your last reply, I have tried a couple of different approaches for building the map:

  • HTML div elements
  • Drawing the map with canvas
  • PNG image

After weighing these options for a bit, I’m actually leaning towards using a PNG background with some added JavaScript and perhaps canvas on top. It seems that PNG is a lot more optimized than canvas when it comes to image quality and file size.

6

In Tiled, you can have a map with a large number of high-resolution tiles and the editor runs perfectly smooth and you can zoom in and out with no lag whatsoever.

For example, I’m currently looking at a map which consists of 403x488 = 196 664 tiles with a resolution per tile of 128*64 pixels. It takes up about 4 MB on the hard drive and doesn’t cause any lag in the editor.

Would it be possible to achieve the same level of performance in a browser, with an equal number of tiles and the same resolution? Is it just a matter of how you write the code?

I was hoping to be able to achieve something similar in the browser. That’s why I tried to render the tiles individually with HTML div elements or canvas. But so far the result hasn’t met my expectation.

7

Some tips from having done this before, back before WebGL and HTML5 game engines were a thing:

60fps+ is doable, even on mobile, even without WebGL.

Use canvas. Anything else will often cause the browser to try to recalculate flow, which is very expensive. Rendering to canvas is comparatively cheap.

Store the layers (or the whole map, if that works) as images in memory. Rendering individual tiles to canvas adds up and ends up slow, rendering part of an image is cheap. My game had parallax so every layer had to be a separate layer. I rendered the tiles of each layer to an interim canvas at load time, stored the contents of that canvas in memory as an image, and rendered from it as needed. You can load images directly if you wish, though a tileset and map data is probably more compact, and the extra pre-rendering work you need to do at loadtime is probably faster than loading a larger image file from the server.

When rendering the layer images, only render the part that actually shows up in the viewport. Overdraw is expensive, don’t draw what isn’t seen. It’s cheaper to calculate what you do need than to render what you don’t need.
Similarly, when drawing any dynamic entities, don’t draw any that are entirely off-screen.

If you need very large maps, storing the entire layer may run you out of memory. Plus, canvas can only store images up to certain sizes, and the limitations are lower on mobile. If you run into this issue, split your map into overlapping sections (the overlap should be at least enough to fill the screen), and dynamically render the next segment as needed, and dump the old one. You can probably use WebWorkers to do this in the background. I haven’t needed to do it myself so I can’t help with implementation details. Overlapping sections ensure that you only ever need to store/render one at a time.

You can also improve performance significantly by reducing how much you draw, i.e. by reducing your viewport size. Pixel art is great for this, as you can render the game small, and then upscale it to almost fill the screen with CSS and the chunky pixels can still look good. That doesn’t work so well with non-pixel art, as it just looks blurry or blocky. Upscaling with CSS does have a performance penalty compared to rendering small, but it’s much less than drawing all those extra pixels yourself.

8

Thank you eishiya for some extremely helpful advice! Sorry for the late reply.

After your last post, that same weekend, I went back to canvas and realized where I had gone wrong and what I should be doing instead. I am now using your post as my guiding principles for working with canvas.

1 Like