Quick Start

Installing the Framework

Make sure you have an up-to-date version of Node.js installed and your current working directory is the one where you intend to create a project. Run the following command in your command line:

npm i dill-pixel

yarn add dill-pixel

pnpm install dill-pixel

“Hello World” Example

The most basic example of a dill pixel game is a simple “Hello World” message. Let’s get started…

Hello world example

Create the Files

First, create a package.json in your project’s root directory:

{
  "name": "my-dill-pixel-game",
  "version": "0.0.0",
  "description": "Hello World with dill pixel",
  "main": "index.html",
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build"
  },
  "author": "Me<me@myname.com>",
  "dependencies": {
    "dill-pixel": "^3.1.9",
    "typescript": "^5",
    "vite": "^5"
  }
}

Next, create an index.html file in the root directory:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>My dill pixel Game</title>
</head>

<body>
  <script type="module" src="src/index.ts" async defer></script>
</body>

</html>

Create an index.css file in the src directory:

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: fixed;
    overflow: hidden;
}

#game-container {
    width: 100%;
    height: 100%;
    border: none;
}

Create the remaining files in the src directory:

import { create } from 'dill-pixel';
import { Application } from './Application';
import './index.css';

// Create the application
create(Application, {
  antialias: false,
  resizeOptions: {
    minSize: { width: 375, height: 700 },
  },
  resolution: Math.max(window.devicePixelRatio, 2),
  backgroundColor: 0x0,
});

import { Application as DillPixelApplication, TransitionType } from 'dill-pixel';
import { MyScreen } from './state/MyScreen';
import { LoadScreen } from './state/LoadScreen';

export class Application extends DillPixelApplication {

  // Register the load screen and define the transition type between states

  protected setup() {
    (globalThis as any).__PIXI_APP__ = this;
    this.registerDefaultLoadScreen(LoadScreen);
    this.state.defaultTransitionType = TransitionType.TRANSITION_SIMPLE_INTERSTITIAL;
  }

  // Register the states

  protected registerStates(): void {
    this.state.register(MyScreen);
  }
}

import { LoadScreen as DillPixelLoadScreen } from 'dill-pixel';
import { Point, Sprite } from 'pixi.js';

// The load screen is simply a black background

export class LoadScreen extends DillPixelLoadScreen {
  static NAME: string = 'LoadScreen';
  private _bg!: Sprite;

  // Create the black background

  public init(pSize: Point) {
    super.init(pSize);
    this._bg = this.add.coloredSprite(0x000000);
  }

  // When the screen resizes, resize the background

  public onResize(pSize: Point) {
    super.onResize(pSize);

    if (this._bg) {
      this._bg.width = this._size.x;
      this._bg.height = this._size.y;
    }
  }
}

import { State } from 'dill-pixel';
import { Point, Sprite, Text } from 'pixi.js';
import { Application } from '../Application';

// This screen displays a green background with a white title

export class MyScreen extends State<Application> {
  static NAME: string = 'MyScreen';
  protected _bg!: Sprite;
  protected _title!: Text;

  // Create the background and add the title

  public init(pSize: Point) {
    super.init(pSize);

    this._bg = this.add.coloredSprite(0x33aa66);
    this._bg.eventMode = 'static';

    this._title = this.add.text({
      value: 'Hello world!',
      style: {
        fontFamily: 'sans-serif',
        fontSize: 36,
        fill: 'white',
      },
      anchor: 0.5,
    });

    this.onResize(pSize);
  }

  // When the screen resizes, resize the background

  public onResize(pSize: Point) {
    super.onResize(pSize);
    if (this._bg) {
      this._bg.width = this._size.x;
      this._bg.height = this._size.y;
    }
  }
}

Your project directory should look like this:

package.json
index.html
Directorysrc
- index.css
- index.ts
- Application.ts
- Directorystate
  - LoadScreen.ts
  - MyScreen.ts

Install the Dependencies

Once you have created the files, install the dependencies:

npm install

yarn install

pnpm install

Start the Dev Server

npm run dev

yarn dev

pnpm run dev

Build for Production

npm run build

yarn build

pnpm run build