thumbnail or mini map

[pielago]

okay here is my question ..
can someone explain to me how thumbnails aka mini maps works in a game?
how can the screen be copy and make it small??and see where you player is and also anything around it???

does the x and y same as the one in the mini maps? or how does it works????
if someone can give me a simple answer how that works or a tutorial or something???


thank you to who ever answer ...

[DaedalusYoung]

Depends on the type of minimap, but in principal, it's just an image of a map of the area. With a bit of math, you can simply calculate the x and y position of the player on that map and then crop a selection around them to display on screen.

[pielago]

i see but how does it works?
i mean the map its so small versus the screen where you are playing its like 2 times bigger?
any tutorials or at least examples? basics so i can get the math behind it?

also how many types of mini maps are there

[veethree]

If your game is tile based, Then perhaps the .love i posted here could help you.

[Zeliarden]

You can do a minimap easy with a "camera lib"
http://love2d.org/forums/viewtopic.php? ... lit=gamera

[Plu]

If you want a real minimap instead of a scaled down version of the game, you probably need to use two different drawfunctions for all your entities. But if you just want a smaller copy of the game with a wider angle, a camera library is the way to go.

[Germanunkol]

There are many ways to make a minimap.
The easiest way I can think of is using a mesh (requires the new love 0.9 though) - you draw a map of the level in any image drawing program, I prefer the GIMP, and then render only a cropped section of it on the screen. This has been mentioned above, but I'll try to give you more hints to get you started. This will only work if the level doesn't change and isn't randomly generated - otherwise you can't draw a map of the level in an image program.

• Create the map
• Define a list of four vertices for the mesh object. Each vertex holds the information about one corner of the displayed part of the map, so each one has to define the position of that corner - on the map and on the screen. See example below.
• Create a mesh object using the vertices and love.graphics.newMesh
• Whenever the map moves (i.e. the player moves), update the third and forth element of each vertex - the position of the vertex on the map, while leaving the first and second element - the position of the vertex on screen - the same.
• Each frame, draw the level the way you already do, and afterwards draw the mesh object.

Example:

Code: Select all

-- create the vertices:
local verts = {}
verts[1] = { -- top left corner
    0,0, -- screen position
    0,0, -- position on map
}
verts[2] = {
    100,0,
    100,0,
}
verts[3] = {
    100,100,
    100,100,
}
verts[4] = {
    0,100,
    0,100
}
mapMesh = love.graphics.newMesh( verts, mapImage, "fan" )

-- call whenever the player was moved:
-- this assumes the map is 5 times smaller than the acutal level (thus the /5. change to any number you need for your setup):
function moveMap( x, y )
    -- top left:
    verts[1][3] = x/5-100
    verts[1][4] = y/5-100

    -- top right
    verts[2][3] = x/5+100
    verts[2][4] = y/5-100

    -- bottm right
    verts[3][3] = x/5+100
    verts[3][4] = y/5+100

    -- bottom left:
    verts[4][3] = x/5 - 100
    verts[4][4] = y/5 + 100
end

[pielago]

thank you guys for this help i will get on reading all this and try to get it so i can use it for my game..(hope i can do it)

btw i am not using tile map ...

[Roland_Yonaba]

I would like to add my two cents to this.
All the techniques said above are valid. But you might find this one simpler to grasp, unless I totally missed what you are asking for.
So, whether your game is tiled based or not, this one works. First, let's say you have the size of the world:

Code: Select all

local worldWidth, worldHeight = 1000, 1000

For simplicity, I will suppose that the location (0,0), i.e the upper-left pixel on the screen (the graphics origin in Löve, actually) is the origin of the world.
That means that any entity can freely move between 0 and 1000 (in both x and y axis).

To render the minimap, you will have to define some other parameters: the dimensions of the minimap window (in both width and height), and also the coordinates where it will be drawn (i'll choose here the lower right corner of the screen):

Code: Select all

local minimapWidth, minimapHeight = 100, 100
local minimapX = love.graphics.getWidth() - minimapWidth
local minimapY = love.graphics.getHeight() - minimapHeight

From that, you can define two functions translate coordinates from the real world to minimap coordinates, and vice versa.

Code: Select all

-- This translates the (x,y) coordinates in the world to (mx, my) coordinates
-- in the minimap. Note that mx, my are relative to the origin of the minimap.
-- so the object should be rendered at minimapX + mx, minimapY + my
local function worldToMinimap(x, y)
  local mX = x * (minimapWidth / worldWidth)
  local mY = y * (minimapHeight / worldHeight)
  return mX, mY
end

-- This translates the (mx,my) coordinates in the minimap to (x,y) coordinates
-- in the world. Note that mx, my given to the function should be relative origin of the minimap.
local function minimapToWorld(mx, my)
  local x = mx * (worldWidth / minimapWidth)
  local y = my * (worldHeight / minimapHeight)
  return x, y
end

This is simple to setup, but it has its limitations. For instance, if your world scales (up or down),
it becomes quite tricky (but not impossible) to manage. The technique The great Germanunkol suggested before is more feature complete and elegant.
You can also use The great Kikito's gamera, I suspect you can setup a minimap easily with it.

Feel free to ask any questions in case you want more details on this.
Hope this helps.

Edit: well, this is quite similar to Germanunkol's suggestion, except that it renders straight to the screen, and does not make use of meshes