DEV Community

Cover image for Alien Waves
Justin Young for Excalibur

Posted on

Alien Waves

This is a submission for the Web Game Challenge, Build a Game: Alien Edition

What I Built

This is a tower defense game based on the theme of Aliens. Your ship is stranded on an unknown alien planet and you must defend yourself from the waves of aliens that attack your ship!

You can click or touch the playing field to place defense turrets on the level to deal with the waves of Aliens that spawn.

Each level will increase in difficulty, so you really need to be wise regarding how you balance your wave funds between cheap turrets and the expensive turrets.

There are no AI generated assets in this game.

Demo

Web Game on Itch.io

Journey

This game is made using Excalibur.js, a free and open source Typescript 2d game engine. Its a solo developed game. I am a member of the Excalibur community, and I have contributed to the Excalibur.js project.

Excalibur Discord Invite

The GitHub Project is located here: GitHub Repo

Techniques implemented in this project:

Finite State Machines: This uses a FSM library I wrote to use with Excalibur.js. A state machine was used for:

  • Wave Management
  • Unit animations

Screen Elements: This is a special type of entity in Excalibur.js. Usually, I use a UI-binding library to place a DOM layer over my game canvas. This is my first usage of the built-in UI entities in Excalibur.js.

9-slice UI component: I created a reusable Graphic for Excalibur.js to create 'panels' based on a base sprite. This allows for a standard sprite tile to be 'split' into 9 sections and either stretched or tiled appropriate to create custom panels.

Shaders: Not a massive implementation of shaders, but I use a base texture sprite for the laser blasts and then use a tinting shader to distinguish between each type of blast.

Re-usable components: I was pretty happy with the Health Bar that i created as a component for each entity, and after a few iterations, i was able to make it configurable upon each units Initialization. This saved a lot of time.

Signals: Taking inspiration from Godot's Signals, I created a custom signals library that is essentially a pub/sub system to create a event bus of custom JS events. An example of this is the GameOver signal, which each entity subscribes to, and when the game is over, that signal clears all existing entities from the board.

Roadmapped Development

Being a 10 day competition, the original intention was to hit a MVP level submission, which I was able to accomplish about 7-8 days into it. Over past 2 days of competition, I've been adding additional content to the game. This included the development of a 2nd turret, and a 2nd Enemy type. Other ideas for future features include:

  • Power ups dropped by enemies
  • More enemies, more turrets
  • Add options screen to control music and SFX better

Asset Attributions

The alien sprites were created with the Kenney's Creature Mixer tool.

The blast sprites from the turrets use particle sprites from Kenney's Particle Pack.

The ship is from Kenney's Ship Mixer tool.

The turrets I drew in Aseprite.

Sound Effects are generated with the Excalibur JSFXR plugin which I created.

Background Music is using a Chiptune generator I created from a fork of Vitling's Autotracker

Level texture was used from Itch.io texture pack Texture Pack from user FlakDeau19... special thanks to them for their VERY permission license.

About ExcaliburJS

ExcaliburJS

Small Plug...

ExcaliburJS is a friendly, TypeScript 2D game engine that can produce games for the web. It is free and open source (FOSS), well documented, and has a growing, healthy community of gamedevs working with it and supporting each other. There is a great discord channel for it JOIN HERE, for questions and inquiries. Check it out!!!

Top comments (0)