Hello World!

note

You can also find the source code for this example here.

Create a src/main.ts File

Create a src directory and add a main.ts file:

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

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';

const font24 = new Font({
    color: Color.Black,
    family: 'system-ui, sans-serif',
    unit: FontUnit.Px,
    size: 24
});

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

/** Install. */
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),
    }));
};

This is a simple "Hello, world!" example. It renders a "Hello, world!" in the center of the screen.

Before we dig in and explain each part, let's build it and run it!

Build the Game

Run npm run build in the root of your project. You should see something like this:

$ npm run build

> your-game-project@1.0.0 build
> npm run clean && npm run build:rollup


> your-game-project@1.0.0 clean
> rm -rf dist dist/tsconfig.tsbuildinfo && echo 'cleaned!'

cleaned!

> your-game-project@1.0.0 build:rollup
> rollup -c

src/main.ts → dist/bundle.js...                                                                                                                                                                                               
created dist/bundle.js in 513ms

Run the Game

Now that we have a dist/bundle.js file, we can test it out using the xelly.games utility tool.

Visit https://xelly.games/utility, and upload your dist/bundle.js file.

tip

Note that nothing is uploaded to any remote servers by this utility page.

The page uses FileReader.readAsText to read the file locally on your computer and render it so you can test it before submitting it.

If you followed the steps correctly, you should see "Hello, world!" rendered by your game in the center of the game screen, as it would be rendered in a xelly.games feed.