Html5 — 03 — PixiJS Project Template
Let’s explore one of the HTML5 gaming engines called PixiJS. HTML5 offers users the advantage of playing games directly through mobile or desktop browsers without downloads.
Setting Up Your PixiJS Project
PixiJS is a popular choice, and the latest version (V8) is quite powerful. It 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.
- Download and install dependencies: Clone the repo and run `npm install` to fetch all necessary dependencies
- Build and start the project: Run `npm run build` to compile the project and `npm run start` to launch a local server
- Open the project in VS Code: This is where you’ll do most of your game development
Using the PixiJS Project Template
The project template is hosted on GitHub and is designed to help you start quickly with PixiJS. Here’s a quick tour of the key components:
- HTML and CSS: The HTML5 page is styled with CSS, providing a simple border and rendering the PixiJS canvas within it
- Sprite Rendering: The template includes a single sprite that runs code every frame, remains centered, and scales properly when the window is resized
- Development Workflow: The setup supports automatic rebuilding, allowing you to see changes in real-time as you code
Development and Deployment
Developing with PixiJS involves a few essentials.
Tools
- NPM and Command Line Tools: Use npm to manage dependencies and run scripts for building and starting your project
- VS Code and Extensions: Visual Studio Code, combined with useful extensions like ESLint and TypeScript support, provides a robust development environment
- PixiJS Dev Tools: These tools allow you to inspect and manipulate objects in your game, similar to Unity or Godot’s inspector
This template also includes basic unit testing setup and continuous integration (CI) tools to ensure code quality. While unit tests are not always standard in game development, I strongly recommend them for maintaining robust and bug-free projects.
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!
📜 Articles
- Html5–01 — Gaming Overview
- Html5–02 — PixiJS For Gaming
- Html5–03 — PixiJS Project Template
- Html5–04 — Unit Testing For PixiJS Games
- Html5–05 — ExcaliburJS Overview
- Html5–06 — ExcaliburJS Critique
- Html5–07 — ExcaliburJS Project Template
