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.

Lesson 1: Our first project

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.

Image of the Scorpion Editor

Lesson 2: Our first panel

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.

Image of Monkeylad title

  • 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.

Image of Scorpion Editor

Lesson 3: Our first code

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.

Image of WinUAE running Scorpion Engine

Lesson 4: Our first palette

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).

Image of Scorpion Engine palette

  • Go back to the Scorpion Editor, and the project tab. You should see the selection of colors has changed from what it was previously.

Image of Scorpion Editor

Lesson 5: Our first tileset

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.

Image of Scorpion Engine tileset

  • 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.

Image of Scorpion Editor

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.

Image of Scorpion Editor

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.

Lesson 6: Our first level

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.

Image of Tiled Editor

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.

Image of WinUAE

Lesson 7: Our first animation

Animations are needed to render our game objects, such as players and projectiles and enemies, on the screen.

  • Create a folder in your project called "animations" and a subfolder within called "player"
  • Save each of the four images below into that folder.
  • walk1
  • walk2
  • walk3
  • walk4
  • Go back into the Scorpion Editor and select the animations tab.
  • Click the + at the top left, next to animations
  • Save monkeylad_walk_r.animstrip into the animations/player folder. Note that the animation name is important, especially the "_r" which indicates this is a right facing animation (this means Scorpion will generate the left facing animation for you).
  • Select the animation in the left pane.
  • In the second left pane, under images, you should see the four images you downloaded. Click on each of them in turn to add them as animation frames.
  • Click the play icon in the top left of the blue area. You should see Monkey Lad walking.
  • Click it again to stop. Feel free to experiment with the frame delay if you want the animation to run faster or slower. Also, it's typical for frames in a platformer animation to be aligned like so, as though the red line is the floor (X-8 Y-24), so I would recommend doing that for all four frames.

Image of Scorpion

You've now successfully created your first animation. We'll need to make more animations in future, so feel free to refer back to this tutorial if you get stuck.

Lesson 8: Our first actor

Actors are our game objects in the world. They typically represent the player, as well as the player's opponents, but they can sometimes be used for large background elements.

  • Create these one frame animations and make sure they're aligned with your walk cycle. Refer to the previous tutorial if you've forgotten how to do this.
Path Frame
animations/player/monkeylad_idle_r.animstrip idle
animations/player/monkeylad_jump_r.animstrip jump
  • Create a folder in your project called actors.
  • Select the actors tab.
  • Click +at the top of the left plane.
  • Select monkeylad_idle_l as your animation.
  • Save as monkeylad.actor in the actors folder.
  • Drag the actor down so his feet align with the bottom of the checkerboard (origin x=8 origin y=16). This allows Monkeylad to be spawned aligned to the tile.
  • Click "show collbox" and reposition the box so the actor is covered. This is in order to make sure that the player can correctly collide with walls and enemies.
  • Click "player" to indicate this actor is a player.
  • At this point, the editor should look like that below.

Image of Scorpion Editor

  • Click CPU in the right pane, select Control Platform Maryo (this particular control style is a very satisfying one for most platformers, but do feel free to come back here and experiment).

  • Underneath move animations, set the six exactly like this:

  • ↗ monkeylad_jump_r

  • → monkeylad_walk_r

  • ↘ monkeylad_jump_r

  • ↙ monkeylad_jump_l

  • ← Left: monkeylad_walk_l

  • ↖ Up Left: monkeylad_jump_r

  • Set Jump Speed to 4

  • Set Max Fall Speed to 4

  • Set Left Speed to 2

  • Set Right Speed to 2

  • Set Jump Boost to 0.1

  • Set Gravity to 0.2

  • The actor screen should now look like this

Image of Scorpion Editor

In future, feel free to experiment here to get the exact jump curve you want. The red cross controls the highest possible jump if the jump button is held, the green cross controls the lowest possible jump if the jump button is tapped.

Now we have an actor we can use, let's put the actor in the map.

  • Go to the maps tab
  • Select level01 on the left pane
  • Click edit map on the right pane
  • Click the actors layer in tiled on the upper right pane
  • Click the actors tileset in tiled on the lower right pane
  • Click the icon of the player in your tileset
  • Put your player somewhere on the map that makes sense to you as a starting position
  • Click save
  • The tiled editor should now look something like this

Image of Tiled Editor

  • Close tiled and go back to the project tab
  • Run in your emulator of choice
  • You should now be able to run and jump around the level

Image of Scorpion Engine game

⚠️ **GitHub.com Fallback** ⚠️