Html5 — 05 — ExcaliburJS Overview

5 min readAug 2, 2024

Hello! I am Samuel Asher Rivello, a professional game developer with over 20 years of game development experience. This series aims to share my learning journey with HTML5 gaming.

ExcaliburJS is a robust HTML5 game engine written in TypeScript, designed to make 2D game development more accessible and efficient. It provides a rich set of features that simplify the creation of interactive and visually engaging games. By leveraging TypeScript, ExcaliburJS ensures type safety and improved code quality, which can significantly enhance the development experience.

With ExcaliburJS, developers can take advantage of a powerful, extensible API that supports modern game development needs. The engine is designed to be easy to use, offering a range of built-in functionalities such as physics simulation, collision detection, and rendering capabilities. Additionally, ExcaliburJS has a thriving community and extensive documentation, making it easier for developers to get started and find support.

Example

Here is how to create a simple game setup. It shows how to set up a basic HTML structure, load assets, and create interactive game elements such as a rotating square and a static sword image.

Code

The code initializes an ExcaliburJS game engine, loads a sword image, and creates two actors: a rotating square and a sword.

This simple example is just one file.
In the production of a real game you will use many, many files.

The square rotates slowly every frame using the delta time, while the sword remains static. The game engine is then started with the loaded assets.

<!doctype html>


<!-- -------------------- -->
<!-- Basic HTML structure -->
<html>
  <head>
    <title>Excalibur JS</title>


    <!-- ---------------- -->
    <!-- Basic CSS styles -->
    <style>
      body,
      html {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <canvas id="excaliburjs-game-canvas" class="snippet-resized" width="500" height="500"></canvas>


    <!-- ------------------ -->
    <!-- Basic JS scripting -->
    <script type="module">


      // ---------------------------------------
      // Import from ExcaliburJS Library
      import { Engine, Actor, Color, Loader, ImageSource, Vector } from 'https://esm.sh/excalibur@0.29.3';


      // ---------------------------------------
      // Load the sword
      const imageSource = new ImageSource('https://excaliburjs.com/img/ex-logo.png');
      const loader = new Loader([imageSource]);


      // ---------------------------------------
      // Create the game
      const game = new Engine({
        canvasElementId: 'excaliburjs-game-canvas',
        suppressPlayButton: true,
        width: 400,
        height: 400,
      });


      // ---------------------------------------
      // Create black square
      const square = new Actor({
        x: 200,
        y: 200,
        width: 100,
        height: 100,
        color: Color.White,
      });
      game.add(square);


      // Update every frame
      square.on('postupdate', (evt) => {
        square.rotation += 0.0001 * evt.delta; // Adjust rotation speed as needed
      });


      // ---------------------------------------
      // Create sword
      const sword = new Actor({
        x: 200,
        y: 200,
        width: 100,
        height: 100,
      });
      sword.graphics.use(imageSource.toSprite());

      game.add(sword);


      // ---------------------------------------
      // Tween sword
      sword.actions.scaleBy(new Vector(-0.8, -0.8), 2);


      // ---------------------------------------
      // Start the game
      game.start(loader);
    </script>
  </body>
</html>

Result

The result is a canvas element rendered in the browser, displaying a white square that rotates slowly and a sword image positioned next to it. The square’s rotation is smooth and continuous, providing a simple yet effective demonstration of ExcaliburJS’s capabilities for handling animations and asset management.

Advantages

Features

TypeScript: The use of TypeScript allows developers to write cleaner and more maintainable code, benefiting from features like static typing and advanced IDE support.
Robust Features: The engine comes with essential game development tools such as sprites, animations, tilemaps, and input handling, which can speed up the development process.
Extensibility: It enables developers to customize and extend the engine according to their specific needs.
Community: A strong community and comprehensive documentation provide valuable resources for learning and troubleshooting.
Cross-Platform Compatibility: Games built with ExcaliburJS run seamlessly across different devices and platforms, including desktops and mobile devices.

Paradigms

It is absolutely awesome that out-of-the-box you can choose your own programming path with OOP and/or ECS.

This may complicate adoption (e.g. examples will come in two flavors and how to comingle the two may confuse newbies). However, I love that both are supported.

Object-Oriented Programming (OOP): It supports an OOP approach, allowing developers to structure their code using classes and objects. This method promotes reusability, modularity, and ease of maintenance.
Entity-Component-System (ECS): It also supports an ECS approach, which is a design pattern that provides a flexible and efficient way to manage game objects. ECS decouples data (components) from behavior (systems), making it easier to optimize and scale games.

API

The ExcaliburJS API is designed to be intuitive and comprehensive, providing developers with a wide range of functionalities to create 2D games. Here are some of the key strengths of the API:

Clear Documentation: The API documentation is well-organized and easy to navigate, making it simpler for developers to find the information they need.
Comprehensive Functionality: The API covers all aspects of game development, from basic setup and rendering to advanced features like physics and collision detection.
Modularity: The API’s modular structure allows developers to use only the components they need, reducing unnecessary complexity and improving performance.

Drawbacks

While ExcaliburJS has many strengths, there are some areas for improvement that we’ll explore. While it’s been around for years, it’s still pre-1.0 (June 2024), so it’s early days.

> See My ExcaliburJS Critique Article!

It lacks features (and/or related examples) from other Html5 platforms such as UI, filters, and architecture. Some of what ExcaliburJS has is just too early or too lacking.

Stay tuned for a detailed look at the challenges and issues developers might face when working with ExcaliburJS.

Conclusion

In conclusion, ExcaliburJS is a powerful HTML5 game engine that offers a rich set of features and a robust API for 2D game development.

By addressing some shortcomings and adhering to best practices, ExcaliburJS can continue to evolve and provide an even better development experience.

The strengths in TypeScript integration, extensibility, and community support make it a valuable tool for developers looking to create interactive and engaging games.

Resources

🦜 Contact

Samuel Asher Rivello has over 20 years of game dev XP. He is available for remote, contract hire as a game developer and game dev educator.
Contact Sam today to say hi and discuss your projects!