マビノギ

マビノギといったら染色！

ツイート 2024/07/09 10:34:05

こんにちは、マビノギエタニティの企画を担当しているリブリーレミルクティーです。


Unreal Engineへの移行によるエタニティでの作業を紹介するにあたり、

どのようなテーマを選ぶべきか、とても悩みました。

やはり難しい話はさておき、一番気になるものから取り上げるのがいいと思いました。



ということで、最初のお話は【染色】です。

書いていたら長くなってしまい、1、2編になりました。



前回、マニーさんが[アートテクニシャン～キャラクター制作編]の記事で、

まずエタニティの色味について解説してくれました。


最もマビノギらしい色合いを出すために、TAの皆さんが工夫を凝らしてくれたおかげで

Unreal Engineでの色味テストのために設定した私のキャラクターのリブリーレはとても鮮やかで…美しかったのです。

さて、色味を整えたところで、エタニティではどうしたらもっと便利で楽しく染色することができるかを考えました。



私は染色に本気のミレシアンです。


毎週、インボリックを楽しみにしながら染色アンプルを受け取り、

新しいアバターが出たら即座に購入して染色をしてきた染色職人です。



よく使う色指定染色アンプルのカラーコードを競売場のお気に入りに登録しておき、随時検索するほどです。


人生の半分以上を共に過ごしたマビノギで染色をしながら、

どのような点が惜しいかを痛切に感じていました。



※開発中のイメージです。 エタニティのローンチ時にはUIの構成や動作、デザイン、詳細が異なる場合があります。
※基本メニューUIは染色システム開発時点での仮バージョンです！UI編は次のシーズンの記事をお楽しみに！



染色モード進入


染色し、希望していた色が出ないと


染色アンプルを使って、リストから対象を選び、好きな色に染色するまで、

同じ過程を何度も繰り返した経験があると思われます。


この時、同じウィンドウを何度も確認しなければならないし、同じ作業を何度も繰り返さなければならないので、

マウスをクリックする手も痛くなるし…色々面倒だったのではないでしょうか。




染色アンプルを使い、染色対象を選択する段階をスキップして、

そのまま染色に進むことができれば便利なのでは？と思った次第です。


せっかくなので、染色ができる独自のモードにすぐ進むように改善するついでに


1つのアイテムを染色していた最中に別のアイテムを選んですぐに染色を進行できるようになれば、さらにいいですよね！


左の染色対象アイテムリストでは、着用した装備だけでなく、

インベントリに所持中の染色可能なすべてのアイテムを一覧できます。


例えば、かつらのみ、または靴のみを選択して並び替えるなど、

様々なフィルター機能を提供する方向でさらに改善中です。




皆さんも新しい服が出たらたくさん悩んで、そして丁寧に染色をしたんだと思います。

でも、何か物足りなさを感じた瞬間があったのではないでしょうか。



一度染色モードに進んだら、何度も染色画面を閉じたり開いたりする必要がなく、

好きな色をパーツごとに分配して、予め色を確認したり、

どのような感じに見えるか、色の組み合わせを確認できるようにしました。





ただ、既存と同様に、1回の染色では1つのアイテムで1つの染色パーツのみ染色できるようにする予定です。


一度に複数のアイテム、複数のパーツの染色が可能になることも検討しましたが


その場合、消費するアイテムが何なのか、染色前後の色がどのように変化したのかの案内があまりにも複雑になってしまいます。




染色結果ウィンドウ


話は変わりますが、染色後の結果ウィンドウももう少し綺麗に整えてみました。





結果ウィンドウの不自然な改行がいつも気になっていたのは私だけではなかったと思います。


これは染色だけでなく、他の様々なシステムにも活用される結果ウィンドウの問題ですが、

この部分の改善は次回の記事で詳しく紹介することにして…。



まず、染色結果ウィンドウの読みやすさをどうしたらいいのか考えてみました。

染色前と後、どのアイテムパーツが既存の色からどんな色に変わったかを

カラーコード値と一緒に、より明確に表示できるように改善してみました。





最初はもちろんRGBコードだけを見せたのですが、

エタニティプロジェクトに新しく参加した作業者からHexコードの方が分かりやすいという意見もありました。


これまでのマビノギの経験と照らし合わせると、RGBだけでも十分だと判断していましたが



エタニティアップデート以降、マビノギを初めてプレイする初心者ミレシアンの方は

Hexの方が認識しやすく、覚えやすいかもと思えました。


もちろん私は720000より114 0 0に慣れていますが…とりあえず両方とも見せることにしました！







この染色結果ウィンドウがどのように表示されるのか、詳しい動作の様子は次の記事で確認できます。







染色カラーパレット


カラーパレットについては話したいことがたくさんありますが…。








まず、元々使っていたマビノギならではの、複数の色が歪んで

混ざり合ったパレットの形状をそのまま残すべきかどうかという悩みがありました。



他のゲームのように色相環の形ですべての色を提供する方法もありますが、


マビノギのカラーパレットはすべての色を網羅しておらず、

一部は色指定染色アンプルのみでしか提供されていない状況だったので、安易にその方法を選ぶのはいろいろな理由で躊躇しました。





そこで！既存のパレットで提供していた4万色以上の色を活用し、

その色だけでももう少し綺麗で自然に並べたバージョンを、と思いましたが…。










この過程で一体何があったのかは…担当プログラマーのハンバーガーさんの記事を読めば確認できます。





人間が自然だと思う色の並び方と、コンピューターが理解する自然な色の並び方との間には



あまりにも埋めがたいギャップがありました。



どの方法を活用しても、自動的にきれいな色のスペクトルを並べることができなかったので


結局、手作業で結果物を調整しなければならない状況でした。



パレットを2つに分けて提供する方法も考えましたが、染色時にもう一回デプスを加えるのは避けたかったのです。










開発中の染色モードUIに元のカラーパレットを載せてみたところ、


今までの悩みは一体なんだったんでしょう…ものすごく自然な感じでした。


誰が見ても「これはマビノギの染色だ！」と分かるという意見も出ました。

私が負けました…。





染色パレットを睨みながら、

染色するときの達成感と誇らしさはどこから来るのだろう？という悩みを開発期間中ずっと持ち続けました。


a.カラーパレットから好きな色を1つ以上選択→これはいわゆる物理の領域

b.1/5の確率から希望の色に染まるまで繰り返す→確率と戦う根性の領域




ここでaの領域は…混沌としたパレットから好きな色を選ぶのはとても大変でした。


bの領域は、今も色指定染色アンプルですぐ染色に成功できる手段が存在しますが、それは費用がかかります。




肝心なのは、自分がきれいだと思うアバターを


一番好きな色で、時間や追加費用をかけて自分だけの個性が出る服にすること-


つまり、パレットの見た目よりも、染色の結果にたどり着くまでの過程をもう少し便利にした方がいいと思いました。





最終的には、元のパレットの形はそのままにし、色選びの利便性を高めるために、いくつかの改善を加えるという方向性になりました。


どのような改善が行われたのかは、続く2編の記事をご確認ください。

『Writer　リブリーレミルクティー』