Godot / 9 MIN READ
Create Explore Scene
Create Explore Scene with clickable tiles
From the original Fervor library. Examples may use older package versions.
🎮 Creating a Planet Exploration Scene in Godot
A Visual Step-by-Step Tutorial
🚀 Step 1: Create the Base Scene
- Open Godot
- Click “New Project”
- Create a new scene (Scene > New Scene)
- Select “Node2D” as your root node
- Save the scene as “PlanetScene.tscn”
🖼️ Step 2: Set Up the Background
- Right-click on your Node2D root → Add Child Node
- Add a TextureRect node
- Name it “Background”
- In the Inspector panel:
- Layout: “Full Rect”
- Enable “Expand”
- Set Anchors to cover the whole screen (0,0,1,1)
- Import your planet background image:
- Drag your planet image into the FileSystem panel
- Drag the image from FileSystem to the Texture property in the Inspector
🎯 Step 3: Create the Location Marker Template
- Right-click on root → Add Child Node
- Add an Area2D node
- Name it “LocationMarker”
- Add a CollisionShape2D as child of Area2D
- Shape property: Create new CircleShape2D
- Set Radius to 30
- Add a Sprite2D as child of Area2D
- Import your marker texture (a simple circle or icon)
- Set the texture in the Inspector
📱 Step 4: Create the UI Elements
-
Add a Label node for hover text
- Name it “HoverLabel”
- In Inspector:
- Set custom font (optional)
- Enable autowrap
- Set horizontal alignment to Center
- Position it above where markers will be
-
Add a Panel node for location info
- Name it “LocationPanel”
- In Inspector:
- Set Size (suggested: 300x400)
- Position it on the right side
- Set a semi-transparent StyleBox
-
Add to LocationPanel:
-
Label for location name
- Name: “LocationName”
- Position at top of panel
- Set larger font size
-
Label for description
- Name: “Description”
- Enable autowrap
- Position below name
-
Two buttons
- “ExamineButton”
- “TravelButton”
- Position at bottom of panel
-
🔄 Step 5: Add the Script
- Select the root Node2D
- Attach new script (click script icon)
- Copy the provided script code (from previous message)
- Save the script
🔌 Step 6: Connect the Signals
In the Node tab:
-
Select Area2D
-
Go to “Node” tab in Inspector
-
Connect these signals:
- mouse_entered → _on_area_mouse_entered
- mouse_exited → _on_area_mouse_exited
- input_event → _on_area_input_event
-
Select your buttons
-
Connect their pressed signals:
- ExamineButton → _on_examine_pressed
- TravelButton → _on_travel_pressed
🎨 Step 7: Customize Your Locations
In your script:
- Find the locations dictionary
- Add your own locations:
var locations = {
"your_location": {
"name": "Cool Place",
"description": "A very cool place to visit",
"travel_scene": "res://Locations/CoolPlace.tscn",
"position": Vector2(200, 300)
}
}
▶️ Step 8: Test Your Scene
- Click the Play Scene button (or F6)
- You should see:
- Your planet background
- Clickable location markers
- Hover text appears when mouse over markers
- Info panel shows when clicking markers
- Examine and Travel buttons work
🐞 Common Issues & Solutions
-
Markers not visible?
- Check if your Sprite2D has a texture assigned
- Verify positions are within screen bounds
-
Clicks not working?
- Verify signal connections in Node tab
- Check if Area2D collision shape is proper size
-
Panel not showing?
- Make sure it’s not hidden by default
- Check if selected_location is being set
🎯 Next Steps
Once you have this working, you can:
- Add animations for panel showing/hiding
- Create the actual location scenes
- Add more interactive elements
- Implement saving/loading system
- Add visual effects for hover/selection
Remember: You can always modify the appearance and behavior by adjusting the node properties in the Inspector panel!
Need help? Feel free to ask about any specific step! 🚀# 🎮 Creating a Planet Exploration Scene in Godot
A Visual Step-by-Step Tutorial
🚀 Step 1: Create the Base Scene
- Open Godot
- Click “New Project”
- Create a new scene (Scene > New Scene)
- Select “Node2D” as your root node
- Save the scene as “PlanetScene.tscn”
🖼️ Step 2: Set Up the Background
- Right-click on your Node2D root → Add Child Node
- Add a TextureRect node
- Name it “Background”
- In the Inspector panel:
- Layout: “Full Rect”
- Enable “Expand”
- Set Anchors to cover the whole screen (0,0,1,1)
- Import your planet background image:
- Drag your planet image into the FileSystem panel
- Drag the image from FileSystem to the Texture property in the Inspector
🎯 Step 3: Create the Location Marker Template
- Right-click on root → Add Child Node
- Add an Area2D node
- Name it “LocationMarker”
- Add a CollisionShape2D as child of Area2D
- Shape property: Create new CircleShape2D
- Set Radius to 30
- Add a Sprite2D as child of Area2D
- Import your marker texture (a simple circle or icon)
- Set the texture in the Inspector
📱 Step 4: Create the UI Elements
-
Add a Label node for hover text
- Name it “HoverLabel”
- In Inspector:
- Set custom font (optional)
- Enable autowrap
- Set horizontal alignment to Center
- Position it above where markers will be
-
Add a Panel node for location info
- Name it “LocationPanel”
- In Inspector:
- Set Size (suggested: 300x400)
- Position it on the right side
- Set a semi-transparent StyleBox
-
Add to LocationPanel:
-
Label for location name
- Name: “LocationName”
- Position at top of panel
- Set larger font size
-
Label for description
- Name: “Description”
- Enable autowrap
- Position below name
-
Two buttons
- “ExamineButton”
- “TravelButton”
- Position at bottom of panel
-
🔄 Step 5: Add the Script
- Select the root Node2D
- Attach new script (click script icon)
- Copy the provided script code (from previous message)
- Save the script
🔌 Step 6: Connect the Signals
In the Node tab:
-
Select Area2D
-
Go to “Node” tab in Inspector
-
Connect these signals:
- mouse_entered → _on_area_mouse_entered
- mouse_exited → _on_area_mouse_exited
- input_event → _on_area_input_event
-
Select your buttons
-
Connect their pressed signals:
- ExamineButton → _on_examine_pressed
- TravelButton → _on_travel_pressed
🎨 Step 7: Customize Your Locations
In your script:
- Find the locations dictionary
- Add your own locations:
var locations = {
"your_location": {
"name": "Cool Place",
"description": "A very cool place to visit",
"travel_scene": "res://Locations/CoolPlace.tscn",
"position": Vector2(200, 300)
}
}
▶️ Step 8: Test Your Scene
- Click the Play Scene button (or F6)
- You should see:
- Your planet background
- Clickable location markers
- Hover text appears when mouse over markers
- Info panel shows when clicking markers
- Examine and Travel buttons work
🐞 Common Issues & Solutions
-
Markers not visible?
- Check if your Sprite2D has a texture assigned
- Verify positions are within screen bounds
-
Clicks not working?
- Verify signal connections in Node tab
- Check if Area2D collision shape is proper size
-
Panel not showing?
- Make sure it’s not hidden by default
- Check if selected_location is being set
🎯 Next Steps
Once you have this working, you can:
- Add animations for panel showing/hiding
- Create the actual location scenes
- Add more interactive elements
- Implement saving/loading system
- Add visual effects for hover/selection
Remember: You can always modify the appearance and behavior by adjusting the node properties in the Inspector panel!
🚀 Bonus Features: Level Up Your Planet Scene!
1. ✨ Add Location Marker Pulse Effect
Make your location markers pulse to draw attention! Add this to your LocationMarker node.
# LocationMarker.gd
extends Area2D
func _ready():
# Create tween for pulsing effect
var tween = create_tween()
tween.set_loops() # Make it repeat forever
# Scale up and down
tween.tween_property($Sprite2D, "scale", Vector2(1.2, 1.2), 1.0)
tween.tween_property($Sprite2D, "scale", Vector2(1.0, 1.0), 1.0)
2. 🎨 Add Location Discovery System
Make players discover locations as they explore! Add this to your main scene script:
# PlanetScene.gd
var discovered_locations = []
func discover_location(location_id):
if location_id not in discovered_locations:
discovered_locations.append(location_id)
# Play discovery animation
var marker = get_node(location_id)
var tween = create_tween()
tween.tween_property(marker, "modulate", Color(1,1,0,1), 0.5)
tween.tween_property(marker, "modulate", Color(1,1,1,1), 0.5)
# Show discovery notification
$DiscoveryLabel.text = "Discovered: " + locations[location_id]["name"]
$DiscoveryLabel.show()
await get_tree().create_timer(2.0).timeout
$DiscoveryLabel.hide()
3. 🎵 Add Atmospheric Sound Effects
Add ambient sounds when hovering over locations:
# In your main scene script
var sound_effects = {
"ancient_ruins": preload("res://Sounds/ruins_ambient.wav"),
"crystal_caves": preload("res://Sounds/cave_ambient.wav"),
"research_station": preload("res://Sounds/tech_ambient.wav")
}
func _on_area_mouse_entered(location_id):
if sound_effects.has(location_id):
$LocationAudio.stream = sound_effects[location_id]
$LocationAudio.play()
4. 💫 Smooth Panel Transitions
Make your location panel slide in and out smoothly:
func show_location_panel(location_id):
var panel = $LocationPanel
panel.show()
# Start from off-screen
panel.position.x = get_viewport_rect().size.x
# Slide in
var tween = create_tween()
tween.tween_property(panel, "position:x",
get_viewport_rect().size.x - panel.size.x, 0.5)\
.set_trans(Tween.TRANS_CUBIC)\
.set_ease(Tween.EASE_OUT)
func hide_location_panel():
var tween = create_tween()
tween.tween_property($LocationPanel, "position:x",
get_viewport_rect().size.x, 0.5)\
.set_trans(Tween.TRANS_CUBIC)\
.set_ease(Tween.EASE_IN)
await tween.finished
$LocationPanel.hide()
5. 🎯 Add Scanning Mechanic
Let players scan the planet for hidden locations:
var scanning = false
var scan_radius = 0
func _process(delta):
if scanning:
scan_radius += 200 * delta
queue_redraw()
# Check if scan wave hits any locations
for location_id in locations:
var marker = get_node(location_id)
var distance = marker.position.distance_to($ScanOrigin.position)
if distance <= scan_radius and distance >= scan_radius - 10:
discover_location(location_id)
func _draw():
if scanning:
draw_arc($ScanOrigin.position, scan_radius, 0, TAU, 32,
Color(0, 1, 1, 0.5), 2.0)
func _on_scan_button_pressed():
scanning = true
scan_radius = 0
await get_tree().create_timer(3.0).timeout
scanning = false
queue_redraw()
6. 🌍 Add Environmental Effects
Create a dynamic environment with particle effects:
# Add this to your _ready function
func setup_environment():
# Create dust particles
var particles = GPUParticles2D.new()
var material = ParticleProcessMaterial.new()
# Set up particle properties
material.emission_shape = ParticleProcessMaterial.EMISSION_SHAPE_RECTANGLE
material.emission_rect_extents = Vector2(800, 400)
material.direction = Vector3(1, 0.2, 0)
material.spread = 10.0
material.initial_velocity_min = 20.0
material.initial_velocity_max = 40.0
material.scale_min = 0.5
material.scale_max = 1.5
particles.process_material = material
particles.amount = 100
particles.lifetime = 4.0
add_child(particles)
7. 📱 Add Interactive Mini-Map
Create a mini-map showing discovered locations:
func update_minimap():
var minimap = $MiniMap
minimap.clear()
# Draw planet outline
minimap.draw_circle(Vector2(100, 100), 80, Color(0.5, 0.5, 0.5, 0.5))
# Draw discovered locations
for location_id in discovered_locations:
var pos = locations[location_id]["position"]
# Convert world position to minimap position
var map_pos = (pos / get_viewport_rect().size) * Vector2(200, 200)
minimap.draw_circle(map_pos, 5, Color.YELLOW)
8. 🎮 Add Quick Travel System
For discovered locations, add quick travel functionality:
func _on_minimap_location_clicked(location_id):
if location_id in discovered_locations:
# Show quick travel confirmation
$QuickTravelPanel.show()
$QuickTravelPanel/Label.text = "Quick travel to " + locations[location_id]["name"] + "?"
# If confirmed
get_tree().change_scene_to_file(locations[location_id]["travel_scene"])
🎨 Implementation Tips:
- Create a separate scene for each special effect
- Use Node Groups to organize related nodes
- Add shader effects for more visual polish
- Use audio buses for sound management
- Implement saving/loading for discovered locations
🚀 Next Level Ideas:
- Add weather systems
- Create day/night cycles
- Implement random events
- Add collectible resources
- Create achievement system
- Add character footprints
- Create photo mode
Remember to tweak and adjust these features to match your game’s style and needs! 🎮