Make a 360° Game Tour with Ansel
Making tours from 360 photos, or 3D exports from software packages is fairly well known, but it is also possible to do this with in-game screenshots, with use of the Ansel application from Nvidia. In this blog post, we’ll walk you through the way to do this. We chose Witcher 3, mainly because its world is beautiful. We’ll show you how to create the screenshots with Ansel, and then how to create a tour simply with Vizor 360, which can be viewed in web browsers, mobile and in any VR headsets.
Ansel
The requirements for Ansel are a GeForce GTX 600 series GPU or better, and an updated GeForce Experience application. The default hotkey to open Ansel in a game that supports it is Alt + F2. This pauses the game and opens a sidebar with a list of different settings for you to change and enables free camera movement with WASD keys or a controller.
Ansel has 4 different setting categories: Filter, Adjustments, FX, and Camera & Capture. I personally like to tweak the Brightness, Contrast and Vibrance adjustments, and add Color enhancer FX for beautiful vivid colors. Different settings work better depending on how bright or dark the game scene is.
The Capture settings have 5 different screenshot modes: Normal Screenshot, Super Resolution Screenshot, 360° Screenshot, Stereo Screenshot and 360° Stereo. For this project the 360° screenshot option was used the most, and normal screenshots were taken for additional images to be used as media screens for the 360° tour. The resolution of the 360° image can be changed, and for this I used the highest one for best results. The file sizes vary between 10 to 30 Mb.
To customize the Ansel hotkey, image resolutions and settings more, you can open the NvCameraConfiguration.exe located in C:\Program Files\NVIDIA Corporation\Ansel\Tools. Be mindful that the bigger the resolution, the more disk space the intermediate shots will take. The amount of memory used is shown under the resolution in Ansel Capture settings.
Taking the shots
Taking 360 screenshots in game is very similar to taking 360° photos in real life. The camera orientation determines the front point of the image, which is important to keep in mind when making a tour with several 360° images.
The front point is at the center of the 360° image, however it can get tricky when making a tour with several photos of the same place. The camera orientation should be kept the same for all shots to avoid editing the front points later.
Keeping the camera orientation the same for all images will make the tour much more comprehensible, and the transition between images feels more natural. The balcony shot above has been offset so the front view is towards the fireplace inside the room. When all the images have the same orientation, you ensure that the view will always have the correct direction when jumping from one image to another.
At the moment, Vizor 360 does not support image re-orientating to fix front points, but it will be added soon. For now images that have different orientation than others can be corrected in image editing software like Photoshop or GIMP for example. The image has to be Offset horizontally so that the front view will be facing the correct direction (center of the image is the front view).
Making the tour in Vizor 360
After taking 360° screenshots of the desired places, head over to vizor.io and create an account to start making a 360° tour. The screenshots can be simply dragged and dropped into the editor to create scenes from them. The screenshots have been numbered to make it easier to drop them in order, but you can also rename them from the title bar on the right.
Adding a scene link can be done by dragging an image from the list to the scene where you want to place it. Now you can either double click the link, or press P (Preview) and click the link to jump to the next scene. Pressing E switches back to edit mode. For best results, try place the link on the spot where the next shot was taken at. Do this to all the images, and remember to also add links to the previous images, so the viewer can also go back to where they came from.
The tour could be finished and published after linking all the images together, but for this project I added Media links for additional info about certain objects and characters. Add a media link by clicking the Media button on the left, or by pressing M and clicking anywhere on the scene. Double click the media link to add text or an image, or both. You can add as many media links as you want to the scenes, and make it a more interesting tour with additional information.
When all the content has been added, you can publish the project and share it anywhere on the web and view it on mobile and VR as well. Below is the link to the finished project made for this guide.
This article was brought to you by Vizor — the most accessible WebVR solution for all devices. Our VR tools are intuitive and easy-to-use, so you can create beautiful WebVR experiences to delight and engage your audience.
