Merge pull request #72 from unsolublesugar/feature/add-jp-blueprints-…

…understanding-blueprints

Add: [jp] Blueprint - Creating Your First Blueprint

i18n/jp/docusaurus-plugin-content-docs/current/blueprints/understanding-blueprints.md

@@ -0,0 +1,117 @@
+---
+sidebar_position: 10
+---
+
+# はじめてのブループリント作成
+
+ノードエディタを初めて開いたときに圧倒されるのは、まったくもって普通のことです。ノードがたくさんあり、それらを使ってできることもたくさんあります！でも心配しないでください。このセクションでは、ブループリントの基本を順を追って説明します。
+
+## はじめてのブループリント
+
+簡単な例から始めましょう。Escキーが押されたときにカメラを揺らしたいとします。まず、ツールバーの **[ブループリントを追加する]** ボタンをクリックして、新しいブループリントを追加します。ブループリントに「Escキーでカメラを振らす」などの意味のある名前を付けることもできますが、今はそのままにしておきます。
+
+![](/doc-img/jp-understanding-blueprints-1.png)
+<p class="img-desc">新しいブループリントの追加</p>
+
+これは美しいブループリントですが、まったく役に立ちません。これにいくつかのノードを追加する必要があります。検索バーに「**on keystroke**」と入力すると、「**キーボードボタンを押したとき**」ノードが表示されます。これをノードエディタにドラッグすると、次のようなものが表示されます。
+
+![](/doc-img/jp-understanding-blueprints-2.png)
+<p class="img-desc">「キーボードボタンを押したとき」ノードの追加</p>
+
+:::tip
+
+間違ったノードをドラッグしてしまった場合は、ノードをクリックして選択し、**Delete**キーを押して削除できます。また、**[戻す]** ボタンを使用することもできます。
+:::
+
+いいですね！次に、カメラを揺らすノードを追加してみましょう。検索バーに「**shake camera**」と入力すると、「**揺れカメラ**」ノードが表示されます。これを「キーボードボタンを押したとき」ノードの隣にドラッグし、以下のように「キーボードボタンを押したとき」ノードを「揺れカメラ」ノードに接続してみてください。
+
+![](/doc-img/jp-understanding-blueprints-3.png)
+<p class="img-desc">「揺れカメラ」ノードを追加し、「キーボードボタンを押したとき」ノードに接続する</p>
+
+「キーボードボタンを押したとき」ノードの **[出口]** の隣にある緑色の点をクリックして、「揺れカメラ」ノードの **[入口]** の隣にある緑色の点にドラッグしましたか？おめでとうございます！あなたは素晴らしい直感力の持ち主です。なお、緑色の線のいずれかの端をクリックしてドラッグすれば接続を解除することができます。
+
+:::tip
+
+ノードの右側にある緑色の点は<b style={{color: "green"}}>フロー出力</b>と呼ばれ、左側にある緑色の点は<b style={{color: "green"}}>フロー入力</b>と呼ばれます。つまり、「キーボードボタンを押したとき」ノードの **[出口] = フロー出力** を「揺れカメラ」ノードの **[入口] = フロー入力** に接続したことになります。
+
+フロー接続は、ノードがトリガーされる順序を決定します。この例では、「キーボードボタンを押したとき」ノードがトリガーされたときに、次に「揺れカメラ」ノードがトリガーされることを意味しています。
+:::
+
+これで終わりでしょうか？Escキーを押してカメラが揺れるか試してみましょう。
+
+あれ、カメラが全然揺れませんね。なぜでしょう？
+
+「揺れカメラ」ノードを詳しく見てみましょう。**[ビデオカメラ]** のデータ入力がありますが、何も設定されていません！ドロップダウンからカメラを選択してみましょう。
+
+![](/doc-img/jp-understanding-blueprints-4.png)
+<p class="img-desc">**[ビデオカメラ]** の入力を設定します</p>
+
+もう一度Escキーを押してみましょう。カメラが揺れたら、成功です！これではじめてのブループリントを作成することができましたね！
+
+## ノード間のデータの受け渡し
+
+「揺れカメラ」ノードのデータ入力の横にある黒い点が何なのか気になるかもしれませんね。確かに、これらは **[入口]** フロー入力の隣にある緑の点に非常によく似ています。もしかしたら、これも何かに接続できるのでしょうか？
+
+そのとおりです！ノードパレットから **「メインカメラの取得」** ノードをノードエディタにドラッグし、「メインカメラの取得」ノードの **[ビデオカメラ]** データ出力の隣にある黒い点をクリックして、「揺れカメラ」ノードの **[ビデオカメラ]** データ入力の隣にある黒い点にドラッグしてみましょう。
+
+![](/doc-img/jp-understanding-blueprints-5.png)
+<p class="img-desc">「メインカメラの取得」ノードを「揺れカメラ」ノードに接続する</p>
+
+:::tip
+Warudoは[複数のカメラ](../assets/camera)をサポートしており、メインカメラは現在メインウィンドウに表示されているカメラのことを指します。
+:::
+
+もう一度Escキーを押してみてください。おや、カメラがまた揺れています！しかし今回は、**[ビデオカメラ]** ドロップダウンが消えていることに注意してください。これは、「揺れカメラ」ノードが「メインカメラの取得」ノードからカメラを取得していることを意味し、ドロップダウンで選択したカメラが無視されています（厳密には同じカメラですが）。
+
+アセットタブで別のカメラを作成し、そのカメラに切り替えてからもう一度Escキーを押してみましょう。先ほどドロップダウンで選択したカメラではなく、新しいカメラが揺れています！
+
+:::tip
+<b style={{color: "green"}}>フロー入力/出力</b>と同様に、ノードの右側にある黒い点は**データ出力**と呼ばれ、左側にある黒い点は**データ入力**と呼ばれます。つまり、「メインカメラの取得」ノードの**カメラ**データ出力を「揺れカメラ」ノードの**カメラ**データ入力に接続したことになります。
+
+データ接続は、ノード間でデータを受け渡す役割を担っています。この例では、「揺れカメラ」ノードがトリガーされたときに、「揺れカメラ」ノードの**カメラ**データ入力が「メインカメラの取得」ノードの**カメラ**データ出力に設定されることを意味しています。
+:::
+
+簡単な例でしたが、これがブループリント作成の基本になります。必要なノードを見つけて接続し、何かが起こったとき（Escキーを押す）、Warudoに何をさせるか（カメラを揺らす）を伝えることができます。
+
+これまでに学んだことをまとめましょう：
+
+* ブループリントは**ノード**と**接続**で構成されています。接続には<b style={{color: "green"}}>フロー接続</b>と<b style={{color: "black"}}>データ接続</b>の2種類があります。各ノードはフローとデータの入出力を持つことができます。データ入力はノード上で直接設定するか、他のノードのデータ出力に接続することができます。
+
+* 接続を作成するには、入力/出力ポートをクリックしてから別のノードの出力/入力にドラッグします。 <b style={{color: "green"}}>フロー接続</b>はノードがトリガーされる順序を決定し、<b style={{color: "black"}}>データ接続</b>はノード間でデータを受け渡す役割を担います。
+
+:::info
+フロー入力は複数のフロー出力に接続できますが、フロー出力は1つのフロー入力にしか接続できません。そうでないと、どのノードが最初にトリガーされるべきかが不明確になるためです。
+
+同様に、データ出力は複数のデータ入力に接続できますが、データ入力は1つのデータ出力にしか接続できません。そうでないと、どのノードからデータを受け渡すべきかが不明確になるためです。
+:::
+
+少し圧倒されているかもしれませんが、心配しないでください。次のセクションでさらに多くの例を紹介していきますよ。
+
+## データ型
+
+補足として、データ接続の両端のデータ型には互換性が必要です。上記の例では、**「メインカメラの取得」 → ビデオカメラ**（データ型：カメラアセット）を **「揺れカメラ」 → 継続時間** （データ型：「float」、つまり小数）に接続することはできません。ポートにカーソルを合わせると、そのデータ型を確認することができます。
+
+![](/doc-img/jp-blueprints-2.png)
+<p class="img-desc">ポートにカーソルを合わせるとデータ型が表示されます</p>
+
+ほとんどの場合、データ型について心配する必要はありません。なぜなら、カメラが数字になることはないからです！
+
+## ブループリントの無効化
+
+ブループリントは、ブループリント名の横にある目のアイコンをクリックすることで無効化できます。ブループリントが無効になっている場合、そのブループリント内のノードはイベントを受信しません。例えば、上記の例では、ブループリントが無効になっているときにEscキーを押しても、「キーボードボタンを押したとき」ノードはイベントを受け取らず、フローはトリガーされないため、カメラは揺れません。
+
+:::info
+
+フローがトリガーされているか、データが渡されているかは、接続された線の上でボールが転がっているかどうかを確認することで判断できます。
+
+![](/doc-img/jp-blueprints-overview-5.png)
+:::
+
+<AuthorBar authors={{
+  creators: [
+    {name: 'HakuyaTira', github: 'TigerHix'},
+  ],
+  translators: [
+    {name: '星影月夜', github: 'unsolublesugar'},
+  ],
+}} />