はじめに
ゲームで複雑な形状の地形を描画したり、キャラクターのシルエットを表現したり、影や光エフェクトを表現したりする際に、「塗りつぶし可能な多角形」が必要になります。Godot 4で任意の形状の図形を描く際の標準的なノードがPolygon2Dです。Line2Dが「線」なら、Polygon2Dは「塗りつぶし可能な図形」という関係です。
ゲーム画面全体の背景から、キャラクターのシルエット、複雑なUI形状まで、幅広い場面で活躍するノードです。
Polygon2Dとは?
Polygon2Dは、複数の頂点を指定して、塗りつぶし可能な多角形を描画するノードです。キャンバスに頂点を打ってそれを結び、内部を色で塗りつぶす、というイメージです。三角形、四角形、複雑な多角形など、任意の形を作成できます。さらにテクスチャを適用したり、複数の多角形を組み合わせたりすることで、複雑なビジュアルを実現できます。
Polygon2Dの継承関係は以下の通りです。
Polygon2D
↓
Node2D
↓
CanvasItem
↓
Node
Node2Dを継承しているため、位置・回転・スケールなどの2D変換が可能で、シーンツリーに配置して使用します。

このノードを使うべき場面
- 地形・床・プラットフォーム描画:マップの陸地、床材を描画。複雑な形状も簡単に実現
- キャラクター・敵のシルエット:単色の図形としてキャラを表現。当たり判定と同じ形にできる
- 影・光エフェクト:陰影表現で奥行き感を作成。動的に形状を変更して影の移動を表現
- カスタム形状のUI:ボタン、パネル、メニューなど従来の矩形では表現できないUI形状
別のノードが適切な場面
単なる線の描画はLine2D、複数の多角形を使った複雑な描画はTileMapsやアニメーションスプライト、またはCanvasItemのdraw_polygon()メソッドの方が向いています。
主なプロパティと機能
| プロパティ・メソッド | 型 | 役割 |
|---|---|---|
polygon |
PackedVector2Array | 多角形を構成する頂点座標の配列。反時計回りの順序で指定するのが慣例 |
color |
Color | 多角形内部の塗りつぶし色。デフォルトは白色 |
texture |
Texture2D | 多角形に張り付けるテクスチャ。設定すると色の代わりにテクスチャが表示 |
uv |
PackedVector2Array | テクスチャマッピング用のUV座標。テクスチャの一部を切り取ったり引き伸ばしたりできる |
polygons |
Array | 複数の多角形を管理。1つのノードで複数の図形を描画できる |
skeleton |
NodePath | Skeleton2Dへの参照。変形アニメーションを行う場合に使用 |
add_point(position, at_position) |
void | 多角形に頂点を追加 |
remove_point(index) |
void | 指定インデックスの頂点を削除 |
コード例1:地形プラットフォームの描画
extends Node2D
@onready var polygon = $Polygon2D
func _ready() -> void:
# 矩形プラットフォームを描画
var platform_points = PackedVector2Array([
Vector2(0, 0), # 左上
Vector2(200, 0), # 右上
Vector2(200, 30), # 右下
Vector2(0, 30) # 左下
])
polygon.polygon = platform_points
polygon.color = Color.from_string("#8B4513", 1.0) # 茶色
func create_irregular_terrain() -> void:
# 複雑な地形形状を動的に生成
var terrain_points = PackedVector2Array()
# 波状の地形
for x in range(0, 500, 50):
var y = 200 + sin(x * 0.05) * 50
terrain_points.append(Vector2(x, y))
# 下端の直線
terrain_points.append(Vector2(500, 400))
terrain_points.append(Vector2(0, 400))
polygon.polygon = terrain_points
polygon.color = Color.GREEN
func _process(delta: float) -> void:
# リアルタイムで形状を変更(例:敵が通ると高さが下がる)
var current_polygon = polygon.polygon
var affected_index = 5
if affected_index < current_polygon.size():
var point = current_polygon[affected_index]
point.y += sin(Time.get_ticks_msec() * 0.005) * 2.0
current_polygon[affected_index] = point
polygon.polygon = current_polygon
コード例2:複数の多角形と影エフェクト
extends Node2D
@onready var shadow_polygon = $ShadowPolygon
@onready var light_source = $LightSource
var shadow_points = PackedVector2Array()
func _ready() -> void:
# シャドウの初期設定
shadow_polygon.color = Color.BLACK
shadow_polygon.color.a = 0.3 # 透明度30%
func update_shadow() -> void:
# 光源の位置に基づいて影の形状を更新
var light_pos = light_source.global_position
var object_center = Vector2(100, 100)
shadow_points.clear()
# 影の頂点を計算(光源の反対方向に投影)
for angle in range(0, 360, 45):
var rad = deg_to_rad(angle)
var point = object_center + Vector2(cos(rad), sin(rad)) * 50
shadow_points.append(point)
# 光源から遠ざかる方向に延長
var direction = (point - light_pos).normalized()
shadow_points.append(point + direction * 100)
shadow_polygon.polygon = shadow_points
func _process(delta: float) -> void:
update_shadow()
# 光源を移動させると影も動く
light_source.position = get_global_mouse_position()

もっと使いこなす:カスタマイズできるパラメータ
| パラメータ・テクニック | 変えると何が起きるか |
|---|---|
colorのアルファ値で透明度調整 |
透明度を変更して影や光のブレンド効果を作成。薄い影、発光効果などが表現可能 |
textureでテクスチャマッピング |
単色から装飾的なテクスチャへ変更。草地、岩、木製板など自然なテクスチャで見栄え向上 |
uvプロパティでテクスチャ座標制御 |
テクスチャの一部を利用したり、引き伸ばしたりできる。効率的にテクスチャリソースを活用 |
polygons配列で複数図形管理 |
1つのPolygon2Dノードで複数の独立した多角形を描画。管理が簡潔になり性能も向上 |
| 動的な頂点変更 | polygonプロパティをリアルタイム更新して形状をアニメーション。水の波紋、布の揺れなど |
skeletonを使用した変形 |
Skeleton2Dと連携させてボーンアニメーションを適用。複雑な動きも滑らかに表現 |
まとめ
Polygon2Dは「形状を自由に描く」ための強力なノードです。Line2Dで線を、Polygon2Dで塗りつぶし図形を描くという使い分けで、2D描画の表現力は大きく広がります。複数のPolygon2Dを組み合わせることで、非常に複雑で魅力的なビジュアルを実現できます。
- Polygon2Dは任意の多角形を頂点座標で定義して塗りつぶす、表現力豊かなノード
colorやtextureで色彩やテクスチャを自由に調整できる- 複数のPolygon2Dを組み合わせたり、動的に形状を変更したりして複雑な表現を実現
次回は、移動パスを定義して敵やアイテムをスムーズに移動させるPath2Dノードについて解説します。複雑な軌跡に沿った移動を簡単に実装できます。
シリーズ:Godot 4 ノード解説
- 001〜035:各種ノード
- 036:PopupMenu
- 037:FileDialog
- 038〜080:その他のノード
- 081:Timer
- 082:Tween
- 083:HTTPRequest
- 084:Line2D
- 085:Polygon2D(この記事)
この記事はGodot 4.xをもとに執筆しています。


コメント