Devlog: Refactoring Interactive Screens

by

Since the beginning of my project, I have placed great emphasis on ensuring that the in-game screens are interactive and have a credible interface that fits the scenario. Sometimes with more success, sometimes with less. I had three different ways to interact with in-game desktops:

  1. Transmitting UI events via Raycast and translating Collider coordinates into Canvas coordinates.
  2. Translating mouse position to relative cursor graphic position within the Canvas. Raycasting from the cursor graphic to the contents.
  3. Activating a fullscreen UI upon interaction with the PC.

As I prioritized immersion, it was initially essential to me that when using the interfaces, the environment and the monitor were visible. While it looked cool and somewhat worked, it only worked partially. Sometimes clicks were not registered, double clicks even more often, and dragging elements was a different story altogether. Stacked Canvases? Forget it. They didn’t even exist for my raycasts. My self-hacked option number 2 actually worked the best. So well that it was the standard for most of my project’s development time. The problem was that it was so dependent on the cursor that, depending on the cursor’s position on the Canvas, it could only reach a certain height or width. Since you can’t directly control and set the mouse cursor to zero in Unity, this issue was relatively common. Also. The different Unity Event Systems for UI controls still give me a headache. Draghandler? Doubleclickhandler? Handlerhandler? This was just trial and error all the day.

Stick to the MVP

So, I reflected on what it means to build a prototype. It should work, and the polish comes later. If I really wanted to deliver something robust, I had to rewrite this core component. So, I did just that. After hours of research, along with many people facing the same issues as me, I came across several valuable insights (https://forum.unity.com/threads/handling-pointer-events-on-render-texture.1158272/#post-7432208) and tutorials (https://www.youtube.com/watch?v=fXsdK2umVmM) that helped me a lot, but there always seemed to be some crucial thing that didn’t quite work.

I’ve been waiting for a sale on Dream OS, but somehow, it hasn’t happened. So, I watched the videos by Michsky, the publisher of Dream OS, and there it was, a completely different approach. Apparently, they simply open a Screen Space Canvas, cleverly disguised through a well-directed camera movement. Looked easy enough. So, I opened Unity, placed the computer preset, and started experimenting. Within two hours, I had a completely robust solution up and running.

My simple Solution

It’s not perfect yet, but it’s a good start!
  • Put a Canvas in Screen Space Camera-Mode and Render a Render Texture
  • Put a Canvas in the Game on a Display Object with the same Aspect Ratio
    • Inside is a Raw Image which displays the Render Texture and fill the Canvas
    • This ensures that it’s the same size and lighting (unlit) as the Full Screen Overlay Canvas
      • You can also use a normal Plane and use an Unlit Material with the Render Texture as Base Texture, but I didn’t quite get it right.
  • Put a Cinemachine Virtual Camera with a custom Blend in Front of the In-World-Canvas and fit it in
  • The Player Interaction with the object does the following things
    • Deactivate The Player Controller
    • Activate the Cinemachine Virtual Camera to initiate the Blending “animation”
    • After a given time (here 1,5 seconds) put the Screen Spaces Camera Mode to Screen Space Overlay
  • Check if the player is in visible range to enable or disable the render texture camera canvas to save performance. I just checked with a trigger volume. Works great.
  • Done!

The immersion might not be as stunning as with the world space solutions, but the UI here is native, so all functions work flawlessly. I think I’ll keep it for now. Additional benefit: I dont have to implement animations for the character.

To really show off the depressing office flair, I want to go for a 90s Windwos aesthetic. Luckily, there’s a cool asset called 90’s Desktop UI that I can use as a base. Together with the aesthetics of the Chicago95 icon set, I’m sure I’ll conjure up some excellent desktops. I’m looking forward to it.

Limitations: The Blend will only work in a 16:9 aspect ratio. I’m not a Unity UI Expert yet.

Leave a Comment