Godot - Jeu de plateformes 2D

Viewport et support de l'écran tactile

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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.

 
Sélectionnez
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.y
    

Ensuite, 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 :

 
Sélectionnez
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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2015 Andreas Esau. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.