スプライトのサイズ

スプライトのサイズは、ピクセルアートのゲームの見た目、作業量、画面レイアウトを決めます。選び方と、サイズを一貫させる方法を紹介します。

歩くゴブリン、Pixorでレンダリング
回転するコイン、Pixorでレンダリング
高さ32ピクセルでレンダリングした騎士
32 px
高さ64ピクセルでレンダリングした騎士
64 px

概要

スプライトサイズとは、オブジェクトを描くフレームのサイズのことで、16×16や32×32のような正方形であることが多いです。これはほかの2つの数値と密接に関係しています。ゲームの基本解像度(画面に収まるアートのピクセル数)と、スケール(アートの1ピクセルが何画面ピクセルになるか)です。

よく使われるサイズ

  • 16 px。定番のタイル、アイテム、小さなキャラクター。とても読み取りやすく、細部の余地は少なく、すぐに描けます。画面に多くのものが出るレトロなプラットフォーマーや見下ろし型アドベンチャーに向いています。
  • 32 px。現代のピクセルアートゲームでよく使われるキャラクターサイズ。顔、服、はっきりしたポーズを描く余地があります。タイルは16または32 pxであることが多いです。
  • 48 px。装備や表情豊かなアニメーションを持つキャラクター向けの中間。64ほどの作業量はかかりません。
  • 64 px以上。精細なキャラクター、格闘ゲーム、ボス、クローズアップのシーン。手描きでは1フレームを描くのにずっと長くかかります。

タイルとキャラクター

タイルとキャラクターの大きさをそろえる必要はありません。16pxのタイルグリッドに24pxや32pxの背丈の主人公は一般的で、主人公はタイル1.5~2枚分の高さになります。キャラクターのサイズは見やすさとアニメーションで、タイルのサイズはレベル制作で選びましょう。そのうえで、両方のピクセルサイズを同じに保ちます。そうしないとミクセルになります。

整数倍での拡大

ピクセルアートは小さく描いて大きく見せます。基本解像度を決め、整数倍で拡大しましょう:

  • 320×180は6倍で1920×1080に、8倍で2560×1440になります。
  • 640×360は3倍で1920×1080に、6倍で3840×2160になります。

整数倍のスケールでは、アートの各ピクセルがくっきりした正方形になります。2.5倍では、画面の2ピクセルになるピクセルと3ピクセルになるピクセルが混じり、不揃いに見えます。ピクセルがくっきりしたままになるよう、テクスチャフィルタリングをオフ(ニアレストネイバー)にしてください。

よくある間違い

  • 大きすぎるサイズを選ぶ。64pxのキャラクターはモックアップでは見栄えがしますが、小さなチームが描けるよりはるかに多くのフレームが必要になります。
  • スプライトを個別に拡大する。小さな敵を2倍に拡大して大きな敵を作ると、ピクセルグリッドが崩れます。
  • 画面を考えない。64×320の画面に180pxのキャラクターでは、プレイする余地がほとんど残りません。

手作業で選ぶには

  1. 基本解像度と、画面に収める必要があるものを決めます。
  2. キャラクター、いくつかのタイル、インターフェースで1画面のモックアップを作ります。
  3. キャラクターを24pxと32pxのような2つのサイズで試し、実際の速度でテストプレイしましょう。
  4. サイズを決めて、ほかのすべてをそれに合わせて測ります。

Pixorでのやり方

Pixorでは、カメラに固定のピクセル/mを1つ設定します(デフォルトでは、各カメラはスプライトを独自のサイズに合わせます)。主人公が望む高さになるように設定すれば、ほかのモデルはすべて同じピクセルサイズで釣り合ってレンダリングされます。32と64を比べたいなら、スケールを変えて再レンダリングするだけで、描き直すものは何もありません。ピボットはすべてのフレームと向きで1つのピクセルに固定されるので、スプライトはタイルグリッドにそろいます。

質問

スプライトのサイズは幅と高さのどちらを指しますか?

一般的には、32×32のようなフレームやタイルのサイズを指します。キャラクターはその一部しか占めないことが多いので、キャラクターの高さも確認しましょう。

タイルとキャラクターは同じサイズにすべき?

必ずしもそうではありません。よくある構成は16 pxのタイルに、高さ16~32 pxのキャラクターです。大事なのは、すべてのアートが同じピクセルサイズを使うことです。

エンジンでピクセルアートがぼやけるのはなぜですか?

整数でない倍率で拡大されているか、フィルターがかかっています。ニアレストネイバーのフィルタリングと整数倍のスケールを使ってください。

次に読む

自分のモデルで試してみましょう。ブラウザーで無料で使えます。または製品版を入手してください。

ブラウザーで試す Pixorを入手