I. Sommaire▲
Vous pouvez retrouver les autres épisodes de cette série dans le sommaire dédié.
II. Vidéo▲
Godot Engine - Jeu de plateformes 2D - Viewport et support de l'écran tactile
III. Résumé▲
Dans cet épisode, nous allons prendre en compte la résolution de l'écran afin d'afficher toujours la même partie du jeu, quelle que soit la résolution. De plus, nous allons ajouter des boutons sur l'écran pour les écrans tactiles.
III-A. Viewport▲
Actuellement, si la résolution de l'écran du joueur change, la zone du jeu affichée est modifiée.
III-A-1. Création d'un script global▲
Pour obtenir un script global (accessible de n'importe où), nous ajoutons un nœud « GDScript ».
Par défaut, ce script ne sera pas chargé par Godot. Pour changer cela, il faut aller dans les paramètres du projet, dans l'onglet « Autoload » et ajouter un nœud correspondant au script.
III-A-1-a. Code▲
Le but du script est de récupérer la taille du viewport et le redimensionnement à appliquer à nos objets.
extends Node
var viewport_scale
var viewport_res
func _ready():
var viewport = get_node("/root").get_children()[1].get_viewport_rect().size
viewport_res = get_node("/root").get_children()[1].get_viewport_rect().size
viewport_scale = 600/viewport.yEnsuite, la variable viewport_scale est utilisée pour modifier la valeur de la propriété de zoom de la caméra.
III-B. Boutons d'écran tactile▲
Pour que les boutons soient toujours au-dessus du jeu, nous ajoutons un nœud « CanvasLayer ». Le nœud utilisé pour les boutons pour les écrans tactiles est « TouchScreenButton ». Ensuite, il suffit de configurer les boutons pour leur ajouter des sprites et d'assigner la propriété « Action » à l'action correspondante.
III-B-1. Positionnement▲
Pour positionner les boutons, nous ajoutons un nœud « Node2D » parent des deux boutons. Ensuite, à travers un nouveau script, nous les positionnons :
extends CanvasLayer
func _ready():
get_node("left_inputs").set_pos(Vector2(0,get_node("/root/global").viewport_res.y))
get_node("left_inputs").set_scale(get_node("left_inputs").get_scale() / get_node("/root/global").viewport_scale)
get_node("right_inputs").set_pos(get_node("/root/global").viewport_res)
get_node("right_inputs").set_scale(get_node("right_inputs").get_scale() / get_node("/root/global").viewport_scale)Le but est de positionner automatiquement le nœud englobant les boutons en bas à gauche de la fenêtre et d'appliquer le facteur de redimensionnement lié au viewport.
IV. Commenter▲
Vous pouvez commenter et donner vos avis dans la discussion associée sur le forum.