Modifications de la fenêtre d’affichage et du canevas

Introduction

Ceci est une vue d’ensemble des transformations 2D qui ont lieu pour les nœuds, depuis le moment où ils réalisent leur contenu localement, jusqu’au moment où ils le réalisent à l’écran. Cet aperçu traite des détails très bas niveau du moteur.

Transformation du canevas

Comme mentionné dans le tutoriel précédent, ref:doc_canvas_layers, tous les nœuds CanvasItem (rappelez-vous que les nœuds basés sur Node2D et Control utilisent CanvasItem comme racine commune), résideront dans un Calque de canevas. Chaque couche du canevas a une transformation (translation, rotation, échelle, etc.) accessible en tant que Transform2D.

Également abordé dans le didacticiel précédent, les nœuds sont réalisés par défaut dans la couche 0, dans le canevas intégré. Pour placer les nœuds dans une autre couche, vous pouvez utiliser un nœud CanvasLayer.

Transformation globale du canevas

Les fenêtres d’affichages ont également une transformation globale de canevas (aussi un Transform2D). Il s’agit de la transformation principale qui affecte toutes les transformations Couche de canevas individuelles. Généralement, cette transformation n’est pas très utile, mais elle est utilisée dans l’éditeur CanvasItem de l’éditeur Godot.

Transformation par étirement

Enfin, les fenêtres d’affichages ont une Transformation par étirement, utilisée lors du redimensionnement ou de l’étirement de la fenêtre. Cette transformation est utilisée en interne (comme décrit dans Multiple resolutions), mais peut également être définie manuellement dans chaque fenêtre d’affichage.

Les événements d’entrées reçus dans le rappel MainLoop._input_event() sont multipliés par cette transformation, mais ils sont absents de ceux mentionnés plus haut. Pour convertir les coordonnées InputEvent en coordonnées locales CanvasItem, la fonction CanvasItem.make_input_local() a été ajoutée pour plus de commodité.

Ordre de transformation

Pour qu’une coordonnée dans les propriétés locales de CanvasItem devienne une coordonnée d’écran réelle, vous devez appliquer la chaîne de transformations suivante :

../../_images/viewport_transforms2.png

Fonctions de transformation

L’obtention de chaque transformation peut être réalisée avec les fonctions suivantes :

Type Transformation
CanvasItem CanvasItem.get_global_transform()
CanvasLayer CanvasItem.get_canvas_transform()
CanvasLayer+GlobalCanvas+Etirement CanvasItem.get_viewport_transform()

Enfin, pour convertir les coordonnées locales de CanvasItem en coordonnées d’écran, multipliez-les simplement dans l’ordre suivant :

var screen_coord = get_viewport_transform() * (get_global_transform() * local_pos)
var screenCord = (GetViewportTransform() * GetGlobalTransform()).Xform(localPos);

Gardez toutefois à l’esprit qu’il n’est généralement pas souhaitable de travailler avec des coordonnées d’écran. L’approche recommandée consiste à travailler simplement en coordonnées Canvas (CanvasItem.get_global_transform ()), pour permettre au redimensionnement automatique de la résolution d’écran de fonctionner correctement.

Alimentation d’événements d’entrées personnalisés

Il est souvent souhaitable de transmettre des événements d’entrées personnalisés à l’arborescence de la scène. Avec les connaissances ci-dessus, pour le faire correctement, il faut procéder de la manière suivante :

var local_pos = Vector2(10, 20) # local to Control/Node2D
var ie = InputEventMouseButton.new()
ie.button_index = BUTTON_LEFT
ie.position = get_viewport_transform() * (get_global_transform() * local_pos)
get_tree().input_event(ie)
var localPos = new Vector2(10,20); // local to Control/Node2D
var ie = new InputEventMouseButton();
ie.ButtonIndex = (int)ButtonList.Left;
ie.Position = (GetViewportTransform() * GetGlobalTransform()).Xform(localPos);
GetTree().InputEvent(ie);