Skip to main content

PixiJS Update - Start building with PixiJS in just one command! 🚀

· 4 min read
Zyie
Zyie
PixiJS Admin

As we mentioned in our previous PixiJS Update post, we are focusing on making PixiJS easier to use and understand. Today we're pushing the project one step closer to that goal and we’re excited to introduce PixiJS Create.

An easy to use CLI that provides templates for using PixiJS with your favourite bundler, as well as a new "Creation Template" to get you started with PixiJS and its ecosystem.

PixiJS Create CLI Demo

🚀 Getting Started​

PixiJS Create is a new CLI tool that simplifies the process of setting up a PixiJS project. It provides a quick and easy way to create a new PixiJS project with the tools you need to get started with just one command.

Whether you prefer using Vite, Webpack, or esbuild, PixiJS Create has you covered. It is as simple as running:

NPM:

npm create pixi.js@latest

Yarn:

yarn create pixi.js

PNPM:

pnpm create pixi.js

Bun:

bun create pixi.js

Then just follow the prompts to select your desired template and you're good to go!

When running the tool, you will be presented with an option of either a Bundler Template or a Creation Template. Let's take a closer look at each of these options.

🛠️ Bundler Templates: Simple and Barebones​

Bundler Templates are stripped-down starting points for setting up PixiJS projects with popular build tools. These templates focus solely on the essentials, giving you a no-frills environment to start your project without any added complexity.

What’s Included?​

Bundler Templates are ideal if you want complete control over your project’s setup while skipping the hassle of setting up an entire project. They’re lightweight, efficient, and perfect for custom workflows.

🎨 Creation Templates: Feature-Rich Starting Points​

Creation Templates go beyond the basics, offering a fully-featured foundation for building applications with PixiJS. These templates address common challenges developers face when starting a new project, providing tools that simplify screen management, asset handling, audio and more.

What’s Included?​

  • Screen Management: Handle transitions and organize application states with ease.
  • Asset Loading: Built-in support for PixiJS AssetPack, making asset management effortless.
  • Audio Playback: Leverage PixiJS Sound for modern WebAudio API features.
  • Responsive Design: Automatic resize handling for various screen sizes.
  • Simple UI: Includes a basic UI library for common UI elements.
  • Animation Tools: Includes preconfigured support for libraries like Spine for skeletal animations and Motion for smooth tweening and transitions.

Creation Templates are perfect for developers who want to hit the ground running with a robust foundation, enabling them to focus on building amazing content rather than worrying about setup.

🌍 Creation Templates for Every Platform​

For the creation templates we’re starting with support for general web-based applications but are planning to expand the template ecosystem to other platforms soon:

  • Web Template: A general-purpose creation template (available now).

Coming Soon:

  • Discord Template: Build multiplayer applications for Discord using their SDK.
  • Facebook Template: Create apps for Facebook Instant Games.
  • YouTube Template: Develop YouTube Playables.

Acknowledgements​

This project is based on amazing create-vite tool and inspired by the create-game project by Phaser. We are grateful for their work and the inspiration it provided.

🌐 Stay Connected​

Follow Zyie and PixiJS on social media for the latest updates. Join our vibrant community on Discord for real-time discussions and support.