ExcaliburJS Mini Arcade

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

Image 1 - ExcaliburJS Game Engine - HTML5 + WebGL

Table of Contents

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

Getting Started

Play Project

1. Browse to game https://SamuelAsherRivello.github.io/Excaliburjs-mini-arcade ( Temporarily Broken )

2. Browse to docs https://SamuelAsherRivello.github.io/Excaliburjs-mini-arcade/documentation

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-watch 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-watch	Required: Run app on localhost	❌	✅	❌	✅
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.

Image 2 - Editor Environment (File Explorer, Terminal, Code Editor)

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

These may be installed manually by you.

Name	Description	Runtime?	Edit Time?
Google Chrome	Chrome Browser	✅	❌
ExcaliburJS Dev Tools	Chrome Browser Extension: Debug ExcaliburJS	✅	❌
Visual Studio Code	VS Code Editor	❌	✅
ESLint extension	VS Code Editor Extension: Linting JavaScript/TS	❌	✅
Error Lens extension	VS Code Editor Extension: Highlights errors and warnings	❌	✅

Code Packages (Partial List)

These will be installed automatically for you.

Name	Description	Runtime?	Edit Time?
excalibur	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