Exploring in-game photography with the new Photo Mode demo

Virtual photography has become an increasingly popular addition to games of all kinds, allowing players to creatively express, save, and share their favorite gameplay moments. Creators often benefit when players share these creations – they can increase player engagement and community activity to help the game reach a larger audience

We’re releasing the Photo Mode demo package to help creators learn how to add photography options to their games. It’s available now for PC and console Unity projects using the Universal Render Pipeline (URP). The demo contains a collection of camera, image adjustment, and UI behaviors that enable players to enter a customizable photography mode and prep their game environment for the perfect screenshot.

To get started, just download the Photo Mode package, then add the PhotoMode Prefab into your game, and follow these steps to create the applicable references within your Scene and the Forward Renderer. Once implemented, you’ll be able to make use of in-game photography options like camera positioning, depth of field, vignettes, sticker overlays, filters, and more. Photo Mode’s modular implementation gives you the flexibility to change its appearance and behaviors – or even create your own custom effect options. Check out the Photo Mode Overview video to learn more about the setup process.

Photo Mode is designed to integrate smoothly with your chosen platform’s native screenshot functionality. To save a photo creation, use the included Hide UI option to remove UI objects from view, and press your device’s Share or Screenshot button.

There are several features and systems working together to bring this demo to life, so here’s a quick review of how they all work:

• UI menu system: Most Photo Mode features consist of a slider or input that calls an applicable method via Unity Event as its value is adjusted during runtime. These methods update the values of their corresponding Cinemachine, Volume, or UI settings, and they can be found within the PhotoMode.cs script. The minimum and maximum value ranges of the sliders can be customized within the same script’s component. Some custom UI created for this demo include text-based sliders and a system for visualizing Photo Mode’s sticker placement feature.  
• Input System: This demo package makes use of the Input System to allow for quick modification of the Photo Mode controls, prevent overrides with existing project inputs, and easily swap between keyboard and gamepad control schemes. Since adding a Player Input component to Photo Mode could potentially conflict with a project’s existing Input System setup, we created references to individual input actions via the Input System API. These references are contained within the PhotoModeInputs.cs script and make the Photo Mode actions available to the user without the need of a Player Input component. We also included our own event system that overrides a project’s existing event system whenever Photo Mode is activated.  
• Cinemachine: To maintain the modular nature of the demo, we set up Photo Mode to use its own virtual camera so it could orbit or crane around a target without affecting the project’s existing cameras. This approach only requires the Scene to have a Cinemachine Brain, which is automatically searched for and connected with our virtual camera using the PhotoMode.cs script.  
• Volumes: The Focus Distance, Aperture, Exposure, Contrast, and Saturation settings are managed by a global Volume included within Photo Mode. The values in the Volume can be adjusted to match the target project’s original post-processing settings.  
• Shader Graph: The shaders created for Photo Mode’s filter collection were done using Shader Graph and implemented using the Render Pass feature from the URP. This feature allows users to extend the render pipeline by implementing and customizing new render passes. For Photo Mode specifically, a Blit is used to apply each shader made with Shader Graph to a render texture for use as a full-screen filter effect.  
• Custom Sticker System: Photo Mode’s sticker system uses the Navigation values from the EventSystem to create a movement axis, which is used to change the position of the sticker cursor. This cursor displays a preview of the position, rotation, scale, and image that will be applied once the sticker is stamped. Once the stamp action is triggered, the PhotoModeStickerController.cs script selects from a pool of existing sticker placeholder objects, applies the transform and image settings to the selected placeholder, and enables its visibility.

We’re excited to see what everyone learns and makes with the Photo Mode demo package. If you want to share feedback or show off the cool creations you develop with it, you can post it on our Photo Mode forum thread or send it our way via Discord, Twitter, or Facebook using the tag #MadeWithUnity.