画像と文字

3Dモデルから来ないコンテンツが2種類あります:すでに持っている画像と、文字です。どちらも最後に上から塗るのではなく、最初にシーンの一部としてパイプラインに入ります。そのため、線、アウトライン、オクルージョン、影、パレットのすべてが、新しいパスを1つも加えずにそれらにも働きます。

シーン内の画像

シーンステップで、アウトライナーの+メニューの画像 › 画像ファイルから…を使うと、画像を平面に貼れます:ビルボードの葉、遠くの木、看板、明かりの灯った窓、描いた背景などです。ほかと同じパーツで、アウトライナーに行があり、インスペクターにトランスフォーム欄と独自の設定があります。またシーングラフの画像ノードでもあります。行とノードは同じもので、設定はノード上にもあり、後に行やリングを置けば繰り返されます。

設定 働き
向き 直立、地面にフラット、スプライト(スプライト空間で)、またはデカール(どちらも下記)。
反転済み 左右反転。コストはかからず、2つ目のファイルも要りません。
傾き 後ろへの傾き(度)。
90度回転 垂直軸を中心に回転。90°単位のみ:その間の角度にはフィルタリングが必要になり、フィルタリングはピクセルアートをぼかします。
1ピクセルのメートル数 画像の1ピクセルがワールドのどれだけを覆うか。
シーンの光を受ける デフォルトはオフ:画像はたいてい描いた人がすでに陰影を付けているので、さらにシェーディングすると光の方向が2つになってしまいます。
周りの線 ほかのパーツの周りと同じです。
下を切り抜く これより透明なピクセルは穴になるので、切り抜きの葉が使えます。
構図に含める ラベルにはオフ:騎士の上の「GAME OVER」の帯で、騎士が縮んではいけません。
パララックスのレイヤー 後ろから数えて、どのレイヤーに属するか。描いた絵と3Dが1つのレイヤーの重なりを共有します。

くっきりさせるボタンが2つあり、どちらも表示中のカメラを使います:

  • 整数ピクセルは、画像の1ピクセルがスプライトの整数ピクセルを覆うようにサイズを決めます。それ以外はリサンプリングされます。
  • カメラの方を向くは、そのカメラのピッチだけ傾けます。見下ろすカメラでは直立したカードが短縮されて見え、行が抜けて文字がつぶれます。

コマンドラインから:

pxr project set game.pixor --add-picture bush.png:-1.1,0,-0.3:0.05
pxr project set game.pixor --add-picture bush.png:1,0,0.2:0.035 --mirror
pxr project set game.pixor --add-picture sky.png:0,0,-8:0.2 --layer 0 --unframed

スプライト空間では、画像はカードではまったくありません。シーンを描いた後、その画像を、位置が落ちる場所のスプライト自身のピクセル上に置きます:そのため、どのカメラにも正面を向き(ビルボード。シートのどの向きでも同じ茂み)、カメラに関係なく画像の各ピクセルがスプライトの整数ピクセル(スプライトのピクセル、デフォルト1)になります。正確な文字にはこれが必要です。位置の深度を保つので、その位置の手前にあるものは引き続き画像を隠します。また、カードと同じくパーツなので、線、クリーンアップ、パレットは1つのパーツとして扱います。直立したカードと同じく、位置(下辺の中央)に立ちます。構図に含めるがオンのとき、位置がフレーミングに含まれます。

pxr project set game.pixor --add-picture bush.png:-0.8,0,1.1 --facing sprite
pxr project set game.pixor --add-text "+12" --text-at 0.25,0.35,0.9 \
  --facing sprite --picture-pixels 2 --font pixor-5

デカールは、直立したカードが立つ位置の、その平面から到達距離(メートル単位、両側)以内にある面に描かれます:壁の看板、ひび、焦げ跡。4分の1回転後ろに倒せば、地面の水たまりや敷物になります。ジオメトリも独自のパーツも持ちません。フレームに描かれた面がそのボックスの内側に入ると、その面はそこで画像の色を受け取り、自分の光、線、アウトラインは保ちます。そのため壁の看板は壁と同じように陰影が付きます。

pxr project set game.pixor --add-text "OPEN" --text-at 0,0.3,0.45 \
  --text-size 0.03 --facing decal --decal-reach 0.25 --font pixor-5

パレットに合わせます。プロジェクトに固定のパレットがあると、画像は読み込み時にそのパレットに合わせられ、レンダリングで何ピクセルが変わったかが表示されます:

picture  bush: 330 of 330 pixels moved to the palette (100.0%)

--keep-coloursは色をそのままにします。自動パレットのプロジェクトには、まだスナップ先の色がありません(パレットはシーン内のもの、カードも含めて作られます)。そのため、パイプラインのもっと後でスナップします。

PNGかJPEGか:切り抜きにはPNGの透明度が必要で、背景用の写真はたいていJPEGです。

複数のフレームを持つ画像。フレームを横に並べた画像(4コマでちらつくたいまつ、6コマではためく旗)は、フレームを設定した1枚の画像です(--picture-frames 4)。カードの幅は1フレーム分で、最初のフレームを表示します。Pixorで作ったクリップで、どのフレームを表示するかにキーを打てるので(picture:NAME、frame)、描いたちらつきもほかと同じようにシート内で再生されます。反転済みは各フレームをその場で反転し、順序は保ちます。

フレームは1本の帯ではなく個別のファイルにもできます:1フレームに1ファイル、--picture-sequence:指定したファイルが最初のもの(flame_0001.png)で、その後の番号が同じ桁数で続きます。どのフレームも最初のものと同じサイズです。また単独で再生もできます:単独で再生、--picture-plays:シートが何を表示していても、クリップがどれを表示するかキーで指定しない限り、1フレームずつ繰り返し再生します。ほかに何も動いていなければ、それがアニメーションになり、pictureというループになります。

pxr project set game.pixor --add-picture flame_0001.png:0.7,0,0.8 \
  --picture-frames 4 --picture-sequence --picture-plays --facing sprite

空

空はすべての背後、何も描かれなかったピクセルに入ります。そのためモデルは空がないときと同じアウトラインを保ちます。帯(上の色と下の色、その間の整数個の段で、ブレンドはしません)か、描いた画像(フレームの上端に揃えて中央に置き、画像の1ピクセルをスプライトの整数ピクセルにし、端は両側の外へ引き延ばします)です。色はパレットに正確に入るので、帯は指定したとおりの色になります。空はワールドの一部です。アウトライナーの+メニューのワールド › 空、またはpxr project set game.pixor --sky '#2c3e6b,#9dbcd9,4'(または--sky dusk.png:2)、そして--no-sky。

シーン内の文字

テキストカードは、画像を読み込む代わりに描くカードです。そのため文字は、カードの向き、回転、スケール、切り抜き、線をそのまま得られます。アプリでは、アウトライナーの+メニューの画像 › テキストで、モデルの上に1つ置きます(シーングラフのテキストノード)。フォントの1ピクセルがスプライトの1ピクセルです。インスペクターには文字、フォント、文字のスケール、インク、アウトラインがあり、その下にカード自身の設定があります。文字はアプリでもスクリプトからでもラベルで、ショットの構図を決めません。そのためアプリはフレーム上端のすぐ内側に置きます。代わりに文字を囲むように構図を決めるには構図に含めるをオンにします。スクリプトからは:

pxr project set game.pixor --size 128
pxr project set game.pixor --add-text "GAME OVER" \
  --text-at 0,2.3,0 --text-size 0.033 --tilt -45 \
  --text-colour '#f4ecf2' --text-outline '#1a1620'

--text-sizeはフォントの1ピクセルあたりのメートル数です。これがスプライトの1ピクセル以上になれば文字が読めます。レンダリング時に、シートの1メートルあたりのピクセル数が表示されます(--size 40の騎士のプロジェクトで約128、0.033 × 40 ≈ 1.3。このページの茂みと画像を入れると37で、まだ1を超えています)。64pxでは約24になり、フォントの1ピクセルが1ピクセル未満になって文字が崩れます。

オプション 働き
--font NAME|FILE pixor-11、pixor-5、または独自のフォントファイル(Pixor独自の形式か.bdf)。
--align left|middle|right 各線の位置。
--wrap PIXELS この幅で折り返します。長すぎる単語はそのまま残します:途中で切れた単語は、はみ出した行より読みにくいからです。
--letter-spacing N, --line-spacing N 追加する整数ピクセル。
--text-colour, --text-outline, --text-shadow インク、1ピクセルのアウトライン、ピクセルの影。
--text-scale N 各ピクセルをN×Nにします。整数倍のみです。
--facing sprite, --picture-pixels N スプライト空間で、フォントの1ピクセルをスプライトのNピクセルに。すべてのカメラで。

レイアウトはどこでも整数のみです。文字送り幅と行の高さは整数ピクセルで、シェーピングもサブピクセル配置もないので、文字列はどのマシンでも同じピクセルになります。フォントにない文字は四角ではなく空白になります。スプライトの中の四角は、空白より見栄えが悪いからです。

文字はデフォルトでラベルです:ショットのフレーミングには影響しません。スプライト空間では、傾きもカメラに合わせたサイズ調整もなく、どの向きからも正確です:--facing sprite。

ジオメトリとしての文字

文字シェイプは言葉を綴り、フォントの各ピクセルをブロックに押し出すので、文字はほかのジオメトリと同じく、ライティング、帯、アウトライン、パレットを受けます。看板、旗、墓石など:

pxr shapes -o sign.glb --shape letters:2,0.5,0.25
pxr project set game.pixor --add-shape letters:1.2,0.3,0.1:0,3,0 --words HELLO

高さ3 mに立てると、文字は騎士のヘルメットにかかりません。ほかのシェイプと同じく、読み取るにはフォントの1ピクセルにスプライトの1ピクセル以上が必要で、--size 128の騎士ならそれを満たします。

隣に隠されない面だけを作るので、1単語は数百個の三角形で済み、文字はディセンダーのための空きスペースではなく、インクの上に立ちます。

フォント

Pixorには専用に描いた2つのフォントが付属しています:インターフェースの描画に使うpixor-11と、大文字が5ピクセル、ほとんどの文字が3ピクセルのpixor-5です。後者はスプライトの上の数字、ラベル、HUDなど、大きいほうでは名前を付ける対象より目立ってしまう場面に使います。lettersシェイプは、インスペクターのフォントでどちらかを選びます。自分のフォントは同じ形式のテキストファイルで、見たとおりシンプルです:

== A
.###.
#...#
#####
#...#
#...#

== Cの行は文字を指定し(入力できない文字なら== U+00E9)、続いてその行を並べます。#はインク、.は空白です。読みやすく、差分が取れ、フォントライブラリは不要です。

BDFファイルはそのまま使えます。ほとんどのピクセルフォントが配布されている形式です。グリフはフォントのアセントとディセントからなる1つのセルに並び、それぞれフォントが指定する送り幅の分だけの幅を持つので、デザイナーが選んだ字間が保たれ、Pixorは何も足しません。

画像から作るパレット

パレットファイルは画像でも構いません。参考画像、目指すルックのゲームのスクリーンショット、色見本の帯など。

pxr render hero.glb --palette reference.png

16色以下の画像からは、その色がそのまま安定した順序で得られます。それより多い画像からは、最も代表的な色を最大16色得られます(見分けられないほど近い色は1つになります)。同じ画像からは、どのマシンでも同じパレットが得られます。

このページで説明している内容は製品版の機能です。無料のブラウザーデモで使えるのは、デフォルトのルックとPNGシートだけです。

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