Skip to main content

What RetroGami does now

RetroGami is a complete game dev tool for pixel art platformers, however it’s not actually complete yet. ;) With the IDE (the web based visual editor) you can draw arbitrarily sized images (called canvases), tiles and tile sheets, maps for your levels, and create actors (players and items and enemies) that go into your maps. You can also test out maps in the GUI and add simple particle effects.

What RetroGami cannot do today

RetroGami does not currently have a way to add behavior to your actors, keep score, navigate levels, etc. To add this more complex behavior you will need to export your game data and use the game template to add Javascript logic. This template also packages up the game up as an desktop executable.

General Usage

A document has a doc tree on the left side of the screen and a property sheet on the right to edit properties of whatever object is selected. The left and right panes can be hidden with the triangle buttons at the bottom status bar.

The middle part of the UI holds the editor for whatever object is selected.

Documents can be saved and loaded from the browser’s internal storage. They can also be exported and imported as JSON files, or PNG files with embedded JSON.

Vocabulary

  • tile size the size of a single tile. Set for the whole document.
  • palette: the set of colors. Set for the whole document.
  • camera the viewport of the game and how scrolling tracks the player
  • tile a single image used as part of a tile map. Usually 8x8 or 16x16 pixels.
  • sheet a collection of tiles, often used together.
  • canvas: an arbitrary sized image with layers
  • actor something in the game which has behavior, such as the player, enemies, and items. Actors are drawn with canvases.
  • font: A custom bitmap font. Can be used in an image canvas

Sheets

how to make tile sheet​

Go to the sheets section of the left document tree. Click on the … button and choose ‘add sheet’. When a sheet is selected in the tree you will see the sheet editor. You can add and delete tiles using the buttons. You can edit a single tile by selecting it in the tile list. You can use the scratch area to try out your tiles in a small map.

Maps

A map is the main unit of a game. You can think of it as a level or area of your game. Within the map you can add tile layers and actor layers. This is the main part of your game.

Create a Map​

Go to the maps section of the left document tree. Click on the … button and choose ‘add map’ to create a new map. When a map is selected in the tree you will see the map editor. A map contains layers of different types.

Delete a Map​

Right click on the map in the document tree. Choose the delete map action.

Map Layers​

Maps have two kinds of layers. A tile map layer is used for terrain and backgrounds. An actor layer holds the player, enemies, and items. Layers can be set to blocking or not depending on whether they are used for collision detection. Layers also have a scroll speed, where 100% is the speed of the player. This lets you create background and foreground layers that scroll at different speeds to give the illusion of depth.

Map Tile Layer​

To draw in a tile layer, add and select a new tile map layer, then select a tile from one of the tile sheets to draw with. Tile layers are 20x10 tiles by default. You can resize them with the resize button the layer list.

Map Actor Layer​

To put actors into an actor layer, select the layer in the layer list, choose which actor to add from the layer tools dropdown, then click the ‘add actor’ button. Once added actors can be selected and moved around.

Play Testing

To test your game go to the map you want to test and click the play button in the toolbar. This will open a dialog with your game and some propsheets to edit the camera and physics live.

Sharing

You can share your game with your teammates using the share button in the toolbar. This will upload a copy of your game to RetroGami.dev and give you back a URL that you can share. This URL contains a runnable version of your game with 'ALPHA' written across the top.

Packaging

Fonts

Fonts are in the font section of the document tree. Fonts can be used to write text in a canvas or at runtime to display text. A font consists of multiple glyphs. Each glyph has a code point indicating what letter it represents (ex: 65 == A). You can add additional glyphs with the add glyph button, and re-sort them by code point with the sort button.

Assets and other things

Assets is an additional section of the document tree to hold other forms of content. Currently, it supports a particle effect and a simple sound effect. In the future there will be more asset types, such as audio and video.

Camera

The camera represents how big an area of a map will be drawn on the screen, and the focus area that will be used to scroll the map around the player.
You can edit the camera in the camera editor or while play testing.

Physics

The default physics is called 'standard'. It contains the various constants for calculating platformer physics (gravity, jump power, friction, etc). You can edit the physics in its regular prop sheet or while play testing.