Rendez Votre Flappy Bird Love2D Jouable sur Mobile : Le Guide Complet

Créer un jeu, c'est fantastique ! Mais dans le monde actuel, si votre création n'est pas accessible sur smartphone, elle passe à côté d'une énorme audience. Aujourd'hui, nous allons voir comment transformer un clone de Flappy Bird précédement développé avec Love2D, initialement conçu pour PC, en une expérience fluide et agréable sur mobile.

Pourquoi Adapter aux Mobiles ?

La principale différence entre jouer sur un ordinateur et sur un smartphone réside dans le mode d'interaction : clavier/souris contre écran tactile. De plus, les écrans de mobiles varient énormément en taille et en orientation, et les performances sont souvent plus limitées. Il est crucial de prendre en compte ces éléments dès le début de l'adaptation.

Les Fondamentaux du Jeu Original

Notre point de départ est un jeu Love2D Flappy Bird classique : l'oiseau tombe sous l'effet de la gravité et on le fait voler en appuyant sur la barre d'espace. Des tuyaux défilent, et si l'oiseau touche un tuyau ou le sol, c'est "Game Over". Sur PC, un simple appui sur "R" permet de rejouer.

1. Des Commandes Intuitives : Le Tactile avant Tout !

Le plus grand changement pour le mobile est l'abandon du clavier. Sur un smartphone, l'action principale de "faire voler" l'oiseau doit se faire par un simple tapotement sur l'écran.

Dans Love2D, la fonction love.mousepressed(x, y, button, istouch) est notre meilleure amie. Elle gère non seulement les clics de souris, mais aussi les événements tactiles via le paramètre istouch.

Avant (love.keypressed) :

function love.keypressed(key)
    if key == "space" and GAME_STATE == "playing" then
        bird_velocity_y = BIRD_FLAP_VELOCITY
    end
    -- ... logique de démarrage du jeu
end

Après (love.mousepressed) :

Nous avons modifié love.mousepressed pour gérer le démarrage du jeu et le "flap" de l'oiseau. Sur PC, un simple clic (button == 1) fonctionnera. Sur mobile, un tapotement sera également interprété comme un button == 1, rendant l'interaction universelle.

function love.mousepressed(x, y, button, istouch)
    -- On vérifie que c'est un clic gauche ou un tapotement
    if button == 1 then
        if GAME_STATE == "start" then
            GAME_STATE = "playing"
            bird_velocity_y = BIRD_FLAP_VELOCITY
        elseif GAME_STATE == "playing" then
            bird_velocity_y = BIRD_FLAP_VELOCITY
        -- ... logique pour le bouton rejouer (voir point 2)
        end
    end
end

Désormais, un simple toucher de l'écran, que ce soit pour démarrer le jeu ou pour faire sauter l'oiseau, sera reconnu. Nous avons également retiré la détection de la touche 'Space' de love.keypressed pour ne pas avoir de comportement dupliqué et pour concentrer la logique d'interaction dans love.mousepressed.

2. Une Interface Revisitée : Les Boutons à l'Écran

Après un "Game Over", il n'y a pas de touche 'R' sur un écran tactile ! Il faut donc un bouton "REJOUER" visible et facile à tapoter.

Dans la fonction love.draw(), lorsque GAME_STATE est "gameover", nous dessinons un rectangle et y ajoutons le texte "REJOUER". Les coordonnées et la taille de ce bouton sont stockées dans des variables globales (RESTART_BUTTON_X, etc.) pour être réutilisées.

Ajout dans love.draw() (quand GAME_STATE == "gameover") :

-- Dessine le bouton "REJOUER"
RESTART_BUTTON_WIDTH = 200
RESTART_BUTTON_HEIGHT = 60
RESTART_BUTTON_X = (WINDOW_WIDTH - RESTART_BUTTON_WIDTH) / 2
RESTART_BUTTON_Y = WINDOW_HEIGHT / 2 + 100

love.graphics.setColor(0.3, 0.5, 0.8) -- Couleur du bouton
love.graphics.rectangle("fill", RESTART_BUTTON_X, RESTART_BUTTON_Y, RESTART_BUTTON_WIDTH, RESTART_BUTTON_HEIGHT)

love.graphics.setColor(COLOR_TEXT) -- Texte blanc
love.graphics.setFont(love.graphics.newFont(30))
love.graphics.printf("REJOUER", RESTART_BUTTON_X, RESTART_BUTTON_Y + (RESTART_BUTTON_HEIGHT - love.graphics.getFont():getHeight()) / 2, RESTART_BUTTON_WIDTH, "center")

Ensuite, dans love.mousepressed, nous ajoutons une vérification pour voir si le tapotement a eu lieu à l'intérieur de la zone de ce bouton.

Ajout dans love.mousepressed (quand GAME_STATE == "gameover") :

elseif GAME_STATE == "gameover" then
    if x >= RESTART_BUTTON_X and x <= RESTART_BUTTON_X + RESTART_BUTTON_WIDTH and
       y >= RESTART_BUTTON_Y and y <= RESTART_BUTTON_Y + RESTART_BUTTON_HEIGHT then
        resetGame() -- Réinitialise le jeu si le bouton est tapoté
    end
end

Cette approche assure que l'utilisateur mobile peut facilement relancer une partie sans dépendre d'un clavier.

3. Gérer l'Orientation de l'Écran

Les smartphones peuvent être tenus en mode portrait ou paysage. Pour Flappy Bird, le mode paysage est idéal, offrant plus d'espace pour que les tuyaux défilent horizontalement.

Love2D permet de spécifier l'orientation préférée via les paramètres de love.window.setMode. Cependant, ces paramètres sont spécifiques aux plateformes mobiles. Pour éviter une erreur (Invalid window setting: mobile) lors des tests sur PC, nous devons appliquer cette configuration de manière conditionnelle.

Modification dans love.load() :

function love.load()
    -- ... (titre, etc.)

    local os_name = love.system.getOS() -- Récupère le nom du système d'exploitation
    local window_settings = {
        resizable = false,
        fullscreen = false, -- Peut être true pour le déploiement final
        vsync = true
    }

    -- Si c'est un OS mobile (Android ou iOS), on force l'orientation paysage
    if os_name == "Android" or os_name == "iOS" then
        window_settings.mobile = {orientation = "landscape"}
        window_settings.fullscreen = true -- Souvent souhaitable sur mobile
        window_settings.borderless = true
    end

    love.window.setMode(WINDOW_WIDTH, WINDOW_HEIGHT, window_settings)
    
    -- ... (chargement des images, etc.)
end

Grâce à love.system.getOS(), notre jeu s'adaptera intelligemment, demandant l'orientation paysage sur mobile et se comportant normalement sur PC.

4. Petites Optimisations et Prochaines Étapes

Pour un jeu simple comme Flappy Bird, la performance n'est généralement pas un problème majeur. Cependant, pour des jeux plus complexes, vous devriez toujours considérer :

La taille des images : Utilisez des images de résolution raisonnable pour éviter de surcharger la mémoire.
Les polices : Évitez un trop grand nombre de polices différentes, et assurez-vous qu'elles sont lisibles sur de petits écrans.

Une fois que votre jeu fonctionne parfaitement sur PC avec ces modifications, l'étape finale est le packaging pour mobile. Love2D fournit des guides détaillés pour compiler votre jeu en application Android (.apk) ou iOS (.ipa) en utilisant les SDKs respectifs (Android Studio pour Android, Xcode pour iOS). C'est le moment où toutes vos adaptations prendront tout leur sens sur un véritable appareil !

Adapter un jeu pour mobile demande de repenser l'interaction et l'affichage, mais avec Love2D, le processus est remarquablement fluide. Lancez-vous, et bientôt, votre Flappy Bird volera sur des milliers de smartphones !

Le code à télécharger et le jeu sur notre pages : https://arcadeforge.itch.io/flappy-bird

ArcadeForge

vendredi 13 juin 2025