Godotで2D空間にレンダーターゲットテクスチャを描画する

#婆さんや、飯はまだかの？
あれ？　前にこのネタ書いたよね？　あれ？　書いたかな？
Twitterあたりにできたー！って上げてただけで、どこにもメモしてなかったかも。
うーん覚えてない(´・ω:;.:... 

久々にやろうとしてやり方小一時間悩んだので、今度こそ書いておきます。

# 要は３Ｄのレンダリング結果をスプライトにして貼りたい

プログラマ向けサイトなのでDirectXやOpenGL系の用語でタイトルを書きました。プログラムだとテクスチャをレンダーターゲットにして描画したりしますよね。Godotではそれを実現する機能があります。

個人で３Ｄでゲームを作ろうとしたら絵の物量に負けて完成どころかメイン画面を出すことすら怪しいのと、私はそもそも２Ｄ(PCエンジン-CDROM2世代)ゲームが好きなのですが、２Ｄでアニメーションを描くのは心が折れるのです(´・ω:;.:... 

というわけで３Ｄでアニメーションさせて２Ｄとして出すとよくね？
と考えて幾数年……

３Ｄモデリングをせっせと練習中。練習がはかどりすぎて当初の目的を忘れている\_(:3」∠)\_
https://user-56762a39bfc54793.artstation.com/

# それでは本題

毎回前置きが長いのですが、ぼちぼち内容。

## 新規シーン作成→２Ｄシーン追加→Sprite追加→シーン保存

別に何かのノードにぶら下げてもいいのですが、最終的に１つのシーンにしておくと貼り付けたりが簡単なのでシーンは分けておきます。

今回は１つのスプライトを持つシーンを作るので、Node2Dをルートにしておきます。ついでにSpriteもぶら下げておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/09eeaf12-4c34-6ac9-c26f-1019fd17b357.png)

このあたりで一旦名前を付けて保存しておけば、後は適度にCtrl+Sして保存しながら進められます。

## ViewPort追加→ViewPortサイズ変更→ViewportをSpriteの上に

Viewportがいわゆるレンダーターゲットテクスチャです。スプライトでこれを表示ソースにすることができます。Viewportは追加したてだとサイズが0x0なので、256x256とかにしておきます。

非プログラマ向けに説明しておくと、GPUによっては2のn乗のサイズでないとうまくテクスチャが作れなかったり、最大サイズが4096とか逆に64以下のテクスチャが作れないとかがあります。

ゲーム画面に出す的に考えても256x256あたりが結構無難かなぁ、と。

サイズを入力するまでViewportに△の注意マークがついていますので、設定忘れをしないようにしてください。

もしツリー上でViewportがSpriteより下にある場合は、Viewportは上に移動しておいてください。

**<font color="Red">ViewportがSpriteより上にないとエラーがでます</font>**

(Godotでは処理が上から下に流れるので、Spriteが使うViewportを先に処理するように上に配置する)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/21334533-56d3-1885-e74f-a9a7df5ba8cb.png)


## Camera追加→３Ｄモデル追加

Viewportの下にカメラと表示する３Ｄモデルを配置すれば、シーンではなくViewportに描画されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/036dae23-244e-eb43-dcab-6feff101b0a0.png)


## [オプション]CameraをOrthoに

２Ｄで使うんだったらパースいらないよね、ってことでOrthoの使い方。といってもCameraにOrthoの切り替えがあるので設定すれば終わりです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/fbcdff09-b7d1-f8a8-1a08-cc818e8defac.png)

Orthoの場合はモデルとの距離でレンダリング後の大きさを変えられないので、カメラの「サイズ」を調整します。結構大きく動くので、スライダーより手で数字直接変えたほうがいいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/63ebb8e5-5180-be2f-910b-5df410ae01ec.png)

位置はカメラを動かして決めますが、これまた大きく動きすぎるので微調整はCameraの親プロパティのSpacialのTransformを直接弄った方がいいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/4ffaa8b2-7ea3-f46a-3734-3efea0b47c95.png)

配置場所はViewportの中心じゃなくて下端に合わせます。この辺は２Ｄゲーム作ってる人ならわかってくれるかと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/6fc81178-e6e0-814d-bd3f-fdec79215787.png)


## Viwportの設定(上下反転と背景を透明に)

シーンツリーでViewportを選択すると、プロパティのところにレンダリング後のイメージが表示されるのですが、上下が逆さまになっていますし背景も表示されてます。

上下が逆さまなのは、２ＤはYを下にプラスで扱いますが、３Ｄの場合はYを上にプラスで扱っているためです。これはViewportのプロパティのRenderTargetの中にV FlipがあるのでOnにすれば直ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/1c9070c3-b62e-1e16-ecf6-a3b4d25affff.png)

背景はViewportのプロパティのTransparent Bgにチェックを入れたら消えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/418fd6f3-4216-a916-cf5d-79fdbf3c55d7.png)

他にも、Viewportのプロパティにはアンチエイリアスの設定とかあるので、お好みで。

## SpriteのソースにViewportを設定

シーンツリーでSpriteを選択し、プロパティのTextureより新規ViewportTextrueを選択します。同一シーンにあるViewportが選択できるので、シーンに追加してあるViewportを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/52f724c0-946b-75ae-6bcf-01a86c5e64a3.png)

でけた(\*´ω｀\*)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/ceb7957e-f05f-1481-8ffb-3942481af178.png)

ここも実際に使うときに使いやすいよう、スプライトの下端を0に合わせておくとよいかと。

# Viewportにworldの設定を行う

１つ描画するだけならここまででも問題ないのですが、複数出す場合はViewportごとにWorldを別で持つように設定しないと、描画がダブってしまいます。

ビューポートにWorld情報を持たせるには、そのものズバリなown worldというプロパティがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/d9c5b979-dc50-c326-c4c9-7120900526d4.png)

チェックを入れるとモデルの色が変わってしまうと思います(ライトがない場合は真っ黒に)。これはシーンのWorld情報を見なくなってしまうからです。

自分でWorldを作っている人はそれを、デフォルトのWorldを使っている場合は新規でWorldを作ってデフォルトのEnvironmentを割り当てます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/d2e2b7bd-32cb-522b-879c-d24a4b86b574.png)

デフォルトのEnvironmentはプロジェクト生成時にdefault_env.tresという名前でプロジェクトのrootにファイルが作られています。res://直下をよく見ると入っていると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/51937df5-cde2-2ef0-ac24-324b1f08d1b6.png)


## もう使えます

使いたいシーンのツリーに先程作ったシーンをぶら下げればそれだけで表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140718/39ecc1f9-3547-bd28-083f-e28df3a195f3.png)

３Ｄモデルがアニメーションするものなら、スプライトでもアニメーションしますよ(\*´ω｀\*)