Interactive Map in Löve

[Kroatenkeiler]

Hello (Löve) World,

an old dog wants to learn new tricks - that´s why I decided to learn coding with Lua / Löve. I have completed an udemy course on coding with Löve, coded some simple "games" and think that I somewhat grasp the main concepts of Lua / Löve.

That being said, I am trying to create an interactive map of europe in Löve that is to be published on a Website. Essentially the Map should be treated as a GUI Interface. where the map is grey and countries are colored when the mouse hovers and info boxes with text and picture appear then clicked on a country.

For better understanding I have created some Slides outlining my core idea and planned Workflow.

From my current understanding this could be archived with STI (for Tiled) and Slab (for the GUI Part).

After a few days of trial and error (emphasis on error) I feel it is time to reach out for some guidance and hope that I am posting this to the right part of the forum.

My first steps were to crate the map in Tiled, put each country in a separate Tile layer, add an object layer to each country´s border (to have a reference for collision when the mouse hovers over it).

Since I do not have any prior programming experience, I would appreciate some tips and links to resources where I can learn the necessary skills to realize this idea.

Thank you and keep on Löving

[togFox]

You've set yourself a challenge, which is great.

As a start, I'd be looking up mouse position (for hover) and button release (for click).

There are libraries, as you know, for tiles.

Because you have a grid, understanding which tile is hovered or clicked is a straight forward x/y formula.

You'll then have a hover event, click event and know the active tile so you can make magic happen.

[grump]

I wouldn't use a tile map. The blocky map doesn't seem too big and it's static, so you could just put it in an image. Think of the image as your tile map and cut out the middleman. 1 pixel = 1 tile.
To detect which country is at the mouse cursor, use a second image of the map in which you assigned a unique color to each country. Then use some math and ImageData:getPixel to get the color at the cursor position, which you can then use to look up the country. You don't need to define and detect borders at all.

If you want this to run in the browser anyway, why not make it directly in JS? That'd be the better choice for this project, for many reasons. HTML5 + JS already have everything you need for this, while you'll scramble to implement many basic things with LÖVE.

[Kroatenkeiler]

Thank you two for responding with your ideas.

@ togFox Currently I am looking into Slab as a 'GUI Handling' extension. I am still struggling with understanding most of the descriptions on Github but hope to understand them with trying more.

@ grump Very Interesting Idea - I mainly stuck with Tiled because I have used it for a small platformer project in the past and generally understand the workflow. To be honest I would not know how to start with your approach in LÖVE. I can manage to import an .png, scale it, poll the mouse position but apart form that I have no idea how to assign values to an image, and overlay it with another one. Do you by any chance have some pointers (or similar projects) I can use as a resource for learning?

Learning JS and doing it in there would be my 'last resort' option since I want to use this challenge to learn about GUI User interaction with Lua / Löve for future game projects I have in my head but can´t bring to running code so far

[togFox]

A word of caution - SLAB is designed to take away a lot of control around positioning. It's designed to create controls and line them up nice and neat. I suspect you will want your text to be not so neat and instead positioned on or near countries - which are not neat!

I love SLAB so try it out but I suspect native graphics.draw will be your friend on this one.

[grump]

Do you by any chance have some pointers (or similar projects) I can use as a resource for learning?

I quickly made this crude example as a proof of concept. It's ~60 lines of code.

There are three different map images: a map with all countries highlighted, the same map but not highlighted, and a mask image that encodes which part of the map is which country. I painted them in GIMP.

In the mask image each country has a distinct and unique color. It's a grayscale image for sake of simplicity.
The table of countries in the code is sorted by the brightness of the color that's assigned to that country's mask.

Code: Select all

-- in the mask image, Afghanistan has color #010101, England has #020202, France has #030303, etc.
local Countries = { "Afghanistan", "England", "France", ... }

It doesn't really matter which colors you choose for the mask, they are never displayed on screen. Just make sure the brightness values (r + g + b) are in ascending order according to your country list. All this would be simpler with an indexed palette, but that's not supported.

All distinct values are extracted from the ImageData of the mask image and sorted by brightness. The result is a table that contains every mask color, and the position of a color in that table is the same as the position of the corresponding country in the Countries table.

To get the country from the cursor position, use ImageData:getPixel and search for that color in the mask color list.

The tricky part is to draw only the selected country from the full map. In my example, I used a simple shader. There are other ways to do it, with stencil masks for example, but a shader is most straightforward.

Well that's how I would implement it. Your approach with Tiled is not wrong, it just seems to be more work than necessary for the things you described.

[Kroatenkeiler]

Wow! Thank you so much for taking the time to put together this example. Now I get your approach and will do some reading into shaders in Löve to understand how to use them.

Again much appreciated!

[Kroatenkeiler]

@togFox - thank you for the heads up - I will keep it in mind .