Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

Viewportおよびキャンバスの幾何学変換

はじめに

ここでは、ノードがコンテンツをローカルに描画してから画面に描画するまでの間に行われる2D幾何学変換の概要について説明します。この概要では、エンジンの非常に低いレベルの詳細について説明します。

The goal of this tutorial is to teach a way for feeding input events to the Input with a position in the correct coordinate system.

A more extensive description of all coordinate systems and 2d transforms is available in 2D coordinate systems and 2D transforms.

キャンバスの幾何学変換

前のチュートリアルの キャンバス・レイヤー で説明したように、すべてのCanvasItemノード(Node2DおよびControlベースのノードはCanvasItemを共通のルートとして使用することに注意してください)は*キャンバス・レイヤー*に存在します。 すべてのキャンバス・レイヤーには、 Transform2D としてアクセスできる幾何学変換(平行移動、回転、拡大縮小など)があります。

前のチュートリアルでも説明したように、ノードはデフォルトでレイヤー0の組み込みキャンバスに描画されます。 ノードを別のレイヤーに配置するには、 a CanvasLayer ノードを使うことができます。

グローバル・キャンバスの幾何学変換

Viewports also have a Global Canvas transform (also a Transform2D). This is the master transform and affects all individual Canvas Layer transforms. Generally, this is primarily used in Godot's CanvasItem Editor.

ストレッチ幾何学変換

最後に、Viewportには*Stretch Transform*があります。これは、画面のサイズ変更やストレッチを行うときに使用されます。 この幾何学変換は( 複数の解像度 で説明されているように)内部的に使われますが、各Viewportで手動で設定することもできます。

Input events are multiplied by this transform but lack the ones above. To convert InputEvent coordinates to local CanvasItem coordinates, the CanvasItem.make_input_local() function was added for convenience.

Window transform

The root viewport is a Window. In order to scale and position the Window's content as described in 複数の解像度, each Window contains a window transform. It is for example responsible for the black bars at the Window's sides so that the Viewport is displayed with a fixed aspect ratio.

変換の順序

To convert a CanvasItem local coordinate to an actual screen coordinate, the following chain of transforms must be applied:

../../_images/viewport_transforms3.webp

変換関数

The above graphic shows some available transform functions. All transforms are directed from right to left, this means multiplying a transform with a coordinate results in a coordinate system further to the left, multiplying the affine inverse of a transform results in a coordinate system further to the right:

# Called from a CanvasItem.
canvas_pos = get_global_transform() * local_pos
local_pos = get_global_transform().affine_inverse() * canvas_pos

最後に、CanvasItemのローカル座標をスクリーン座標に変換するには、次の順序で乗算します:

var screen_coord = get_viewport().get_screen_transform() * get_global_transform_with_canvas() * local_pos

ただし、通常は画面座標で作業することは望ましくないことに注意してください。推奨される方法は、画面の自動解像度のサイズ変更が正しく機能するように、単純にCanvas座標( CanvasItem.get_global_transform() )で作業することです。

カスタム入力イベントのフィード

It is often desired to feed custom input events to the game. With the above knowledge, to correctly do this in the focused window, it must be done the following way:

var local_pos = Vector2(10, 20) # Local to Control/Node2D.
var ie = InputEventMouseButton.new()
ie.button_index = MOUSE_BUTTON_LEFT
ie.position = get_viewport().get_screen_transform() * get_global_transform_with_canvas() * local_pos
Input.parse_input_event(ie)