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.