Adding and Removing Items from a Scene

One of the most typical operations we conduct using the scene editor is adding and removing items. In this tutorial, we will discuss how we add 2D items from the Palette to the Grid editor and then how we delete them. In the next tutorial, we will discuss how we change an item's properties. Note that 3D is similar and will not be discussed in detail here.

Adding Items with the Keyboard

In order to add an item, we first need to use the Palette to select it. By default, the Palette contains a series of tiles, like water, stone, or transitions between these. When we are creating an application or game, regardless of whether it is a roleplaying game, a first person combat game, a side-scrolling jumping game, or something else, this layout process is largely the same. Ultimately, we select an item in the Palette and we press enter. If we select a water tile, for example, this would create a grid with a single water tile 'preview' as shown in the image below.

This image shows a grid with a single water tile. By default, the tile is placed in the camera's visible plane, which is 0,0. In this context, 0,0 is the coordinates of the item placed, not its position in the grid.

Once we have a cursor, we can then place items in the scene. Using the keyboard, whenever we press enter, it adds a tile of that type into the scene. Tiles are automatically made according to the size of the grid. So, if a tileset uses a 16 x16 pixel size, it is automatically placed into the grid with the correct default sizing. Similarly, other sizes have the same values. If we were to then use the cursor up and down in the system with the keyboard, we could then place a series of water tiles, like so:

This screenshot contains a 6 x 2 water tile from the 0,0 point up 6 and two over. At each point, we can select the tiles to delete them or to modify the properties.

Finally, we often want to add tiles of different kinds to create a map. For example, we might create a character (e.g., a girl or a boy) and a monster (e.g., in this case the 'red mouth'). We can then place them to a default position as we see fit. Here is an example:

This new map contains our existing water tiles as discussed previously, in addition to two characters. We set them here about a quarter of the way through the camera's view.

Removing Items with the Keyboard

In order to remove or delete items using the keyboard, the process at a high level is to select an item with the cursor, tab through the items if there are multiple in a cell, and to press the delete key. For example, suppose we had a scene with a monster on a water tile, like shown below. To do this, we first select the cell with the cursor and tab until the monster is selected. Once selected, we press the delete key and the monster is deleted. We can undo this operation with the usual editor keys. When a tile is selected in the editor, the properties window will show the name of the selected tile and if using the editor accessibly, the editor will output the name of the item accessibly as well. The screenshot below shows what the scene editor looks like visually when the monster is highlighted before deleting it.

This screenshot shows a grid with a water tile and a red mouth monster at 0,0 both from the perspective of the grid and raw pixels. Pressing escape sets us back to the default cursor if we are entering an item and then pressing enter selects an item. If there are multiple items in a particular cell, pressing tab traverses between them. In this case, the properties window is open, highlighting that we have the red mouth monster selected.

Adding and Deleting the With the Mouse

While we can use the keyboard to select and use items within the scene editor, we can also use the mouse. Here are several ways in which we can interact with the scene editor in this way. First, if we already have items inside the scene editor, clicking on them creates a selection. If there are multiple items at the same grid coordinates, the one nearest the camera is selected and all are placed into a filterable list. This allows us to use the tab key to select which item we want selected. This is just like interacting with the scene editor from the keyboard.

Second, once we have an item selected, we can drag it to any new grid square. When we do this, our item automatically snaps to a new grid position. For times when we need to place an item in between squares, the properties window can set an x, y, z coordinate exactly. This provides a straightforward mechanism to snap items to similar positions for lining them up, while also allowing us to change the positions if we wish.

In terms of the Palette, a third way we can interact with the scene is to paint. Double clicking a Palette item indicates we want to paint it everywhere we drag. For example, we can double click a water tile and then drag over the grid, placing water tiles in each location. Dragging in this way places only one item in each spot. Finally, we can drag and drop single items from the Palette to the scene.

Next Tutorial

In the next tutorial, we will discuss Introduction to Scene Properties., which describes scene properties in Quorum Studio..