スクラッチプログラミングに挑戦している皆さん、どうも！スクラッチコーチです。
- ① まず2Dマップを動き回れるようにしよう！
- ② さっそく3D化しちゃおうぜ！
- ③ 壁にスキマがあって敵から丸見え！？やっば
- ④ 陰影をつけて立体感マシマシにしよう
- ⑤ トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう（爆速オンライン3Dゲームの作り方 #05）
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない！？移動を改善しよう
- ⑧ ついに敵が現れた！距離感の計算ってどうやる？
- ⑨ 奥行きを実装して壁の後ろに隠れられるようにする
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに向かって迫ってくるように実装する
- ⑫ スターを実装しよう！
- ⑬ 爆速3D爆誕
- ⑭ 壁に画像（テクスチャ）を貼り付けてリッチな3D空間を演出する
- ⑮ テクスチャの壁を洗練させて本格3D完成！（いまここ）
- ⑯ シメだ！モバイル & オンライン化をするぞ
ゴンザレスからの挑戦状
どうやらまだテクスチャ画像を使った描画のクオリティが足りなくて脱出できないみたいだ！くっそぉ、負けてられねぇ！ゴンザレスが驚くくらいのハイレベルな実装をしてスクラッチキャットを助けようぜ！ひゃっはー！（どしたｗ）
今回の目標「テクスチャ描画を洗練する」
今はテクスチャを貼り付けただけの状態だけど、実はいくつか問題もある。距離によって暗くなるようなギミックがなかったり、歪みが生じる部分があったり……。
そういった細部の点検を行って、クオリティを爆上げしていく！伝説の完成を目撃するぞ。
壁に陰影をつける
さぁ、もっとリアルな壁に仕立てていく。
ペンの明るさを変えよう。切り離してあったペンの明るさブロックが残ってれば、引数を少し変えるだけでOK。消しちゃってた人は、スクショを見て組み立ててほしい。
変数「明るさ」を作る
さっきペンにはめた演算ブロックを、そのまま変数「明るさ」にセットし、代わりにペンの明るさのところには変数「明るさ」をはめよう。
CHECK! 遠くの壁が暗くなったかテストする
よし！バッチリ暗くなったね。
でも↓これ、角の境目が少し見分けづらいと思わない？
角の境目をわかりやすくする
ペンのときは色を変えることで角をクッキリ際立たせてあったよね。
これと同じように、画像にも明暗をつけようと思う。そこで役立つのがさっき作った「■画像スキャンリストの調整値」だ。やってみよう。
まず条件ブロックを置く。明るさをセットした直後に置こうか。
この条件式には、「タイプ > (■画像スキャンリストの調整値 * 2)」だ。
このときは明るさをマイナス１５しよう。
CHECK! 角の明暗がくっきりしたかテストする
よっし、角がはっきり分かるようになった。
壁の描画精度をさらに高める
現段階でも★解像度が８くらいまでなら、まぁまぁきれいに描画される。
でも★解像度が１６とかになると……
もはやなんだかわからんｗ
これを少し改善していく。
★解像度が粗くても壁っぽく見えるように努力していんだけど、限界はある。それに、けっこう難しい。一緒に慎重に進めていこう。
変数「スケールしたテクスチャのサイズ」を作る
ここでいうスケールというのはサイズ調整のことだと思ってOK。
また分かりやすさのために定義「_行を描画する」を切り離そう。
↓ここで変数を初期化する。「高さ / ★解像度」だ。
その下で条件ブロックを作るよ。
ここからは条件ブロックを何個も入れ子（ネスト）にしていくよ。
条件式は「スケールしたテクスチャのサイズが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爆弾の壁ができあがった！なんて危険な壁なんだｗ
左から1番目は0から始まるよ。↑この式は７になってるから８番目が指定されてる。
3行目、4行目がある場合
上の演算を少し変えれば行の変更はカンタンだ。
3行目なら↓
( 7 + ( 2 x 480 ) x ★テクスチャのサイズ)4行目なら↓
( 7 + ( 3 x 480 ) x ★テクスチャのサイズ)ちなみに480っていう数字はさっきもでてきた、大きさ32の画像が15個並んでいる横1行の幅だ。そろそろこのマジックナンバーを変数化しておきたいよね。
-
マジックナンバーというのはカンタンに言うと「パッと見では何を意味しているのか分からない数字」のこと。例えばいきなり「変数を10ずつ変える」とあったら「この10って何？いったいどこから来たの？勝手に変えていいの？」とよく分からないけど、10をジャンプ力という変数に入れておけば「10はジャンプ力ってことね」と見ただけで分かるようになる。
マジックナンバーが多いプロジェクトは、リミックス難易度が高くなりがち。後日、自分で修正するときも困るから、どこかのタイミングでマジックナンバーを変数化しておくと便利。
ステージ「背景」を開く
ということで変数を増やすよ。
変数「★テクスチャ画像の横幅」を作る
初期化としては↓この演算で480を作る。
定数の「■」ではなく変数として扱っているんだけど、この480っていうのはひょっとしたら変わる可能性もあるからね。何らかの理由で大きさ32のテクスチャから、64などの大きなサイズに変更するようなゲーム仕様になる可能性もあるから定数ではなく変数として管理してある。まぁ動きに違いはないよ。概念上の話だけ。
緑の旗が押されたときに初期化しておけばOKだ。
スプライト「ペン」を開く
さっき使った480っていう数字をこの変数で置換しよう。
スプライト「レイキャスター」を開く
定義「_シングル・レイ」を見つけよう。
ここの480も変数に差し替える。
おっけい！
２つのテクスチャを使い分ける
いまは１つのテクスチャしか使ってないけど、ここはTNT、ここは石壁、みたいな感じで複数のテクスチャを使い分ける方法を紹介する。サラッと言ってるけど、めちゃワクワクテクニックだ！
スプライト「テクスチャ2」を作る
スプライト「レベル」を複製しよう。
名前は「テクスチャ2」にする。
コスチュームを全選択しよう。
グループ化しておくべ便利。
そして、別のテクスチャを使いたい場所を四角形ツールなどで覆い隠すように図を描こう。
そのあと、下にあった元々のコスチュームを消す。グループ化できていれば一発で消すことができるはず。
スプライト「レイキャスター」を開く
定義「_シングル・レイ」を見つけて。
テクスチャのズレをセットしている２つ目のブロックを条件ブロックで囲む。「もし〜でなければ」ブロックね。
条件式には「テクスチャ2に触れたら」という条件を入れる。こっちが新しく適用したい新テクスチャだ。
「でなければ」の方に元々のテクスチャを入れる。
CHECK! テクスチャが複数使えているかテストする
きたぁ！
きたきたぁ！
テクスチャが２つになるだけですごいリッチな雰囲気になったね。
テクスチャを複数使えるようになった
個人的に石壁が好きなので直しておく。
ふっふー♪
超絶ハイクオリティ3D空間♪
まとめ
うーん、前回のパフォーマンスチューニングも神回だったけど、今回もぶっちゃけ神回だよね！もう甲乙つけがたい。
パフォーマンスが上がったから最高にクールなテクスチャを利用できるようになった今回。みんなの3Dエンジンはスクラッチ界で最高レベルにまで進化してきているぞ！よっしゃあ！
今回は次のことができるようになったぞ。
- テクスチャを壁に、精度を高く貼り付けることができた
これならスクラッチキャットたちも無事に脱出できるはず……って、おいおい！まだなにか問題があるのか！？次回もチェックしてみてくれ。
グリフパッチさんの動画
このチュートリアルは世界No.1スクラッチャーとして名高いグリフパッチさんの動画を参考にしているよ。ただし手順を一部変えているところもあるんだ。
- ① まず2Dマップを動き回れるようにしよう！
- ② さっそく3D化しちゃおうぜ！
- ③ 壁にスキマがあって敵から丸見え！？やっば
- ④ 陰影をつけて立体感マシマシにしよう
- ⑤ トゲトゲやユガミを補正してハイクオリティ3Dの一歩を踏み出そう（爆速オンライン3Dゲームの作り方 #05）
- ⑥ 壁の衝突判定の基本を作ろう
- ⑦ 壁に触れてると進めない！？移動を改善しよう
- ⑧ ついに敵が現れた！距離感の計算ってどうやる？
- ⑨ 奥行きを実装して壁の後ろに隠れられるようにする
- ⑩ エンティティに陰影をつける
- ⑪ 敵がプレイヤーに向かって迫ってくるように実装する
- ⑫ スターを実装しよう！
- ⑬ 爆速3D爆誕
- ⑭ 壁に画像（テクスチャ）を貼り付けてリッチな3D空間を演出する
- ⑮ テクスチャの壁を洗練させて本格3D完成！（いまここ）
- ⑯ シメだ！モバイル & オンライン化をするぞ
