Q ‐ Layer Editing - Lavesiime/lavesiime.github.io GitHub Wiki

In the Retro Engine, 16 pixel by 16 pixel "tiles" are constructed together to build up 128 pixel by 128 pixel "chunks." From there, these "chunks" are then pieced together to construct the layout of a stage. This page said placing of chunks - for information on how to construct chunks themselves, refer to the (Art Editing page) [page doesn't exist yet, sorry lol].

Example Level Info
Game: Sonic 1
Stage: Green Hill Zone Act 1

Layout Editing is done from within the Foreground Tab and Background Tab in SonLVL-RSDK. Although each tab has a handful of unique properties to it, layout editing is generally similar between the two tabs. Namely, there is a singular foreground layer which contains objects, while there are 8 separate background layers, which don't hold objects but have parallax data instead. The foreground layer is unique to the current act opened, while the 8 background layers are shared between all stages in the current stage folder. Beyond this, editing between the two tabs is largely identical.

For more information on editing the objects within the foreground, see Object Editing. Alternatively, for information regarding editing the scrolling data in the backgrounds, see Parallax Editing.

Foreground/Background Tab Overview

The layout of the Foreground and Background tabs is fairly simple. It is split into three main sections:

  • The Layer Toolbar, located at the top of the tab, holds some basic controls for the current layer.
  • The Chunk(/Layout Section) List, on the right side of the tab, displays a list of all 512 chunks in the current stage folder. By default, the list is two chunks wide, although it can be resized to fit more or less chunks if desired.
  • The main level view, which takes up the majority of the tab space, displays a view of the level.

Navigating the Level

SonLVL-RSDK offers multiple ways to scroll around and explore the level. These methods are all consistent between the Objects, Foreground, and Background tabs:

  • Scrollbars Located underneath and to the right of the level view, there are scrollbars that can be used to move the camera. The bottom scrollbar moves the camera horizontally, while the right scrollbar moves the camera vertically. Each scrollbar's range will automatically change with the current layer size.

  • Mouse Scroll Wheel By default, the scroll wheel moves the camera horizontally.

    • Hold Shift to make it move the camera vertically, instead.
    • Hold Ctrl to increase scroll speed.

  • Middle Mouse Button Click and hold the middle mouse button (scroll wheel), and then drag the mouse around to pan the camera freely.

  • Arrow Keys The arrow keys move the camera in tile-sized (16-pixel) steps, by default.

    • Hold Shift to move in larger, chunk-sized (128-pixel) steps.
    • Hold Ctrl to jump to the edge of the level in the pressed direction.

[!TIP] Try each navigation method and use whichever one feels the best for you! They all accomplish the same thing, just in different ways!-

Placing Chunks

In order to select a chunk, simply click on the chunk from the chunk list. Alternatively, you can right click any chunk within the level view to select whatever chunk is located there, akin to an "eyedropper tool" in image editors. From there, to place a chunk down, all you have to do is left click a location in the level view. In order to draw a line of chunks, simply click and drag the mouse.

(demo of the above)

Cutting, Copying, and Pasting

Portions of the level layout can be "moved around" through cutting/copying and pasting them. First, select an area by holding the right mouse button down and dragging it around the desired area to copy. From there, right click anywhere in the selected area, and hit either the Cut or Copy button. Copying will leave the existing layout alone and move a duplicate of it to the clipboard, while Cutting will move the selected area to the clipboard and then proceed to clear the selected area of the layout. In the Foreground Tab, if Display Objects is checked, then objects within the area will be copied/cut as well. To paste back into the layout, select the destination area, and right click. There are two different paste options available:

  • Paste Once will paste the copied area a single time, and expand the selection area if required.
  • Paste Repeating will fill the entire selection area with the copied area, repeated as many times necessary to fill the area.

(demo of the above.. how do we wanna do this? that's a lot of text..)

[!TIP] As with standard programs, the keyboard shortcuts CTRL+C, CTRL+V, and CTRL+X work for copying, pasting, and cutting within the selected area, respectively. Also note, copying/cutting from the layout will also copy an image of the selected area into your clipboard! So, after copying a portion of the layout, you can directly paste it into an image editing program or Discord and it'll have whatever you just copied!

Layer Context Menu

In the previous section, you may have noticed several other options available when right clicking a selection.

Layout Sections

Layout Sections are

Layer Toolbar

The Layout Toolbar is located at the top of the Foreground/Background Tabs. As you you may notice, its contents differ minorly between the two tabs.

The shared options are as follows:

  • Show Grid toggles the visibility of the chunk-sized (or 128 pixel by 128 pixel) grid. The keyboard shortcut to toggle this is simply i.
  • Resize allows you to change the size of the current layer. The maximum size is 255 chunks in either dimension.
  • Replace allows you to find and replace all instances of a certain chunk within the current layer.
  • Clear clears out the entirety of the current layer. In the Foreground Tab, this will not affect objects at all. In the Background Tab, all the scrolling data for the layer will be cleared.

In the Foreground Tab:

  • Display Objects will toggle the visibility of objects. The keyboard shortcut to toggle this is simply P.

In the Background Tab:

  • The Layer Dropdown allows you to select the Background layer to edit. The Retro Engine allows each stage folder to have eight background layers total. Once again, note that background layers are shared across the entire stage folder, and are not act-specific.
  • The Duplicate Over dropdown allows you to duplicate the current layer's chunk layout as well as parallax data over to another layer. This will entirely replace whatever was previously on the destination layer.

Scrolling Editing

For Background Layers in particular, you may have noticed an additional Scrolling tab located on the right hand side doesn't appear in the Foreground Tab. Scrolling editing is only for Background layers, as the Foreground layer will simply move along with the camera.