【Godot】UVスクロールをスクリプトだけで実装する方法

概要

このページでは以下のようなUVスクロールをスクリプトだけで実装する方法について書きます。

UVスクロールをするスクリプト

プロジェクトを新規作成し、2Dノードを作成、名前を「Main」に変更して以下のスクリプトをアタッチします。

Main.gd

extends Node2D

# テクスチャを読み込んでおく
var tex = preload("res://icon.png")
# 時間経過で変化するUVのUの値
var time_u = 0

func _ready():
	# テクスチャリピートを有効にする
	tex.flags |= Texture.FLAG_REPEAT

func _process(delta):
	# 経過時間でUVスクロールする
	time_u += delta
	if time_u > 1:
		# 0.0〜1.0となるようにする
		time_u -= 1
	
	# _draw() を呼び出す
	update()

func _draw():
	# 左上座標
	var x = 30
	var y = 50
	
	# 画像の幅と高さ
	var width = tex.get_width()
	var height = tex.get_height()
	
	# 頂点リストを作成
	var points = PoolVector2Array()
	points.append(Vector2(x, y))
	points.append(Vector2(x+width, y))
	points.append(Vector2(x+width, y+height))
	points.append(Vector2(x, y+height))
	
	# 色を設定
	var colors = PoolColorArray([Color.white])
	
	# UVリストを作成.
	var uvs = PoolVector2Array()
	var u = time_u
	uvs.append(Vector2(u, 0))
	uvs.append(Vector2(1+u, 0))
	uvs.append(Vector2(1+u, 1))
	uvs.append(Vector2(u, 1))
	
	# ポリゴンを描画.
	draw_polygon(points, colors, uvs, tex)

簡単に説明すると　_ready() の部分で、tex.flags |= Texture.FLAG_REPEAT とすることでUV値を変化してはみ出した場合 (0.0〜1.0を超える値を指定した場合)に、テクスチャを繰り返して描画する設定にしています。

あとは、_draw() で、draw_polygon() を使用して、UV値をずらして描画することで、UVスクロールが実装できます。

UVとは

UVとはテクスチャの左上を(0, 0)、右下を(1, 1)とした座標系のことです。

左上の座標を (0, 0) 〜 (1, 0)、右下の座標系を (1, 0) 〜 (2, 0) に変化させることで、スクロール処理を実装していることとなります。

たとえば、テクスチャリピートを有効にした状態で、0.5 ずらすと以下のような状態となります。