PAYDAY3 PROFILE CARD 開発日誌 その1

votchy·

はじめに

PAYDAY3というゲームの自己紹介カードを生成するサイトhttps://payday3-profile.com/を作成しました。今後も機能拡張していくので、開発日誌として書いていきます。

背景

PAYDAY2のリリースから10年、2023年前半に突如PAYDAY3開発中、2023年内にリリースとの情報が世界に轟きました。そして、クローズドβ、オープンβを経て9月下旬にリリースされました。

PAYDAY3は現代のFPSでよくあるスライディングなどのスタイリッシュな操作に加え、マスクなし時の自由度の上昇やエリアの概念による場所での行動制限といった魅力的なシステムが加わり、自分にはすごく魅力的なゲームになったと感じました。

しかし、βテストのときに問題となっていたマッチングの問題やサーバを仲介してプレイすることによる鯖落ち、ゲームが進行できなくなるレベルの不具合などが解消されないままリリースされ、ゲーム自体がまともにプレイできない事態が発生しました。

さらに、不具合対応のアップデートも遅れに遅れたため、ユーザ離れが加速しました。

個人的には、根幹となるゲームデザインはとても優秀でポテンシャルがあるため、ユーザが離れていくのは非常に残念でした。

そこで、ユーザが離れないように、戻ってきたユーザが楽しめるように、そしてPAYDAY3に興味をもち新規ユーザが増えるようにと考え、自己紹介カードを作ろうかなという考えに至りました。

特にPAYDAY3はCoopゲームなので、互いを知ってもらう、協力相手を探すということは楽しむ上で重要なことだと思っています。これらを実現する手助けになればと思っています。

自己紹介カードって一体なに？

当たり前のように自己紹介カードと記載していますが、特定の界隈にしか伝わらないので簡単に説明します。

自己紹介カードはゲームのプレイスタイルやコミュニケーションツール、プレイする時間帯、プレイレベルを記載して、互いのことを知ってもらう手段です。

作成した自己紹介カード

自分が認識している限りでは、2D格闘ゲームのGUILTY GEAR -STRIVE-で、公式がSNSでコミュニケーションをとる手段のひとつとして誰でも同じ体裁、情報粒度でつくれるツールとして提供し始めたのが起源だと思います。

そのあと非公式ではありますがストリートファイター6でも自己紹介カードをつくる人がいました。

これは私の憶測ではあるのですが、格闘ゲーム界隈はユーザの高年齢化に加えコミュニケーションが希薄だったのが起因してると思います。

特にグループ内でのコミュニケーションは活発ですが、個人間のコミュニケーションは希薄であること、同じレベルの人とのコミュニケーションが多くて師弟関係が築きにくいことがあったのかと思います。

さらに、複雑化する格闘ゲームを初心者が楽しむには敷居は高いため、新規ユーザ獲得のためには初心者をリードする人とのつながりが重要にだったのかと思います。

そういった要因があるため、コミュニケーションツールのひとつとして、自己紹介カードが誕生したのかと思います。

PAYDAY3 PROFILE のリリースまで

企画とモチベーション

私はPAYDAY2をリリースぐらいからInfamy実装後すこしくらいまで友人と遊んでいました。永遠と続くInfamyを上げないといけないことやプライベートの環境変化を理由にゲームから離れていました。

今回PAYDAY3がリリースされるときいて、また友人と遊びはじめましたが、10月中旬くらいに上でも記載している不具合の影響でユーザが離れていくことを憂いでいました。

そんな状況をユーザ側からも打開したいと考えていたところ、自己紹介カードを思い出し友人に相談したところやってみようぜ！と賛同があったので企画としてスタートしました。

基本的には私がすべてやっていますが、自己紹介カードのレイアウトや機能の相談、宣伝などで友人にはサポートいただきました。

ユーザーストーリー

自己紹介カードを作るにあたって、自分たちだけで留まってしまうのはマズいため、自己紹介カードを生成するプロダクトを提供することとしました。

その中で初期リリースには以下をユーザーストーリーとしてあげました。

  • プレイヤー名を自己紹介カードで共有できる

  • プレイスタイルを自己紹介カードで共有できる

  • コミュニケーションツールを自己紹介カードで共有できる

  • ボイスチャットの有無を自己紹介カードで共有できる

  • プラットフォームを自己紹介カードで共有できる

  • プレイレベルを自己紹介カードで共有できる

  • プレイ時間を自己紹介カードで共有できる

  • 使用しているキャラクターを自己紹介カードで共有できる

  • 自己紹介カードをブラウザだけで作成できる

  • 作成した自己紹介カードを取得できる

画像生成という分野に明るくなかったため、このあと検証しながら方針を定めました。ある程度実現するのがわかったタイミングが10月下旬だったので、11月1日をリリース日にしようと決めました。

レイアウトの作成

自己紹介カードを作るにあたって、1枚の画像にユーザーストーリーで上げた項目を網羅できるのかが不透明だったため、作図ツールでたたき台をつくりました。

たたき台を友人と共有しデザインが見えてきたところで、何で自己紹介カードを作るかの技術選定をはじめました。

技術選定

PAYDAY3はクロスプラットフォームを謳っているため、ユーザは必ずしもPCを持っているとは限らないです。そのため、PCをメインターゲットとしつつスマホも利用想定として入れています。その結果、レスポンシブデザインのWebサイトで提供する方針としました。

画像の生成は、レイアウトの決まっている画像を動的に生成することから、svgを選択しました。svgのコンポーネントであれば仮想DOMとして操作できるのでフレームワークにはReactを選定しました。

Reactを選定した理由は私がReactに少し明るいからというだけなので、これだからという決定的な理由はありません。ただ、そこまで複雑なサイトではないので、React+Viteで構築しています。

デブロイ先ですが、静的サイトなので無料でもいくつかの候補がありました。その中で候補として考えたのは以下の3つです。

  • Firebase Hosting

  • Github Pages

  • AWS Amplifiy

今回はFirebase Hostingを採用しました。

Github Pagesは、Githubでのソース管理で初期はプライベートリポジトリとして運用したかったので除外しました。また、AWSは使わないIaaSが多くついてくるので敬遠しました。

技術選定とデブロイ先が決まればあとはつくっていくだけです。

ドメインの取得

リリースできる目処がたったのでドメインを取りました。

以前はFirebaseでドメインを取るときはGoogle Domainsと連携してるのでとったらなにも考えずに指定したドメインで公開されましたが、Google Domainsがサービス終了した今は別途調達して設定する必要があります。

今回はGoogle Domainsの資産引継先であるCloudFlareで取得しました。DNSの設定まわりがちょっとわかりにくかったことと、反映までに最大24時間かかるとのことで、これで設定あってるのか？？？と思いながらPAYDAY3をプレイしながら気長に待ちました。

ドメインが設定できたら後は世にリリースするだけです。

リリースのあとは…

11月1日にリリースされてからいくつかの機能追加や機能強化をおこなっています。

このあとの開発日誌ではアップデートのお話や今後の開発ロードマップ、新機能の説明など書けたらよいなと思っています。

さいごに

長々と書いてしまいましたが、PAYDAY3 PROFILE CARDに対する思いやモチベーション、技術周りはこんな感じです。

PAYDAY3の1回目のアップデートもされて、年内にはいくつかのHESITのアップデートも予定されてるので楽しみです。

その頃にはユーザーが戻りはじめて自己紹介カードを作る人が増えてるといいな。

PAYDAY3_PROFILEPAYDAY3
@votchy
votchy