tutorial - earok/scorpion-editor-demos GitHub Wiki
In this lesson, we're going to make a game inspired by the classic platformer Alex Kidd in Miracle World, featuring art from Surt on OpenGameArt.
Make sure you're fully set up for Scorpion Development and then we can begin.
We strongly recommend that you use the stable branch (Scorpion Engine 2024.2), and that you already have an emulator selected and ready to go.
- Our first project is going to be called "MonkeyLad". Create a folder with this name.
- Open the Scorpion Editor
- Select "New Scorpion Project"
- Save "project.sproject" into that folder
Optional: Up the top right, where it says "Platform - Amiga OCS", click this to access a drop down. You can use this to change to another platform, which you will need to do if you plan to target the Mega Drive or NeoGeo systems.
Alternatively, if you intend to target Amiga floppy disks rather than an Amiga hard drive, you can select a trackdisk platform.
We're done configuring our project.
Panels are static images that have a wide variety of uses, such as -
- Title screens.
- Game HUDs and UIs.
- Score tables.
- Menu systems.
- Dialogue.
- Parallax backgrounds.
We're going to start with a simple, non-interactive title screen for our game.
- Create a folder called Panels in the project folder.
- Right click the image below, and save into the Panels folder.
- In the Scorpion Editor, select Panels.
- Click the + button at the top left.
- It will prompt you to select an image - choose the image that you just saved.
- In that same folder, save the panel as titlescreen.panel.
- AMIGA: Change "5 / 32 colors" to "4 / 16 colors" just to save that little bit of memory.
- EXTRA CREDIT: Click "Edit Panel Image" near the top right, and put your own name on the title screen. This is your first Scorpion Game, so it might be a good idea to make this distinct from everyone else following this tutorial - but please make sure that your image editor will allow you to save the image with the original palette, otherwise there may be issues displaying this in game.
We now have our first panel in our project.
Logic in Scorpion runs in "codeblocks", which are essentially groups of instructions that execute in a linear order. Very much the same as traditional code, but all configured through drop down menus so there's no need to learn syntax.
We want to load our panel, and display it in the game.
- Click the code tab.
- Select the startup codeblock (this may be selected already).
- Click the + symbol in the middle pane (next to (B)lank).
- Since we want to display a panel, choose the "Display" category.
- Next choose the "Panel" command.
- On the right pane, click the down arrow next to Panel (just underneath where it says "disabled")
- Your only options should be none and titlescreen. Select titlescreen.
- The command in the middle of the screen should say:
1 Load and display titlescreen (unload level)
- Click the Project tab.
- Run in our desired emulator. For example, for WinUAE, click the button near the bottom right that says "Run in WINUAE".
- Scorpion may ask where our emulator is. Make sure to browse to where your emulator is installed, and select the exe.
- Scorpion Engine should run in your emulator, first showing the splash screen, and then showing your panel.
Congratulations, you're running your first Scorpion project.
Classic 8 and 16 bit systems were incapable of displaying all of the colors that the eye can see, so palettes were used to contain a small number of colors. Certain early systems such as the C64 had a hard coded palette, but for Scorpion Engine we can choose what colors we want to show.
We didn't need to worry about a palette for the panel, because the indexed PNGs for panels contain their own palette. But for the core game actors and levels, we do need a central project palette.
- Right click the image below and save it into the project folder, overwriting the palette for your project (which will be named amiga_ocs.palette.png for the default Amiga system, or have a similar name for other systems).
- Go back to the Scorpion Editor, and the project tab. You should see the selection of colors has changed from what it was previously.
A tileset is a collection of tiles used to create a level background. Tiles are static and fixed in place, and can be solid or not.
We can't create a level until we have at least one tileset, so we're going to do this first.
- Create a folder in the project called Maps.
- Right click the image below, and save into your new Maps folder.
- Go back to the Scorpion Editor, click the Maps tab.
- Half way down on the left plane, you should see a + button next to tilesets. Click that.
- Select the image that you just saved.
- In that same maps folder, save this tileset as tileset.tileset.tsx.
We have our first tileset. But we need to define which of the tiles in our tileset is solid.
- Click "Edit Tileset" in the right pane. This should open the Tiled editor - if it does not, you may need to install Tiled, or associate it with the .tsx file type.
- Select every tile that looks solid, but make sure not to select empty sky or bush tiles. You can drag the mouse to select a range, and then press CTRL+drag in order to select an additional range without unselecting your current one.
- Click "IsSolid" in the pane on the left.
- Click File->Save.
We now not only have a tileset we can use in a level, but a tileset with solid tiles that the player can walk on, or block the player.
- Close the tiled editor.
A level (interchangably known as a map) is what will contain our gameplay content. It represents an interactive area within our game.
We don't have the logic or gameplay actors required for interactive gameplay yet, but we can at least start painting a level.
- Select the Map tab.
- Click the + on the top of the left pane next to Maps.
- Select your tileset.
- Save in the maps folder as level01.
- On the right pane, click the Edit Map button.
- The map should now open in Tiled.
- Make sure you have the map layer selected in the right pane.
- Make sure you have the tileset called "tileset" selected in the right pane.
- Click tiles in the tileset, and then click on the map to draw. Draw a level! Go wild. Don't copy this, just draw something that looks like it could be a level in a game. Make sure you have at least some tiles in the top left corner.
- Click save when you're done.
Your first level is ready to be viewed in game.
- Close the Tiled editor.
- Go back to the Code tab.
- Select the first line of the startup codeblock.
- Make sure "Wait for Fire Button" is ticked.
- Insert a new line by pressing + at the top of the middle pane.
- Select the level category.
- Select the level command.
- On the right pane where it says level: none, click the down arrow and select level01.
The codeblock should now read
1 Load and display panel titlescreen then wait for fire hit (unload level)
2 Load Level level01 (Auto Fade In)
- Go to the Project tab.
- Run the game in your emulator again.
- Wait for the title screen to load.
- Press the fire button to dismiss the title screen (you may need to review emulator docs or settings if you don't know what this is).
- You should now see the initial working of your level in the emulator screen.