Ask Riot

LoLやRiotに関する質問をお送りください。回答は日本時間の隔週金曜日に掲載されます。

質問を入力してください

エラーが発生しました。再度お試しください

ご質問ありがとうございました!

次の記事

/dev: レベルアップシステムのビジュアルデザイン

新たなレベルアップシステムのビジュアルデザインにおける困難とその解決方法について。

皆さん、こんにちは!Riot_MortとSpicyMemeDreamzが新たなレベルアップシステムの鍵となったデザインの要素についてお話しします。

レベルアップの上限を撤廃した理由はプレイスタイルやスキルレベルを問わず、プレイしたこと自体を称え、それに見合う報酬を用意することでした。さらに今後何年にもわたり、プレイヤーがやり込んだことを示せる何かを提供したいとも考えていました。

レベルアップの上限を撤廃

プレイヤーとともに成長する無限レベルアップシステムの構築が狙いだったので、レベルに合わせてビジュアルをどう進化させていくか早めに決めておく必要がありました。簡単にいえば——レベルが上がったことをいかにかっこよく見せるか——ということです。他の様々なゲームや現実世界で使われている手法を調査してレベルアップの扱いを見ていくと、どれもある一線を超えるとビジュアルの表現が追いつかなくなることが分かりました。星やメダルが増えたり、装飾が追加されたりで、どんな手法をとるにせよ、レベルアップに合わせたビジュアル表現の進化には、ある一線を超えると同じに見えてしまう(または違いが曖昧になってしまう)リスクが存在していました。

レベルアップシステムの全体的なデザインを決めるための習作スケッチ

現在のシステムを活用

それらを踏まえ、常に新鮮に感じられつつ、他のプレイヤーと比べて進行度の違いが一目で明確になるビジュアルを実現したいと考えました。まず最初に既存のレベルアップシステムを見直し、プレイヤーが見覚えのある雰囲気を残しながらも、新しいデザインの元となり、さらに強い印象を残せるようなビジュアル要素がないか探してみました。また、レベルアップしていく上で目標やチェックポイントとなるものを用意し、それを成したときの達成感も大きな狙いでした。ただひたすら無限の高みを目指してレベルアップしていく——という過酷な道のりではなく、意義のある節目が存在することで、そこへ到達するために努力しようという気持ちになれます。

新名誉システムで導入された”“段階ごとに色が順番に変化していくシステム”は、進行状況やレア度など、今後ゲーム内のあらゆるものに使われるようになっていきます。色の変化はレベルアップシステムに導入すべき核となる要素でしたが、レベルの上限が撤廃されるのなら、「到達できる最高位」というものが存在しないため、そこに向かって常に色を変化させ続けるというのはほぼ不可能でした(永久にひとつの色にとどまっているように感じられてしまいます)。

LoLで統一して使用される色の段階システム。左(低)から右(高)に変化していく

そこで、この色の段階システムを用いつつ“一定レベルに到達するとリセットが入って色が最初に戻り、そこから再び上昇していく方法”を取ることにしました。こうすれば上限にとらわれることなく、次へ次へと進行していることを明確にビジュアルで表現できます。また、ひとつの色に長く留まらないようにリセットは100レベルごとに行うようにしました。最初のみ例外ですが(レベル30からスタートしてレベル50で変化)それ以外はレベル25ごとに色が変化します。

進行状況を示すためにテーマを使用

これによって色の違いでレベル上昇の段階を示せるようになりましたが、リセットして一巡した後の色との区別――つまり「現在の段階の緑」と「次の段階の緑」を区別する方法が必要です。そこで私たちは、色の段階システムの補完として同じ色の差別化に使えるビジュアル要素がないか、リーグ・オブ・レジェンドの世界観の中で使われているアートを探してみました。そしてルーンテラやスキンテーマなどに使われている様々なアートを試してみた結果、一定の法則を決めてレベルを表示するアートのボーダー(枠)を変化させることに決めました。

ヘクステック アニーやピルトーヴァー地域の様々なアートワークを参考にして『ヘクステック マジック』のアーク発生装置のボーダーを作りました
『ファイア マジック』のテーマは様々なチャンピオンやスキンテーマを参考にしています。主なインスピレーション元となったのは地獄の業火ダイアナです

段階が上がるごとにボーダーを豪華にする

  • 量感、色値、異なる素材で変化を付けて上位ほど豪華に
最初の緑(レベル30)と2つ目の緑(レベル125)のビジュアルの違い

ボーダーの核となる部分には同じシェイプ・ランゲージを使用

  • 常に同じ表示箇所から進行状況がわかるように、レベル進行メーターの開始位置と終了位置は統一しました。よりハイレベルでは他と差別化するために異なる形が使われます。
左: レベル進行メーターの開始位置と終了位置 右: レベル表示箇所の低レベルと高レベルでの形の違い

見えにくくなることを避けながら、テーマを使ってレベルの進行状況を装飾する

  • テーマを利用してレベルアップの進行状況を美しく見せる必要はありますが、それによって肝心の「現在の進行状況」がわかりにくくなってはいけません。テーマを利用した結果それが伝わりづらくなってしまうなら、継続的なレベルアップを導入した本来の意義が失われてしまいます。

表示される箇所

レベルの進行状況はプレイヤーにとって大切なものなので、すべての要素をできるだけプレイヤー情報の近くに表示しようと考えました。それを重視しながらクライアント内のどこでレベルを表示するか決定しました。

常に見える箇所

レベルの進行状況をいつでも把握できるようにしたいので、レベル進行メーターをクライアント内の常に見える箇所に表示しておくことはとても重要でした。わかりやすいビジュアルであれば、レベルを上げるためにもう1試合プレイすべきかどうか直ちに判断できます。情報を探す手間は、いつでも少ない方が理想的です。

一目でわかる方法

常にフレンド同士が互いのレベルを確認できるようにすることは、かなり昔の初期段階から皆の同意の取れていた事項でした。マウスカーソルを合わせるとプレイヤー情報がポップアップされるようにしておけば、レベルや現在の状況を素早く確認して自分と比較できます。とはいえ、レベル表示が試合に影響を与えないように、チャンピオン選択画面から対戦結果画面までは表示されないようにしました。レベルアップシステムは楽しんで取り組むものであり、プレイヤースキルの指標となるべきものではありません。プレイヤースキルの指標はランクであるべきです!自身のサモナーレベルを披露する方法はありますが(この記事の終わりで紹介しますので、もう少しお待ちください)ゲーム内システムが勝手にレベルを暴露するのはよくありません。

プロフィール上

現在のレベルと進行状況はプロフィール上に表示され、レベルが高くなるとボーダーが進化していきます。

対戦後

対戦が終わったらすぐにレベルの進行状況を確認できるようにしたいと考えました。全体的なゲームプレイのサイクルを考えると、対戦を終えてすぐにレベル進行メーターの伸びや次のレベルにどれだけ近づいたのか確認できることは非常に重要なので、対戦結果画面にも進行状況を表示するようにしました。

試合中

さらに、戦闘中でも自分のレベルを示すシステムを追加しました。このシステムはこれまでにプレイしてきた時間と修得してきた知識を示すためのものなので、各テーマの節目ではそれをはっきりと示せるエモートを用意しました。相手を巧みにアウトプレイした時や、自分がどれだけ長い間プレイしてきたか披露したい時は、遠慮なくエモートボタンを押しましょう!

当初はひとつのみのエモートで、それがレベルに合わせて進化していくシステムを考えていましたが、たとえレベルが上がっても以前の段階の報酬をそれ以降も使い続けたいという意見が寄せられていたので(名誉ワードなどで)以前の段階のエモートもずっと使えるようにしました。

これから

レベルを上げていくやり込み要素を皆さんに楽しんでもらえることを願っています。ランクがなかなか上がらなくて苦戦している時でも、このシステムがあれば常に前に向かって進んでいることを感じられると思います。お読みくださりありがとうございました。皆さんからのご意見をお待ちしています!

次の記事

/dev:グループ機能のアップデート