Go to Qiita Advent Calendar 2024 Top
LoginSignup
32
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@kurikou_XymCity

【NEMTUSハッカソン2022】ブロックチェーンを組み合わせたタイピングゲームを作ってみた

Last updated at Posted at 2022-04-17

はじめに

  • ブロックチェーン×ゲームがテーマのプログラミングハッカソンが開催されたので、今回思い切ってエントリーしてみました。（NEMTUS Hackathon HACK+ 2022）
  • ずっと「ブロックチェーンを開発で触ってみたい」と思いながら、なかなか一歩が踏み出せなかったのですが、今回挑戦してみて色々な学びがありました。この記事が、私と同じように「ブロックチェーンを触ってみたい」と思っている皆さんの背中を押すきっかけになれば幸いです。

自己紹介

  • C#とPythonを多少使える程度で、Webの開発やゲーム作り、ましてやブロックチェーンを使った開発経験は完全にゼロです。ハッカソンも今回初参加。仕事も普通の一般企業に務めてます。平凡な社内SEです。そんな自分でもここまで作れたので、この記事を見て「自分にも出来るかも」と思ってもらえたら嬉しいです。

作ったもの：タイピングゲーム

いきなり結論ですが、今回のハッカソンではブロックチェーンを組み込んだタイピングゲームを作りました。実際に公開してるのでぜひプレイしてみてください。「なんでタイピングゲーム？」「どこにブロックチェーンが？？」と思いますよね。それぞれ順番に解説していきます！！

※プレイ時にSymbolのウォレットアドレスが必要になりますが、「Trial Mode」を選べばアドレス不要で遊ぶことができます。

Symbol Typing Quest
thumbnail.png

開発環境・使ったブロックチェーンなど

私のようなエンジョイ勢のプログラマが、今回ブロックチェーンゲームを完成できたのは、間違いなくこのSymbolの性能のおかげです。エンジニアフレンドリーかつ高性能、最高のチェーンだと思います。

ブロックチェーン活用ポイント

主に以下の4つのポイントでブロックチェーンを活用しています。それぞれ具体的なコードの例も交えて紹介していきましょう。

  1. ユーザ認証（ユーザ管理）
  2. ゲーム内アイテム（独自トークン）
  3. ゲームクリアトークン（賞金）
  4. スコアリスト(DBレス）

１．ユーザ認証（ユーザ管理）

今回のゲームでは、ユーザマスタやユーザリストといった、ユーザ管理用のDBは一切使っていません。SymbolブロックチェーンのウォレットアドレスをユーザIDとして入力し、有効なアドレスと確認出来たら「ログインOK」とする仕様にしています。

ウォレットアドレスを投げて対象のアカウント情報を取得する処理については、SDKで用意されています。公式ドキュメントにある下記のサンプルを応用することで比較的すぐ実装出来ました。

// replace with address
const rawAddress = 'TB6Q5E-YACWBP-CXKGIL-I6XWCH-DRFLTB-KUK34I-YJQ';
const address = Address.createFromRawAddress(rawAddress);
// replace with node endpoint
const nodeUrl = 'NODE_URL';
const repositoryFactory = new RepositoryFactoryHttp(nodeUrl);
const accountHttp = repositoryFactory.createAccountRepository();

accountHttp.getAccountInfo(address).subscribe(
  (accountInfo) => console.log(accountInfo),
  (err) => console.error(err),
);

課題
「ウォレットアドレスが確認できたらログインOK」とする上記の仕様ですが、お気づきの通り厳密には認証になっていません。これだと他人のアドレスでプレイすることが出来てしまいます。本当はユーザの秘密鍵による署名まで行うべきですが、今回は時間の都合で簡易的な処理に留めています。

２．ゲーム内アイテム（独自トークン）

Symbolのユニークな機能の一つに、リボーカブルモザイク（回収可能トークン）というものがあります。これを使えば、トークンの発行者は、任意のタイミングで保有者からトークンを回収（没収）することが出来ます。期間限定の会員権のような使い方がイメージしやすいかもしれません。
参考：Symbolのリボーカブルモザイク

また、Symbolは独自トークンの発行がめちゃくちゃ手軽にできる点も大きな特徴です。Symbolのコミュニティでは、ユーザが自分たちで独自のトークンを発行して流通させることで、コミュニティを中心とした独自の経済圏が形成されつつあります。これめちゃくちゃ面白いです。
参考：Symbol(NEM)なら誰でも簡単にGUIでトークンが発行できる
参考：Arcanaでgiveaway用絵付きモザイク（トークン）を作ろう

今回のゲームでは、シューティングゲームの「ボム」アイテム風に、独自トークンを活用しています。具体的には以下のような感じです。

まず、「bomb_mosaic」という独自トークンをSymbolチェーン上で発行します。（手順は、上記リンクの独自モザイク発行の記事を参照ください）実際に発行した独自トークンの情報をウォレットで表示すると以下のようなイメージになります。今回はハッカソン用なので有効期間を限定的にしてます。

qiita_20220417_1.png

ゲーム内では、一度ゲームオーバーになると「お助けアイテムとしてボムトークンを使いますか？」とユーザに問う仕様にしています。ボムトークンを付与する（対象のウォレットアドレスに送付する）部分の処理は以下の通り。これはゲーム内の実コードです。

  // BOMBモザイク送信！
  sendBombMosaic: function( trgetAddress, amount, msg ){

    console.log('---- send Bomb Mosaic -----');
    // トランザクション作成
    const account = this.xym.Account.createFromPrivateKey(this.privateKey, this.xym.NetworkType.TEST_NET);
    const transferTransaction = this.xym.TransferTransaction.create(
      this.xym.Deadline.create(this.epochAdjustment),
      this.xym.Address.createFromRawAddress(trgetAddress), 
      [new this.xym.Mosaic (new this.xym.MosaicId(this.bombMosaicId),this.xym.UInt64.fromUint(amount))],
      this.xym.PlainMessage.create(msg),
      this.xym.NetworkType.TEST_NET,
      this.xym.UInt64.fromUint(100000)
    );
    // 署名
    const networkGenerationHash =
      '7FCCD304802016BEBBCD342A332F91FF1F3BB5E902988B352697BE245F48E836';
    const signedTransaction = account.sign(
      transferTransaction,
      networkGenerationHash);
    
    // 発行
    this.announce(signedTransaction);
  },

そしてゲーム内でプレイヤーがボムを発動すると、ただちにボムトークンの回収処理が走ります。回収のコードも先程のトークン付与のコードとほぼ同じ要領です。詳細はこちらの記事を参考ください。

課題
リボーカブルモザイク（回収可能トークン）は非常に便利な機能ですが、トークン付与 or 回収には若干のタイムラグ（トランザクションが確定するまでのリードタイム）がありますので注意が必要です。私はややリアルタイムな使い方をしてしまっていますが、厳密にはトランザクション発行～確定までボムの使用を制限する…などの処理が必要になるかと思います。

３．ゲームクリアトークン（賞金）

タイピングゲームをクリアした人には、お祝いのメッセージを添えてささやかな賞金を付与する仕様にしています。※本当の仮想通貨トークン（XYM）を付与するのはリスクがあるかなと思ったので、今回は無価値なテストネット上のXYMを投げるようにしています。

百聞は一見にしかず、実際にゲームクリア時にユーザにXYMが付与されているトランザクションがこちらになります。（Symbol Testnet Explorer）インターネットさえ繋がっていれば、ゲームクリアの状況やスコアを世界中の誰でも自由に確認することが出来ます。ブロックチェーンの透明性を実感出来ますね。

XYMを発行する部分のコードは以下の通り。オーソドックスなトランザクション発行処理です。msg部分にはお祝いのメッセージと、スコア情報をJSON形式で埋め込んでいます。

  // XYM送金！
  sendXym: function( trgetAddress, amount, msg ){

    console.log('---- send Xym -----');
    
    // トランザクション作成
    const account = this.xym.Account.createFromPrivateKey(this.privateKey, this.xym.NetworkType.TEST_NET);
    const transferTransaction = this.xym.TransferTransaction.create(
      this.xym.Deadline.create(this.epochAdjustment),
      this.xym.Address.createFromRawAddress(trgetAddress), 
      [new this.xym.Mosaic (new this.xym.MosaicId('3A8416DB2D53B6C8'),this.xym.UInt64.fromUint(amount * Math.pow(10, 6)))],
      this.xym.PlainMessage.create(msg),
      this.xym.NetworkType.TEST_NET,
      this.xym.UInt64.fromUint(100000)
    );
    // 署名
    const networkGenerationHash =
      '7FCCD304802016BEBBCD342A332F91FF1F3BB5E902988B352697BE245F48E836';
    const signedTransaction = account.sign(
      transferTransaction,
      networkGenerationHash);
    
    // 発行
    this.announce(signedTransaction);
    
  },

今回はSymbolの仮想通貨である「XYM（のテスト用トークン）」を付与していますが、これは自前で発行した独自トークンとかを使っても面白いと思います。自分の作ったゲーム上でだけ使えるオリジナルのトークンを発行して、将来的にそのトークンに価値がついたり…取引所に上場したとしたら…？これは夢が広がりますね。

課題
今回はテストネット環境（＆時間がなかった）ということで、ゲームの賞金を発行するアドレスの秘密鍵をプログラム中にダイレクトに書き込んでしまっていますが、当然これはNGです汗 秘密鍵は隠蔽するか、送金プログラムだけはクローズドな環境に分離しましょう。

４．スコアリスト(DBレス）

Symbolを使ったゲーム開発をしてみて、今回一番面白いと思ったのは、DBやローカルの設定ファイル等を全く使わずにゲームが作れてしまったことです。

例えば今回のタイピングゲームでは、「クリアした人のスコアでランキングを出したいな…」とか思い浮かぶんですが、ブロックチェーン上のトランザクション履歴をトレースすることで自然とスコアリストを算出したり、ユーザ一覧なども出すことが出来ます。（今回の提出物ではそこまで実装間に合いませんでしたが…）
参考：SymbolTypingQuestのトランザクション一覧

ネットワークに刻まれたトランザクションのデータは、特定のサービスやプラットフォームに依存することなく、インターネットを通じて世界の誰でも参照可能です。おまけに改ざん困難、常時1300台以上のノードで世界中で分散されています。もちろんその分、データを刻むための手数料（XYM）が発生するので、そこは注意が必要です。

今回はテストネット環境だったので手数料分や報酬で配るXYMの量を気にせず作っていますが、メインネット（本番環境）で稼働させる場合は、プレイヤー側からプレイ料金としてXYMをもらう、寄付を募る、ハーベスティング（ビットコインでいうマイニング的な仕組み）でXYMを収穫する…などの施策を組み合わせる必要があります。その辺の設計を考えるのもまた面白いですね。

Ice breaking：なんでタイピングゲーム？

ブロックチェーンの技術的な部分に触れたところで、タイピングゲームをテーマに選んだ理由ですが、至極単純で「絵が描けないから」でした。ゲームと言えばみんなグラフィカルでデザインの格好いいものを作ってくるに違いない…と思ったんですが、私は絵が描けないのでテキストベースで勝負しよう！と思いました。あとタイピングゲームって老若男女みんな楽しめていいかなと。

ただのタイピングゲームにしても面白くないので、Symbolのコアデベロッパーをボスキャラに見立てて倒していくRPG風味にしてみようとか、ボムトークンを入れてみようとか、ブロックチェーンに関するキーワードを打ち込むことで勉強にもなるように…とか色々考えてゲーム性が出るように工夫はしてみました。

Symbolのデザイン/世界観がめちゃクール

テキストベースで勝負しよう！とか書いたくせに、ゲームのビジュアルがめちゃ凝ってるのには理由がありまして、今回のゲームで使っているイラストなどの素材はすべてSymbolブロックチェーンの公式素材をそのまま使っています。

Symbolは「Reflections of Space Pirates」というVisionを掲げており、紫を基調としたサイバーパンクなデザイン・キャラクターで独自の世界観を構築しています。（Vision: Symbol²）

そして、なんとそれらのイラストやアート素材、キャラクターのアバターデータなどが、CC0(パブリックドメイン）として公開されているのです！

ブロックチェーンとしての開発しやすさもさることながら、デザイン・世界観などの素材（しかもハイクオリティ！）までも提供されているのは非常に嬉しいなと思いました。Symbolコミュニティでは、実際にこれらのデザインを自分たちでグッズにしたり、リアルコインを作って楽しんでいる人もいるようですよ。

まとめ

皆様長文お付き合い頂きまことにありがとうございました。色々書きましたが、

ブロックチェーンを活用して何か作ってみたい人は、とにかくSymbolを触ってみて！！

というのが全体の結論でございます。私に出来たのでみんなも出来ます。百聞は一見にしかずです。コピペでもいいので、とりあえずサンプルコードを動かしてみる。実際にトランザクションが刻まれ、自分のウォレットに通知が届く。Explorerでトランザクションの履歴が見れる。やってみてわかること、感動することたくさんあります。

何より、楽しいです。Webの解説や参考記事を読んで学んだ知識が、実際に自分で動かして体験してみることでより深く実感することができます。「あれはこういうことだったのか！」という感覚がたまりません。Qiitaにも入門から応用まで様々なSymbolの開発記事が存在します。まずはコピペでも全然構いませんので、ぜひチャレンジしてみてください。

Symbol開発の参考記事

ちなみに今回作ったタイピングゲームは、残念ながらハッカソンの入賞には至りませんでしたが、せっかくなのでメインネットに乗せてリリース出来るように今後も少しづつ開発していく予定です。いつになるかわかりませんが、リリース後は遊んでいただけると幸いです。

(参考)公開中のSymbolブロックチェーンゲーム一覧

Symbolブロックチェーンゲームのハッカソンはすでに終了していますが、提出されたゲームはすべて公開中です。

もはやハッカソンの枠を超えてそのまま事業化できそうなレベルのものから、フルオンチェーンNFTを組み込んだもの、ゲームのコードが全てオンチェーン上に刻まれている「フルオンチェーンテトリス」などなど、時代の先を行き過ぎているゲームが多数あります。

ちなみのSymbolのフルオンチェーンNFTは驚異の性能ですので、気になる方はぜひそちらも調べて見てください。凄すぎて世間の理解が追いついていない感すらあります。

32
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
32
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?