Files
AppleHillsProduction/docs/camera_adaptation_readme.md
tschesky 2573e7f80e Add a system for setting up "real" camera framing to work between devices (#26)
- In-level authoring utility to designate level bounds
- Camera Adapter component to be placed on a level's camera to perform the adjustments
- EdgeAnchor tool, which allows anchoring of game objects to the screen bounds

Co-authored-by: Michal Pikulski <michal@foolhardyhorizons.com>
Reviewed-on: #26
2025-10-14 04:56:00 +00:00

3.1 KiB

Camera Screen Adaptation System

This system helps adapt your 2D game's orthographic camera to different screen sizes, ensuring content is displayed consistently across various devices. It also provides tools for anchoring game objects to screen edges.

Components

1. ScreenReferenceMarker

This component defines the target width and edge margins for your level content.

  • Target Width: The desired width to be displayed on screen
  • Edge Margins: Distances from screen edges for anchoring objects
  • Visualization: Editor-only visualization of the reference sizes

2. CameraScreenAdapter

Automatically adjusts the camera's orthographic size to ensure the target width (defined by the ScreenReferenceMarker) matches the screen width.

  • Reference Marker: Link to your ScreenReferenceMarker
  • Adapt on Resolution Change: Automatically update when screen resolution changes

3. EdgeAnchor

Anchors game objects to screen edges, maintaining consistent distance when the camera's orthographic size changes.

  • Anchor Edge: Which edge to anchor to (Top, Bottom, Left, Right)
  • Reference Marker: Uses the same marker as the CameraScreenAdapter
  • Additional Offset: Extra distance from the edge margin
  • Continuous Update: Whether to update position every frame

4. CameraScreenVisualizer

Helper component for visualizing camera boundaries in the editor.

Setup Instructions

Basic Setup

  1. Create the Reference Marker:

    • Add a new empty GameObject to your scene
    • Add the ScreenReferenceMarker component to it
    • Position it at the center of your target view
    • Set the targetWidth to match your level's ideal width
    • Adjust margin values as needed
  2. Configure the Camera:

    • Add the CameraScreenAdapter component to your main camera
    • Reference the ScreenReferenceMarker you created
    • Optionally, add CameraScreenVisualizer for better editor visualization
  3. Anchor Game Objects:

    • For any objects that should maintain position relative to screen edges:
    • Add the EdgeAnchor component
    • Set the desired anchor edge (e.g., Top)
    • Reference the same ScreenReferenceMarker
    • Adjust additional offset if needed

Example: Top-Edge Anchoring

For objects that need to stay a fixed distance from the top of the screen:

  1. Set up your ScreenReferenceMarker with an appropriate topMargin value
  2. Add EdgeAnchor to the object you want to anchor
  3. Set AnchorEdge to Top
  4. Adjust additionalOffset for fine-tuning

Tips for Level Design

  • Place the ScreenReferenceMarker at the center of your scene's critical content
  • Use the visual gizmos to see how your reference width relates to camera boundaries
  • Test your scene in different aspect ratios to ensure proper adaptation
  • For complex levels, you might want multiple reference markers for different sections

Runtime Considerations

  • The system automatically adapts when the screen size changes
  • The CameraScreenAdapter can be disabled if you need to temporarily override the automatic sizing
  • EdgeAnchor components can be disabled when their objects don't need to maintain edge alignment