Quick Start

Creating a New Project (CLI)

The easiest way to get started with Dill Pixel is to use the CLI to create a new project. Run the following command in your terminal:

npx dill-pixel create my-application

Tip

Replace my-application with whatever you’d like to name your project

This will create a new directory called my-application with all the necessary files and dependencies pre-configured.

Using PNPM (Recommended)

Tip

If you’re using PNPM, you can use the following command instead:

npx dill-pixel create my-application --use-pnpm

Manual Installation

If you prefer to set up your project manually, you can install the framework directly:

npm

npm i dill-pixel

yarn

yarn add dill-pixel

pnpm

pnpm install dill-pixel

“Hello World” Example

Tip

The entire source code for this example can be found in the GitHub repository

Project Structure

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

• package.json
• tsconfig.json
• vite.config.mjs
• index.html
• .assetpack.mjs
• .eslintrc.json
• .prettierrc.json
• .nvmrc
• Directorysrc

  • index.ts
  • index.css
  • bootstrap.ts
  • MyApplication.ts
  • dill-pixel.config.ts
  • Splash.ts
  • Directoryscenes

    • BaseScene.ts
    • StartScene.ts
  • Directoryutils

    • Constants.ts
• Directoryassets

  • Directoryaudio{m}

    • Directorymusic

      • Game_Over.ogg
    • Directorysfx

      • click.ogg
      • hover.ogg
  • Directoryrequired{m}

    • Directoryui{tps}

      • Directorybtn

        • blue.png
        • green.png
      • Directoryjoystick

        • base.png
        • handle.png
  • Directoryspine{m}

    • spineboy-pro.png
    • spineboy-pro.atlas
    • spineboy-pro.skel

Key Files and Directories

• src/MyApplication.ts: Main application class extending from Dill Pixel’s Application
• src/bootstrap.ts: Initializes the game and handles core setup
• src/dill-pixel.config.ts: Core game configuration including actions, controls, and data management
• src/Splash.ts: Default loading screen implementation
• src/scenes/: Contains all game scenes
  • BaseScene.ts: Base scene class with shared functionality
  • StartScene.ts: Initial game scene with “Hello Dill Pixel” example
• src/utils/Constants.ts: Shared constants like fonts and colors
• .assetpack.mjs: Asset processing configuration
• .eslintrc.json: Code linting rules
• .prettierrc.json: Code formatting rules

Tip

The CLI creates a production-ready project structure with TypeScript, ESLint, Prettier, and asset management pre-configured.

Start the Dev Server

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

Build for Production

npm

npm run build

yarn

yarn build

pnpm

pnpm run build