ExcaliburJS Project Template

This repo is ideal for new ExcaliburJS projects using TypeScript and Vite.

Read a full ExcaliburJS Project Template Medium article about this repo.

Table of Contents

1. Getting Started
2. Project Overview
3. Project Details
4. Resources
5. Credits

Getting Started

Play Project

1. See game at SamuelAsherRivello.github.io/excaliburjs-project-template/index.html
2. See docs at SamuelAsherRivello.github.io/excaliburjs-project-template/documentation/index.html
3. Enjoy!

Build Project

1. Download this repo (_.zip or _.git)
2. Open the ExcaliburJS folder in the command line:
3. Install dependencies:
   • Run npm install to download and install dependencies.
4. Build the project:
   • Run npm run client-build to build the project.
5. Run the project:
   • Run npm run client-start to launch a server to localhost. This serves the development build and hot-reloads on changes within the src.
6. Play the game at localhost:3000
7. Open the ExcaliburJS folder in Visual Studio Code or your favorite editor
8. Do your game development
9. Optional: When you add/update files within the ExcaliburJS folder, you may need to repeat step 4.
10. Optional: Host your project online and share the link with friends!
11. Enjoy!

More Commands

You can run these terminal commands during your workflows.

Command	Description	Builds?	Runs?	Tests?	Watches?
npm install	Required: Download and install dependencies	❌	❌	❌	❌
npm run client-build	Required: Build app	✅	❌	❌	❌
npm run client-start	Required: Run app on localhost	❌	✅	❌	✅
npm run tests-start	Optional: Run unit tests	❌	❌	✅	❌
npm run tests-start-watch	Optional: Run unit tests in watch mode	❌	❌	✅	✅

Project Overview

This repo demonstrates best practices for combining HTML5 technologies for game development in the browser using ExcaliburJS. Use cases for this repo include light-weight prototypes, educational projects, and browser-based game development.

Screenshots

Structure

Documentation

• ReadMe.md - The primary documentation for this repo
• ExcaliburJS/documentation/ - More info specific to the project

Configuration

• Game Engine - ExcaliburJS is a 2D game engine for TypeScript

Structure

• ExcaliburJS - Main project folder
• ExcaliburJS/index.html - Main HTML5 file
• ExcaliburJS/src/assets/ - User-facing game assets
• ExcaliburJS/src/scripts/tests/ - Add unit testing files here
• ExcaliburJS/src/scripts/client/index.ts - Main TS file for game logic. Do your work here :)

Dependencies

• ExcaliburJS/package.json - Lists project dependencies and scripts. When you run npm install it installs whatever is here

Project Details

Editor Tooling

Name	Description	Runtime?	Edit Time?
Visual Studio Code	Source code editor	❌	✅
ESLint extension	VS Code extension for linting JavaScript/TS	❌	✅
Error Lens extension	Highlights errors and warnings in VS Code	❌	✅

Code Packages (Partial List)

Name	Description	Runtime?	Edit Time?
ExcaliburJS	ExcaliburJS: 2D game engine	✅	❌
Vite	Bundles TypeScript files	❌	✅
Typescript	TypeScript compiler	❌	✅
Eslint	Makes your TypeScript pretty	❌	✅
Vitest	Unit testing for TypeScript	❌	✅

Resources

Here are some resources which may be helpful with HTML5 game projects using ExcaliburJS:

• ExcaliburJS Documentation
• ExcaliburJS API Reference
• ExcaliburJS Samples

Credits

Created By

• Samuel Asher Rivello
• Over 25 years XP with game development (2024)
• Over 11 years XP with Unity (2024)

Contact

• Twitter - @srivello
• Git - Github.com/SamuelAsherRivello
• Resume & Portfolio - SamuelAsherRivello.com
• LinkedIn - Linkedin.com/in/SamuelAsherRivello <--- Say Hello! :)

License

Provided as-is under MIT License | Copyright © 2024 Rivello Multimedia Consulting, LLC