投稿記事

UIデザインの記事 (3)

おしそ / ◯904.  2023/09/01 16:14

今日の目標:メッセージウィンドウの改良

報告・備忘録を兼ねて
今日の活動内容を書いていこうとおもいます。

9月の目標は、RPGツクールMVの体験版~購入時に制作していた
プロトタイプ……もとい「天の底から-Reverse Run-」を
遊べるレベルにまで引き上げよう。なので
今月はこれをがんばります。
(原作小説はカクヨムにあるのでらくらくなはず

ちなみに再開前までの進捗はこんな感じ

 ・メインイベントは8~9割組み込めている
 ・MAP50個も作っていた(多分あと必要なのは10個未満)
 ・音楽素材、タイルセット等、お借りしたものは
   ちゃんとクレジットをメモしてました。規約も読み直した。
 ・デフォルトのメッセージウィンドウ用の顔グラは差分付きでできている
   (まあ3年前の絵なのでお察しなところはある)
 ・バトルはほとんどなにも手をつけてない。なのにバトルイベントがある
 ・むしろデータベースはほとんど手つけてなかった

【総評】まじでストーリーとMAPだけがんばってつくって放置していた。


……そんなところからRE:START。はたしてどうなることやら……
生暖かく見守っててください



今日の目標。それはずばり、メッセージウィンドウの改良

一旦寝かせた天底ダンジョン(仮)との統一感とか
ノウハウを活かして、いまなら色々試せるんじゃないか!
そう踏み切ったわけです。

でもプラグインがごちゃごちゃしてたらまずいしなあ
先にプラグインとか見ちゃおう

そんな感じに今日の戦いの火蓋は切って落とされました。


あら~きれいなコモンイベントとプラグイン!!!

当時プラグインのこととかコモンイベントの処理とか知らなかったのか
はたまためんどくさくて触ってなかったのかはわかりませんが
とりあえず、伸びしろがあるってことがわかりました。
よし、やろう。



と、いうわけで
まず、モックアップとして、テストプレイ画面を切り出して
案をだしていくことに。どんなのがいいだろうなあという私
そして高まる要求値


普通に一番初めから、ややこしいことをしようとしています。
グラフィックソフトの上でやるならいくらでも自由なことできるんですよ
実装できるかはまた別問題です。
しかも私のキャラデザって普通に反転したら面倒なことになる!!

そんなことを考えながら、無難な案も考え数十分


無難に……ほんと無難にこうしたらいい気がしますね。

後々、ダンジョン(仮)も出すし、あっちは先にUIつくっちゃってるので
統一感とかあったほうがいいのかなあ、シリーズものだし……
ということで、ウィンドウ枠をシンプルにしようと必死に案を出します。



しかし……どうしても私は一番最初で出した案のように
立ち絵バーン、ウィンドウも独立した枠
という具合でなにかやりたいらしく……

その方向性で考え始めてしまいます。まずい、これは泥沼だ。

プラグインについてはいくつか元からアタリをつけているので
そういった意味では再現できるならありかもしれないな。とおもったわけです。


再現できるならな!!!!!




成し遂げてしまった……。
ありがたい、プラグイン本当にありがたい……









と、いうわけでプラグインの紹介をさせていただきたいと思います!!!




まずは「ルルの教会様」の
【立ち絵表示プラグインVer.2】

これでキャラクターの立ち絵を表示します。
反転はしないと決めたのでこのままいきます。画像は仮絵!

ウィンドウの前面表示を"true"、切替効果は"フロート左(2)"
これでにょーんと好きな感じにでてきてくれます。やったね


続いて「トリアコンタン様」の
【ウィンドウ背景画像指定プラグイン】

これでメッセージ枠をつくります。
これができるってことは画像をそのまま使えるってことですね。

試しにシンボルをいれて動作確認する。いけるな。引き伸ばしとかされない


あとは「Altered様」の
【メッセージテキストの位置をずらすだけのプラグイン】
(ツクマテにあります)

これでデフォルトの文字をずらすことで完了!!
X座標を250ずらしてますね
もしほかの……たとえばモノローグとかでずらしたくなったら
YEP_MessageCore(MV公式プラグイン)を利用しようって魂胆です。やったね!

フォントについてはのちのち変更をいれるかもしれません。








そしてここまで試運転して大喜びしてから気づくんですね







枠どうするんのよ

続きは無料プランの枠にいれます。枠だけに

【有料プラン】の方にはサンプル表記等ありですが
出来上がったメッセージ枠(原寸)とサイズ等書いているものを
オマケ程度においてます

がんばって今日は目標達成までがんばるぞ!





私はここまで書いて気づくのだった。





採用した場合、立ち絵の新調が決定する、と

フォロワー以上限定無料

無料プラン限定特典を受け取ることができます

無料

【 おやつを魔力に変換プラン 】プラン以上限定 支援額:100円

★メッセージウィンドウの全貌と仕様

プランに加入すると、この限定特典に加え、今月の限定特典も閲覧できます 有料プラン退会後、
閲覧できなくなる特典が
あります

バックナンバー購入で閲覧したい方はこちら
バックナンバーとは?

月額:100円

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

おしそ / ◯904.  2022/03/18 19:06

フラットかリッチか。属性アイコン進捗

属性アイコンをつくらないと!!!

と、最近の進捗的に描いたモンスターを見て思ったわけです。

そんな0からはじめるシンボルデザイン。属性アイコン編。

これも紆余曲折ありました……

なんか線対称とかかっこよくない?

と、原神あたりの元素アイコンをみて思った私は
とりまリスペクトからはじめてみました。

あとなんか丸の中にはいって
グラデはいってたらかわいいかも……

なんておもいまずはラフ。

とりあえずふんわりデザインしていく。わかりゃいいんだよレベル。
(フリーハンド)

でもさすがに手描きでやるのはしんどいなーと見た目的にも思い
思い切ってInkscapeという無料ベクターツールを落とし
使い始めて見るわけです。

ベクターツールのいいところ! 拡大縮小しても大丈夫!

でも全然イラレとかつかったことない私にはちんぷんかんぷん。
とりあえず鉛筆ツールつかえばいいかな、うん

うん、なんか解像度あがっただけだ。
このあたりで挫けてしまいInkscapeをアンインストールしようと思ったり。

したのですが、UIデザインの勉強ついでに使い方を勉強することに。

ぐるぐる。私はぐるぐるが好きだな

両方のお勉強後、コンセプト決めないといけないなって思い
私の創作らしい属性アイコンってなんだろう……と思ったわけです。
(ちなみに昨日あげたUIより数日前の話です)

色々考えた結果、私は結構モチーフとしてのつる草模様やら
フローリッシュデザインが大好きでよく創作に取り入れてたことを思い出し
いっそのこと、この属性アイコンでやってみることに。

結果がこのように。しずくっぽいぐるぐるをベースに
あくまでシンプルを追求してみることに。

結構統一感が出てよくなったのではないかな。

フラットデザイン? マテリアルデザイン?

これはUI系の用語らしいのですが、どの方向性でいこうかなと迷うことに

簡単に説明すると、フラットデザインは影とかがない……
いわゆるツイッターみたいなもの

マテリアルデザインは一方で影とか質感にこだわったりするスタイル

その他にも色んなスタイルがあるみたいですが

こう、丸をこころもち立体的にしていく過程で
あれ、なんかしっくりこないぞ? っていうことに

色々調べた結果私自身がフラットデザイン系のものでかつ
グラデーションが入っていないタイプのものがすきなので
あっこれ、違和感の原因はこれ!? となり
丸を消し去るという状況が発生しました

うん、なんかシンプルながら、こっちのほうがいいぞ?となり
この系列でがんばってみることにしました。

問題は戦闘画面の背景で苦戦してるので
視認性が悪くなる可能性があるということ。

白境界線にするかは本格的になってからしようかなーとおもいました



こうして、UIまわりの調整をやっていたわけですが
遡ることちょうど半年前の私は
「UIしらない! わかんない!」と言ってたので
だいぶここ最近でいい感じになったのではないかなと思います。

お勉強って大事だね

最後に比較画像のせておきますね

クリック推奨。 大分……半年でいろんな部分がかわりましたね

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

おしそ / ◯904.  2022/03/17 21:15

UIデザインを考えたりした / 今日のデザインができるまで

 自分のゲームとしっかり向き合う
それがコンセプトだとかテーマにつながると思うのですが
どうしてもやってみたいことはとりいれようってことで

今日の記事とか制作箇所はUIデザインのこと。

メニュー画面とバトル画面

 最近ちょっとお勉強しているUIデザインの練習も兼ねて
そしてプレミアムツクールデーということもあったので
UI周りのコンセプトを決めた上でデザイン改修をやってみました。

びふぉー。
もとがくすみカラーだったんで、
随分明るくビビット系になったのではないでしょうか

伴いましてこのデザインも色々いじって

こんなかんじにしてみました。

純粋な黒もおもすぎるなーと
黒に近い青を採用してみたのですがなかなかいい感じ
旧式のステータスアイコンとも親和性があるし
なによりキャラとも相性よかった。 よ、よかったー

紆余曲折デザインがきまるまで

私はデザイナーでもなんでもないので、
独学でいろいろなサイトとかみて勉強してみたのですが
私の作風はどうやら ポップなテーマ と カジュアルなテーマ の
中間に位置するようで(自己分析結果)

踏まえた上で色々と案をだしてみました。左下が旧タイプ。

くすんだカラー大好きなので今まで使ってたのですが
なんというかこう、重いなぁと、おもったので
思い切って転身のために色々並べてよかったと思います。

で、この中かららしさとかを選んだ結果
既存のカラーの彩度を底上げ、ベースの色数を控えめにして
たとえばステータス異常とか、ゲージといった動的な部分を
アクセント的な感じで選ぼうということになりました。

結果がショッキングピンク+ダークネイビー(?)に

ダークネイビーは黒のかわりとして、
無彩色枠に灰色もいれようかと思ったのですが
この先の統一性を考えるとくすむな……っておもったので
それなら文字色などで中心につかう
白を補助カラーとしてあつかうことに

ワンポイントでドットグラデーションを混ぜて
ちょっとポップさをアピールしたり

イメージはつかめてきたのでいろんな具合を調整したりして
それで最初のメニュー画面/バトル画面に採用。

他にも要所要所でつかっていきたいなぁと

ショッキングピンクも多すぎると視認性わるくなるので
ベース→ダークネイビー サブ→ショッキングピンク 
でいくといいかなーと
そんな具合をかんがえています。 
多分チュートリアルとかもこの系になる。

それにしても同じ配色でも比率とか囲み方とかで
全然印象かわるんでびっくりですよね。

個人的にお気に入りは、ターゲット風のカラーを緑系にすることで
アクセントを効かせれたってところ。



画像多くなりましたがこんな感じでとりあえず一段落
左上に写ってる属性相関も変遷もあったのですが
それは次の記事で書こうかな

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

月別アーカイブ

記事を検索