Skip to content
dill pixel

Quick Start

Creating a New Project

Section titled “Creating a New Project”

The fastest way to get started with Dill Pixel is to use the create-dill-pixel command-line tool. This scaffolds a new project with a modern, production-ready setup.

Terminal window
npm create dill-pixel@latest

Project Structure

Section titled “Project Structure”

When you create a new project, it will generate the following file structure:

  • package.json
  • tsconfig.json
  • dill-pixel.config.ts
  • vite.config.mjs (optional)
  • .assetpack.mjs (optional)
  • index.html
  • .eslintrc.json
  • .prettierrc.json
  • .nvmrc
  • Directorysrc
    • index.ts
    • main.ts (optional)
    • MyApplication.ts
    • Directoryscenes
      • BaseScene.ts
      • StartScene.ts
    • Directoryutils
      • Constants.ts
    • Directorycss
      • style.css
  • Directorypublic
    • Directoryassets
      • asset folders…

Key Files and Directories

Section titled “Key Files and Directories”
  • dill-pixel.config.ts: Core game configuration. This is where you define your scenes, assets, actions, and plugins.
  • src/index.ts: The main entry point for your application. It contains a single line to boot the framework.
  • src/main.ts (optional): If this file exists and has a default export, the framework will run it after the application is created. It’s the perfect place for post-initialization logic.
  • src/MyApplication.ts: Your custom application class, which extends dill-pixel’s base Application.
  • src/scenes/: Contains all your game scenes. The framework automatically discovers them.
  • public/assets/: The home for all your game’s assets (images, audio, etc.).

Start the Dev Server

Section titled “Start the Dev Server”
Terminal window
npm run dev

Build for Production

Section titled “Build for Production”
Terminal window
npm run build