DEV Community

Cover image for In-Game Photo Camera in Unity: Tutorial
Octanta Studio
Octanta Studio

Posted on

In-Game Photo Camera in Unity: Tutorial

Hello! Our team at Octanta Studio recently launched the Dynamic Photo Camera asset, enabling in-game photography mechanics with rich interactivity and integration options. This article will guide you through how it works and what can be achieved using this asset.

Dynamic Photo Camera is available on the Unity Asset Store: https://u3d.as/3qTN

The asset is optimized for PC, mobile, 2D, and 3D projects. It simplifies the development of quests, interactive educational projects, and mechanics involving user-generated content. As a developer, you save time, while the user gains greater freedom of action.

đź”° Beginner friendly.

How we imagine the player using this Camera asset

Basic Photography

This feature allows player to take screenshots of any part of the screen during gameplay and save them to the game’s memory for later use. This way, the player can leave hints for themselves instead of taking notes in a real notebook with a pen or using mobile notes or a phone camera.

How it works

Hold the click or touch anywhere for 1 second to activate the photo capture. The captured photo is saved in the in-game collection. This is done by capturing screenshot from the specified camera view, cropping it around the click point and creating a texture from it for the photo Image. Textures & photo data are saved in Application.persistentDataPath in explorer.

How to set it up (~1 minute)

  1. Import the Dynamic Photo Camera package to your Unity project. Import the TextMeshPro package if required.
  2. Add the PhotoController Prefab to your game scene.
  3. In the InputController inspector, assign your active camera to the Current Camera field and disable prefab`s camera.

Easy setup

  1. Recommended: unpack prefab and move UICanvas content to existing Canvas or vice versa so UI elements don`t ovelap. The UI elements and photo prefab can be customized to match your desired visual style.

Done! Run your scene, capture a photo by holding the interaction for 1 second, and verify the photo appears in the collection.

Additional

  • Use the Photo Settings scriptable object to adjust both the size of the photo cards and the capture area. A larger crop size will allow more content to be captured within each frame. A smaller crop size will zoom and may produce low-quality pixelated images.
  • Also experiment with the Camera settings, as it is the source of the image. For example, select Temporal Anti-aliasing for Rendering. You can also use a disabled camera that renders specific layers to capture the invisible. đź’ˇ Thus, for example, the player can take pictures of people and identify vampires among them, as they are not rendered.
  • To modify screenshot capture properties via script, use the MakeScreenshot method in PhotoController.cs. The key line is: targetTexture = RenderTexture.GetTemporary(photoSettings.resWidth, photoSettings.resHeight); You can customize it according to your graphics requirements. For example: targetTexture = RenderTexture.GetTemporary(photoSettings.resWidth, photoSettings.resHeight, 24, RenderTextureFormat.ARGB32);

List of all possible formats: https://docs.unity3d.com/6000.0/Documentation/ScriptReference/RenderTextureFormat.html

Data Recognition & Photo Description

Every photo captured has a description that can display coordinates, the name of the recognized object, or custom metadata. This feature enriches gameplay by providing detailed information about photographed objects and enabling interaction with in-game content. It allows players to explore and learn about the game world, as well as complete “photo hunt” photography-based quests by capturing specific objects. 💡 For example, create an educational game for children where their task is to learn to identify birds by taking photographs of correct ones in trees.

In-game photography in Unity game example

How it works

When taking a photo, the system uses a raycast combined with an overlap cube to determine the camera’s focal point. It identifies the intersection with the nearest collider and stores data about the object associated with that collider in the photo memory. By default, this includes the photographed object’s name and its world coordinates. Objects can also be configured to transmit additional custom data.

By hovering over or touching photo, the player can view the stored data and gather information about the game world.

How to set it up

  1. Ensure all objects you want to recognize in photos have any Collider component and either visible mesh or ObjectToPhoto.cs script (for 2D Sprites, for example).
  2. For custom description attach the ObjectToPhoto.cs script to the object in the scene. In the inspector, assign PhotoController to the Controller field and fill Custom Description field.

Image description
Done! Run your scene, capture a photo of object with a custom description, hover over it in the collection and check the description.

Additional

  • Use the Photo Settings scriptable object to adjust Sphere Radius. A smaller value results in a thinner ray, making object recognition more precise.
  • Object Recognition can also be configured using a script. The description of the recognized object is passed to the RaycastCheck method in the PhotoController at the time of the photo being taken (dataString). Customize the behavior of the RaycastCheck method in the PhotoController.cs to better fit your specific requirements.
  • Change description`s UI on the scene (DynamicPhotoDescription object) and via script in the ConfigureDescriptionPanel method in PhotoUIManager.

Photo Validation

This feature enables objects in the game world to recognize description of the photo when the player drags and drops it onto the object. In this way, the objects read the content of the photo and can react to it. đź’ˇ For example, a terminal recognizes the correct password, or a character recognizes a location based on coordinates, or the in-game directory provides information about the car by its number.

Image description
How it works

When a player drags a photo, aims it at an object in the game world, and drops it, a check is triggered for a detector object. If one is found, the description of the photo is passed to it, and the detector object responds with whether it’s what it needs.

How to set it up

  1. Make sure that the validator object has any Collider and the PhotoDetector.cs script.
  2. Fill Required Photo Data field. This field must match the Custom Description of the captured object (and photo description accordingly) for validation to succeed. For example, the validator object requires the car number AS 891 RX for input, and the full description of the photo of the blue car contains exactly “AS 891 RX”.

Image description

Done! Run a scene where there is a recognizable object with the required data and a validator object that needs this data. Take a photo of the object, drag it to the validator, and trigger a reaction.

Additional

  • Object validation and photo data transfer can be configured via script.

  • The detector object is searched for in the CheckHitOnDrag method in the PhotoPrefab.cs as follows:
    if (photoData != null && hit.collider.TryGetComponent(out PhotoDetector detector))

  • The entire PhotoDetector.cs is responsible for the logic of recognizing the received data. ValidatePhotoData, SetDetectorState, OnActivate and OnError methods. Use them to customize your activation effects.

Conclusion

These three described functions are basic and essential in Dynamic Photo Camera asset.

  • Capture in-game photos
  • Recognize game objects in photos
  • Validate object data in photos

Use this article to work better with the asset, and don’t forget that the documentation and our support on Discord are always available.

Thank you.

Top comments (0)