MerixStudio

Case study

Skytte

Dzięki temu case study dowiesz się więcej o Skytte, przeglądarkowej grze napisanej w 100% w HTML5/Canvas i JavaScript. Celem gry jest pokazanie (i sprawdzenie) możliwości i potencjału nowych technologii front-end'owych (z naciskiem na JS i Canvas), które mogą mieć zastosowanie w tworzniu coraz bardziej interaktywnych stron internetowych. Autorem gry jest poznańska agencja interaktywna Merixstudio:

Merixstudio

Użyte technologie

Przeciwnicy

Dostępne bronie

"Znajdźki"

3 Poziomy

Interfejs gry

Tutorial

Licznik punktów (zielony), aktualny mnożnik (czerwony) i aktualne kombo punktowe (pomarańczowy).

Celem gry jest zdobycie jak największej ilości punktów.

Aktualna ilość żyć. Po utracie wszystkich żyć gra się kończy.

Dodatkowe życia można czasami znaleźć jako znajdźki w trakcie rozgrywki.

Po prawej wskaźnik zdrowia, którego zbytnie zmniejszenie powoduje utratę życia. Wskaźnik ten powoli odnawia się podczas gry.

Aktualny poziom tarczy. Im wyższy, tym lepsza ochrona przed pociskami przeciwników.

Wybrana broń i jej poziom ulepszenia. Zielony - broń słaba, pomarańczowy - broń ulepszona, czerwony - broń na najwyższym poziomie.

Aby ulepszyć broń należy zebrać w trakcie gry odpowiednią "znajdźkę."

Z tej strony ekranu wyleci horda przeciwników, którą najlepiej zniszczyć, by przetrwać.

Za niszczenie przeciwników są punkty (niespodzianka!).

Pan Mrówek :)

Szkice i projekty

Prace nad grą rozpoczęliśmy od wstępnych szkiców na tablicy, utworzenia specyfikacji oraz badań nad możliwościami technologii.

Dziedziczenie

  • 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

Użyliśmy dziedziczenia prototypowego, by wydzielić wspólne zachowania obiektów w grze do dedykowanych klas.

Główna klasa Entity została odziedziczona w sumie 35 razy!

Efekty graficzne

Napisaliśmy prosty generator cząsteczek, który został użyty do symulowania ognia z silników, eksplozji, czy zarodników grzybowych

Do generowania promienia oraz broni electro posłużył algorytm, polegający na tworzeniu "postrzępionych" odcinków pomiędzy dwoma punktami (statkiem gracza i przeciwnikiem). Rozwiązanie polega na znajdowaniu środka między dwoma punktami i przesuwaniu go o losową odległość. Czynność ta jest powtarzana dla nowopowstałych odcinków.

Na ostatnią chwilę dodaliśmy także trzęsący się ekran (razem z interfejsem!) podczas większych eksplozji.

Wypróbuj!

Kolizje

Obiekty w grze składają się z prostokąta (AABB) i wielokąta wypukłego. Do sprawdzania kolizji pomiędzy wielokątami użyliśmy algorytmu o nazwie Hyperplane separation theorem, który w tej sytuacji okazał się prosty w implementacji i bardzo wydajny

Bitmapowe czcionki

Wektorowe czcionki miały pewne wady w kontekście gry: mniejsza wydajność renderowania, niespójny wygląd pomiędzy przeglądarkami i niemożliwość zastosowania kilku kolorów na jeden znak. Napisaliśmy kod, który renderuje czcionki bitmapowe załadowane z pliku PNG

Statystyki

Zagraj w Skytte!