Html5 — 03 — PixiJS Project Template

Samuel Asher Rivello
2 min readJul 17, 2024

--

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
Cover Image

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
Project Template Commands

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

🛜 Downloads

--

--