Minimap

[JernejHabjan]

https://phaser.io/examples/v3/view/camera/minimap-camera

• [ ] make map also isometric - but draw with points/squares instead of sprites? - or polygons?
  • [ ] how big should those squares be? depending on map size?
• [ ] minimap collapsable?
• [ ] minimap click
• [ ] click move camera

[JernejHabjan]

 var minimapGraphics = this.add.graphics();
    minimapGraphics.fillStyle(0x000000, 0.5); // Black with 50% opacity
    minimapGraphics.fillRect(600, 10, 190, 190); // Position and size of minimap

// Draw tiles
for (var y = 0; y < mapHeight; y++) {
    for (var x = 0; x < mapWidth; x++) {
        var tile = map.getTileAt(x, y);
        if (tile === grassTile) {
            minimapGraphics.fillStyle(0x00ff00); // Green for grass
        } else if (tile === dirtTile) {
            minimapGraphics.fillStyle(0xa0522d); // Brown for dirt
        } else if (tile === waterTile) {
            minimapGraphics.fillStyle(0x0000ff); // Blue for water
        }
        minimapGraphics.fillRect(minimapX + x * tileSize, minimapY + y * tileSize, tileSize, tileSize);
    }
}

// Draw objects/buildings
objects.forEach(function(object) {
    minimapGraphics.fillStyle(0xffffff); // White for objects/buildings
    minimapGraphics.fillRect(minimapX + object.x * scale, minimapY + object.y * scale, object.width * scale, object.height * scale);
});

// Draw trees
trees.forEach(function(tree) {
    minimapGraphics.fillStyle(0x008000); // Dark green for trees
    minimapGraphics.fillCircle(minimapX + tree.x * scale, minimapY + tree.y * scale, treeRadius * scale);
});

// Draw units/characters
units.forEach(function(unit) {
    minimapGraphics.fillStyle(unit.color); // Use unit's color
    minimapGraphics.fillCircle(minimapX + unit.x * scale, minimapY + unit.y * scale, unitSize * scale);
});

[JernejHabjan]

iso:

// Create a graphics object for the minimap background
var minimapGraphics = this.add.graphics();
minimapGraphics.fillStyle(0x000000, 0.5); // Black with 50% opacity

// Define the vertices of the rhombus/diamond shape for the minimap
var minimapVertices = [
    minimapOriginX, minimapOriginY - minimapHeight / 2, // Top point
    minimapOriginX + minimapWidth / 2, minimapOriginY, // Right point
    minimapOriginX, minimapOriginY + minimapHeight / 2, // Bottom point
    minimapOriginX - minimapWidth / 2, minimapOriginY // Left point
];

// Draw the rhombus/diamond shape for the minimap
minimapGraphics.fillPoints(minimapVertices, true);

// Draw tiles
for (var y = 0; y < mapHeight; y++) {
    for (var x = 0; x < mapWidth; x++) {
        var tile = map.getTileAt(x, y);
        var isoX = (x - y) * tileWidth / 2;
        var isoY = (x + y) * tileHeight / 2;
        // Calculate position and shape of the tile on the minimap
        var minimapX = minimapOriginX + isoX * minimapScale;
        var minimapY = minimapOriginY + isoY * minimapScale;
        minimapGraphics.fillStyle(getTileColor(tile)); // Use appropriate color based on tile type
        // Draw diamond shape representing the tile on the minimap
        drawDiamond(minimapGraphics, minimapX, minimapY, tileSize * minimapScale);
    }
}

// Draw objects/buildings
objects.forEach(function(object) {
    var isoX = (object.x - object.y) * objectWidth / 2;
    var isoY = (object.x + object.y) * objectHeight / 2;
    // Calculate position and shape of the object on the minimap
    var minimapX = minimapOriginX + isoX * minimapScale;
    var minimapY = minimapOriginY + isoY * minimapScale;
    minimapGraphics.fillStyle(0xffffff); // White color for objects/buildings
    // Draw simplified shape representing the object on the minimap
    drawObjectShape(minimapGraphics, minimapX, minimapY, objectSize * minimapScale);
});

// Draw trees
trees.forEach(function(tree) {
    var isoX = (tree.x - tree.y) * treeWidth / 2;
    var isoY = (tree.x + tree.y) * treeHeight / 2;
    // Calculate position and shape of the tree on the minimap
    var minimapX = minimapOriginX + isoX * minimapScale;
    var minimapY = minimapOriginY + isoY * minimapScale;
    minimapGraphics.fillStyle(0x008000); // Dark green color for trees
    // Draw simplified shape representing the tree on the minimap
    drawTreeShape(minimapGraphics, minimapX, minimapY, treeSize * minimapScale);
});

// Draw units/characters
units.forEach(function(unit) {
    var isoX = (unit.x - unit.y) * unitWidth / 2;
    var isoY = (unit.x + unit.y) * unitHeight / 2;
    // Calculate position of the unit on the minimap
    var minimapX = minimapOriginX + isoX * minimapScale;
    var minimapY = minimapOriginY + isoY * minimapScale;
    minimapGraphics.fillStyle(unit.color); // Use unit's color
    // Draw dot representing the unit on the minimap
    minimapGraphics.fillCircle(minimapX, minimapY, unitSize * minimapScale);
});