Project Setup

Organizing Files and Directories

We recommend setting up your project directory as follows:

• package.json
• README.md
• vite.config.js
• tsconfig.json
• index.html
• Directorysrc

  • index.css
  • index.ts
  • Application.ts
  • Directoryassets static assets like fonts, images, and audio

    • …
  • Directorystates where your game states are stored

    • SplashScreen.ts
    • IntroScreen.ts
    • GameScreen.ts
    • HighScoresScreen.ts
  • …

Build Tools

To develop your game locally and build it for production, you’ll need to configure a build process. We recommend using Vite, a blazing fast build tool that supports modern JavaScript features.

Create a vite.config.js file in the root directory to configure the build process. The default Vite configuration is sufficient but for handling static assets we’re using the vite-plugin-static-copy so that they can be loaded from within the game. You can configure the plugin however you like based on how you’ve organized your assets.

vite.config.js

import path from 'path';
import { fileURLToPath } from 'url';
import { defineConfig, normalizePath } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';

const __dirname = fileURLToPath(new URL('.', import.meta.url));

/** @type {import('vite').UserConfig} */
export default defineConfig((config) => ({
  ...config,
  target: 'esnext',
  logLevel: 'info',
  plugins: [
    viteStaticCopy({
      watch: { reloadPageOnChange: true },
      targets: [
        {
          src: normalizePath(path.resolve(__dirname, './src/assets/images/spritesheets/_output/*')),
          dest: './assets/images/spritesheets',
        },
        {
          src: normalizePath(path.resolve(__dirname, './src/assets/images/static/**/*')),
          dest: './assets/images/static',
        },
        {
          src: normalizePath(path.resolve(__dirname, './src/assets/json/*')),
          dest: './assets/json',
        },
        {
          src: normalizePath(path.resolve(__dirname, './src/assets/spine/*')),
          dest: './assets/spine',
        },
        {
          src: normalizePath(path.resolve(__dirname, './src/assets/fonts/*')),
          dest: './assets/fonts',
        },
        {
          src: normalizePath(path.resolve(__dirname, './src/assets/audio/output/*')),
          dest: './assets/audio',
        },
      ],
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
}));