This week I worked on a way to bring in external assets into the Editor.
Importing an external image into the editor and texturing a cube.
The way this works is by means of a new import tool in the UI. Import allows the user to select any set of files to copy into the project’s resource directory. Once in the project, resources are shown in the new Library View from where they can be accessed.
What can you do with the assets you bring into the project?
For 3D assets, when dragged onto the 3D view the Editor will instantiate a new entity. This new entity will appear in the entities list view and can be manipulated like any other entity.
For Image assets, these can be assigned to materials to change the appearance of entities in the scene. The figure above show how we can bring a JPG file into the Editor and use it to texture a box we create from the Entity menu.
Designing the Asset Library UX
I tried different designs for the library view, starting with a simple list that would show the asset’s name, type and preview, but I ultimately decided to simplify the interaction and settled for a tree view.
It was hard to throw away the initial tabular design I implemented, but I believe going with the tree view was ultimately the right choice.
Once I had the library view, the first thing I wanted to try was whether dragging assets from it onto the 3D world and other widgets would be feasible. I thought this feature would be troublesome to land, however, I was very pleased to see the implementation come together rather quickly.
Drag and drop is a great interaction because it prevents taking the user out of context when she wants to assign a value to a widget or other UI element.
Putting the picture together
If we take a step back, we can now start to see how these features are coming together to help bring the WYSIWYG experience to the Editor.
If you recall from our first post in the Vortex Editor series (click here to quickly jump there), one of the main objectives of this project was to allow simplifying the way we assemble scenes for the Vortex Engine.
Having now a Resource Library and a way to visually edit Entity properties, look at how much simpler it is to create a scene from scratch:
- First, we start the Editor, click File -> Import Assets.
- Then, we select the assets to bring into the project (for instance, a few obj files).
- After this, we simply drag the imported obj file from the Library onto the 3D view. This will create a new Entity.
- And Finally, we adjust the new Entity’s properties (position, rotation, scale) to our liking and drag image assets to texture them. That’s it!
The whole process is very visual, allowing the user to see the scene at all times and (hopefully) unleashing her artistic creativity by allowing quick improvisation and trial and error. It feels much more fun than having to be tweaking a series of float values intermixed with C++ code and recompiling every time.
Having reached this initial milestone, the plan for next week will be mostly polish work for these features, improving project resource management and further cleaning up the internal architecture.
Stay tuned for more!
