Affichage d’images et de textes

Créer, jouer et publier des jeux vidéos

Affichage d’images et de textes

Bonjour et bienvenue dans ce nouveau tutoriel. Dans l’avant-dernier article, je vous ai initié à Corona SDK en créant avec vous une petite application avec l’image d’un vaisseau qui se déplace quand on le touche. Dans le code de cette application, nous avons utilisé un certain nombre de fonctions de l’API de Corona SDK. Dans l’article d’aujourd’hui, nous allons parler d’affichage d’images et de texte.

Dans l’API de Corona SDK, on trouve ce qu’on appelle des modules. En attendant de parler des modules dans un tutoriel dédié, considérez-les comme une sorte de boite où se trouvent des fonctions que nous pouvons utiliser pour effectuer certaines actions bien précises. L’un des modules les plus utilisés de Corona est le module display. Ce module gère la plupart de tout ce qui touche à l’affichage de contenus à l’écran et c’est celui que nous allons utiliser dans ce tutoriel.

Affichage d’images

Dans la grande majorité des bibliothèques de création de jeux, l’affichage d’une image à l’écran dans l’application se fait en deux phases. La phase de chargement de l’image et la phase d’affichage de l’image à l’écran. En Corona, ces deux actions sont effectuées par une seule fonction nommée newImage(). Il existe une autre variante de cette fonction nommée newImageRect(), mais nous ne parlerons pas de cette dernière dans cet article. Ces deux fonctions appartiennent au module display.

newImage() est une fonction surchargée. En programmation, une fonction surchargée est une fonction qui a d’autres variantes de même nom, mais avec des signatures ou prototypes différents. En d’autres termes, il existe plus d’une version de la fonction newImage(), mais elles ne prennent pas le même nombre de paramètres.

La forme la plus simple de newImage() ne prend qu’une seule donnée en paramètre. Il s’agit du nom et de l’extension de l’image à charger et à afficher. Elle retourne aussi une variable qui représente l’objet de l’image. Son utilisation se fait comme suit :

local arbre=display.newImage("arbre.png")

Avec ce code, nous demandons à Corona de charger et d’afficher l’image arbre.png à l’écran. Par défaut, cet affichage se fera à la position 0 sur l’axe des X (axe horizontal) et sur l’axe des Y (axe vertical).

Pour modifier la position d’affichage par défaut, on peut passer les valeurs de ces positions en deuxième et troisième paramètre à la fonction  newImage() comme ceci.

local arbre=display.newImage("arbre.png", 150, 100)

Ce code indique alors que notre image se positionnera à la position 150 en X et à la position 100 en Y

L’exécution des deux lignes de code ci-dessus donnera les affichages suivants :

Chargement de l’image et affichage à la position x=0 et y=0

affichage_image1

Chargement de l’image et affichage à la position x=150 et y=100

affichage_image2

Affichage de texte

L’affichage de texte en Corona se fait avec la fonction newText(). Il s’agit aussi d’une fonction surchargée comme celle de l’affichage d’image. Sa forme la plus simple ressemble à ceci :

local titreJeu=display.newText("Bonjour Corona SDK", 100, 100, native.systemFont, 18)

Cette variante de newText() prend 5 données en paramètres.

  • En premier paramètre : Le texte à afficher à l’écran
  • En deuxième paramètre : La position X du texte
  • En troisième paramètre : La position Y du texte
  • En quatrième paramètre : Le nom de la police de caractères à utiliser. La valeur native.systemFont permet d’utiliser la police de caractères par défaut de l’appareil sur lequel s’exécute l’application si vous n’avez pas de police particulière à utiliser.
  • En cinquième paramètre : La taille du texte à afficher

Résultat de l’exécution du code :

affichage_texte1

Pour le cas de l’utilisation d’une police de caractères quelconque, vous pouvez procéder comme suit : Prenons l’exemple d’un fichier de police de caractères de type TTF (True Type Font) nommé Handlee.ttf. Pour utiliser ce fichier, vous pouvez par exemple le copier à la racine du dossier de votre projet et au niveau du code, vous pouvez l’utiliser comme suit :

local titre_jeu=display.newText("Bonjour Corona SDK", 100, 100, "Handlee.ttf", 21)

Résultat de l’exécution du code :

affichage_texte2

Note : Les paramètres de newText() peuvent être aussi ajoutés à une table avant d’être passés en paramètre à la fonction. Voici un exemple :

local options={
  text="Coucou, je suis là ;-)",
  x=100,
  y=250,
  font=native.systemFont,
  fontSize=21
}

local titre=display.newText(options)

Résultat de l’exécution du code :

affichage_texte3

Dans le prochain tutoriel, nous parlerons des couleurs et de la création de figures géométriques. À très vite

 

Une réponse

  1. Alex dit :

    Bonjour Eric,

    Je viens de réaliser tes différents tutoriels, j’attends la suite avec impatience. Beau boulot ! 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
%d blogueurs aiment cette page :