The main.ts File

Let's explain each section of our main.ts file.

Imports

First, our import statements:

src/main.ts

import * as xel from '@xelly/xelly.js';
import {
    XellyContext,
    XellyGameType,
    XellyInstallFunction,
    XellyMetadata
} from '@xelly/xelly.js';
import {Color, Engine, Font, FontUnit, Label, vec} from 'excalibur';

// ...

Note:

• We can import the full extent of classes from ExcaliburJS to build out our games.
• import * as xel is the proper way to import the xelly.js library utilities.
• import {XellyContext, ...} is the proper way to import the xelly.js library types.

Metadata

The xelly.games platform needs to know the "type" of your game in order to render it properly in a feed.

All games must export a metadata object from main.ts:

src/main.ts

export const metadata: XellyMetadata = {
    type: XellyGameType.Passive
};

Here, we indicate that the type of our game is a "passive" game, i.e., not an interactive game.

Since this was our "Hello World" example, there's no interactivity yet, so XellyGameType.Passive is the correct choice here.

The other types are:

• XellyGameType.TurnBased
  • This is for games that are played in a turn-based fashion; board, card/solitaire games, for example. The xelly.games platform allows TurnBased games to accept tap/click events, but a pause button won't be rendered for these games. You also won't receive drag, swipe, or touch/mouse movement events for these games.
• XellyGameType.Realtime
  • This is for "action"-like games that are played in real-time (e.g., flappy bird, breakout, arcade style games, etc). A pause button will be rendered for these games, and these games will be auto-paused if a user scrolls away "mid play". These games also can "terminate" (for example, if the player character dies).
• XellyGameType.Interactive
  • Interactive games are less common. These are games that are action-oriented like realtime games but that do not never terminate (i.e., reach a win or lose state).

The install function

All games must export an install function.

The xelly.games platform will call this function when the game is loaded (or when the user requests to reset/restart the game).

src/main.ts

export const install: XellyInstallFunction = (context: XellyContext, engine: Engine) => {
    const message = "Hello, world!";
    const messageDimensions = font24.measureText(message);
    engine.add(new Label({
        text: "Hello, world!",
        font: font24,
        pos: vec(
            (engine.drawWidth - messageDimensions.width) / 2,
            (engine.drawHeight - messageDimensions.height) / 2),
    }));
};

• An ExcaliburJS engine instance is passed to this function. You will never instantiate an ExcaliburJS Engine instance yourself. The platform will configure and install one for you before calling install on your game.
• In this "Hello World" example, we only added a single Entity to the engine, a "Hello, world!" Label. We do a little simple math to center the Label on the screen.
• Your install function should set up the initial entities and resources of the game, but the game play itself should not start until the user "enters" the game — i.e., until the xelly:enter event is emitted.

That's it for our "Hello World"!

If you are familiar with ExcaliburJS, you could start building out your game from here! (Make sure to consult the submission checklist before you publish your game.)

However, we recommend skimming through Advanced Topics for the best experience.