Blockchain Game

Introduction

This game is a blockchain based game, where the user can control a knight to collect coins. At the end of each round, the user will receive these coins to their wallet. With these coins the user can buy in-game boost items. This project uses Phaser 3 as the game engine.

Techstack

This website uses:

• Phaser 3.80.1
• Next.js
• TypeScript
• shadcn/ui
• wagmi

Requirements

Node.js is required to install dependencies and run scripts via npm.

Available Commands

Command	Description
npm install	Install project dependencies
npm run dev	Launch a development web server
npm run build	Create a production build in the dist folder

Writing Code

After cloning the repo, run npm install from your project directory. Then, you can start the local development server by running npm run dev.

The local development server runs on http://localhost:8080 by default. Please see the Next.js documentation if you wish to change this, or add SSL support.

Once the server is running you can edit any of the files in the app folder. Next.js will automatically recompile your code and then reload the browser.

Phaser

React Bridge

The PhaserGame.tsx component is the bridge between React and Phaser. It initializes the Phaser game and passes events between the two.

To communicate between React and Phaser, you can use the EventBus.js file. This is a simple event bus that allows you to emit and listen for events from both React and Phaser.

// In React
import { EventBus } from './EventBus';

// Emit an event
EventBus.emit('event-name', data);

// In Phaser
// Listen for an event
EventBus.on('event-name', (data) => {
    // Do something with the data
});

In addition to this, the PhaserGame component exposes the Phaser game instance along with the most recently active Phaser Scene using React forwardRef.

Once exposed, you can access them like any regular react reference.

Phaser Scene Handling

In Phaser, the Scene is the lifeblood of your game. It is where you sprites, game logic and all of the Phaser systems live. You can also have multiple scenes running at the same time. This template provides a way to obtain the current active scene from React.

You can get the current Phaser Scene from the component event "current-active-scene". In order to do this, you need to emit the event "current-scene-ready" from the Phaser Scene class. This event should be emitted when the scene is ready to be used. You can see this done in all of the Scenes in our template.

Important: When you add a new Scene to your game, make sure you expose to React by emitting the "current-scene-ready" event via the EventBus, like this:

class MyScene extends Phaser.Scene
{
    constructor ()
    {
        super('MyScene');
    }

    create ()
    {
        // Your Game Objects and logic here

        // At the end of create method:
        EventBus.emit('current-scene-ready', this);
    }
}

You don't have to emit this event if you don't need to access the specific scene from React. Also, you don't have to emit it at the end of create, you can emit it at any point. For example, should your Scene be waiting for a network request or API call to complete, it could emit the event once that data is ready.

React Component Example

Here's an example of how to access Phaser data for use in a React Component:

import { useRef } from 'react';
import { IRefPhaserGame } from "./game/PhaserGame";

// In a parent component
const ReactComponent = () => {

    const phaserRef = useRef<IRefPhaserGame>(); // you can access to this ref from phaserRef.current

    const onCurrentActiveScene = (scene: Phaser.Scene) => {
    
        // This is invoked

    }

    return (
        ...
        <PhaserGame ref={phaserRef} currentActiveScene={onCurrentActiveScene} />
        ...
    );

}

In the code above, you can get a reference to the current Phaser Game instance and the current Scene by creating a reference with useRef() and assign to PhaserGame component.

From this state reference, the game instance is available via phaserRef.current.game and the most recently active Scene via phaserRef.current.scene.

The onCurrentActiveScene callback will also be invoked whenever the the Phaser Scene changes, as long as you emit the event via the EventBus, as outlined above.

Handling Assets

To load your static games files such as audio files, images, videos, etc place them into the public/assets folder. Then you can use this path in the Loader calls within Phaser:

preload ()
{
    //  This is an example of loading a static image
    //  from the public/assets folder:
    this.load.image('background', 'assets/bg.png');
}

When you issue the npm run build command, all static assets are automatically copied to the dist/assets folder.