Html5 — 02 — PixiJS For Gaming
My name is Sam, a game developer with 25 years of experience. I’m learning afresh how to create games with JavaScript or TypeScript inside the browser using GPU-accelerated gaming.
Introduction to PixiJS
PixiJS is one of the HTML5 game engines you can choose. According to their official website, PixiJS is the HTML5 creation engine that creates beautiful digital content with the fastest, most flexible 2D WebGL renderer. It’s interesting that many game frameworks market themselves as tools for creating interactive web experiences, not just games. This includes video interactivity and various types of installation experiences.
PixiJS is fast, flexible, and free, and it is open-source forever.
Highlights:
- Multiplatform support
- Tinting and blending modes for different graphical looks and feels
- Sprite sheet support for 2D animated characters
Benchmarking with PixiJS
One of the cool things about PixiJS is running benchmark tests. For instance, using the latest version of PixiJS (version 8), which includes WebGPU support, you can run a demo that renders thousands of objects on the screen to test frame rates. Here’s a summary of what I found:
- With a powerful computer, I achieved great results, getting 180 to 215 frames per second with just two objects
- Increasing to 22,000 objects, the frame rate remained over 200 FPS
- At 65,000 objects, the frame rate was around 170 FPS
Creating HTML5 Games with PixiJS
PixiJS offers a robust platform for creating HTML5 games. Throughout this series, I will explore PixiJS in more detail, providing project templates and game samples.
PixiJS supports web-based game development with features that allow for fast rendering and easy deployment. I’ll also compare PixiJS with other game engines and discuss how it fits into the broader HTML5 gaming ecosystem.
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
