LevelManager - Utilisation de base - Partie 01

---

Objectifs de ce tutoriel

Ce tutoriel va vous présenter plusieurs manières d'afficher une carte issue de Tiled (et exportée en Lua) avec la librairie "LevelManager".

Dans un premier temps, nous allons initialiser la librairie et afficher une carte.
Puis nous allons décaler la carte pour la centrer à l'écran.
Ensuite, nous allons créer un effet de défilement vertical puis horizontal.
Vous apprendrez aussi comment agrandir et réduire l'affichage de votre carte.

Dans un second temps, vous allez apprendre à manipuler les données des calques : les sauvegarder, les modifier et les restaurer.
Il vous sera aussi présenter la gestion des groupes de calques.

Dans un troisième temps, vous serez initiés à la gestion des objets.
Il existe de nombreuses façons de récupérer les données des objets et cette partie sera axée sur ce point.

Le quatrième et dernier point vous expliquera comment altérer l'opacité des calques, des tuiles, des objets et des groupes de calques.

 

Affichage d'une carte

Nous allons commencer par affiche notre carte, puis nous nous occuper de décaler notre carte pour la center, et enfin nous allons lui appliquer un effet de défilement : d'abord vertical, puis horizontal, ensuite les deux en même temps et enfin, nous allons faire en sorte que notre carte défile de manière infinie.
Le défilement infini est strictement le même pour une image simple ou pour une carte.

 

Initialisation de la librairie

Pour initialiser la librairie LevelManager, vous devez utiliser la ligne de code suivante :

local LevelManager = require("LevelManager")

 

Chargement d'une carte

Dans le code disponible ici (source), vous trouverez une carte déjà préparée. Je vous founis également la carte au format Tiled si vous souhaitez mieux comprendre son interaction.

Par habitude, je mets tous les éléments dont mon jeu a besoin dans un répertoire datas. Si vous mettez la carte dans un autre dossier, n'oubliez pas de changer le chemin ! (^_^)

Voici comment on charge une carte issue de Tiled (exportée en Lua) :

function love.load()
  -- Chargement de la carte
  LevelManager:load("datas/map01")
end

 

Comme vous pouvez le constater, on ne doit pas mettre l'extension .lua lors du chargement du fichier.

Pour plus d'explications, le LevelManager effectue un require sur ce fichier puis le parcoure et remplit les différentes tables dont il a besoin.

 

Affichage de la carte

Aussi simplement que le chargement, l'affichage de la carte est effectué comme ceci :

function love.draw()
  -- Affichage de la carte
  LevelManager:draw()
end

 

Visualiser le résultat

Maintenant, il ne vous reste plus qu'à lancer le jeu et vous devriez obtenir ceci :

 

 

Centrer la carte à l'écran

J'avais fait en sorte que la carte soit aussi grande que la fenêtre. Nous allons changer la taille de la fenêtre pour mettre les valeurs 1024 et 780 pour respectivement la largeur et la hauteur de la fenêtre.

Pour cela, il suffit de simplement modifer les données du fichier conf.lua présent à la racine.

  t.window.width = 1024
  t.window.height = 780

 

Maintenant, en lançant le jeu, vous verrez afficher la carte en haut et à gauche de l'écran et tout le reste en noir, comme ceci :

 

En premier, il faut d'abord connaître la taille de la fenêtre. Pour cela, on va utiliser les fonctions de Love2D.

En dehors de toute fonction (de préférence au début du fichier, juste en dessous de la variable LevelManager), nous allons écrire les lignes suivantes :

local screenWidth = love.graphics.getWidth()
local screenHeight = love.graphics.getHeight()
local mapWidth, mapHeight
local offsetX, offsetY

 

Ensuite, dans la fonction love.load, on va récupérer les dimensions de la carte à l'aide de la fonction existante getMapDimensions :

mapWidth, mapHeight = LevelManager:getMapDimensions()

 

IMPORTANT :
Il est toujours préférable d'utiliser cette fonction plutôt que de faire soi-même les calculs car le scale y est appliqué (on verra ce point plus loin).

 

Maintenant que nous avons toutes les informations nécessaires, il suffit de calculer le nombre de pixels nécessaires pour décaler la carte.

offsetX = (mapWidth - screenWidth) / 2
offsetY = (mapHeight - screenHeight) / 2

 

Puis, nous les transmettons au LevelManager comme ceci :

LevelManager:setOffset(offsetX, offsetY)

 

Vous devriez maintenant obtenir une fonction love.load comme ceci :

function love.load()
  -- Chargement de la carte
  LevelManager:load("datas/map01")

  -- Dimensions de la carte
  mapWidth, mapHeight = LevelManager:getMapDimensions()

  -- Calcul du décalage
  offsetX = (mapWidth - screenWidth) / 2
  offsetY = (mapHeight - screenHeight) / 2
  
  -- Application du décalage sur la carte
  LevelManager:setOffset(offsetX, offsetY)
end

 

En lançant le jeu, la carte est désormais centrée au milieu de la fenêtre.

À partir de la version 2.5, vous pouvez désormais utiliser la fonction centerMap. Cette fonction nécessite une coordonnée sur laquelle centrer la carte (ici, le milieu de l'écran).

LevelManager:centerMap(screenWidth / 2, screenHeight / 2)

 

Défilements vertical / horizontal de la carte

Dans cette partie, on va apprendre à utiliser la fonction setOffset du LevelManager.

Défilement vertical

Ici, on va faire bouger notre carte du bas vers le haut. Puis, quand elle aura disparu, on la fera réapparaître de l'autre côté.

Tout d'abord, il nous faut rajouter une fonction provenant de Love2D : love.update.

-- Mise à jour des données
function love.update(dt)
end

 

Ensuite, comme nous l'avons fait pour la centrer, nous allons simplement changer le décalage d'affichage de la carte.

function love.update(dt)
  offsetY = offsetY + 1
  if offsetY > mapHeight then
    offsetY = screenHeight * -1
  end
  LevelManager:setOffset(offsetX, offsetY)
end

 

Voici le résultat que l'on obtient (le mouvement ne sera pas saccadé lorsque vous l'exécuterez sur votre ordinateur) :

 

Défilement horizontal

Ici, on va faire bouger notre carte de la gauche vers la droite. Puis, quand elle aura disparu, on la fera réapparaître de l'autre côté.

Comme nous l'avons fait pour le défilement vertical, nous allons simplement changer le décalage d'affichage de la carte.
Mais au lieu de modifier l'offset Y, nous allons modifier l'offset X.

function love.update(dt)
  offsetX = offsetX + 1
  if offsetX > mapWidth then      -- mapwidth pour un défilement horizontal et mapheight pour défilement vertical
    offsetX = screenWidth * -1    -- screenwidth pour un défilement horizontal et screenheight pour défilement vertical
  end
  LevelManager:setOffset(offsetX, offsetY)
end

 

 

Agrandir et réduire la taille de votre carte

Si vous avez trouvé ou créé des images pour vos tuiles dont la taille ne vous semble pas assez grande, il est toujours possible de changer cela.

Tout d'abord, repartons de l'affichage de la carte au centre de l'écran (il vous suffit de retirer ou mettre en commentaire le code de la fonction love.update).

 

Pour commencer, nous allons réduire la taille de notre carte par 2.

 

À la suite des variables offsetX et offsetY, nous allons rajouter 2 autres variables :

local scaleX, scaleY

 

Maintenant, je vais vous demander un tout petit peu d'attention.

Précédemment, nous avons récupéré les dimensions de notre carte (largeur et hauteur en pixels) à l'aide de la fonction getMapDimensions.
Comme nous voulons changer la taille de notre carte, cela va influencer ses dimensions.

Pour cela, nous allons devoir modifier l'échelle (scale) de notre carte AVANT d'accéder à ses dimensions.

 

Donc, il faut rajouter les lignes ci-dessous dans love.load après le chargement de la carte ET avant la récupération de ses dimensions :

-- Réduction de la taille de la carte de moitié
scaleX = 0.5
scaleY = 0.5
-- Application du changement des dimensions de la carte
LevelManager:setScale(scaleX, scaleY)

 

Vous devriez obtenir ceci :

 

Effet de zoom

Pour finir, nous allons mettre un petit effet de zoom sur notre carte pour qu'elle commence comme l'image ci-dessus pour finir par occuper toute la hauteur de l'écran.
 

On a besoin de 3 variables :

• scaleMax qui va contenir l'échelle maximum à atteindre
• stepScale qui contiendra l'écart entre l'échelle minimum et l'échelle maximum
• launchZoom qui nous permettra de déclencher l'effet lorsqu'on appuiera sur la touche espace.

Donc, juste en dessus des autres variables et avant la fonction love.load, vous devez rajouter les lignes suivantes :

local scaleMax, stepScale
local launchZoom = false

 

Ensuite, dans la fonction love.load, nous allons calculer ce que nous allons mettre dans scaleMax et stepScale.

Pour effectuer ces calculs, nous avons besoin de la taille d'origine de la carte à l'échelle 1:1, c'est-à-dire ses dimensions lorsque nous l'affichons sans rien changer.

On va faire appel à nouveau à la fonction getMapDimensions :

local mapWidthOrigin, mapHeightOrigin = LevelManager:getMapDimensions()

 

Comme les dimensions d'origine ne sont pas nécessaires ailleurs, on va juste les stocker dans des variables locales à la fonction love.load.

On va d'abord calculer l'échelle en largeur pour que la carte puisse occuper toute la largeur de l'écran (sans se préoccuper de sa taille en hauteur).

local scaleMaxWidth = screenWidth/mapWidthOrigin

 

Ensuite, on va faire de même pour la hauteur :

local scaleMaxHeight =  screenHeight/mapHeightOrigin

 

Enfin, on ne va prendre que la plus petite des 2 :

local scaleMax = math.min(scaleMaxWidth, scaleMaxHeight)

 

Maintenant que nous avons l'échelle maximale pour que notre carte occupe la totalité de la hauteur de l'écran, nous pouvons déduire l'écart entre cette échelle et la plus petite taille désirée (ici, 0.5) :

stepScale = scaleMax - 0.5

 

Avant de nous lancer dans la préparation de l'effet de zoom, nous allons mettre en place le système pour l'activer.
Dans love.keypressed, il faut rajouter (de préférence à la fin) le code ci-dessous :

if key == "space" then
  launchZoom = (scaleX < scaleMax)
end

 

En premier, nous allons mettre en place une vérification si le zoom a été lancé.
Donc, dans love.update, nous allons rajouter ceci :

if launchZoom then
end

 

À partir de maintenant, nous n'allons travailler que dans ce if.

 

On va tout d'abord calculer une vitesse pour que l'animation dure au moins 1 seconde.

local speed = stepScale * dt

 

On ajoute ensuite cette vitesse à chacune des échelle comme ceci :

scaleX = scaleX + speed
scaleY = scaleY + speed

 

Ensuite, il faut simplement transmettre l'échelle à la carte :

-- Application de l'effet de zoom
LevelManager:setScale(scaleX, scaleY)

 

On va vérifier si le zoom a atteint sa valeur maximale pour arrêter l'animation :

-- Indicateur lorsque le zoom est complété
if scaleX >= scaleMax then
  launchZoom = false
end

 

Vous pouvez désormais exécuter l'animation. Cependant, vous remarquerez que la carte s'aggrandit bien mais uniquement vers le bas et à droite.

 

Pour un effet plus sympa, on va faire en sorte que la carte s'agrandisse de tous les côtés.
En bref, on va faire en sorte que la carte reste toujours au centre de l'écran.

 

Pour cela, rien de plus simple, il suffit de copier/coller le code qui nous a permis de centrer la carte dans la fonction love.load pour le mettre dans la fonction love.update.

N'oubliez pas que ce code doit être dans le if launchZoom then !

-- Dimensions de la carte
mapWidth, mapHeight = LevelManager:getMapDimensions()
-- Calcul du décalage pour centrer la carte
offsetX = (mapWidth - screenWidth) / 2
offsetY = (mapHeight - screenHeight) / 2
-- Application du décalage sur la carte
LevelManager:setOffset(offsetX, offsetY)

 

Vous devriez obtenir ceci :

 

Si vous n'avez pas réussi, vous pouvez toujours télécharger le code de ce tutoriel dans les exemples.

---