About

Easy Editor Display

Project Name Easy Editor Display
Type Unity Editor Extension
License MIT
Completed Ongoing
Programming 100%
Design 100%
Environment Unity 2017.2
Language C#
Goal
This tool can be used for in-editor display of more complex objects that the built in OnPreviewGUI cannot handle and for scene-like interactive custom editors. As a bonus, the system has a simple GUI system based on the observer pattern.
Why
For another project (Aquascape Platform Editor) I needed an interactive display in the inspector of the Unity Editor. To my disappointment, such a feature didn’t exist. I decided to create this feature decoupled from the original project for the reusability factor.
Ongoing?
I set up the system in december 2017, but am currently working on a clear getting started guide and some optimalisation to put it online as an open source extension.

Promo Video

As a challenge with a few fellow development students at the HKU we each tried to make the most entertaining video to promote tools we made. Here you can see the result as I decided to do this for the Easy Editor Display. Below I explain more in depth and seriousness what the tool is all about.

Click to view
a little bit more in depth...

Why do I need it?

The Unity3D engine is a great engine with an extensive Editor. When we as game developers want to make our custom objects more easily edited by designers, it's common practice to extend this Editor with custom editor scripts. The Unity Editor is sadly lacking in the option to display objects in the inspector as they would appear in game when they aren't prefabs, the standard Unity way to prepare objects to be instantiated in game. There are various reasons one wouldn't want to use prefabs, for example if the object is part of a bigger construction proces with interchangable smaller parts, or in situations where properties of an object should be edited that would benefit from visual representation that will not end up in the end product.

For me, the second was the case in another project I was working on, the Aquascape Platform Editor. The Easy Editor Display makes it very easy to add objects to a display as if it was a game scene, but all simulated within the standard Inspector view Unity uses to examine objects and their properties. So if you are working on a custom editor and want to display a generated object, a combination of smaller parts or an interactive editing display, this tool is for you.

Coming soon, a Getting Started guide with more information.

Activity Diagram

Even though I wasn't working with anyone else in the creation of this product, it was still helpful for myself to visualise my own use flow, and the flow under the hood. It isn't as detailed as I'd make it in a collaboration, but still good for some basic insight. Click to view the whole image.

Click to view

UML Design

Before programming the system I like to create an UML diagram of what I am going to create, for communication purposes and because it provides an overview of what elements I need to consider. Here you see the UML diagram, and below a short explanation of the important aspects. Click to view the whole image.

Below I have written an elaboration on the classes displayed in the UML about their role in the system.

Click to view
EditorRenderer

This class is the center of the system, is responsible for keeping track of objects to render and draws the result in the specified rect. It contains methods for adding objects into the window; at this point in time GameObject and Texture2D types are supported.

Editor_EasySimpleDisplay || Editor_EasyInteractiveDisplay

These UnityEditor.Editor derived classes provide an integrated EditorRenderer or InteractiveEditorRenderer respectively into the preview area of the basic Editor. This makes it really easy to add a display to a custom editor as one just needs to derive from these classes instead of the basic Editor class.

GUISystem

This class manages the GUI created. It could be used separated from the EasyEditorDisplay tool as it has no references to any of the other classes. It contains methods for adding objects to be drawn; for now just a button or image. To create a button, a method is required to delegate to when the mouse interacts with the button.

Script Snippets

Interactive Editor Renderer

This snippet shows the modularity of the system. To get the basic functionality for rendering objects, simply inherit from the EditorRenderer base class (view code here). To add GUI functionality, create a GUISystem (view code here) and simply override the OnGUI method to add its display. By keeping the GUISystem seperated it could easily be used for other situations. On top of that, the Interactive Editor Renderer is kept as clean as possible.