目次
Part1 カメラの 3D 効果を修正
まず、sc に xy 座標があることがわかります。
ここで、sc に新しい座標、つまり z 座標を導入しましょう。Z 軸はコンピュータ画面に垂直で、画面の外側から画面の内側を指します。(下図の通り)
z 座標は奥行き、つまり画面内の文字の奥行きを表します。
z 座標が大きいほど、キャラクターは画面の平面から遠くなります。距離が小さいため、z が大きいほど、オブジェクトは小さく見えます。z が 0 の場合、オブジェクトは画面のすぐ内側にあります。z が 0 の場合、オブジェクトは画面のすぐ内側にあります。がマイナスの場合、キャラクターが走ります 画面外に出て見えません。
Z座標の意味を理解しやすくするために、Z座標を増減させることでどのような効果が得られるかを見てみましょう↓
Z 座標が増加すると、子猫は画面から遠ざかり、子猫は小さくなり、Z 座標が減少すると、子猫は画面に近づき、子猫は大きくなることがわかります。
初めての大きなイベントが始まります！！
次に3Dを実現するコードを紹介します。
はい！あなたはそれを正しく読んでいます！コードはたったの1行です！！！
このコードを使用して、キャラクターを対応する座標に移動します。
変数「#3D 定数」は 350 に設定されます (他の値でも可能で、異なる値は異なる効果を持ちます)。
理解してください）
——————————— 次の段落は読み飛ばしていただいても構いません —————————————
（以下は私の個人的な理解であり、非常に専門的ではないので、信じないでください）完全に)
この #3D 定数は何ですか (先頭の # は私の変数名の付け方の習慣で、この変数が定数であることを示しています)。
凸レンズ結像の原理は中学校で習いましたが、この定数が像距離、つまり像から凸レンズまでの距離です。
人間の目を例にとると、像距離は網膜から水晶体までの距離です。この距離は固定値です。もちろん、像距離が固定されている場合、焦点距離は物体距離に応じて変化します。レンズには望遠焦点の機能があります。
物体の長さと物体から凸レンズまでの距離がわかれば、物体の結像長（画面上に表示される長さ）を計算できます。
凸レンズ結像と類似の三角形の原理によれば、
実際の長さ: 表示の長さ = 物体距離 (物体から凸レンズまでの距離) : 像距離 (像から凸レンズまでの長さ) の関係があり
、この式を変形すると、つまり、
表示の長さ = 実際の長さ* (画像の距離/オブジェクトの距離)
コードでは、次のよう
になります
。サイズを調整するコードは? もちろんブラシのみを使用する場合はサイズを調整する必要はありませんが、文字を使用する場合は文字のサイズも調整する必要があります)
同時に、上記の式は「近くにあるほど大きく、遠くにあるほど小さい」理由も説明できます。
表示サイズは z に反比例し、z が大きいほど、表示サイズは小さくなります。つまり、オブジェクトが遠くにあるほど、表示サイズは小さくなります。画面から見ると、オブジェクトが小さく
見えます—— —————————続行————————————
では、このコードはどのように使用できるのでしょうか?
まず、scで辺の長さが100、左下の角の座標が(0,0)の正方形をブラシで描けと言われたら、どうやって描くか分かるはずです。
このような：
ここで類推して、先ほどのコードを使用して 3 次元空間に正方形を描いてみましょう。辺の長さは 100、「地面」に「配置」します (「地面」の y 座標は -150 であると仮定します) ）と正方形の左下隅の座標（-150、-150、300）、描き方を知っていますか？
次のように書くことができます:
実行結果:
どうでしょうか？立方体の底のような感じでしょうか？
では、この正方形をベースとして立方体を描いていきます...
まず、先ほどのベースの描き方と同じように、立方体の左側を描いてみましょう。それ、そうですよね？
このような：
他の側のコードも同じです。次に、他のサーフェスを 1 つずつ描画し終えます...
(ヒント: 各サーフェスの描画コードを書かなくても、エッジを直接描画できます)
どうでしょうか？内部の臭いはありますか？さて、ここで 3D の基本的な内容をマスターしました。
なんと、意外と簡単ではないでしょうか。
理解できたら、自分でも立方体を描いてみてください。
———————————練習時間————————————————
(以下は、今の知識を使って達成できるいくつかのケース演習です。あなたは理解しています、あなたは自分でそれを試してみることができます）
ケース 1: 立方体を動かしてみましょう!
期待される効果: wasd を押して立方体を上下左右に移動し、↑↓ を押して立方体を前後に移動します 具体的なプロセス: 3 つの変数を使用します: 左下 x、左下
y、左下 z立方体の左下隅の座標を保存してからプログラムを作成し、対応するキーを押して立方体に対応する座標を増減します (たとえば、↑ キーを押すと Z 座標が増加し、 ↓ キーを押して Z 座標を減らします)
結果が得られます↓
参照コード：
事例2：円を描いてみよう！
期待される効果：「地面」に円を描く(「地面」y:-150(もちろん自分で設定することも可能))、半径100、中心(-40,-150,500)の座標で円を描いて
みる（三角関数を使う必要があるので注意！）
（二次元平面に円を描くといってもコードは単純ではありません↓なので、このチュートリアルを読む前にしっかりした基礎が必要です） （実際には
三角関数ピタゴラスの定理の代わりに関数を使用することもできます)
上記のコードに少し変更を加えてみましょう。
効果↑
(「地面に」ある円は楕円のように見えます)
事例3：道を描こう！(ロードパルクールゲームに使用可能)
コード:
効果↑
Part2 カメラを動かしてみます
そもそもカメラとは何でしょうか？
カメラとは現在の視野の位置を指し、カメラを動かすことは視野を移動することを意味します。xyz 座標を使用してカメラの位置を保存します。上記のチュートリアルでは、実際にはカメラの x、y、z 値がすべて 0 である視野に相当します。
カメラを右に動かすとカメラの x が大きくなり、視野が右に移動し、逆にカメラを左に動かすとカメラの x が小さくなり、同様に上下に動かすと視野が広がります。カメラの y 座標を増減し
、前後に移動するとカメラの z 座標を増減します。
カメラの動きの効果を実現するコードは実際には非常に単純です。
まず、カメラ x、カメラ y、カメラ z という名前の 3 つの変数を作成します。
次に前のコードに戻ります
以下の置換の「x」、「y」、「z」
への変更：
そして、「カメラx」、「カメラy」、「カメラz」を変更することで、カメラの動き(つまり、視野)を実現することができます。たとえば、カメラの x を増減して、視野を左右に移動します。
なぜこのようにすることでカメラを動かすことができるのでしょうか？
「ビッグマップ」ゲームを作る基礎があれば、上記の内容は理解しやすいでしょう。
たとえば、カメラの動きについては次のように機能します。
次のようなコードを使用します
例えば、マップ上のキャラクタの座標は（100,100）、カメラの座標は（60,60）であり、このとき画面上に表示される実際のキャラクタの座標は（40,40）となる。カメラの座標に移動して、カメラに対するキャラクターの位置を取得します。
そこで、以下のような置換を行って、カメラから見たキャラクターの座標、つまりキャラクターが表示する座標を取得します。
では、カメラを動かすコードを書いてみましょう！
(立方体を描画するコードは以前に書いたコードです)
この新しいコードを見てみましょう。
カメラの最初の y が 100 であることに注意してください。これは、ゲーム内のキャラクターには一定の高さがあるためです。ここでの高さは、キャラクターの視点から地面までの高さです。
描画された立方体の y 座標は 0、つまり立方体を地面に置きます。
上記のコードはキャラクターを移動するのと同じくらい単純なので、簡単に理解できるはずです。
次に、ジャンプ エフェクトを追加してみます。2D
ゲームで重力とジャンプ エフェクトを実装する方法を知っていれば、次のコードは非常に簡単に理解できるでしょう。
まず、yv という新しい変数を作成します。
ここで、v は速度の意味です。yv は y 方向の速度、つまり縦方向の速度です。
以下のコードは、重力効果とジャンプ効果を実装しています。
yv は垂直速度なので、各サイクルでカメラの y は yv ずつ増加します。yv が正の場合、キャラクターは上に移動し、yv が負の場合、キャラクターは下に移動します。
重力の影響により、yv はサイクルごとに一定の値ずつ減少します。キャラクターが上にジャンプするとき（スペースを押す）、キャラクターの yv を 10、つまり上向きの速度を設定すると、キャラクターはこの速度で上に移動し、時間が経つにつれて上に移動する速度が減少します（yvが減少し、最終的に yv が 0 に減少すると、キャラクターは上に上がらなくなり、最高点に到達します。その後も yv は減少し続け、負の数まで減少し、この時点でキャラクターは低下し始めます。
以下のコードはキャラクターが着地した後のコードです。キャラクターの身長は 100 なので、キャラクターが地面に落ちるとキャラクターの y は 0 になりますが、カメラは「頭」に固定されており、高さは 100 になります。したがって、カメラy<100の場合は着地と判断します。次に、カメラ y を 100 に設定します。つまり、地面に移動します。地面に落ちた後は垂直速度がないので、yv を 0 に設定します。
そこで、移動やジャンプの効果を実感しました。WASDを押すとカメラが前後左右に移動でき、スペースバーを押すとジャンプできます。
Part3 エッジトリミング
(最前列のリマインダー: この部分は少し難しく、私の書き方はかなり乱雑です。理解できない場合は、最後のコードの使用方法を知っていれば、コードを書く特定のプロセスをスキップできます。カスタムモジュール。)
前のコードを実行してキューブを移動したときにそのような問題が発生したかどうかはわかりません。
立方体を端に移動すると、変形が発生することがわかります。
何が起きてる？
スクラッチステージには範囲があり、x 座標の範囲は -240 ～ 240、y 座標の範囲は -180 ～ 180 であることがわかっており、スクラッチ キャラクターが端に移動すると、ステージによって制限されます。
たとえば、次のコードを実行します。
結果は次のとおりです。
ステージの制限により、キャラクターは（1000、1000）には移動せず、（290、218）に移動しました（キャラクターが
異なれば、形状の大きさにより結果が異なる場合があります。形状が大きいキャラクターは、制約が少ないため、空の形状を使用すると、結果は 240,180 になります)
したがって、次のコードを実行すると、次のようになります。
得たいのは下図の緑色の線（45°の傾斜線）ですが、実際の走行結果は確かに赤色の線になります。
緑は希望の描画結果、赤は実際の描画結果です
したがって、描画した線分をトリミングする必要があります (トリミングとは、画面の端を横切る線分を画面内の線分のみにカットすることを意味します)。
具体的な手順は、
線分の両端が画面内にある場合は直接描画、
線分の両端が画面外にある場合は描画不要、
線分の両端の一方が画面外にある場合は描画の必要はありません。画面の外側で、一方の端が画面の内側にある場合、線分を見つけます。 画面の端との交点、そして実際に最後に描画される線分は、画面内の端点から交点までの線分です。（例えば、上で描いた線分が(0,0)～(1000,1000)の場合、実際に描画されるのは(0,0)、(180,180)、つまり画面上端との交点になります。) 。
クリッピングせずに描画した線分を次のように書くと、
次に、線分を描画するためのクリップされたコードは次のようになります。
10億点もの複雑さがあるように見える
このコードの使用方法がわかっていれば、このコードが特定のプロセスを理解していなくても問題ありません。上記のコードは線分を描画するために使用されており、線分が画面の端を横切る場合も正しく描画されます。
（上記のコードは、海外の偉い人の3Dチュートリアルのコードから抜粋しました。自分で切り抜きも書きましたが、書き方が複雑すぎて…。上記の書き方は比較的簡単だと考えてください。）上記を
直接使用してください。コードを自分で書かないでください。もちろん、自分自身に挑戦したい場合は、トリミングされたコードを自分で書いてみることもできます)
次のコードを実行します
描画された線分が正しいことがわかります。
正しい結果
ここで、立方体を描画するための以前のコードを変更しましょう。
まず、3D 線分を描画するためのコードを作成します。
線分の端点が画面からはみ出す場合、上記コードの描画方法に問題があることを以前解析しました。したがって、先ほど書いたコードを使用する必要があります。
(このコードは2Dの線分を描画します)
変更後:
補足：
（Scratchステージ上に描画したときの3次元空間上の点の2次元座標をその点の投影と呼びます） 例えば、
下の2つの黒丸は点（x,y）に対応する投影です。 、z) (x、y) 座標 (実際にステージ上に描画される座標)
同様に、次の始点 x と始点 y は、点 (x1, y1, z1) に対応する投影座標です。
次に、立方体を描画する前のコードを、各面を順番に描画するコードに置き換えます。
こうすることで、立方体を端に移動しても変形しません。
しかし！
ここで、もう 1 つ質問があります。
立方体は画面に近づくと変形します。これは、立方体の側面が画面の平面と交差しており、立方体の一部が画面からはみ出しているためです。
以前は、x 方向と y 方向のクリッピングを実行しました。次に、z 方向にもトリミングする必要があります。
具体的な手順:
両端が画面内にある場合 (両端の z がカメラの z より大きい)、前に作成したコードを使用して線分を直接描画します); 両端が画面の後ろにある場合 (両端のz
がカメラ z より小さい場合は描画する必要はありません。
両端の一方が画面内にあり、もう一方が画面外にある場合、この線分と画面には交点があり、実際に描画される線分は、画面上の端点から交点までの線分です。
具体的なコード:
ポイントは10億以上あるみたいです
次に行うことは、交点の座標を見つけることです。
次のコードを使用して、線分と平面 z の交点を見つけます
(線分の終点座標にはカメラを基準とした座標が入力され、平面の z はカメラを基準とします)。
（ここでは、投影xy座標ではなく、交点の3次元空間の相対カメラxy座標を取得します。交点のzは平面の相対カメラzです）
上記のコードの一般的な原理は三角形と似ているので、理解していなくても問題なく、そのまま使用してください。
最終コード
いくつかのメモ
上記のコードを完了すると、カメラ平面との交差があるときに立方体が変形しなくなりました。
ここで、次のコードを使用して 3D 線分を描画します。どのような状況でも、描画された線分は変形しません。
上記の内容を学習すると、ブラシ 3D の理論的知識の半分を習得したことになります。つまり、カメラの回転を除いて、他のブラシ 3D コンテンツのほとんどをすでにマスターしていることになります。
要約する
Part1: コアコード
パート2: コアコード
Part3: コアコード
以下のコードはScratchで線分を描画する際に使用するもので、線分がステージの端を越えた場合にXとYをクリップしてステージ内の線分だけを描画することで、正しく描かれています。
次のコードは、3D 線分を描画するために使用されます。また、クリッピング機能（線分の一部がカメラより後ろにある場合、Zクリッピングを行い、カメラより手前の線分のみを描画することで正しく描画できます）を備えています。
