/ JavaScript

Planetary - Circular Platformer Concept

Skip to playing the game!

In my last post, I dipped my toes in the water with the Phaser game engine by making a simple game of Snake. I enjoyed using Phaser and decided to further test its capabilities by making something more complex. I've always wanted to make a side-scrolling shooter, but developing the storyline, levels, and graphics to do it right isn't something I have time for right now. So I thought, what if I cut corners and just made the level a loop, so you can play infinitely? That gave me the idea for a circular platformer, where you run around the surface of a planet and have to defend against waves of enemies. I'm sure it has been done before, but it seemed interesting enough to start working on. You can see the project on Github.

I began by finding an image for the planet and the player on sites for free clip art. The planet I used is earth, because it's familiar and its likeness is readily available. The player image at this point was just a humanoid placeholder. Since I wanted to use the more advanced capabilities of Phaser, I went with the p2.js physics library, which is one of the full-body physics engines bundled with Phaser. It has many, many options for things like collision, friction, bouncing, complex bounding shapes, acceleration, drag, etc. I would recommend looking at the Phaser P2 physics engine docs if you're interested.

The first iteration of the game was just two physics bodies, the planet and the player. The camera was positioned so that the player was always centered horizontally. The player could run and jump around the world, and the camera would rotate and follow. A screenshot is shown below.

Planetary Prototype V1 Screenshot

At this point I decided that the P2 physics engine was overkill for this sort of game. I learned a lot about how to use it, but I was still getting annoying artifacts like the player sinking into the world a bit before rebounding out. So I took out Phaser's physics and implemented collision detection and response myself.

Another thing I realized at this point was that if there were cities on the planet that the player is trying to defend, they need to be able to see them at all times. I could have implemented a mini-map that showed the player and planet and cities and enemies, but I opted for a different approach. I zoomed out so that you could see the entire planet at once, and stopped the view from rotating with the player. I also added rotating platforms for the player to have something to jump on. A screenshot of this version of the game is shown below.

Planetary Prototype V2 Screenshot

Next I wanted to make the plain white platforms look nicer, and I wanted to add animations to the player's sprite so that its movements more closely resembled running. I did some sketching of the various sprites that I wanted and their poses, then fired up GIMP. Halfway through trying to make a spaceman sprite, I wanted something more suited to making small graphics so I looked online for a pixel art creator. That's how I found Piskel. Piskel gives you layers, frames, a color palette, and spritesheet export tools. I used it to make the spaceman, spaceship, robot, city, and weapon sprites.

Planetary Robot Sprite

I added three cities to the planet that start out with full health, but which will deteriorate and disappear if you let the robots destroy them. I also added spaceships that come down at regular intervals to drop off between 1 and 5 robots. These robots start out in a random direction, clockwise or counterclockwise. They keep walking slowly around the planet (or on the platform they landed on) until they come in contact with a city. They will attack the city until either it is destroyed or you destroy them. When a robot has successfully destroyed a city, it will continue walking in its starting direction until it gets to the next city.

The player has two weapons, a pistol and an assault rifle. The pistol shoots more slowly but does more damage per bullet. The rifle shoots quickly but the bullets do less damage. Both of these weapons have unlimited ammo. On the wishlist is some type of more powerful weapon that randomly drops from space with a limited amount of ammo. Both robots and their spaceships can be killed. When damage is done to an enemy, it will become slightly more transparent so that you can tell how close it is to being destroyed.

Each robot that is dropped onto the planet has slightly more health than the one before it, and is worth slightly more points. Without this, the game would be too easy because you could just defend one city forever from the easily killed starting robots. There are many different mechanics to increasing the difficulty, with this being the easiest one to implement. Something else on the wishlist is having multiple levels, defined by their arrangement of platforms around the planet. Each level would have predefined waves of enemies that would come and attack. Once all of the enemies were defeated, the player could move onto the next level.

Demo

Not mobile friendly.

  • UP - jump
  • DOWN - drop through platforms
  • LEFT - move left
  • RIGHT - move right
  • SPACE - shoot weapon
  • X - change weapon
  • SHIFT - hold down to maintain direction when moving left and right

Fullscreen | Source Code

Robert Fotino

Robert Fotino

I'm a former computer science student at UCLA, and a game developer in my free time. This site is a place for me to write about whatever I happen to be working on.

Read More