HTML5 — 07 — ExcaliburJS Project Template

3 min readAug 5, 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.

Project Template

The ExcaliburJS Project Template comes with a host of features designed to streamline your development process. This project template is designed for use with Microsoft’s, free VS Code editor. See “Downloads” below for the GitHub repo link.

If you are a full-stack veteran, this project may not meet your needs.
This project template is designed for newbies who want a solid, scalable starting point for new ExcaliburJS projects.

You can open the ExcaliburJS folder and use the included Terminal window for the setup commands listed below.

Editor Environment (File Explorer, Terminal, Code Editor)

Project Structure

The template offers a well-organized project structure, separating concerns and making the codebase easy to navigate. This helps in maintaining and scaling your project as it grows.

EXCALIBURJS
├── documentation
├── src
│   ├── assets
│   │   ├── audio
│   │   ├── fonts
│   │   └── images
│   ├── scripts
│   │   ├── client
│   │   │    └── index.ts
│   │   └── tests
│   └── styles
├── index.html
└── package.json

Npm Support

Npm is the world’s largest software registry library, with over 800,000 code packages available for use. The libraries you need are already listed within the project.

Start by installing all npm dependencies;

npm run install

TypeScript Support

Leverage the power of TypeScript to write robust and maintainable code. The template is fully set up with TypeScript, enabling static type checking and improved code quality.

Convert your dev code into build code;

npm run client-build

Vite Configuration

A custom Vite configuration is included to handle bundling, asset management, and development server setup. Vite is one of many great products available in the industry for bundling. The included setup ensures a seamless development experience with hot module replacement and efficient builds.

Input

See your progress running in the browser;

npm run client-start

Output

Runtime Environment (Game, Dev Tools, Console)

Vitest Configuration

Ensure your game runs smoothly with a pre-configured Vitest. setup using popular tools like Jest. Write unit tests for your game logic to catch bugs early and maintain a high-quality codebase.

Input

Run the suite of all unit tests;

npm run tests-start

Output

Testing Environment (Classes, Methods, & Results)

Conclusion

The ExcaliburJS Project Template is an invaluable resource for any developer looking to create HTML5 games with ExcaliburJS.

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!