A Tour of the AppGameKit Studio Editor

The heart of AppGameKit Studio (AGK:S from this point on) is the new editor. Let’s start off with a quick tour before we create our first project. Here is AGK: Studio:

AGK Editor

The screen is dominated by the central area that serves a double purpose. It’s used both for laying out levels, as well as for editing code, depending on which option is selected in the tabs across the top. In the design area, you’ve got the option of mimicking the layouts of several popular mobile devices.

AppGameKit Layout Options

You have the ability to specify your own dimensions if you wish. If you look at the top right-hand corner of the design area, you will notice 4 small icons.

AppGameKit small icons

In addition, to undo and redo, the play icon will simulate your game running directly in the editor. Generated scenes are ultimately code. You can switch back and forth between design and code by switching between 2D and Script. Below you can see the code generated by the scene. When you select an agc code file the code editor will open automatically.

AppGameKit Code Editor

The code editor gives you the features you’d expect such as contextual help, breakpoints, syntax highlighting, and code completion.

On the left-hand side of the screen is the Project tab.

AppGameKit Project Tab

All projects will be shown, and you can freely switch between projects as simple as selecting a file within that project (this will open all active tabs within that project). You can also switch between projects using the Current Project tab.

You can move or rearrange any tab in the editor by dragging the tab, then dropping it anywhere in the editor.

AppGameKit rearrange tabs in editor

You can also float any tab making multiple monitors easy to support. You can also toggle visibility of any window by clicking the X icon, or selecting View->Windows-> then select Hide or Show for each of the available tabs.

AppGameKit toggle visibility

Next up, when you have the scene in 2D mode, you will have the Scene Manager window:

AppGameKit Scene Manager

This has a list of thumbnails of entities in your scene and can be used as a quick-select palette for painting objects in the scene. There are also settings here for controlling the scene’s physics properties as well as buttons for quickly creating text, text boxes, and on-screen buttons.

Across the bottom of the screen, we have 3 panels dedicated to managing and consuming media in your game.

AppGameKit managing and consuming media

Assets Browser can point you to different folders of assets, enabling you to re-use assets across projects. The media files area is where you can browse the assets, either from libraries in the Asset Browser or selecting folders in the Project panel. You can filter down to just show 3D models, Textures, Sounds, Shaders, and code files. On the right-hand side is a preview of the selected asset from the Media Files tab.

On the right-hand side, we have two important panels. One is straight forward enough, it’s an inline help viewer. For example, in the script editor, select a function and hit F1 and it will be shown in the Help panel.

AppGameKit Help Panel

You can also navigate through all of the documentation by clicking Home. AppGameKit is very well documented.

The Properties panel displays properties of the selected scene object when editing.

AppGameKit Properties Panel

When you have a sprite selected in the Scene Manager in paint/placement mode, you instead get Layer and snapping details in the Properties window.

AppGameKit Layer and Snapping Details

You’ve also got control over the coloring of the editor via the View->Change Color Scheme menu option. The editor tab and IDE are set separately.

AppGameKit Change Color Scheme

Finally, you can run/debug or remotely run your game using these buttons.

AppGameKit debug

We will look at broadcasting shortly, it’s quite powerful.

Scroll to Top