Title: Make an interesting "peek-a-boo" dungeon map in Python

[This dungeon map is dark except for the circle around the mouse]

My post Make a close-up map in Python shows how you can display a full-scale close-up on a small-scale map. This example shows how you can modify that program to display areas on a darkened image as if you were looking at it with a flashlight.

Loading Images

The changes needed to make the peek-a-boo map are surprisingly small. The following code shows the main app class's constructor with the modified pieces highlighted in blue.

class CloseupMapApp: def __init__(self): self.window = tk.Tk() self.window.title('closeup_map2') self.window.protocol('WM_DELETE_WINDOW', self.kill_callback) # Make the canvas. self.canvas = tk.Canvas(self.window, bg='white', borderwidth=0, highlightthickness=0, cursor='crosshair') self.canvas.pack(padx=10, pady=10, side=tk.TOP, fill=tk.BOTH, expand=True) # Load the full-scale map. map_name = 'dungeon.png' self.map_image = Image.open(map_name).convert('RGBA') # Use a dark gray image for the "small-scale" map. wid = self.map_image.width hgt = self.map_image.height self.small_map_image = Image.new('RGBA', (wid, hgt), (64, 64, 64)) # Display the small-scale map. self.small_map_photo_image = ImageTk.PhotoImage(self.small_map_image) self.canvas.create_image(0, 0, image=self.small_map_photo_image, anchor='nw') wid = self.small_map_image.width hgt = self.small_map_image.height self.canvas.config(width=wid, height=hgt) # Radius of the closeup area in small and large scales. self.radius = 75 self.scale = self.map_image.width / self.small_map_image.width # Track mouse motion over the canvas. self.canvas.bind('', self.mouse_move) # Display the window. self.window.focus_force() self.window.mainloop()

This code is the same as the previous version except for three small changes. First, the program loads the file dungeon.png instead of a map of the United States. (I got the map from www.wistedt.net/tag/top-down-map/.)

Second, instead of loading a small-scale map, the code creates a dark gray map that's the same size as the dungeon map.

Finally, I set the radius for the "close-up" area to 75 instead of 50. It just looked better that way.

Those are the only changes necessary! The program automatically sets its scale factor to 1 because the "large" and "small" maps are the same size. As you move the mouse across the dark gray "small" map, the program automatically displays the illuminated "large" map.

Conclusion

Give the program a try. Like the earlier example, it's pretty interesting and kind of fun to play with. I can even imagine using something like this in a game, although you may need to restrict the mouse movement somehow so the players don't "accidentally" peek at areas that they're not supposed to see yet.

As always, download the example to experiment with it and to see additional details.