fervor [>]CODING & CURIOSITY
FERVOR LEARNING SYSTEMTUTORIALS
← Godot

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

  1. Open Godot
  2. Click “New Project”
  3. Create a new scene (Scene > New Scene)
  4. Select “Node2D” as your root node
  5. Save the scene as “PlanetScene.tscn”

🖼️ Step 2: Set Up the Background

  1. Right-click on your Node2D root → Add Child Node
  2. 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)
  3. 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

  1. Right-click on root → Add Child Node
  2. Add an Area2D node
    • Name it “LocationMarker”
  3. Add a CollisionShape2D as child of Area2D
    • Shape property: Create new CircleShape2D
    • Set Radius to 30
  4. 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

  1. 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
  2. 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
  3. 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

  1. Select the root Node2D
  2. Attach new script (click script icon)
  3. Copy the provided script code (from previous message)
  4. Save the script

🔌 Step 6: Connect the Signals

In the Node tab:

  1. Select Area2D

  2. Go to “Node” tab in Inspector

  3. Connect these signals:

    • mouse_entered → _on_area_mouse_entered
    • mouse_exited → _on_area_mouse_exited
    • input_event → _on_area_input_event
  4. Select your buttons

  5. Connect their pressed signals:

    • ExamineButton → _on_examine_pressed
    • TravelButton → _on_travel_pressed

🎨 Step 7: Customize Your Locations

In your script:

  1. Find the locations dictionary
  2. 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

  1. Click the Play Scene button (or F6)
  2. 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:

  1. Add animations for panel showing/hiding
  2. Create the actual location scenes
  3. Add more interactive elements
  4. Implement saving/loading system
  5. 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

  1. Open Godot
  2. Click “New Project”
  3. Create a new scene (Scene > New Scene)
  4. Select “Node2D” as your root node
  5. Save the scene as “PlanetScene.tscn”

🖼️ Step 2: Set Up the Background

  1. Right-click on your Node2D root → Add Child Node
  2. 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)
  3. 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

  1. Right-click on root → Add Child Node
  2. Add an Area2D node
    • Name it “LocationMarker”
  3. Add a CollisionShape2D as child of Area2D
    • Shape property: Create new CircleShape2D
    • Set Radius to 30
  4. 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

  1. 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
  2. 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
  3. 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

  1. Select the root Node2D
  2. Attach new script (click script icon)
  3. Copy the provided script code (from previous message)
  4. Save the script

🔌 Step 6: Connect the Signals

In the Node tab:

  1. Select Area2D

  2. Go to “Node” tab in Inspector

  3. Connect these signals:

    • mouse_entered → _on_area_mouse_entered
    • mouse_exited → _on_area_mouse_exited
    • input_event → _on_area_input_event
  4. Select your buttons

  5. Connect their pressed signals:

    • ExamineButton → _on_examine_pressed
    • TravelButton → _on_travel_pressed

🎨 Step 7: Customize Your Locations

In your script:

  1. Find the locations dictionary
  2. 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

  1. Click the Play Scene button (or F6)
  2. 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:

  1. Add animations for panel showing/hiding
  2. Create the actual location scenes
  3. Add more interactive elements
  4. Implement saving/loading system
  5. 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:

  1. Create a separate scene for each special effect
  2. Use Node Groups to organize related nodes
  3. Add shader effects for more visual polish
  4. Use audio buses for sound management
  5. 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! 🎮

Keep your curiosity going.Explore more Godot →
287 TUTORIALS · 22 TOPICSREADY