Monthly Archives: July 2020

WebShipBattleChess Prototype: Part 1

Quick note about motivation and actually getting started and finishing your game. If you find yourself just not working on your game or having trouble getting started, you are probably trying to build something that is too far outside your skill set or with a tool you are not familiar enough with.

Tricks to try:

  1. To get started, follow a basic tutorial to get the boilerplate code of your game setup.
  2. Scope the complexity down even further, even if it is already pretty simple.
  3. Use boxes, circles, rectangles or other basic shapes as placeholder art.
  4. To finalize your game, polish one area at a time. Just like cleaning a house you don’t do everything at once. You clean just the floor or you clean just one room.
  5. To add complexity, do it step by step. Don’t try to add to many things at once and test things as you go.

As a practical example, I was having trouble getting myself started on this game. Part of the problem was trying to make it too complex to start even though it is only a sub game of a even more complex idea.

The original idea was to make the game network multiplayer from the start with a python server and SocketIO. But writing the authentication, login, etc. was like a wall that I just did not want to deal with right now.

Once I realized this I changed the scope. Right now I am working on just getting the client working as a local multiplayer with no backend server and no authentication. A lot simpler which means I got started and made progress. The progress has me feeling good and more motivated to add more things.

To start with I found a nice set of boilerplate from https://phasergames.com which let me put the skeleton of a PhaserJS game in place and start adding features.

The first thing I added was a single scene with an image in it.

class SceneMain extends Phaser.Scene {
constructor() {
  super("SceneMain");
}

preload() {
  this.load.image("light_freighter", "images/light_freighter.svg");
}

create() {
  this.add.image(100, 100, "light_freighter");
}
}

For a nice free tool to make quick placeholder images, you can download https://inkscape.org

Keep getting wiser, stronger, and better.