Qpic...
Transcript of Qpic...
ゲームにおける「デザイン」ってなんだろう?
レベルデザインマップや環境、難易度などの設計 プレイヤーにどうやって没入感や 達成感を与えるか?
レイアウトデザイン情報を画面にどう配置するか ゲームプレイの快適さを大きく左右する
前回までの「ドット絵講座」キャラやマップなどの素材をどう作るか
レイアウトそれを画面にどう並べるか
❶ レイアウトの話
レイアウトとは “情報の整理整頓”
授業ノートや学校のプリントの整理を想像してみよう。
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
英語
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
❶ レイアウトの話レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
国語 英語
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
❶ レイアウトの話
1. グループ化「国語」「算数」「英語」のグループ さらにその下の階層に「第一章」「第ニ章」 同じグループの情報を近接させ、別のグループ は距離を置く
レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
国語 英語
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
❶ レイアウトの話
2. 整列情報に視覚的なつながりを持たせる 縦横を揃えるorずらすことで、情報の並列を 感覚的に理解できる 右揃え、左揃え
レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
国語
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
❶ レイアウトの話
3. 繰り返しデザイン的な特徴(形、色、フォントなど) をつくり、それを繰り返し使用することで 統一感UP&グループ化を分かりやすくできる「色のついた四角い枠」
レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
国語 英語
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
❶ レイアウトの話レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
4.強調情報の重要度を考え強弱をつける ・大きくする ・色を変える ・他と違うデザイン要素を入れる
❶ レイアウトの話タクシー Lv54 職業 魔法使い HP100 MP68 能力値 攻撃23 防御10 魔攻45 魔防38 速度32 スキル ファイア ブリザド
タクシー
職業 魔法使い
Lv 54
攻撃防御魔攻魔防速度
2310453832
スキル ファイア ブリザド
能力値
HP 100/100 MP 68/68
❷ 色づかいの話
色の三原色(加法混色)R,G,Bの3つを混ぜることで、 ほぼあらゆる色を表現できる。 全部を混ぜると白になる
パソコンのモニターみたいな ”発光するもの”は全部これ
数値で指定できるため機械的 選ぶ色が必要以上に明るくなりがち
まず、テーマカラー
❷ 色づかいの話
ゲームを考えるとき、テーマ(カラー)を先に決めておく 色から決めてもいいし、ゲームの雰囲気から決めてもいい
ソリッドなかっこいいゲームを作りたい→黒、高コントラスト 女の子っぽい画面にしたい→ピンクやパステルカラー 赤をメインカラーにしたい→元気で明るいゲーム
黒や紫、明度の低い色を使う→暗い雰囲気or落ち着いた雰囲気
ベースカラー メインカラー アクセント
メインより薄い色 =メインと色相は同じで
彩度を下げた色
最初に決める テーマカラー 鮮やかなのがいい
❷ 色づかいの話
差し色 メインカラーと彩度と明度は 変えず色相をいじるとか
他の配色方法
❷ 色づかいの話
Qpic webの色。白メインに、彩度と明度は同じ色相違いを3色並列
同じ色相の中で明度だけを変えたグラデーション。
彩度・明度をそのままに色相を変えつつも、近い色でグラデーション
❷ 色づかいの話
いいえ いいえ
通常時 選択時/マウスオーバー時
色を明るくしたり暗くしたりした差分をつくり プレイヤーの操作に合わせて変化させることで、
プレイヤーは「自分の操作がPCに受け付けられた」という フィードバックを得ることができる
色に役割をもたせる(2)
❸ フォントの話
自作PCゲーのフォントに関する問題
・文字を先に画像素材としてつくっておく →柔軟性がない。
・プログラムからテキストを表示する →プレイヤーのPCに入っている文字でしか表示できない (埋め込みはできるが、質が高く二次配布可能な フリーフォントなんてほとんどない)
画面に文字を出す方法
❸ フォントの話
目立つもの、文字数の少ないもの ゲームの世界観に一番合いそうなもの
読みやすいフォント テキスト量が多くなるため、この部分は 素材化せずテキスト表示させる(PCの デフォルトフォント)になりそう
見出しと本文以外で適宜
見出し
本文
アクセント
Windowsプリイン書体を使ってはいけない()
フリーフォントとか色々ダウンロードしてみましょう
❸ フォントの話
コツ
「ガウプラ」 http://www.graphicartsunit.com/
「フロップデザイン」 http://www.flopdesign.com/index.php
❹ ロゴの話
レイアウトとか配色は理論で結構なんとかなるが… こればかりはセンスがいる
↓ とりあえず、事例をたくさん見るしかない
MdN EXTRA Vol.1 マンガ&アニメのグラフィックデザイン MdN EXTRA Vol.2 マンガ&アニメのグラフィックデザイン タイポグラフィ編
❹ ロゴの話
ロゴをつくるときに考えるべき3つのこと
2. 形、色、質感は適切か「タイトル画面に置くもの」という前提を忘れずに
・ゲーム内に使ったフォントを使ってみる ・4:3のタイトル画面の真ん中に置く画像 →横長、なるべく左右対称に近いシルエットが望ましい
・ゲームのテーマカラーをロゴに使う
・ただ色を付けるだけではない 立体的なのか、フラットなのか、光沢があるのか