Project Setup

Organizing Files and Directories

A new project scaffolded with create-dill-pixel will have the following structure. This is the recommended setup for organizing your files.

• package.json
• tsconfig.json
• vite.config.mjs
• dill-pixel.config.ts
• index.html
• Directoryassets (configured for assetpack)

  • Directoryaudio{m}

    • Directorymusic

      • background.mp3
    • Directorysfx

      • click.mp3
  • Directorygame-assets (configured for assetpack)

    • obstacle.png
    • rocket.png
• Directorypublic (optional)

  • … files will get copied from here to the dist folder
• Directorysrc

  • index.ts
  • main.ts (optional)
  • MyApplication.ts
  • Directoryscenes

    • BaseScene.ts
    • StartScene.ts
  • Directoryutils

    • Constants.ts
  • Directorylocales

    • en.ts
  • Directorycss

    • style.css

• dill-pixel.config.ts: The main configuration file for your game.
• public/assets/: The directory for all your game assets. This is watched by the asset pack system.
• src/index.ts: The single entry point that boots the framework.
• src/MyApplication.ts: Your optional custom Application class.
• src/scenes/: The directory where all your game scenes live.

Vite Configuration

Note

The framework handles all the necessary Vite configuration internally. You do not need additional configuration in your vite.config.mjs unless you have a specific need to add custom Vite plugins or override the default build process.

Dill Pixel uses Vite to compile your game for both development and production. The default Vite configuration is imported automatically from the dill-pixel package and is optimized for web game development, including features like:

• Top-level await support.
• WASM integration.
• Automatic asset bundling and type generation.
• Globals for scenes, plugins, and adapters.