/pixi-project-template

PixiJS Best Practices for project structure and TypeScript coding standards. It is a recommended starting point for new projects.

Primary LanguageTypeScriptMIT LicenseMIT

PixiJS Project Template

This repo includes a great starting point for new PixiJS projects while using TypeScript.

screenshot

Image 1 - PixiJS Game Engine - Html5 + WebGPU

Table of Contents

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

Getting Started

Play Project

  1. Browse to SamuelAsherRivello.github.io/pixi-project-template/dist/index.html
  2. Enjoy!

Build Project

  1. Download this repo (*.zip or *.git)
  2. Open the PixiJS folder in the command line:
    1. Install dependencies:
      • Run npm install to download and install dependencies.
    2. Build the project:
      • Run npm run client-build to build the project.
    3. 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. This is fantastic!
  3. Play the game at localhost:3000
  4. Open the PixiJS folder in Visual Studio Code or your favorite editor
  5. Do your game development
  6. Optional: When you add/update files within the PixiJS you may need to repeat step 2. See Webpack Beginner's Guide for more info
  7. Optional: Host your project online and share the link with friends!
  8. 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 ❌ ❌ ✅ ✅

Project Overview

This repo has been heavily modified and now demonstrates best practices for combining HTML5 technologies for game development in the browser.

Use cases for this repo include light-weight prototypes, educational projects, and browser-based game development.


screenshot

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



screenshot

Image 3 - Runtime Environment (Browser, PixiJS DevTools, Console)



Documentation

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

Configuration

  • Game Engine - PixiJS is a flexible and fast 2D rendering library for web-based graphics and games

Structure

  • PixiJS - Main project folder
  • PixiJS/assets/images/ - User-facing image assets
  • PixiJS/public/index.html - User-facing html page
  • PixiJS/src/css/ - CSS styling
  • PixiJS/src/scripts/ - Additional TS files
  • PixiJS/src/scripts/index.ts - Main TS file for game logic. Do your work here :)

Dependencies

  • ./PixiJS/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 ❌ ✅
PixiJS DevTools Browser Extension with Scene Hierarchy & Sprite Inspector ✅ ❌

Code Packages (Partial List)

Name Description Runtime? Edit Time?
pixi.js PixiJS: 2D rendering engine ✅ ❌
@pixi/ui PixiJS: UI components ✅ ❌
pixi-actions PixiJS plugin for tweening ✅ ❌
pixi-filters PixiJS filters ✅ ❌
webpack Bundles JavaScript files ❌ ✅
typescript TypeScript compiler ❌ ✅
eslint Makes your TypeScript pretty ❌ ✅
jest Unit testing for TypeScript ❌ ✅


Resources


Here are some non-HTML5 resources which may also be helpful with HTML5 game projects.

Credits

Created By

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

Contact

License

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