テクスチャ画像に陰影を付けたりスケールさせて美しいレンダリングを実現する（爆速オンライン3Dゲームの作り方 #15）

スターター作品

なし

今回の完成サンプル

なし

ゴンザレスからの挑戦状

どうやらまだテクスチャ画像を使った描画のクオリティが足りなくて脱出できないみたいだ！くっそぉ、負けてられねぇ！ゴンザレスが驚くくらいのハイレベルな実装をしてスクラッチキャットを助けようぜ！ひゃっはー！（どしたｗ）

今回の目標「テクスチャ描画を洗練する」

今はテクスチャを貼り付けただけの状態だけど、実はいくつか問題もある。距離によって暗くなるようなギミックがなかったり、歪みが生じる部分があったり……。

そういった細部の点検を行って、クオリティを爆上げしていく！伝説の完成を目撃するぞ。

壁に陰影をつける

さぁ、もっとリアルな壁に仕立てていく。

ペンの明るさを変えよう。切り離してあったペンの明るさブロックが残ってれば、引数を少し変えるだけでOK。消しちゃってた人は、スクショを見て組み立ててほしい。

変数「明るさ」を作る

さっきペンにはめた演算ブロックを、そのまま変数「明るさ」にセットし、代わりにペンの明るさのところには変数「明るさ」をはめよう。

CHECK!　遠くの壁が暗くなったかテストする

よし！バッチリ暗くなったね。

でも↓これ、角の境目が少し見分けづらいと思わない？

角の境目をわかりやすくする

ペンのときは色を変えることで角をクッキリ際立たせてあったよね。

これと同じように、画像にも明暗をつけようと思う。そこで役立つのがさっき作った「■画像スキャンリストの調整値」だ。やってみよう。

まず条件ブロックを置く。明るさをセットした直後に置こうか。

この条件式には、「タイプ > (■画像スキャンリストの調整値 * 2)」だ。

このときは明るさをマイナス１５しよう。

CHECK!　角の明暗がくっきりしたかテストする

よっし、角がはっきり分かるようになった。

壁の描画精度をさらに高める

現段階でも★解像度が８くらいまでなら、まぁまぁきれいに描画される。

でも★解像度が１６とかになると……

もはやなんだかわからんｗ

これを少し改善していく。

変数「スケールしたテクスチャのサイズ」を作る

また分かりやすさのために定義「_行を描画する」を切り離そう。

↓ここで変数を初期化する。「高さ / ★解像度」だ。

その下で条件ブロックを作るよ。

条件式は「スケールしたテクスチャのサイズが12より小さいなら」というもの。

１２より小さい場合は、８で留めるようにする。

さらにこの条件ブロックをまるごと複製しよう。

複製した条件ブロックを「でなければ」の中において、各値を変更しよう。

大切なので再確認、ちゃんと「でなければ」の中に入れ子になってるか、チェックしてね。

大丈夫そうなら、いま作った条件ブロックを複製して、さらに「でなければ」に入れ子にしよう。どんどん深い階層まで入れ子していくよ。値も変えてね。

最後の「でなければ」には、シンプルに変数「★テクスチャのサイズ」を入れよう。

この変数の値は３２だったね。

変数「スケールで欠落したサイズ」を作る

スケール、つまりサイズ調整できたね。ここからはサイズ調整によって欠落してしまった数値を算出していく。それを描画に加味していくことで、美しい描画が実現できる。

欠落したサイズを算出するために、↓この演算を作って。

↓こんなかんじ。

これを変数にセットする。

変数「テクスチャ描画Y」に、この欠落したサイズを反映するよ。シンプルな掛け算でOK。

その下で再びスケールで欠落したサイズに、４８０を掛ける。この４８０は例のコスチュームの横幅だ。

切り離してあった部分を元に戻そう。

ループの回数に、変数「スケールしたテクスチャのサイズ」を割り当てる。

さらに変数「スキャンのインデックス」を変数「スケールで欠落したサイズ」ずつ変えるようにする。

CHECK!　壁の描画精度が高まったかテストする

うん、壁がより壁らしくなった！

っと、ちょっと待って……↓これおかしいね。

壁が歪んでいる！これは直そう。

壁の歪ゆがみを補正する

スケールさせたことで壁をギュッと詰めるような処理を施したので、その弊害で壁の端っこが歪んでしまった。これを直していくよ。

変数「y座標」を作る

y座標には、次の演算をセットしよう。ちょっと複雑な計算だ。

( 1.5 x 高さ ) - ( ★解像度 / 2 )

そして変数「y座標」をy座標にセットしよう。（分かりづらくてゴメン！スクショ見て）

定義の下の方で、y座標を変数「テクスチャ描画Y」ずつ変えるようにしよう。

その下を、y座標を変数「y座標」にする、っていうブロックに置換する。

CHECK!　壁の歪みが直ったかテストする

おっけい！正しく描画されるようになったぜ。

テクスチャを変更する

いまは石壁のテクスチャをセットしているけど、これを変更したいよね。そうすれば色んなダンジョンを作れるもんね。いや、ダンジョンに限らず街みたいなマップを作ることだって夢じゃない……。テクスチャの変更方法は絶対に知りたいテクニックの１つってわけだ！やってみよう。

スプライト「レイキャスター」を開く

定義「_シングル・レイ」を見つけて。

変数「テクスチャのズレ」を「1 x ★テクスチャのサイズ」ずつ変えるようにしよう。もちろん１を掛けてるだけなら、この計算には意味はない。

しかし、この値を２にしてみたらどうだろう？

CHECK!　テクスチャが変更されているかテストする

おいおいおいおいおい！

最高かよ！！？

コスチュームの2段目のテクスチャを使う

これでどんどんテクスチャを変えられる……って待てよ？コスチュームの2段目にあるテクスチャはどう使うんだ？

大丈夫、↓こんなかんじに演算を変えてみて。

( 7 + ( 1 x 480 ) x ★テクスチャのサイズ)

CHECK!　2行目のテクスチャが使えているかテストする

おっけい！2行目の左から8番目のテクスチャであるTNT爆弾の壁ができあがった！なんて危険な壁なんだｗ

3行目、4行目がある場合

上の演算を少し変えれば行の変更はカンタンだ。

3行目なら↓

( 7 + ( 2 x 480 ) x ★テクスチャのサイズ)

4行目なら↓

( 7 + ( 3 x 480 ) x ★テクスチャのサイズ)

ちなみに480っていう数字はさっきもでてきた、大きさ32の画像が15個並んでいる横1行の幅だ。そろそろこのマジックナンバーを変数化しておきたいよね。

ステージ「背景」を開く

ということで変数を増やすよ。

変数「★テクスチャ画像の横幅」を作る

初期化としては↓この演算で480を作る。

緑の旗が押されたときに初期化しておけばOKだ。

スプライト「ペン」を開く

さっき使った480っていう数字をこの変数で置換しよう。

スプライト「レイキャスター」を開く

定義「_シングル・レイ」を見つけよう。

ここの480も変数に差し替える。

おっけい！

２つのテクスチャを使い分ける

いまは１つのテクスチャしか使ってないけど、ここはTNT、ここは石壁、みたいな感じで複数のテクスチャを使い分ける方法を紹介する。サラッと言ってるけど、めちゃワクワクテクニックだ！

スプライト「テクスチャ2」を作る

スプライト「レベル」を複製しよう。

名前は「テクスチャ2」にする。

コスチュームを全選択しよう。

グループ化しておくべ便利。

そして、別のテクスチャを使いたい場所を四角形ツールなどで覆おおい隠すように図を描こう。

そのあと、下にあった元々のコスチュームを消す。グループ化できていれば一発で消すことができるはず。

スプライト「レイキャスター」を開く

定義「_シングル・レイ」を見つけて。

テクスチャのズレをセットしている２つ目のブロックを条件ブロックで囲む。「もし〜でなければ」ブロックね。

条件式には「テクスチャ2に触れたら」という条件を入れる。こっちが新しく適用したい新テクスチャだ。

「でなければ」の方に元々のテクスチャを入れる。

CHECK!　テクスチャが複数使えているかテストする

きたぁ！

きたきたぁ！

テクスチャが２つになるだけですごいリッチな雰囲気になったね。

個人的に石壁が好きなので直しておく。

ふっふー♪

超絶ハイクオリティ3D空間♪

まとめ

うーん、前回のパフォーマンスチューニングも神回だったけど、今回もぶっちゃけ神回だよね！もう甲乙つけがたい。

パフォーマンスが上がったから最高にクールなテクスチャを利用できるようになった今回。みんなの3Dエンジンはスクラッチ界で最高レベルにまで進化してきているぞ！よっしゃあ！

今回は次のことができるようになったぞ。

• テクスチャを壁に、精度を高く貼り付けることができた

これならスクラッチキャットたちも無事に脱出できるはず……って、おいおい！まだなにか問題があるのか！？次回もチェックしてみてくれ。

グリフパッチさんの動画

このチュートリアルは世界No.1スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。