Project Setup

Organizing Files and Directories

We recommend setting up your project directory as follows:

• package.json
• README.md
• tsconfig.json
• vite.config.mjs
• index.html
• Directoryassets - configured for assetpack (example below)

  • Directoryaudio{m}

    • Directorymusic

      • music.wav
    • Directorysfx

      • click.ogg
      • beep.ogg
      • boop.wav
  • Directoryui{tps}

    • button.png
    • arrow.png
  • Directorygame{tps}

    • obstacle.png
    • rocket.png
  • Directoryspine{m}

    • animation.skel
    • animation.atlas
    • animations.png
• Directorysrc

  • dill-pixel.config.ts - configuration file for dill pixel
  • index.ts
  • index.css
  • bootstrap.ts - where you initialize your game
  • MyApplication.ts - extends a dill pixel Application (optional)
  • Directoryscenes - where your scenes are stored,
    - automatically registered with dill pixel

    • Splash.ts
    • Intro.ts
    • Game.ts
    • HighScores.ts
  • Directorylocales - where you store your locale files

    • en.ts
    • fr.ts
  • Directorygameobjects - where you store your game objects

    • Player.ts
    • Enemy.ts
  • Directoryutils - where you store your utility functions

    • utils.ts
  • …

Vite Configuration

Dill Pixel uses Vite under the hood to compile your game and export it for both development and production environments.

The vite.config.mjs file in the root directory configures the build process. The default Vite configuration can be imported from the dill-pixel package, and should be sufficient for most projects.

vite.config.mjs

import config from 'dill-pixel/config/vite';

export default config;