SpawnHero RPG:
Programming Setup

Mac OS Set Up

When you are done with your prototype, it is time to set up your programming work environment. The instructions below are for a Mac OS. If you have a different operating system, the setup will be slightly different.

Download Tools & Files

  1. Download and install Google Chrome.
  2. Download and install SublimeText3 (the trial is free).
  3. Download the Project Starter Files.

Open Project in SublimeText3

  1. Double-click the zipped file to unzip it.
  2. Move the unzipped folder to your Desktop.
  3. (Mac) Drag your project folder onto the SublimeText icon in the dock.
    (PC) Open SublimeText and open the project from the Menu. SublimeText in Dock
  4. Your entire folder should open with a sidebar that shows all the project files. If you don’t see a sidebar with files, go to View > Sidebar > Show Sidebar. SublimeText
  5. SpawnHero RPG Key Files:
    • /SpawnHeroRPG This is your main project directory.
      • /assets This directory holds all the graphics and sound effects.
      • /flixel This directory holds all the game engine files.
      • /lib This directory holds more game engine files.
      • game.js This is the file where create your game level.
      • index.html This is the file your game loads into.
      • SpawnHeroRPG.js This is the game code (you don't have to touch this).
  6. Start a Server:

    The files require a local server in order to run the game.

    • Search for the Terminal App with finder (the magnifying glass in the upper right corner of the computer). Open the App.
    • Drag your Spawn-Hero-RPG project folder onto the open Terminal window. Then hit Enter. This will navigate directly to the folder containing your game files. Terminal
    • Type the following command into the Terminal window: python -m SimpleHTTPServer
    • Hit Enter. If you did it correctly, after a few seconds, you should see something similar to this: Simple Server
  7. To View the Game in Chrome:
    • Open a new Google Chrome browser.
    • Type the following url in the address bar: http://localhost:8000
    • You will see the game titlescreen.

Programming Workflow

Now you are ready to start translating your prototype into code. Remember:

  1. Test Code Changes Often:
    • Save the code you typed. Saved vs. Unsaved Tab
    • Switch to your Google Chrome browser that contains your game.
    • Refresh the page by hitting Command-R

  2. Use Chrome's "Inspect Element" to find bugs:
    • In Chrome, right-click (Mac: Control-Click) the game page and choose Inspect from the dropdown. Inspect
    • Click Console in the nav. If there any errors in your code if will show along with hints to the line number of the error. Console

Start Programming

All game level code should be written in the game.js file. In SublimeText3, click on the game.js file in the sidebar. Refer to the docs to start coding!

Programming Set Up Difficulty

Some technical setup.

Project Resources