Pixel Logic - A Guide to Pixel Art

ピクセルアートの描き方についての本。必要なソフトウェア、道具から始まってピクセルを描くのに必要なすべてが書かれている。 びっくりするくらい版権の絵が多い。知ってるキャラクターのさまざまな比較だと興味をもてるし、わかりやすい。見ているだけでも楽しい。完成途中との比較もある(どうやって入手したんだろう?)。実際の工程をイメージすることができる。

ゲームの場面の画像も多くてじっくり見るとさまざまな工夫があることがわかって感動する。プレイするほうは一瞬で、あまりまじまじ見ることは少なかった。

ポケモン、メトロイド、カービィ、マザー、…日本のゲームが多く、ホントに席巻してたんだなと感じさせる。

Line art

枠線の種類によって分類できる。

  • 枠線なし
  • 黒線
  • 特定のカラー
  • 光源の位置によって枠線の色を変える

これらで印象がかなり変わる。背景がどんな感じかとかで決定する。ポケモンは、4つ目が一貫して用いられていることを確認できる。

Anti-Aliasing

角になる部分にブレンドした色のピクセルを置く。

AAしてもわからない絵や状況もある。 柔らかい質感や丸いモノはAAしたほうがよくなる?

高解像度のときも必要。クレヨンっぽい感じとか特殊な場合はむしろ必要ない。

線の角度によってAAの定石も異なる。45度のAAラインはないのがふつうだが、例外はいくらでもある。 普通はもっとも角のところだけ濃い/薄い色を配置する。おそらく、膨張色と縮小色?の相互作用でカーブがよりきれいに見えるということなんだと思う。じっさいは45度だが、45度というよりは円に見える。

線の幅が1pxであろうとも、太く/細く見せることが可能。黒=濃い、白=薄い

線がハグする(=同じ長さでAA線が揃う)のはよくない。ブロックっぽく見える、太く見せすぎる、ぼやける、…。 角のピクセルを消したり追加したりして揃うのを防ぐとよい。

Color

色の指定方法には2つある。

  • 3つのスライダー
  • 赤/緑/青の混合

上を使う?

  • 枠線の色のわずかな違いが見られ、美観に影響を与えている…。完全な黒、濃い紫…。

グレーはさまざまな色として利用できる。相対的に黒い状況が必要なとき、夜や暗闇などでは元の色にグレーを足すことで、相対的に暗闇を表現できる?例)夜の木の幹。夜なので全体的に紫。幹は茶色に見えるが、じつは紫にグレーを足したもの。全体が紫なので、相対的に幹が茶色に見える。

  • 完全な黒は避ける。
  • Hue/Saturationのスライダーもいじくって絵を試行錯誤する。
  • 色の数は絵のサイズに依存している。

Readability

  • サイズが小さいと、アニメーションが滑らかに見えやすく、衣装をかんたんに入れ替えることができ、工数も少ない。

高画質化してくると、ピクセルアートというよりもバイナリーアートに近くなってくる。描くのも手間がかかる。

  • 小さいと情報を正しく伝えるのが難しい。よく工夫する必要がある。
  • 何を注目させるか、優先順位をつける必要がある。人の場合は、多くは表情になる
  • 高解像だからといって色々加えすぎると散らかる。
  • 大きな解像度が簡単に思える。でも小さい解像度でも取捨選択するので問題なく描ける。
  • 低解像度下では顔を大きくすることがよく用いられる。感情や特徴表現に十分なスペースを確保するため。
  • 機能によって比率を変える。ワールドマップ、先頭、アイコン、会話…。
  • カービィはspriteにだけ枠線がある。柔らかな背景には枠線がない。

Dithering

Ditheringは限られた色で色を作りだす技術である。2つ色があってチェックに配置するとその色の中間の新しい色に見えるようなこと。

  • 現代では色がたくさん使えるので以前より使われることは少なくなった。とくにspriteで使われることはほとんどないが、背景では立体感を出すため使われることがある。
  • パターンによって濃さが変わる。
  • ditheringは昔から芸術分野で使われてきた。クロスハッチング、点描。

Game Perspectives

マリオ、シムシティ、不思議のダンジョンはすべて描かれる角度が異なる。ゲームは角度によって分類できる。 どの軸に焦点を合わせているかということ。

  • 面に合わせて、計算することでそれぞれのperspectivesに変換できる。
  • ポケモンでは、木を部分ごとに分割して角度を変えることで視点移動しているように見せかけている。
  • 完全な見下ろしは、あまり魅力的ではない。シミュレーションや戦略ゲームだとアリだが、RPGなどで見下ろしがないのはそのため。
  • まず45度のグリッドをサポートしているソフトウェアで下書きし、ピクセルアートにする。
  • 背の高いもの(木とか)は、まず下書きで同じ高さにする楕円を描いてオブジェクトの輪郭を掴んでから描く。
  • 低いアングルは不可能なので、カットシーンにしか存在しない。

Clean-up

  • 線画からピクセルアートへ。
  • さまざまな要因からできあがったものに修正を加えていく。
  • 多くのゲームでベータと最終版が違うのを確認できる。
  • 改善のループを進める。アジャイル。
  • スケーリング、回転、シャープネス、コントラスト、タンジェント、影、光、…。

Subpixeling

画面の最小単位はピクセルでそれ以上分解できない。それをピクセルより小さいピクセル以下が存在するように見せるのがsubpixel。

  • 薄い色で0.5ピクセル分に見せることができる。
  • selective outlineは暗い背景でのみ使うのが安全
  • 放物線の頂点に近づくにつれてtipは大きくなる。これによってゆるやかな曲線に。
  • 3つの線がよくわからない。移動方向に対して垂直に変化させるということ?三角関数の波で、一部分だけ注目して移動させると縦に移動しているように見えるような?スライムが跳ねるときは横に伸びる絵が入っている。
  • すべて動かすわけじゃない。腕、手、だけとか。また、メインで動くのとサブで動くものもある。例えば格闘ゲームで普通に立っているときは胸を上下に1ピクセル動かし、関連して腕が0.5ピクセル動く、ようなこと。
  • 微細な動き、眠り、笑い…などは、color shiftで表現。
  • 滑らかなアニメーションに用いられる。1,3、5フレームは1ピクセルずつ異なる。2,4は色だけ違い、0.5ピクセルの違いに見える。
  • sub pixel ≠ moving shading …sub pixelは動きについて?

Animation

描画、アニメーション。ピクセルアートはそのどちらも知らないといけない。そして、ピクセルアート独特のことについても知らないといけないのでトリリンガルのようなものだ。

  • アニメーションはより歴史が長い。『The Animator's Survival Kit』がバイブル。
  • key frameが重要。その間をいくら滑らかにしても、説得力がない。
  • ほかの作品や、日常生活の観察で参考になる。
  • key frameの間に色んな可能性があるときは、その間をちゃんと埋める。
  • overshoot…たとえばアッパーパンチで、キーフレームを超えて、少し伸びるような動作をするやつ。同時に体も細くなる。
  • 部分ごとに遅延させる場所を設定する。たとえばマントは動作に遅れてアニメーションする。また、動かない場所もある。
  • Overlap → Followthrough
  • 次のフレームを見せる、便利なOnion skin toolというのがある。
  • 背景とスプライトの動きによってスクロールにはいくつか種類がある。
article/pixel_logic.txt · 最終更新: 2020/07/22 17:05 (外部編集)