キャラクターシートインターフェースデザイン回顧

2021年が近づいています。つまり、フロントエンド開発者としてPathfinder：Kingmakerに参加してからほぼ4年になります。この間、ゲームは最小限の機能を備えた小さなプロトタイプから巨大で複雑なシステムに進化しました。ゲームはリリースされ、1年間のアクティブなバグ修正とDLCサポート、およびコンソールへの移植が行われました。そして、このプロジェクトの開発が完了したと見なすことができるようになったので、今度は振り返って、インターフェイスがどのように設計および構築されたかを振り返って収集してみます。

私の意見では、メインのゲームインターフェイスからキャラクターシートから始めることにしました。

前書き

Computer Pathfinder：Kingmakerは、PaizoボードゲームPathfinderを応用したもので、英語圏では非常に人気があり、他のすべてではわずかに少ないです。そして、すべての開発参加者が例外なく自分たちのしていることをよく理解できるように、チームは優れた練習をしました。元のKingmakerモジュールに基づく毎週のボードゲームです。







そして、これは、テーブルに座って紙の形で手に持っているキャラクターシートであるため、このインターフェイスや他のインターフェイスの開発の初期に大いに役立ちました。





ここから取得：http：//runelords.peepersbog.org/index.html



ゲームや開発の経験が豊富な同僚とは異なり、ボードロールプレイングゲームの私の経験はすべて、D'n'Dルールのスクラップと、Baldur's Gateを通過することによって、それがボードゲーム。そしてもちろん、ボードゲームをコンピューターゲームに転送する必要がある場合、この経験は大きな欠点です。しかし、ゲームについて何も知らない人の視点からインターフェースを見ることができたので、その瞬間に欠陥が威厳に変わったことがわかりました。本質的に、タスクは「それがどのように機能するかを自分自身に説明する」ようになりました。もちろん、これははるかに簡単です。結局のところ、これを学んだばかりの人を除いて、誰も何かの使い方を知ることはできません。ゲームでキャラクターシートをデザインするタスクが設定された瞬間、すべてが非常に単純に見えました。それをデジタル形式に転送し、不要なものを削除すれば完了です！そして、もちろん、それは間違っていることが判明しました。ボードゲームのルールの構造を深く掘り下げると、Pathfinderはルールによるゲームではなく、ルールの例外によるゲームであることが明らかになりました。

情報設計

入力データは、まず、元のキャラクターシート、ゲームデザイナーのドキュメント、ボードゲームのコアルールブック、およびいくつかの既製のインターフェイスレイアウト、特にインベントリでした。



明らかに、紙のキャラクターシートを単にスクリーンバージョンに変えることは不可能でした。

コンピューター版ではスキル数が減りましたが、同時にコンディションやバフの表示も追加されました。さらに、原則として紙のバージョンには表示されないいくつかの特性が追加されました。



既存の紙を新しいコンピューターと組み合わせて再考することで、画面を3つの列に分割するというアイデアが生まれました。ただし、既存のインベントリのレイアウトを拡張するという考えには、より正確に言えます。画面の左3分の1は、キャラクターのインターフェースの「横断的な」情報コアになり、主な特徴を吸収するはずでした。そして、このブロックの重要な部分は肖像画になることでした。キャラクターの主な表現が3D人形である他の現代のRPGとは異なり、ゲームのヒーローとしてプレーヤーを識別する役割のために描かれた肖像画がありました。これはいくつかの理由で強調されてきました：1。これはBaldur'sGateのジャンルである精神的遺産です。 2.ポートレートは、より複雑な感情を表現し、キャラクターをよりよく特徴付けることができ、ゲーム体験をより深くします。ブロックの他のコンポーネントは、「誰？」という質問に答えなければなりませんでした。そしてどれ？」：混沌とした良いハーフオーク、野蛮人、強くてハンサムですが、愚かで、このようなハンマーで打つ、そのような保護。他の3分の2は、能力とスキルと歴史についての詳細を明らかにするために必要でした。情報設計の結果、すべての可能な文字ブロックがグループ化され、列とページに分散されました。したがって、論理パーティションがありました。















もちろん、これは最適なパーティショニングではないことが判明しましたが、さらにレイアウトするための良い出発点になりました。



クラスの進行の視覚化を別のトピックとして強調したいと思います。ここでのPathfinderの特徴は、同様のジャンルの多くのゲームとは異なり、ここでのキャラクター開発を静的な開発マップに形式化できないことです。プレイヤーは、任意のレベルで別のクラスを選択して、たとえば、第5レベルの魔術師と第3レベルの泥棒になることができますが、これを予測することは不可能です。さらに、各クラスにはアーキタイプがあり、その選択によって一部の能力が置き換えられますが、必ずしも同じレベルである必要はありません。そして、いくつかの能力は、プレイヤーが彼のキャラクターまたは起源の神を決定した後にのみクラスに現れます。

初心者には、ほとんどすべてのクラスの説明は、ランダムな順序で取得された一連の能力のように見え、互いにどのように関連しているかは明らかではありません。したがって、情報を収集する段階でのタスクは、クラスの編成のパターンを理解し、その表示を簡素化する方法のアイデアを策定することでした。



結果は、能力とクラス特性を備えたいくつかの比較表です。おそらく、これらのテーブルの使用自体は、それらをコンパイルする過程で得られた結論や観察ほどではありませんでした。

異なるクラスの発達構造を研究する過程で、すべての能力はグループに分けられました：

• クラスの振る舞いや追加の能力の出現を決定する決定的な能力：好きな魔法の学校、領域、起源、ペット。
• アクションの本質は変わらないが、その特性が増加するランクの能力：強さ、持続時間など。
• 同様の共通コンポーネントを持つ能力。たとえば、パラディンには、まったく異なるものにボーナスを与えるオーラがあります。
• パラメータ化可能な能力。パラメータの1つを選択できます。たとえば、お気に入りの対戦相手。
• 理解できない何かに関連する可能性のある孤独な能力。

サイズと定量的特性を評価するために、情報収集の段階ですでに収集されたすべてのものを視覚化することが決定されました。







それ以来、この視覚化は、すべてのインターフェースにわたるキャラクター開発ページの骨組みになりました。能力を連鎖させるためのアルゴリズムを書きました。ここではすべてが自動化に適しているわけではなく、見栄えを良くするためにいくつかの機能を手動で組み合わせました。



能力の連鎖に加えて、クラスは鎧を着て何らかの種類の武器を操作する能力に影響を与えます。私はこの問題を何らかの形で体系化したいとも思っていました。ただし、ここでは、体系化は、ボードの作成者によってすでに決定されている武器のグループでのみ行われました。それ以外の場合、各クラスには、体系化に反する独自の追加がありました。最も注目すべきは、単純な武器と、彼が崇拝する神のお気に入りの武器を振るうクレリックです。結論：武器のリスト全体を表示し、キャラクターが所有している武器をマークする必要があります。



ボードゲームに関する情報の荷物を受け取ったので、インターフェイスのレイアウトに取り組み始めました。

検索マークアップ

情報ブロックの論理的な内訳を持つことは、何かを設計し始めるための良い出発点を提供しますが、これは十分ではありません。制限なく何かを思いつくことは非常に困難です。私たちの脳は環境の絶え間ない体系化を必要とし、それがしがみつくものがなければ、それは問題になります。論理的なパーティション分割に加えて、そのような制限は、既存のインベントリインターフェイスによって生成された3列のシステムでした。今度は、別々のブロックで情報の視覚的表現を作成し、それらを何らかの方法で組み合わせる試みの段階になりました。同僚や私の観点から、良いことが判明したブロックは、次のレイアウトに流れ込みました。他のものは取り消し線が引かれ、この記事のために特別に入手したアーカイブにのみ残っています。



以下は、初期の画面とレイアウトの実験の一部です。キャラクターシート全体を1つの画面に詰め込むことで、それらすべてを組み合わせることができます。そして、攻撃、防御、スキルのブロックが一般的にあまり変動性がなかった場合、能力とバフに関するブロックには、未知の数のエンティティが含まれていました。



さらに、当時、私は能力オプションの数を大幅に過小評価し、それらを非常に小さなブロックに収めようとすることがよくありました。ちなみに、同時に、バフを左3分の1に配置して、インベントリ画面にも表示されるようにする方法を模索していました。バフのブロックについて話し合うと、興味深い点が浮かび上がりました。ルールを深く知っている同僚は、キャラクターの状態（疲れている、目が見えないなど）とバフ（呪文によるプラスまたはマイナスの効果）を共有していました。これはルールに書かれており、メカニズムにうまく統合されています。インターフェイスビューの場合、これらのエンティティはすべて、他の統計の値を変更するテキスト付きのアイコンでした。そして、この不一致はゲームコード内で明確に表現されており、インターフェイスコードは機械的エンティティの共通の分母につながります。













Baldur'sGateのポートレートがレイアウトに使用されています。



一連の実験とすべてを1つの画面に収めようとした結果、最善のアプローチはページネーションであり、「もう1回クリック」することで情報の一部を犠牲にする必要があることが明らかになりました。



そして、進行ツリー全体、キャラクターの伝記、武器の所持が痛みを伴わずに別の画面に追い出されることができれば、私は能力の表示をあきらめたくありませんでした。マルチクラス文字の放射状表現を含む、さらにいくつかのバリアントが生まれました。同じ日にハッキングして開発しなかったのは同じクラスで開発するキャラクターにはあまり適していないため、技術的な制限がいくつかありました。















ここでグループ化能力を使った実験がありました。キャラクターがクラスに関係なく選択する特技と呼ばれる能力を、クラスごとに固有の特殊能力から分離する必要がありました。さらに、より興味深いロールプレイングのためにプレーヤーがテーブルで選択するキャラクターのストーリーラインである特性もありましたが、私たちの場合、特性の値に影響を与える別の方法です。また、多くの特性を示したかったのですが、特定の文字クラスに関して常に役立つとは限りませんでした。たとえば、マジシャンにとってベースアタックボーナスの大きさはそれほど重要ではありません。彼は火の玉を投げるときにそれを使用しません。しかし、それでも、一部のブロックは、コンテンツチェックを使用して最終に近いレイアウトを探し始めています。









これは遡及的な記事であるため、このようなチェックでも、開発プロセス中に表示される可能性のあるコンテンツのすべてのオプションを考慮に入れることはできないと言えます。たとえば、攻撃ブロックは4つの値のみを対象に設計されており、キャラクタークラスとスペルの組み合わせによっては、6になる可能性があることを考慮していません。さらに、設計時に、すべての参加者は、レイアウトがアートワークの後に移動しないことを確信していました。しかし、これもまた妄想であることが判明しました。ゲームは事前に計画するのが難しく、絶え間ない創造性、開発、変化の生きたプロセスです。そして、残念ながら、普遍的で安全なソリューションは、顔のない、感情のないExcelスプレッドシートに似ていることがよくあります。私はそのような解決策をもっと少なくしたかった。つまり、ドイツ語で、2つの武器を手にした場合、ヘッダーがくっつき始め、レスポンシブレイアウトとフォントスケーリングを調整することでさえそれに対処できません。そして、ここでの教訓はこれです：製品がほぼ完成したら、それから離れる価値があり、すでに行われた決定をもう一度見ると、それらはもはや適切ではないかもしれません。デザインにもリファクタリングがあります。



ただし、このレッスンについては少し後で学習します。そして、レイアウト検索を最初に繰り返した後、同僚と実質的に話し合うことができる最初の設計ドキュメントを収集しました。能力のグループ、選択されたクラスの大きなブロック、スペルテーブルがありました。進行中に、魔法書の開発に関するチェーンを追加し、いくつかの特徴が完全に廃止されました。

デザインの完成

レイアウトには、League ofLegendsのアイコンが使用されています。



私たちの国では、議論は常に長いプロセスであり、意見や関心の衝突が数多くあります。 3時間もかからなかった1回の会議を覚えていません。最大の機械的情報を提供することがより重要であると考える人もいれば、歴史と雰囲気に浸ることがより重要であり、機械的な詳細をより深く隠すことができると考える人もいます。多くの場合、そのような議論は行き詰まりを打開する唯一の効果的な方法であり、意見交換の結果として、新しいアイデアで次の反復に来ます。キャラクターバイオグラフィーのページとクラス開発ツリー全体がすべての参加者によって承認されました。しかし、メインページから、キャラクターの能力、スペルテーブル、その他の数値特性に関する情報を削除することが決定されました。彼らは、ゲームのプロットをインターフェイスの中心にすることにしました。主人公にとって、これは「世界観の輪」となり、コンパニオンのために、このキャラクターの重要なイベントであるストーリーカードのセットを用意しました。これは、プレーヤーが進むにつれて開かれます。この場合のバフも左3分の1から削除されましたが、名前と期間パラメーターとともに表示されるのに十分なスペースがありました。したがって、画面がはるかにきれいになり、これが主にロールプレイングゲームであり、その後は機械的なゲームであるという事実に焦点が移りました。そしてそれから機械的です。そしてそれから機械的です。









能力は別のページに移動しました。これにより、アイコンだけでなく、能力自体の名前も使用できるようになりました。その後、これは非常に重要であることが判明しました。結局、各能力のアイコンを描くのに十分な時間とリソースがなかったからです。さらに、各能力の意味をアイコンにエンコードすること、さらには後でプレイヤーがそれを解読することは、非常に難しい作業です。しかし、振り返ってみると、私は特殊能力ブロックの能力の数を大幅に過小評価し、特性ブロックの能力の数を過大評価していることに注意する必要があります。その結果、この画面のレイアウトは非常に不均衡になりました。幸いなことに、次のPathfinder：Wrath of theRighteousゲームで修正する機会があります。







また、別のページで、キャラクターの戦闘特性に関するすべての情報を入手しました。開発の終わりまでに、その中の特性の数がほぼ3倍になったため、これも非常に良い決定であることが判明しました。







上記のデザインは、その会議の直後に登場しました。次に、いくつかの小さな繰り返しをスキップして、最終バージョンを示します。その中で、予算と一般的なスタイルを考慮して、いくつかの要素が調整され、イラストが選択されました。

芸術的なデザイン

このデザインは、ゲームのアルファ版ですでに組み立てられています。ここでいくつかの重要な逸脱を行う価値があります。私たちのUIチームでは、デザイナーとプログラマーに頻繁に分かれていますが、デザイナー、レイアウトデザイナー、プログラマーが1人で、アーティストが別の人である場合、このような開発者のプロファイリングを使用します。これにより、インターフェースの技術的な部分と没入型の部分を区別できます。そして、デザインが完成した時点では、まだアーティストはいませんでした。さらに、当時、私たちは、ある種のウッドレザーの裏地とブロンズのボタンで、インターフェースが暗くなると確信していました。しかし時が経ち、ようやく私たちにふさわしい精神的な人を見つけてアートソリューションを探し始めたとき、私たちは革や木をまったく欲しくないことがわかりました。私たちのインターフェースの色は反転され、冒険についての紙、おとぎ話の本に変わりました、英雄の一人のペンから解放されました。しかし、アート要素は追加の条件と制限を導入し、最終的にはレイアウトがさまざまな程度に変更され、たとえば、攻撃について前述したように、いくつかの問題が明らかになりました。しかし、全体として、インターフェイスは多くのメリットをもたらしたと思います。このように、ゲームの全体的な感覚は不可欠になり、インターフェースはもはや必要なものではなく、ゲームの一部になりました。















PCインターフェースの作成の部分についての話を締めくくりますが、残念ながら、リソースが限られているため、すべての設計上の決定が最終的にリリースに含まれるわけではありませんでした。成功したとは思わず、新しいプロジェクトの作業の一環として改訂しているものもあれば、間違いなく去るものもあります。しかし、Pathfinderのライフサイクル：Kingmakerのインターフェースはそれだけではありませんでした。コンソールに移植する必要がありました。

コンソールへの移植

ゲームのリリースから、ゲームをコンソールに移植し始めた瞬間まで、1年弱が経過しました。この間、私たちは多くの機能、詳細を追加し、多くを完了し、多くの点で失望することに成功しました。プレイヤーからたくさんのフィードバックをもらい、もうつまずいたくない石を見つけました。より大きな範囲で、石はコードに関係し、多くのことは維持するのが難しくなり、いくつかの場所ではメカニックとあまりにも密接に絡み合っていました。そのため、コンソールインターフェイスに近づくと、すでにいくつかの知識ベースが蓄積されていますが、問題もありました。私たちにとって、これはコンソールのインターフェースを開発する最初の経験でした。同様のプロジェクトを注意深く分析し、好きなものと嫌いなものを特定し、技術要件を読み、経験豊富なチームからいくつかの相談を受け、開発を開始しました。



PCとは異なり、コンソールインターフェイスにはいくつかの機能があります。

1. 1.彼らはソファに座ってテレビで見られます。これにより、ゲーム全体でテキストサイズが増加しました。
2. 2. TRCによると、重要なコンテンツを配置してはならない5％の保存ゾーンが必要です。
3. 3.カーソルはコンソール上で難しい決定です。そのため、パラメータや能力の説明を入力できるツールチップはなくなりました。

キャラクターの画面を最初に「通過」するときに、要素の配置とレイアウトを継承しようとしました。











しかし、未解決の問題が発生しました。何をいつ割り当てるかについての原則は明確ではありません。たとえば、メイン画面で能力スコアを強調表示できるようにする場合、進行状況ページでそれらを強調表示できるようにする必要がありますか？



選択したアイテムの説明をどこに表示しますか？新しいネストレベルに移動せずにこの説明をスクロールするにはどうすればよいですか？直感的でないコントロールケースが表示されます。たとえば、プレーヤーが左スティックで右端の要素を選択すると、説明が左側に表示され、右スティックでスクロールします。



これらの問題と、コンソールプレーヤーがまだパスファインダーボードゲームのコアオーディエンスではないという仮定に基づいて、結論は、情報の表示と画面の構造を単純化する必要があることを示唆しています。



そのため、PCバージョンから継承しようとした後、フルスクリーンインターフェイスの基本テンプレートとして次の構造が提案されまし







た。左側に、アクションが発生しない静的情報を配置することにしました。



右側に、選択したエンティティのコンテキストの説明を配置しました。つまり、実際には、カーソルを合わせたときにPCバージョンに表示されたツールチップをそこに移動しました。コントローラの右スティックを使用して情報をスクロールしました。



すべてのフォーカス要素（ボタン、セレクター、パラメーター、説明付きの特性）を中央に配置しました。それらの間の移動は、DPADまたは左スティックによって実行されます。大量のコンテンツの場合、スクロールバーは常に、要素が選択されたときに要素が表示されるように、それ自体を配置しようとします。そのため、中央部分に個別のスクロールコントロールは必要ありませんでした。



キャラクターシートの画面間を移動するために、「バンパー」R1-L1を定義しました。

文字の切り替えは、右トリガーR2を押すと放射状のグループメニューを使用して実行されます。



その結果、インターフェースを7つの画面に分割しました。















このインターフェースは、私たちがコンソールに移植した最初のものであり、リリースのために実質的に変更は加えられていません。ただし、ヒント用に予約されていた下部を変更する必要がありました。画面の完全なリストがないことは非常に不便であることが判明しました。遊んでいる間、私たちは常に正しいものを見逃していました。そして、例えば、コンパニオンは彼らの物語のページを持っているが、主人公は持っていないという事実は、ナビゲーションに不便を加えただけです。そのため、ヒント領域は最終的にメニューに変わり、それを介して移動は依然としてバンパーによって実行されました。















ここでもう1つ興味深いのは、進行ナビゲーションです。水平方向または垂直方向にしか移動できない通常のグリッドとは異なり、「上」を押すと、移動したい場所を判断するのが難しい場合があります。 2つの要素があり、1つは現在の要素の真上にあるが、2行上にあり、もう1つは1行上にあるが、右に15°ある場合、どちらの要素を選択しますか。そして、斜めに移動するときに同じ状況が発生した場合はどうなりますか？この問題を解決するために、次の要素までの方向と距離を考慮したナビゲーションを作成しました。これらのパラメータの優先順位は、感情に基づいてすでに手動で選択された係数によって決定されました。



このインターフェースでの作業の最終結果に満足しました。もちろん、PC版のように、プロットの側面に焦点を合わせ続ける気にはなりませんでした。しかし、ナビゲーションと読みやすさの両方の点で便利です。これは、テレビから2メートルの距離から再生する場合に非常に重要です。さらに、フルハイトのポートレートが常にここに表示され、私の意見では雰囲気を大幅に高めます。

結論

それがうまくいったかどうかを判断するのは私にとってではありません。あなたはいつでもより良くまたは異なって行うことができます。私たちは常に批判や提案を喜んでおり、常に疑問を持っていますが、正しい解決策を選択していますか？



ゲームは単なる工場ではなく、Nonameが会社に代わってスペアパーツを作成します。ゲームは個々の開発者、人々の創造性のコレクションであり、それぞれの人にとって、この作品は彼らの人生の不可欠な部分となり、他の人々、プレーヤーの人生の一部になります。



キャラクターシートの作業に参加した人々に感謝します：

Mikhail Rotfort-Lead UI

Vasily Levinov -UI Artist

Vasily Boldyrev-Programmer

Nikita Velikovsky-Programmer

Maxim Savenkov-Programmer

Oksana Merger-UI Programmer



AlexeyGusev -QAエンジニアAlexanderMishulin-クリエイティブディレクターVictorSurkov-

アートディレクター

OlegShpilchevsky-Owlcat Gamesの責任



者著者：Pavel Turchin-UI開発者