LoginSignup
1
2

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-01-24

婆さんや、飯はまだかの?

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

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

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

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

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

というわけで3Dでアニメーションさせて2Dとして出すとよくね?
と考えて幾数年……

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

それでは本題

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

新規シーン作成→2Dシーン追加→Sprite追加→シーン保存

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

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

image.png

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

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

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

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

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

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

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

ViewportがSpriteより上にないとエラーがでます

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

image.png

Camera追加→3Dモデル追加

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

image.png

[オプション]CameraをOrthoに

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

image.png

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

image.png

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

image.png

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

image.png

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

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

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

image.png

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

image.png

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

SpriteのソースにViewportを設定

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

image.png

でけた(*´ω`*)

image.png

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

Viewportにworldの設定を行う

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

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

image.png

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

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

image.png

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

image.png

もう使えます

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

image.png

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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2