23.9 C
New York
Monday, April 28, 2025

Unit: How are the sides detected on a PNG map?


If you’re on the lookout for a solution to decide wherein map space you will have click on the consumer or have your cursor, you’ll suggest making a colour map and paint every space in your personal distinctive colour. That is how Paradox Interactive does in its video games, here’s a screenshot of how the crusader kings kings 3 map 3 in actual fact It appears below the home:

To make clear this is able to be a .png file that resides within the sport information. This file is accompanied by a knowledge file that incorporates details about every space, an important factor is its colour. For instance, this file may be seen like this:

// Its inside identifier
"area_baravia": {
    // Participant-readable title
    "title": "Baravia",

    // The colour of this space within the picture. On this instance it is simply the hex worth.
    "colour": "ff0000",

    // Different knowledge you may want
    "isOcean": false,
    ...
},
"area_napoli": {
    ...
}

Upon getting these two information, you simply want to seek out out the place the consumer’s mouse cursor is in relation to the picture file, then get the colour of that pixel to see which space they choose. Pseudocode:

var mousePosition = GetMousePosition()
var mousePositionOnImage = TransformToImageCoordinates(mousePosition)
var pixel = GetPixel(mapImage, mousePositionOnImage)
var space = FindAreaWithColor(pixel)

The implementation of GetMousePosition, TransformToImageCoordinates, GetPixeland FindAreaWithColor All would rely on the know-how stack that you’re utilizing. It’s probably that there’s some included solution to make this transformation within the unit, I’m not acquainted sufficient to present a selected response right here.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles