Minimap

How can I make a minimap that shows the positions of important objects beyond the player's immediate view?

You can create a minimap in Easel by using a second camera. This involves three steps:

1. Spawn an entity to represent your minimap camera.
2. Aim your minimap camera at the player (or whatever entity you want it to follow).
3. Render sprites to your minimap camera.

There is a full example of this at the bottom of this page.

Step 1: Spawn a minimap camera

Spawn a globally-accessible entity to represent your minimap camera, giving it a name like Camera:Minimap.

• Use the Viewport function to place the minimap camera's view in a small rectangle in the corner of the screen.

pub const Camera:Minimap = Spawn camera {
    Viewport(scale=0.2, anchor=@(1,1)) // Minimap viewport in the top-right corner
    SolidBackground(color=#111) // Minimap background color so it covers the main camera's background
}

Step 2: Aim the minimap camera

Now that you've declared your Camera:Minimap, you can make your minimap camera follow the player, or whatever other entity you want it to follow.

• Use the Camera function to decide where the minimap camera should be looking.

pub fn unit.Ship([owner]) {
    use body=this
    Body(pos=20*RandomVector)
    
    // ... sprites, collider, etc ...
    
    Camera(radius=25) // Main camera follows the ship, more zoomed in
    Camera(camera=Camera:Minimap, radius=50) // Minimap camera follows the ship, more zoomed out
}

Step 3: Render sprites to the minimap camera

Normally minimaps display a schematic view of the world, using icons or simple shapes to represent players and objects, and so you would render different sprites to your minimap camera than you would to your main camera. Then you can render some sprites into that camera specifically.

• Whenever you render a sprite, for example a PolygonSprite or ImageSprite, pass in the camera=Camera:Minimap argument to render it to the minimap camera instead of the main camera. If you do not pass this parameter it, your sprite will be rendered to the main camera by default.

PolygonSprite(shape=Equilateral(numPoints=3), ownerColor=true) // render to main camera by default
PolygonSprite(ownerColor=true, shape=Equilateral(numPoints=3), camera=Camera:Minimap) // render to minimap camera

Why 3 steps not 1?

Each of these steps is performed by a different entity in the game world, and so must be in different parts of the codebase:

• The minimap camera is its own entity, declared once for the entire game world
• The player's hero decides the position of the minimap camera
• All the entities in the world (ships, zombies, companion cubes, etc.) render their own sprites into the minimap camera

Full Code Listing

Below is a small example of a spaceship exploring the stars, click Open in Editor to play:

pub const Camera:Minimap = Spawn camera {
    Viewport(scale=0.2, anchor=@(1,1)) // Minimap viewport in the top-right corner
    SolidBackground(color=#111) // Minimap background color so it covers the main camera's background
}

pub game fn World.Main(maxHumanPlayers=5) {
    TopContent { "Click and hold to explore the stars" }

    SpawnEachPlayer owner {
        Spawn ship {
            use body=ship
            use radius=1

            Body(pos=20*RandomVector)
            PolygonCollider(category=Category:Default, shape=Circle)

            Camera(radius=25) // Main camera follows the ship, more zoomed in
            Camera(camera=Camera:Minimap, radius=50) // Minimap camera follows the ship, more zoomed out

            PolygonSprite(shape=Equilateral(numPoints=3), ownerColor=true) // render to main camera by default
            PolygonSprite(ownerColor=true, shape=Equilateral(numPoints=3), camera=Camera:Minimap) // render to minimap camera

            on Pointer {
                Heading = Angle(Pointer - Pos)
            }
            on BeforePhysics {
                if !IsButtonDown(Click) { continue }
                Velocity += 0.1 * Heading.Direction
                Spark(color=#f80, luminous=1, glare=0.1, bloom=3, bloomAlpha=1, splatter=1, velocity=-20*Heading.Direction)
            }
        }
    }

    // Spawn some stars so the minimap has something to show
    repeat 100 {
        Spawn star {
            use body=this, color=#fc0
            Body(pos=200*RandomVector*Random)
            PolygonSprite(shape=Circle(radius=0.25), glare=0.1, bloom=3) // Render star to main camera
            PolygonSprite(shape=Circle(radius=0.5), camera=Camera:Minimap) // Render star to minimap camera
        }
    }
}

Open in Editor