Components of the Scene Editor

The scene editor as a whole has many moving parts, designed to make it easier to create visual scenes, place items, and manipulate objects. Notably, Quorum Studio contains 2 tabs, Scene and Palette, which allow manipulation of objects in a scene. We then have a Grid Editor, which allows placing, deleting, and moving objects around. Over time, we suspect these foundations will change as we get user requests and feedback.

The Scene and Palette Tabs

In the first version of Quorum Studio, there was a project tree that represented Quorum source code in a pane. Starting in Quorum Studio 2.0, this tree was replaced with a tabbed pane that had two new items, the scene and palette tab. In the scene tab, all objects created as part of the grid are located inside of a tree. This includes two components, cameras, and items. Notably, the camera contains a reference to the editor camera, which can be manipulated and adjusted through setting properties or with the keyboard or mouse. Inside of items is everything that we have added to our scene.

The Palette Tab is different, containing images or models that can be placed inside of a scene. By default, we have included art (with open licenses) that can be used freely in any project as a starting point. This provides a way to add, for 2D games, basic tiles for dirt, water, stone, monsters, and other items for use in a potential game. In each case, the art is appropriately labeled so that users can both see it and get information about it accessibly. Further, all the default art is child appropriate and should be usable in or out of a classroom. Below is an image of the Palette in the current version of Quorum Studio.

This is an image of the Palette, which from an accessibility standpoint should feel like a tree, even though it visually appears on screen somewhat different. In practice, each part of the tree is actually an image, but one labeled with accessibility information. To use it, we press enter on any tree item, which places us in the Grid Editor with an item of that kind at the cursor's location.

The Grid Editor

While the Scene and Palette tabs are designed to help us know what is in, or can be added to, a scene, the grid editor is where we suspect most users will put in the vast majority of their work. For this tutorial, we will go over only the editor for 2D game creation, although 3D is similar. Notably, the grid provides a way to place items from the palette into pre-defined squares. Technically, the scene is not really a grid. We have just made it look that way by default. Because of this, keep in mind that all items are placed in cartesian coordinates, not grid locations.

For example, in the image below, what we observe is a series of horizontal and vertical lines, effectively our grid. By default, these lines are spaced 32 'units' apart from each other, which for this 2D editor is pixels. In the 3D editor, these units are actually thought of in meters and pixels are not thought of in the same way. In any case, for 2D, this default is set because many open source art tilesets, images with many items in it, use 32 or 16 pixel squares for map layout.

Inside of this window, we also observe a darker grey outline in the middle of the scene, which is the camera layout in regard to what the game camera will see when a game is loaded. At the bottom left of this square would be 0, 0, or 0 in x and 0 in y. One square over to the right might seem like it is 1, 0, but remember that each square is 32 pixels wide and that this grid size can be adjusted. As such, the next square over is actually at the coordinates 32, 0. Suppose we had a grid cell size of P, where P is 32 pixels. This means that to determine the grid coordinate, we always take the grid cell and multiply by P. To make this concrete, a cell at position 10, 10 would be P * 10, P * 10, or 320 x 320. We point this out here because this will be important to understand as we set properties in our application. The camera is 800 x 600 pixels by default and must be changed in code after a game is loaded to change this.

This is an image of the 2D grid in Quorum Studio. In this case, it shows a series of vertical and horizontal lines, each separated by 32 pixels by default. In the center of this grid is the view of the camera, which is shown visually as a darker grey outline. Properties of the camera can be adjusted accessibly in the camera's property window.

Next Tutorial

In the next tutorial, we will discuss Creating a scene project, which describes creating a scene project in Quorum Studio..