Create Your Project

Before we build a game, we need to set our project up. This part is easy.

Start by creating a new directory with just three files:

your-game-project/
    package.json
    rollup.config.mjs
    tsconfig.json

(If you don't already have Node and npm installed, make sure you install them before proceeding.)

Here are the three project files you'll need at the root of your project directory:

package.json

The only thing you need to change here is the name field:

package.json

{
  "name": "<Your Game Name here>",
  "version": "1.0.0",
  "scripts": {
    "clean": "rm -rf dist dist/tsconfig.tsbuildinfo && echo 'cleaned!'",
    "build:tsc": "tsc --build --noEmit",
    "build:rollup": "rollup -c",
    "build": "npm run clean && npm run build:rollup",
    "watch": "rollup -c --watch",
    "watch:live": "concurrently \"npm run watch\" \"xelly-dev dist/bundle.js --port=3001 --open\""
  },
  "files": [],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "excalibur": "0.30.3",
    "@xelly/xelly.js": "2.0.3"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^16.0.0",
    "@rollup/plugin-terser": "^0.4.4",
    "@rollup/plugin-typescript": "^12.1.2",
    "@xelly/dev-tool": "^0.0.2",
    "concurrently": "^9.2.1",
    "rollup": "^4.30.1",
    "tslib": "^2.8.1",
    "typescript": "~5.7.3"
  }
}

tip

☝️ Make sure to run npm install in your project directory after creating this package.json file.

Dependencies

Note that we've started out with two "dependencies":

• excalibur (0.30.3)
• @xelly/xelly.js (2.0.3)

Our games are built on top of ExcaliburJS (an excellent, versatile game engine) and xelly.js is the official SDK for xelly.games.

tip

These two are required, but you can add other third-party dependencies as long as your final game (i.e., bundle.js file) is no larger than 500kb (the current size limit for games uploaded to xelly.games).

Note that the 500kb limit does not include the size of the excalibur library and @xelly/xelly.js, which are not bundled into your game as they are provided at runtime by the xelly.games platform.

rollup.config.mjs

This file is important.

We use Rollup to bundle our game into a single output file (bundle.js; an IIFE module, to be specific) that you will upload to xelly.games when you are ready to post your game.

You can copy this file exactly as-is:

rollup.config.mjs

import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import terser from '@rollup/plugin-terser';

// leave all of this exactly as-is
export default {
    input: 'src/main.ts',
    external: ['excalibur', '@xelly/xelly.js'],
    plugins: [typescript(), resolve()],
    output: {
        file: 'dist/bundle.js',
        format: 'iife',
        name: 'Game',
        globals: {
            'excalibur': 'Excal',
            '@xelly/xelly.js': 'Xelly'
        },
        plugins: [terser()]
    }
};

note

We configure Rollup here to "externalize" the excalibur and @xelly/xelly.js dependencies so that they are not included in the final bundle.js file. These dependencies are provided at runtime by the xelly.games platform.

tsconfig.json

This file can also be copied as-is:

tsconfig.json

{
  "include": ["src/**/*"],
  "compilerOptions": {
    "outDir": "./dist",
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

That's it!

With these three files in our project's root directory, we're ready to start coding our game!