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

Godot / 7 MIN READ

Scene Boundry

Scene Boundry

From the original Fervor library. Examples may use older package versions.

Setting Scene Boundaries and Background Color in Godot

Part 1: Setting the Background Color

Method 1: Using Project Settings (Global Change)

  1. Go to Project → Project Settings
  2. In the search bar, type “rendering/environment/default_clear_color”
  3. Click the color box
  4. Set RGB values to 0,0,0 for black
  5. Click “Close”

Method 2: Using a ColorRect (Scene-Specific)

  1. In your Game scene, right-click on the root node
  2. Add Child Node → Select “ColorRect”
  3. Move it to the bottom of the scene tree (so it’s behind everything)
  4. In the Inspector:
    • Set “Layout” → “Layer” to -1
    • Set “Color” to black (0,0,0,1)
    • Set “Layout” → “Anchors Preset” to “Full Rect” (top-right icon in Layout)
    • This makes it fill the whole screen

Part 2: Setting Scene Boundaries

Step 1: Create Physical Boundaries

  1. Add Static Bodies for walls:

    Game (Node2D)
├─ ColorRect (background)
├─ Walls (Node2D)
│   ├─ TopWall (StaticBody2D)
│   ├─ BottomWall (StaticBody2D)
│   ├─ LeftWall (StaticBody2D)
│   └─ RightWall (StaticBody2D)
└─ Player (CharacterBody2D)

  2. For each wall:

    • Add Child Node → StaticBody2D
    • Add CollisionShape2D as child
    • Set Shape to RectangleShape2D
    • Position appropriately

Step 2: Set Camera Limits

Add this to your Player script:

func _ready():
    # Your existing _ready code here
    
    # Set camera limits
    $Camera2D.limit_left = 0
    $Camera2D.limit_right = 1920  # Or your scene width
    $Camera2D.limit_top = 0
    $Camera2D.limit_bottom = 1080  # Or your scene height

Step 3: Complete Setup Script

Here’s a complete script that sets up both camera bounds and walls:

extends Node2D

# Constants for scene boundaries
const SCENE_WIDTH = 1920
const SCENE_HEIGHT = 1080
const WALL_THICKNESS = 50

func _ready():
    setup_walls()

func setup_walls():
    # Create walls node if it doesn't exist
    var walls = Node2D.new()
    walls.name = "Walls"
    add_child(walls)
    
    # Create top wall
    create_wall(
        Vector2(SCENE_WIDTH/2, -WALL_THICKNESS/2),  # Position
        Vector2(SCENE_WIDTH, WALL_THICKNESS)        # Size
    )
    
    # Create bottom wall
    create_wall(
        Vector2(SCENE_WIDTH/2, SCENE_HEIGHT + WALL_THICKNESS/2),
        Vector2(SCENE_WIDTH, WALL_THICKNESS)
    )
    
    # Create left wall
    create_wall(
        Vector2(-WALL_THICKNESS/2, SCENE_HEIGHT/2),
        Vector2(WALL_THICKNESS, SCENE_HEIGHT)
    )
    
    # Create right wall
    create_wall(
        Vector2(SCENE_WIDTH + WALL_THICKNESS/2, SCENE_HEIGHT/2),
        Vector2(WALL_THICKNESS, SCENE_HEIGHT)
    )

func create_wall(pos: Vector2, size: Vector2):
    var wall = StaticBody2D.new()
    var collision = CollisionShape2D.new()
    var shape = RectangleShape2D.new()
    
    shape.size = size
    collision.shape = shape
    
    wall.position = pos
    wall.add_child(collision)
    $Walls.add_child(wall)

Part 3: Making Walls Visible (Optional)

If you want to see the walls, add this to the create_wall function:

func create_wall(pos: Vector2, size: Vector2):
    # ... existing wall creation code ...
    
    # Add visible rectangle
    var rect = ColorRect.new()
    rect.size = size
    rect.position = -size/2  # Center the rectangle
    rect.color = Color.WHITE  # Or any color you want
    wall.add_child(rect)

Testing Your Setup

  1. Save all your scenes
  2. Run the game
  3. The player should now:
    • Not be able to go outside the boundaries
    • Stay within camera limits
    • See a black background
    • (Optional) See white walls at the boundaries

Common Issues and Solutions

  1. If the player goes through walls:

    • Check if CollisionShape2D is properly sized
    • Verify walls are StaticBody2D nodes
    • Ensure player has collision detection enabled

  2. If camera bounds aren’t working:

    • Verify camera limits are set correctly
    • Check if Camera2D is properly attached to player
    • Make sure values match your scene size

  3. If background isn’t black:

    • Check ColorRect is at the bottom of scene tree
    • Verify Z-index is set correctly
    • Confirm color values are (0,0,0,1)

Bonus: Dynamic Scene Sizing

To make your scene adapt to different screen sizes:

func _ready():
    var screen_size = get_viewport().get_visible_rect().size
    SCENE_WIDTH = screen_size.x
    SCENE_HEIGHT = screen_size.y
    setup_walls()

🚀 Cool Scene Enhancements

1. Bouncy Walls

Make the walls have a bounce effect when hit!

# In your Player script
@export var bounce_force = 400
var is_bouncing = false

func _physics_process(delta):
    # Add after move_and_slide()
    if get_slide_collision_count() > 0:
        var collision = get_slide_collision(0)
        if collision.get_collider() is StaticBody2D:  # It's a wall
            bounce_from_wall(collision.get_normal())

func bounce_from_wall(normal: Vector2):
    if not is_bouncing:
        is_bouncing = true
        velocity = normal * bounce_force
        shake_camera(3.0, 0.2)  # Add screen shake
        
        # Reset bounce after a short delay
        var timer = get_tree().create_timer(0.2)
        timer.timeout.connect(func(): is_bouncing = false)

2. Glowing Wall Borders

Add a nice glow effect to your walls!

# In your wall creation function
func create_wall(pos: Vector2, size: Vector2):
    # ... existing wall code ...
    
    # Add line for glow effect
    var line = Line2D.new()
    line.width = 4
    line.default_color = Color(1, 1, 1, 0.5)  # White, semi-transparent
    line.add_point(Vector2(-size.x/2, -size.y/2))
    line.add_point(Vector2(size.x/2, -size.y/2))
    line.add_point(Vector2(size.x/2, size.y/2))
    line.add_point(Vector2(-size.x/2, size.y/2))
    line.add_point(Vector2(-size.x/2, -size.y/2))
    wall.add_child(line)
    
    # Add glow node
    var glow = PointLight2D.new()
    glow.texture = preload("res://glow_texture.png")  # Create a circular white texture
    glow.color = Color(0.5, 0.8, 1.0, 0.3)  # Light blue
    wall.add_child(glow)

3. Dynamic Background Grid

Add a cool grid background that moves slightly with the player!

extends Node2D

@onready var player = $Player

func _ready():
    create_grid()

func create_grid():
    var grid = Node2D.new()
    grid.name = "Grid"
    add_child(grid)
    
    # Create grid lines
    for x in range(0, 1920, 50):  # Adjust spacing as needed
        var line = Line2D.new()
        line.default_color = Color(0.2, 0.2, 0.2)  # Dark gray
        line.add_point(Vector2(x, 0))
        line.add_point(Vector2(x, 1080))
        grid.add_child(line)
    
    for y in range(0, 1080, 50):
        var line = Line2D.new()
        line.default_color = Color(0.2, 0.2, 0.2)
        line.add_point(Vector2(0, y))
        line.add_point(Vector2(1920, y))
        grid.add_child(line)

func _process(delta):
    # Make grid move slightly with player
    $Grid.position = -player.position * 0.1

4. Warning Zone Near Borders

Add a visual warning when the player gets close to walls!

# In Player script
func _physics_process(delta):
    check_border_proximity()

func check_border_proximity():
    var warning_distance = 100  # Distance to start warning
    var screen_size = get_viewport_rect().size
    
    # Calculate distance to each wall
    var distances = {
        "left": position.x,
        "right": screen_size.x - position.x,
        "top": position.y,
        "bottom": screen_size.y - position.y
    }
    
    # Check each wall
    for direction in distances:
        if distances[direction] < warning_distance:
            show_border_warning(direction)

func show_border_warning(direction: String):
    var warning_color = Color(1, 0, 0, 0.3)  # Semi-transparent red
    # Create warning effect (you can customize this)
    var warning = ColorRect.new()
    warning.color = warning_color
    warning.size = Vector2(50, 50)  # Adjust size as needed
    add_child(warning)
    
    # Fade out and remove
    var tween = create_tween()
    tween.tween_property(warning, "modulate:a", 0.0, 0.5)
    tween.tween_callback(warning.queue_free)

5. Portal Walls

Make some wall sections act as teleporters!

# Create a new script: Portal.gd
extends Area2D

@export var target_position: Vector2

func _ready():
    body_entered.connect(_on_body_entered)

func _on_body_entered(body):
    if body.is_in_group("player"):
        teleport_player(body)

func teleport_player(player):
    # Create teleport effect
    var effect = GPUParticles2D.new()
    # Set up particle effect...
    
    # Teleport
    player.global_position = target_position
    
    # Screen flash
    var flash = ColorRect.new()
    flash.color = Color(1, 1, 1, 0)
    flash.size = get_viewport_rect().size
    get_tree().root.add_child(flash)
    
    var tween = create_tween()
    tween.tween_property(flash, "color:a", 1.0, 0.1)
    tween.tween_property(flash, "color:a", 0.0, 0.1)
    tween.tween_callback(flash.queue_free)

6. Wall Pattern Effects

Add cool patterns that move along the walls!

# In wall creation
func add_wall_pattern(wall: StaticBody2D, size: Vector2):
    var pattern = Line2D.new()
    pattern.width = 2
    pattern.default_color = Color(0.5, 0.8, 1.0, 0.5)
    
    # Create zigzag pattern
    var step = 20
    var y_offset = 10
    for x in range(0, int(size.x), step):
        pattern.add_point(Vector2(x, sin(x * 0.1) * y_offset))
    
    wall.add_child(pattern)
    
    # Animate pattern
    var tween = create_tween()
    tween.set_loops()  # Make it repeat
    tween.tween_property(pattern, "position:x", -step, 1.0)
    tween.tween_property(pattern, "position:x", 0, 0)

7. Zone of Safety

Add a “safe zone” in the middle of the scene!

func create_safe_zone():
    var safe_zone = Area2D.new()
    var collision = CollisionShape2D.new()
    var shape = CircleShape2D.new()
    
    shape.radius = 200
    collision.shape = shape
    safe_zone.add_child(collision)
    
    # Add visual
    var visual = Node2D.new()
    visual.draw.connect(func():
        draw_circle(Vector2.ZERO, 200, Color(0, 1, 0, 0.1))
    )
    safe_zone.add_child(visual)
    
    add_child(safe_zone)

8. Weather Effects

Add simple weather effects within your bounded area!

func create_weather():
    var particles = GPUParticles2D.new()
    var material = ParticleProcessMaterial.new()
    
    material.emission_shape = ParticleProcessMaterial.EMISSION_SHAPE_BOX
    material.emission_box_extents = Vector3(960, 0, 0)  # Half screen width
    
    particles.process_material = material
    particles.amount = 1000
    particles.lifetime = 2
    
    add_child(particles)

Implementation Tips:

  1. Add these features one at a time
  2. Test thoroughly after each addition
  3. Adjust values to match your game’s feel
  4. Combine features for more interesting effects
  5. Use tweens for smooth transitions
Keep your curiosity going.Explore more Godot →
287 TUTORIALS · 22 TOPICSREADY