Wie man ein Play To Earn-Spiel auf der NEAR Blockchain erstellt

Dieser Leitfaden soll Dir helfen, die grundlegende Dynamik zu verstehen, mit der Du ein Play-to-Earn-Spiel auf der NEAR Blockchain erstellen kannst.

Absicht dieses Tutorials ist es nicht jemanden reich zu machen, sondern mithilfe eines einfachen HTML5-Frontends zu verdeutlichen, wie man ein einfaches Farming-Spiel erstellen kann.

Wir werden einen Smart Contract und die JS/Rust-Dateien hinter dem bestehenden Farming-Spiel BerryClub analysieren. Wenn Du die gleiche Logik auf Ihre Spielideen anwendest, werden vielleicht noch witzigere Ergebnisse entstehen.

Um der technischen Seite dieses Tutorials zu folgen, empfehlen ich Dir, die Abbildung NEAR Pathway, um eine Transaktion zu erstellen und deinen ersten Smart Contract auf NEAR zu deployen. Es wird für Dich viel einfacher sein, diesem Tutorial zu folgen, wenn Du während des Lesens der Erklärung einen Tab auf der verlinkten Quelldatei offen hältst. Ein Großteil des erwähnten Codes wird mit Zeilennummern referenziert, aber hier nicht wiedergegeben. Das ursprüngliche BerryClub-Repository wurde für dieses Tutorial geforked, um die Gültigkeit des Codes auf der Blockchain aufrechtzuerhalten. Wie Du im nächsten Abschnitt sehen wirst, hat sich das Spiel selbst im Laufe der Zeit weiterentwickelt und wird sich auch in Zukunft weiterentwickeln. An dieser Stelle werden wir uns aber nur mit dem Stand zum Zeitpunkt des Erstellens von diesem Artikel beschäftigen.

Das BerryClub Frontend

BerryClub wurde mit React entwickelt, also werden wir als allererstes in die app.js-Datei im src-Ordner des Github-Repos einsteigen. Das spart uns Zeit bei der Analyse des Contracts, so dass wir uns auf das konzentrieren können, was wir brauchen, um die Logik außerhalb des eigentlichen Spiels zu erschließen (das im Übrigen Spaß macht und von einer großen Community gespielt wird).

import React from “react”;
import BN from “bn.js”;
import * as nearAPI from “near-api-js”;
import { AlphaPicker, HuePicker, GithubPicker } from “react-color”;
import Switch from “react-switch”;
import { Weapons } from “./Weapons”;
import Timer from “react-compound-timer”;

Nach dem Importieren von React ist die erste Library, die benötigt wird, bn.js, ein einfaches Dienstprogramm zum Verwalten von dezimalen Zahlen oder nicht dezimalen Zahlen. Viele Funktionen werden diese Library verwenden, um mit dem UI zu interagieren, wie zum Beispiel die folgende Konstante:

const PixelPrice = new BN(“10000000000000000000000”);

Das Spiel BerryClub basiert auf der Immobilienökonomie. Es gibt ein Brett, das von einem Teil des Contracts namens board.rs verwaltet wird. Es ist in Pixel unterteilt. Jedes Pixel hat einen Preis, der bezahlt werden muss, um darauf zu zeichnen. Die Finanz Mechanik der “Draw”-Aktion ist der Kern der Farming- und Selbsterhaltungsfähigkeiten des Spiels und wird im Detail analysiert, wenn wir zum Smart Contract kommen.

Wie Du hier sehen kannst, wird der Preis für ein Pixel gleich zu Beginn unserer Anwendung als Konstante deklariert und kann mit den Frontend-Tools und der bn.j-Bibliothek geändert werden. Der zweite Import ist das NEAR SDK, welches uns die Interaktion mit der Near-Blockchain ermöglicht, wie in der Abbildung NEAR Pathway erläutert. Die erste Verwendung der Near-Api besteht darin, die verwendeten Contract-Variablen zu benennen und sicherzustellen, dass das Mainnet verwendet wird, wenn der Code über die BerryClub-Url ausgeführt wird:

const IsMainnet = window.location.hostname === "berryclub.io";
const TestNearConfig = {
  networkId: "testnet",
  nodeUrl: "https://rpc.testnet.near.org",
  contractName: "berryclub.testnet",
  walletUrl: "https://wallet.testnet.near.org",
};
const MainNearConfig = {
  networkId: "mainnet",
  nodeUrl: "https://rpc.mainnet.near.org",
  contractName: "berryclub.ek.near",
  walletUrl: "https://wallet.near.org",
};
const NearConfig = IsMainnet ? MainNearConfig : TestNearConfig;

Zunächst importieren wir die React-UI-Utilities, um unsere Oberfläche zu erstellen und den Benutzern das Zeichnen zu ermöglichen: react-color, react-switch und react-compound-timer. Die erste davon ist der Timer. Dieser wird genutzt um eine Zeitüberschreitung für die Auffrischung des Boards in Zeile 62 zu setzen.

Die ” Aktualisierung ” des Boards wird vom Frontend durchgeführt, um den aktualisierten Board-Status über einen RPC-Aufruf an den Smart Contract anzuzeigen.

const BatchTimeout = 500;
const RefreshBoardTimeout = 1000;
const MaxWorkTime = 10 * 60 * 1000;
const OneDayMs = 24 * 60 * 60 * 1000;

Was wir hier sehen, sind zwei Konstanten mehr als die, die für die Auffrischung benötigt werden. Die letzten beiden werden tatsächlich für das Farmen der Pixel nach dem Zeichnen verwendet und setzen ein Zeitfenster von einem Tag, um die Belohnungen zu berechnen. Andere Konstanten werden ebenfalls angegeben, um das Board entsprechend mit dem Smart Contract zu verwalten. Hier kreuzen wir zum ersten Mal das Konzept der Linien, das sehr wichtig sein wird, um das Board-Management zu verstehen und welches das am meisten wiederverwendbare Element der gesamten Schnittstelle ist:

const BoardHeight = 50;
const BoardWidth = 50;
const NumLinesPerFetch = 50;
const ExpectedLineLength = 4 + 8 * BoardWidth;

Wie Du sehen, wird das Board in 50×50 Pixel unterteilt und das Interface wird angewiesen, nur die Zeilen nach der Anweisung “RefreshBoardTimeout” abzurufen. Die Länge jeder Zeile wird als BoardWidth multipliziert mit 12, also der Größe einer einzelnen Zelle betrachtet.

const CellWidth = 12;
const CellHeight = 12;
const MaxNumColors = 31;
const BatchOfPixels = 100;

Die Pixel werden im Stapeln und nicht unabhängig voneinander betrachtet. Sowohl beim Aufruf der Zeichen Aktion als auch beim Aktualisieren des Interface.

Zu guter Letzt enthalten unsere Importe eine benutzerdefinierte UI-Komponente namens Weapons,js: Diese Komponente wurde später in der Entwicklungsgeschichte der BerryClub-Community eingeführt, damit jeder Benutzer ein komplettes Bild auf das Board hochladen, zeichnen und auf dem NFT-Marktplatz für Berry Cards verkaufen kann.

DeFi-Mechanik

Die Zeilen zwischen 27 und 51 sind ein nützlicher Hinweis darauf, wie diese dezentrale App ihre Farming-Fähigkeiten über einige grundlegende DeFi-Mechanismen aufbaut. Diese werden in den letzten Teilen dieses Tutorials analysiert. Bis jetzt haben wir nur kurz erwähnt, dass, um ein Pixel zu zeichnen/kaufen BerryClub Dich durch eine Reihe von DeFi Operationen auf ref.finance leitet.  Dabei werden spezifische Token, die Avocados, für den Kauf von Pixeln und Bananen verwendet. Diese Token werden von den Pixeln verdient, die Du gekauft hast.

Es wurde ein einfacher Uniswap-Klon erstellt, um Bananen/Avocados gegen NEAR zu tauschen, der auf demselben Smart Contract basiert, der für die anderen Token dieses Spiels/Prototyps erstellt wurde. Es wurde auch einen Farming Token für das Spiel erstellt, genannt Gurke. Er ermöglicht es den Spielern, einen Teil der Token zu verdienen, den die ganze Spielgemeinschaft zahlt, um auf dem Brett zu zeichnen.

Wie Nutzer Geld verdienen

Dies ist der allererste Schritt, den wir im Rust-Code des Smart Contracts machen.  Ich erinnere daran, dass diese DeFi-Mechanik nicht der einzige Weg ist, wie BerryClub einen Spieler Token verdienen lässt. Der Account hat eine spezielle Datei im BerryClub Smart Contract, die wir uns nicht jetzt ansehen müssen. Was wir aber wissen müssen ist, dass einige Informationen, die für die Farming- und Earning-Mechanismen entscheidend sind, werden im Konto-Objekt gesammelt werden:

• AccountID
• AccountIndex für die Liste der Konten, welche die Pixeltafel zum letzten Mal berührt haben
• Balance(Vector für den Besitz mehrerer Token)
• Anzahl der Pixel
• Claimed Timestamp (Nanosekunden, wann der betreffende Account das letzte Mal Belohnungen beansprucht hat)
• Farming-Präferenzen (entweder Bananen oder Gurken)

Die letzten beiden Informationen dienen dazu, die Belohnungen zu einem bestimmten Zeitpunkt zu berechnen. Wenn beispielsweise 5 Pixel für einen Tag kontrolliert werden, ergibt das 5 Bananen. Wenn man einen Pixel der Kontrolle eines Anderen entnimmt, verdient dieser weniger, weil die Anzahl der Pixel, die er besitzt, abnimmt. Dabei wird der Zeitstempel im Bezug auf die besessenen Pixel erneuert. Wie wir gleich sehen werden, werden die Belohnungen auf der Grundlage dieser beiden Variablen berechnet. Die Operation, die auf dem Account des vorherigen Besitzers angewandt wird, wenn ein Pixel gezeichnet wird, heißt das “touch” und ist in der Datei account.rs rust zu finden. Der Besitz eines einzelnen Pixels ist die Grundlage für das Verdienen auf BerryClub. Auf diese Weise ist diese Mechanik so ziemlich die gleiche, die ein NFT Staking Interface verwenden könnte, das NFT Besitz belohnt.

pub fn touch(&mut self) -> (Berry, Balance) {
        let block_timestamp = env::block_timestamp();
        let time_diff = block_timestamp - self.claim_timestamp;
        let farm_bonus = if self.farming_preference == Berry::Avocado {
            1
        } else {
            0
        };
        let farmed = Balance::from(self.num_pixels + farm_bonus)
            * Balance::from(time_diff)
            * REWARD_PER_PIXEL_PER_NANOSEC;
        self.claim_timestamp = block_timestamp;
        self.balances[self.farming_preference as usize] += farmed;
        (self.farming_preference, farmed)
    }

Um alle Zweifel auszuräumen, ist der anfängliche Besitzer des Boards 0, der Contract selbst. Wenn es nicht möglich ist, einen früheren Besitzer zu finden, wird der Contract als der frühere Besitzer verwendet. Um das Spiel zu starten, wurden einige Token auf dem Contract Account gespeichert. Der “Tresor” des Spiels ist immer mit einigen Token gefüllt, die die Benutzer gewinnen können. Kommen wir nun zu unserem Interface zurück.

Zahlen zu Farben und zurück

Die Zeilen zwischen 67 und 82 in app.js werden zur Dekodierung von Zahlen in Farben und zurück verwendet. Damit die UI-Elemente mit dem Board interagieren können werden zwei konstante Variablen definiert, intToColor und rgbaToInt. Hierbei können wir feststellen, dass zur Umwandlung einer Integer Zahl in einem “colour string” die drei Farben Rot, Grün und Blau verwendet werden.

const intToColor = (c) => `#${c.toString(16).padStart(6, "0")}`;
const intToColorWithAlpha = (c, a) =>
  `#${c.toString(16).padStart(6, "0")}${Math.round(255 * a)
    .toString(16)
    .padStart(2, "0")}`;

Um die “colour string” in eine ganze Zahl umzuwandeln, wenden wir einfach eine math.round()-Funktion an und verwenden die resultierende ganze Zahl.

const rgbaToInt = (cr, cg, cb, ca, bgColor) => {
  const bb = bgColor & 255;
  const bg = (bgColor >> 8) & 255;
  const br = (bgColor >> 16) & 255;  const r = Math.round(cr * ca + br * (1 - ca));
  const g = Math.round(cg * ca + bg * (1 - ca));
  const b = Math.round(cb * ca + bb * (1 - ca));
  return (r << 16) + (g << 8) + b;
};

In den Zeilen darunter geht es um das Hochladen und Rendern von Bildern auf dem Board mit der “weapon”-Komponente, auf die wir nicht näher eingehen werden. imgColorToInt und int2hsv wandeln Zahlen in zwei verschiedene Arten von Farbskalen um, dann wird transparentColor definiert und ein Gamma für das zu rendernde Bild mit generateGamma. In decodeLine wandeln wir den Buffer in ein Array von Pixeln um, die mit den oben genannten Farben auf das Board gedruckt werden sollen, und iterieren sie mit einer for-Schleife.

Erster React-Constructor

In den nächsten Zeilen der app.js definieren wir einen Constructor, der die Zustände festlegt, die wir später in unserer UI zur Interaktion mit der Blockchain verwenden werden.

class App extends React.Component {
  constructor(props) {
    super(props);

Die hier definierten Eigenschaften sind die standardmäßig ausgewählte Farbe und die Farbpalette:

const colors = [
      "#000000",
      "#666666",
      "#aaaaaa",
      "#FFFFFF",
      "#F44E3B",
      "#D33115",
      "#9F0500",
      "#FE9200",
      "#E27300",
      "#C45100",
      "#FCDC00",
      "#FCC400",
      "#FB9E00",
      "#DBDF00",
      "#B0BC00",
      "#808900",
      "#A4DD00",
      "#68BC00",
      "#194D33",
      "#68CCCA",
      "#16A5A5",
      "#0C797D",
      "#73D8FF",
      "#009CE0",
      "#0062B1",
      "#AEA1FF",
      "#7B64FF",
      "#653294",
      "#FDA1FF",
      "#FA28FF",
      "#AB149E",
    ].map((c) => c.toLowerCase());
    // const currentColor = parseInt(colors[Math.floor(Math.random() * colors.length)].substring(1), 16);
    const currentColor = parseInt(colors[0].substring(1), 16);
    const defaultAlpha = 0.25;

Und für den Timer, der das Board aktualisiert:

const timeMs = new Date().getTime();
    const freeDrawingStartMsEstimated =
      timeMs -
      ((timeMs - new Date("2021-05-09")) % (7 * OneDayMs)) +
      OneDayMs * 6;

Dann wird der Zustand des Benutzerkontos definiert, vor allem, ob der Benutzer sich angemeldet hat oder ob es irgendwelche ausstehenden Transaktionen gibt (definiert als pendingPixels). Der boardLoaded-Zustand lädt das Canvas-Board zum Zeichnen der selectedCell Alpha- und PickerColor-Zustände. Diese definieren die Zustände der interaktiven Komponenten, um dem Board Farben hinzuzufügen. Zusammen mit pickingColor zum Auswählen der Farbe vom Board und gammaColors wird der Bilddruck auf dem Board gerendert, sowie den weaponsOn- und weaponsCodePosition-Zuständen.

Die hier folgenden Variablen definieren, welche dem Account des Spielers zugeordnet sind. Diese Informationen sind nützlich um die Spiel Token Ausschüttung zu berechnen:

owners: [],
      accounts: {},
      highlightedAccountIndex: -1,
      selectedOwnerIndex: false,
      farmingBanana: false,

Bei den letzten drei Zuständen wird der Timer für die spätere Verwendung eingerichtet:

freeDrawingStart: new Date(freeDrawingStartMsEstimated),
      freeDrawingEnd: new Date(freeDrawingStartMsEstimated + OneDayMs),
      watchMode: false,

Die folgende Liste (Zeilen 203-215) definiert Objekte und Aktionen, die mit den Zuständen interagieren und zum ersten Mal ein DOM-Element referenzieren, das “Canvas board”.

this._buttonDown = false;
    this._oldCounts = {};
    this._numFailedTxs = 0;
    this._balanceRefreshTimer = null;
    this.canvasRef = React.createRef();
    this._context = false;
    this._lines = false;
    this._queue = [];
    this._pendingPixels = [];
    this._refreshBoardTimer = null;
    this._sendQueueTimer = null;
    this._stopRefreshTime = new Date().getTime() + MaxWorkTime;
    this._accounts = {};

Schließlich definieren wir einige der Zustände, nachdem die Anmeldung erfolgt ist:

this._initNear().then(() => {
      this.setState(
        {
          connected: true,
          signedIn: !!this._accountId,
          accountId: this._accountId,
          ircAccountId: this._accountId.replace(".", "_"),
          freeDrawingStart: this._freeDrawingStart,
          freeDrawingEnd: this._freeDrawingEnd,
        },
        () => {
          if (window.location.hash.indexOf("watch") >= 0) {
            setTimeout(() => this.enableWatchMode(), 500);
          }
        }
      );
    });

Grundlegende Interaktionen

Nun beginnen wir mit der Beschreibung von Interaktionen auf dem Board/Canvas und verbinden diese mit den zuvor definierten Zuständen. Für diese Interaktionen verwenden wir Funktionen. Die erste Funktion verwendet unseren vorherigen Verweis auf das Canvas-Element, um es zu erstellen und ihm Details über die Art der Mausbewegung mitzuteilen, die wir unseren Benutzern erlauben. Beim ersten Klick aktivieren wir den Watchmode, um den Timer zu starten:

const click = async () => {
      if (this.state.watchMode) {
        return;
      }

Und den “image rendering mode”, wenn der Benutzer ein Bild auf dem Board rendern möchte:

if (this.state.rendering) {
        await this.drawImg(this.state.selectedCell);
      } else if (this.state.pickingColor) {
        this.pickColor(this.state.selectedCell);
      } else {
        this.saveColor();
        await this.drawPixel(this.state.selectedCell);
      }

Der nächste wichtige Teil ist, dass wir definieren, wie die Schnittstelle die Maus- und Touch-Bewegung über das Board liest:

if ("touches" in e) {
        if (e.touches.length > 1) {
          return true;
        } else {
          const rect = e.target.getBoundingClientRect();
          x = e.targetTouches[0].clientX - rect.left;
          y = e.targetTouches[0].clientY - rect.top;
        }
      } else {
        x = e.offsetX;
        y = e.offsetY;
      }

Der verwendete Code berücksichtigt die Bedürfnisse der mobilen Benutzer, indem er eine Ad-hoc-Funktion zur Berechnung der Position und einen Listener für Berührungsereignisse zum Canvas/Board hinzufügt: canvas.addEventListener(“touchmove”, mouseMove); Diese Interaktionen werden dann verwendet, um den selectedCell-Status zu setzen und sowohl den Beginn und das Ende der Maus-/Berührungsaktion auf dem Canvas als auch die Bewegung auf jeder Zelle zu verfolgen:

const mouseDown = async (e) => {
      this._buttonDown = true;
      if (this.state.selectedCell !== null) {
        await click();
      }
    };    canvas.addEventListener("mousedown", mouseDown);
    canvas.addEventListener("touchstart", mouseDown);    const unselectCell = () => {
      this.setState(
        {
          selectedCell: null,
        },
        () => this.renderCanvas()
      );
    };    const mouseUp = async (e) => {
      this._buttonDown = false;
      if ("touches" in e) {
        unselectCell();
      }
    };    canvas.addEventListener("mouseup", mouseUp);
    canvas.addEventListener("touchend", mouseUp);    canvas.addEventListener("mouseleave", unselectCell);    canvas.addEventListener("mouseenter", (e) => {
      if (this._buttonDown) {
        if (!("touches" in e) && !(e.buttons & 1)) {
          this._buttonDown = false;
        }
      }
    });

Die Interaktion hier funktioniert über die zuvor definierten Zustände. Beispielsweise der “color picker” ermöglicht uns, Farben vom Board zu wählen und dann zu zeichnen.Die Taste, welche vom color picker verwendet wird, ist die Alt-Taste. Wir können Bilder auf dem Bord nur dann rendern, wenn diese Taste nicht gedrückt ist, da wir andererseits die generategamma Funktion triggern würden. Auf diese Art und Weise ist die pickcolor() Funktion, wenn sie von einem Pixel referenziert wird, nützlich um einen einzelnen Pixel oder das gesamte Board zu färben.

pickColor(cell) {
    if (!this.state.signedIn || !this._lines || !this._lines[cell.y]) {
      return;
    }
    const color = this._lines[cell.y][cell.x].color;    this.setState(
      {
        currentColor: color,
        alpha: 1,
        pickerColor: intToColorWithAlpha(color, 1),
        gammaColors: generateGamma(int2hsv(color)[0]),
        pickingColor: false,
      },
      () => {
        this.renderCanvas();
      }
    );
  }

An dieser Stelle kommen wir zum Kern unserer DApp, dem Smart Contract. Wir wissen, wie wir die Pixel im Interface zeichnen, aber wir müssen die Transaktionen mit der Blockchain verbinden, damit unser Interface ein echtes Spiel zum Verdienen von Token ist. Achte also bitte genau auf das, was ich jetzt sage, denn auch wenn dein Spiel in Bezug auf das UI völlig anders aussieht als dieses, kann die Earn-Mechanik sehr wohl für jede andere Art von Spiel geeignet sein und wird hier auf die einfachste Weise erklärt, die ich kann.