2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Godot】Viewportから画面をキャプチャする方法

Last updated at Posted at 2021-02-20

概要

この記事では、Godot Engineの Viewportを使用して画面をキャプチャする方法について書きます。

画像の登録

以下の画像をプロジェクトに追加します。名前は "mountains.png" としておきます。
mountains.png
ちなみにこの画像は、Godot Engineの開発者の故郷であるアルゼンチンの史跡「ティルカラのプカラ(要塞)」だそうです。(公式のサンプルに含まれていた画像です)

画像の配置

Node2Dシーン(Mainにリネーム)を作成して、"mountains.png" をSpriteとして配置します。
Godot_Engine_-TestCapture-Main_tscn___.png
次のキャプチャした画像を表示するために TextureRect を作成します。
Godot_Engine_-TestCapture-Main_tscn___.png
Texture を描画できるノードであればなんであっても構いません。
TextureRect は画面中央に配置しました。
Godot_Engine_-TestCapture-Main_tscn___.png

それとTextureRectのインスペクタから Rect > Scale の(x, y)をそれぞれ 0.5 にしておきます。
Banners_and_Alerts.png
これはキャプチャの結果がわかりやすいように、半分のサイズに変形させるためです。

シーンの構成はこのようになりました。
Godot_Engine_-TestCapture-Main_tscn___.png

キャプチャするスクリプトの実装

Mainノード(ルートノード)に以下のスクリプトをアタッチします。

Main.gd
extends Node2D

# キャプチャした画像を保存する
onready var captured_image:TextureRect = $TextureRect

func _process(delta: float) -> void:
	if Input.is_action_just_pressed("ui_accept"):
		# "Space"キーを押したら画面のキャプチャを開始する
		
		# Wait until the frame has finished before getting the texture.
		# ①描画完了を待つようにする
		yield(VisualServer, "frame_post_draw")

		# Retrieve the captured image.
		# ②ビューポートの画像イメージを取得する
		var img = get_viewport().get_texture().get_data()

		# Flip it on the y-axis (because it's flipped).
		# ③画像の上下を逆にする
		img.flip_y()

		# Create a texture for it.
		# ④テクスチャを生成
		var tex = ImageTexture.new()
		# ⑤画像データを設定
		tex.create_from_image(img)

		# Set the texture to the captured image node.
		# ⑥キャプチャ画像を保持しておく
		captured_image.set_texture(tex)

以下、簡単な説明です。

  1. Viewport に描画する情報は、そのフレームの最後で更新されます。そのため VisualServer の "frame_post_draw" を待つようにしています
  2. そのフレームでの描画が終了したら、ビューポートから画像イメージを取得します
  3. ビューポートの描画は上下逆(スクリーン座標系では下方向がプラスですが、3D座標系では上方向がプラスになるため)なので、画像の情報を Image.flip_y() で上下逆にします
  4. 新しくテクスチャを生成します
  5. 生成したテクスチャに画像データをコピーします
  6. 生成したテクスチャを TextureRect にコピーします

実行すると、Spaceキーを押すたびに、キャプチャした画像が中央に表示されます。

shot.gif

こんな感じで Viewport が使えるようになるとポストエフェクトも簡単にできそう……!

参考

2
1
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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?