MerixStudio

Case study

Skytte

Learn more about Skytte, a 2D shooter game right in your browser. Implemented using the Canvas element and a ton (literally!) of JavaScript. Skytte was created with our ever-lasting love for open-source and modern front-end technologies. The idea was to explore new HTML5/Canvas capabilities that enbale us to build an entirely new suite of interactive websites and applications. 100% coded in Poland, by front-end development shop Merixstudio:

Merix Studio

Powered by

Type of enemies

Available Weapons

Different Power-ups

3 Levels

HUD (head-up display)

Tutorial

In the top left corner we've displayed: total score (green), score multiplier (red) and current damage multiplier (orange)

Ultimate goal of the game is to get highest possible score.

Red "life bar" and heart symbol inform about ship's pefrormance.

We've spread life extending power-ups among all threee levels.

A shield status bar, which is a renewable anti-bullet protection.

Currently selected weapon. Player can switch between 6 available weapons.

Each weapon can be upgraded. Green colour means the weapon wasn't updgraded and is relatively weak while Orange and Red say the weapon is likely to cause more damage.

Weapon upgrade is possible thanks to power-ups thrown away within all the levels

Expect enemies mass attack coming out from here!

Tip: bullet hell is the best way to welcome your enemies.

The game supposed to be bug-free... well, it isn't ;)

Sketches & Illustrations

Rough sketched helped us to create basic game concept. A paper, pen and white board were the tools we used to outline initial game environment, enemies, logic and technological constraints.

Inheritance

  • Skytte
    • Beam
    • BoundingBox
    • Polygon
    • Sprite
      • Spritesheet
      • SpriteList
      • Font
    • Game
    • Level
    • Entity
      • BackgroundEntity
      • FogEntity
      • LabelEntity
      • PowerUpEntity
      • SpriteEntity
      • hud.Weapon
      • hud.HealthBar
      • hud.Score
      • hud.PowerUp
      • Particle
      • Emitter
        • MushroomEmitter
        • SmokeEmitter
      • ShipEntity
        • CartEntity
        • MineEntity
        • SwarmEntity
        • TeleporterEntity
        • TurretEntity
      • RailEntity
      • Projectile
        • Explosion
        • ElectroProjectile
        • FlakProjectile
        • PlasmaProjectile
        • RayProjectile
        • RocketProjectile
        • StormProjectile
      • Weapon
        • ElectroWeapon
        • FlakWeapon
        • LaserWeapon
        • PlasmaWeapon
        • RayWeapon
        • RocketsWeapon
        • StormWeapon

We've used prototypal inheritance to reuse common code fragments, share class properties and methods between game objects.

The main Entity class has been inherited 35 times!

Special effects

We developed fairly simple particle generator to emulate flame coming from engine, explosions, fire and other blast effects.

In order to create a laser beam effect and "Electro" weapon we've developed and algorithm counting and transforming linear distance between ship and the enemy. In other words, we measured the distance between two objects, found the middle point and moved it randomly alongside the section. We repeat this action for every new section created.

To make explosions more realistic we implemented screen and "interface shaking" feature. Try it out by clicking button below.

Shake it!

Collision detection

Each game object is made out of rectangle (AABB) and polygon. We used easy to implement and efficient algorithm (known in geometry as "hyperplane separation theorem") to detect collisions between these objects.

Bitmap fonts

We decided to implement bitmap fonts rather than vector ones. Vector fonts had its downsides like lower rendering efficiency, cross-browser inconsistency and impossibility of applying few colours to one character. In result, we wrote a code that renders bitmap fonts straight from PNG files.

Facts & Numbers

Play Skytte