Composant Panel

---

Ce tutoriel va être assez court car le composant Panel est la parent de quasiment tous les autres composants graphiques.

 

Rappel : vous trouverez la liste complète des fonctions du composant dans la documentation.

 

En premier lieu, il faut créer le composant de la façon suivante dans love.load :

local panel = Dina("Panel")

 

La ligne de code ci-dessus permet de créer un panneau. Cependant, comme nous ne lui avons pas affecté de couleur ni de dimensions, il n'y a donc rien à afficher.

 

 

Juste en dessous de sa création, nous allons indiquer sa position et ses dimensions.

On va l'afficher à 150 pixels de la gauche et 100 pixels du haut de l'écran.

panel:setPosition(150, 100)

 

Rappel : tous les composants possèdent les fonctions du composant Base. Je vous laisse regarder la documentation pour la liste des fonctions incluses dans ce composant.

 

Pour qu'il soit suffisamment visible, on va lui mettre une largeur de 400 pixels et une hauteur de 300 pixels.

panel:setDimensions(400, 300)

 

Mais si vous exécutez le programme, vous ne voyez toujours rien.

La raison est qu'il faut obligatoirement définir une couleur de fond pour que le panneau soit visible.

panel:setBackColor(Colors.GRAY)

 

Maintenant, vous voyez le panneau gris !

 

On va lui rajouter une bordure jaune.

panel:setBorderColor(Colors.YELLOW)

 

Comme on ne voit pas bien la bordure, nous allons augmenter son épaisseur à 5 pixels.

panel:setThickness(5)

 

Cela nous donne le code ci-dessous :

function love.load()
  local panel = Dina("Panel")
  panel:setPosition(150, 100)
  panel:setDimensions(400, 300)
  panel:setBackColor(Colors.GRAY)
  panel:setBorderColor(Colors.YELLOW)
  panel:setThickness(5)
end

 

Mais, pour aller plus vite, nous aurions pu faire ceci :

function love.load()
  local panel = Dina("Panel", 150, 100, 400, 300, Colors.YELLOW, Colors.GRAY, 0, 5)
end

Ici, le 0 correspond à la position en profondeur. On verra ce détail dans le composant Image qui est plus adapté à cela.

 

 

Maintenant que nous avons notre panneau qui est affiché, nous allons changer sa taille pour la réduire de moitié.

panel:setDimensions(200, 150)

 

Nous allons ensuite lui définir un zoom de x2 en largeur et x2 en hauteur comme ceci :

panel:setScale(2,2)

 

Cela permet d'afficher un panneau beaucoup plus grand que ce qu'il n'est réellement.

On utilisera ce principe plus loin, vous verrez.

 

Remettons notre panneau comme avant (400 pixels de large et 300 de haut) et retirons le zoom.

function love.load()
  local panel = Dina("Panel", 150, 100, 400, 300, Colors.YELLOW, Colors.GRAY, 0, 5)
end

 

 

Maintenant, nous allons aborder un point relativement difficile : les événements.

Un événement est une action réalisée par le joueur comme un clic sur un bouton (pressed) ou bien déplacer la souris par dessus un composant (hover).

Pour un panneau, il n'y a qu'un seul événement qui est actif : hover.

Par exemple, les composants Button et CheckBox peuvent utiliser l'événement pressed et hover (puisque leur composant parent est Panel).

 

 

Nous allons faire en sorte qu'on zoome sur notre panneau lorsqu'on positionne la souris dessus.

Voyons plus en détail la déclaration de la fonction setEvent :

Panel:setEvent(EventName, EventFunction)

 

Elle attend le nom de l'événement (hover ou pressed) et une fonction qui sera déclenchée lorsque l'événement se produira.

Toutefois, ce qui n'est pas noté, c'est que cette fonction doit recevoir 2 paramètres :

1. le composant qui déclenche l'événement
2. l'état de l'événement (begin ou end, toujours en minuscule)

 

Donc, dans cette fonction, nous allons vérifier si l'état a pour valeur begin.
Si tel est le cas, nous allons faire un zoom sur le panneau. On prend 50% de ses dimensions pour qu'il soit assez gros.
On va également en profiter pour changer :

• la couleur de fond pour la couleur CORNFLOWERBLUE
• la couleur de la bordure pour la couleur BLUE

Dans le cas contraire, nous allons remettre le zoom à sa valeur d'origine (1, 1) ainsi que les couleurs d'origine, à savoir :

• la couleur GRAY pour la couleur de fond
• la couleur YELLOW pour la couleur de la bordure

Ce qui nous donne ceci :

local function OnHover(Component, State)
  if State == "begin" then
    Component:setScale(1.5, 1.5)
    Component:setBorderColor(Colors.BLUE)
    Component:setBackColor(Colors.CORNFLOWERBLUE)
  else
    Component:setScale(1, 1)
    Component:setBorderColor(Colors.YELLOW)
    Component:setBackColor(Colors.GRAY)
  end
end

 

Il ne nous reste plus qu'à affecter cette fonction à l'événement :

function love.load()
  local panel = Dina("Panel", 150, 100, 400, 300, Colors.YELLOW, Colors.GRAY, 0, 5)
  panel:setEvent("hover", OnHover)
end

 

Maintenant, en passant par dessus le panneau, vous obtiendrez ceci :

 

Vous pouvez télécharger le code dans la partie Exemples.

---