Je crée mon jeu vidéo E12 : interfaces physiques et graphiques

Posté par . Édité par ZeroHeure, Benoît Sibaud, tankey et Nÿco. Modéré par Ontologia. Licence CC by-sa
52
20
août
2014
Jeu

«Je crée mon jeu vidéo» est une série d'articles sur la création d'un jeu vidéo, depuis la feuille blanche jusqu'au résultat final. On y parlera de tout : de la technique, du contenu, de la joie de voir bouger des sprites, de la lassitude du développement solitaire, etc. Vous pourrez suivre cette série grâce au tag gamedev.

Dans l'épisode 11, on a décoré notre carte, et même si elle n'est pas encore dans un état jouable, elle constitue une bonne base pour la suite. Pour ce retour de vacances, on va s'intéresser aux interfaces physiques et graphiques du jeu.

Sommaire

Introduction

Contrairement à ce que j'avais espéré, les vacances n'ont pas été très productives pour mon jeu. Je comptais passer du temps dessus de manière à avoir des avancées significatives, mais il n'en a rien été. J'ai seulement pu faire quelques tests dont je parlerai sans doute dans un prochain épisode. C'est très frustrant ce genre de situation.

Ça ne m'empêche pas de continuer mes réflexions (et mes bouts de code) et de les partager. Aujourd'hui on va discuter des interfaces :

  • les interfaces physiques, celles qui permettent de commander les actions dans le jeu (input),
  • et les interfaces graphiques, celles qui rendent compte d'élements du jeu (output).

Et comme d'autres y ont réfléchi avant moi, je me suis largement inspiré de jnuit, créé par devnewton pour ses jeux en Java.

Les interfaces physiques

À la base, je ne savais pas trop quoi utiliser pour l'interface physique. Quand on pense RPG, on imagine que ça se manipule à la souris et/ou au clavier. Mais avec les RPG sortis sur console, ce n'est plus le cas. Et puis bon, il y a devnewton qui veut jouer à la manette. Du coup, allons-y, essayons de contenter tout le monde.

SFML gère les principales interfaces physiques rencontrées dans la nature : clavier, souris, manettes. Donc, de ce côté là, on n'aura pas trop de problème. Le seul problème est de trouver un moyen de gérer tous ces périphériques de manière à peu près commune et de s'éviter de longs switch redondants et désagréables, c'est-à-dire trouver le bon niveau d'abstraction.

Pour les interfaces physiques, on trouve deux notions dans jnuit que j'ai reprises. Celle de contrôleur et celle d'action.

Contrôleur

Un contrôleur, c'est juste l'abstraction d'une interface physique. Dans jnuit, le contrôleur fournit une valeur qui indique son état. Le contrôleur est alors couplé à un détecteur qui va superviser cet état et dire si le contrôleur est actif ou pas.

L'inconvénient (à mon sens) dans jnuit est qu'on est en mode polling, c'est-à-dire qu'on va demander l'état du contrôleur à chaque tour (par exemple : « est-ce que le bouton droit de la souris est appuyé ? »). L'autre mode, c'est le mode événement, c'est-à-dire qu'on regarde les événements qui se sont produits (comme par exemple un appui sur un bouton de souris) et on enregistre le nouvel état à ce moment là. J'ai une nette préférence pour le mode événement que je trouve plus naturel, mais c'est une question de goût. SFML n'est pas casse-pied et propose les deux modes de toute façon.

L'autre chose qui me chagrinait dans l'approche de jnuit, c'est cette distinction entre le contrôleur et son détecteur. La différence est très subtile mais trop subtile pour moi, alors j'ai fusionné les deux notions dans une seule : un contrôleur dit s'il est actif ou pas. Et il met à jour son état en scrutant les événements renvoyés par SFML.

Action

Une action est une abstraction d'une… action qui peut être déclenchée par le joueur — par exemple « sauter ». Une action est provoquée par un ou plusieurs contrôleurs (comme le bouton droit de la souris ou la lettre J du clavier). Comme pour les contrôleurs, il existe aussi un détecteur qui va se charger de vérifier si l'action est active ou pas, suivant l'état des contrôleurs associés. La règle est simple, il suffit d'un seul contrôleur activé pour activer l'action.

Outre le fait que la différence entre l'action et son détecteur soit une fois de plus trop subtile pour moi, j'ai trouvé qu'il manquait un élément important dans cette abstraction. En effet, une action peut être continue ou pas. Prenons deux exemples pour voir la différence. Quand j'appuie sur une flèche, je souhaite que mon personnage avance tant que j'appuie sur la flèche : c'est ce que j'appelle une action continue. En revanche, quand j'appuie sur J, je veux que mon personnage saute une fois, même si je continue d'appuyer sur la touche : c'est ce que j'appelle une action instantanée (non-continue). C'est le même contrôleur (une touche de clavier), mais la manière de le gérer est différente. Dans un cas, je veux que l'action soit active tant que le contrôleur est actif, et dans l'autre cas, je veux que l'action soit active une seule fois même si le contrôleur reste actif.

Et avec tout ça…

Une fois qu'on a des contrôleurs pour tous les périphériques, on peut alors définir des ensembles d'action, dont certains qu'on va retrouver à peu près partout. L'exemple le plus classique est l'ensemble d'actions qui permet de naviguer dans une interface graphique : haut, bas, gauche, droite, accepter.

En tout cas, cette double notion contrôleur/action est très pratique et offre le niveau d'abstraction suffisant pour définir l'interaction entre le joueur et le jeu. Du coup, ajouter la gestion de la manette, c'est juste ajouter un contrôleur à une action existante et rien d'autre ne change. C'est simple et ça répond au besoin initial.

Les interfaces graphiques

Pourquoi les interfaces graphiques de jeux vidéos sont-elles particulières ? Il y a deux raisons :

  1. Premièrement, à cause du mode de fonctionnement de l'affichage. Dans une interface graphique de bureau, l'affichage est mis à jour de temps en temps en fonction d'événements. Dans un jeu vidéo, on affiche une frame tous les soixantièmes de seconde et on la redessine à chaque fois, on doit donc redessiner notre interface complètement.
  2. Deuxièmement, à cause des interfaces physiques. Une interface graphique de bureau classique est prévue pour être utilisée avec une souris. Dans un jeu vidéo, la souris n'est pas obligatoire, il faut donc pouvoir piloter l'interface graphique avec toutes les interfaces physiques possibles — essentiellement le clavier et la manette.

Évidemment, je ne suis pas le premier à avoir réfléchi à tout ça ; il existe donc déjà une tétrachiée de bibliothèques d'interfaces graphiques pour SFML (de qualités inégales, d'ailleurs) :

J'ai décidé de réaliser ma propre bibliothèque d'interface graphique. Pour deux raisons. La première raison, c'est que les bibliothèques existantes intègrent complètement la gestion des événements. Or, sachant que j'ai déjà mes contrôleurs et mes actions, je veux les utiliser comme bon me semble et ne pas dépendre des choix faits par la bibliothèque. La deuxième raison, qui se rapproche de la première, c'est que ces bibliothèques intègrent complètement le dessin des widgets, parfois à l'aide d'un langage du genre CSS. Vous devez vous dire que je suis un peu idiot de refuser qu'une bibliothèque de widgets dessine ses widgets. En fait, le fait de découpler les widgets de leur affichage n'est pas si idiot : il permet de customiser l'affichage pour chaque jeu. Avoir un interpréteur de CSS juste pour afficher quelques widgets, ça fait un peu trop usine à gaz à mon goût.

L'intérêt d'avoir sa propre bibliothèque, c'est qu'on peut piquer une excellente idée de jnuit, à savoir offrir les widgets standard des jeux, et notamment celui qui gère la résolution de l'écran. Ça permet aussi de voir comment on programme ce genre de logiciel assez particulier qu'est une interface graphique. On en vient à se poser les mêmes questions que ses prédécesseurs et au final y apporter les mêmes réponses. Bref, c'est un exercice assez sympathique que tout le monde devrait avoir fait au moins une fois dans sa vie (comme écrire un compilateur), même si ça s'éloigne beaucoup du jeu vidéo au final.

lisuit, SFML User Interface Toolkit

Je vous présente donc SUIT (SFML User Interface Toolkit) (ou lisuit suivant mon humeur) qui est le résultat de toutes ces réflexions. SUIT vient avec la documentation de l'API, une micro documentation générale et quelques exemples (nommés respectivement spade, heart, diamond et club, hahaha) et qui permettent de voir quelques fonctionnalités de la bibliothèque. club notamment montre le widget de configuration de la vidéo.

widget de configuration de la vidéo

Autres nouvelles en vrac

La documentation des API de mes bouts de code

Comme vous avez pu le voir plus haut, j'ai mis en ligne la documentation des API des bibliothèques que j'ai écrites pour ce jeu, sur l'espace mis à ma disposition par github. Ça concerne libes (la bibliothèque pour faire de l'entités-composants-systèmes), libtmx (la bibliothèque pour lire les fichiers TMX produit par Tiled), et libsuit donc.

Un canal IRC pour parler de jeux libres

J'ai rejoint il y a peu le canal IRC #jeuxlibres sur Freenode. Ce canal doit exister depuis un moment mais il n'était pas très connu. Après avoir reçu une invitation, j'ai rejoint ce canal avec quelques autres personnes et au final, ce canal est maintenant assez animé. Nous sommes une grosse dizaine et il y a de temps en temps des débats assez intéressants. Si vous aimez les jeux libres, n'hésitez pas à venir nous rejoindre !

Message personnel

Enfin, je profite de cette nouvelle pour passer un petit message personnel, une fois n'est pas coutume. En fait, cet été, quelqu'un s'est aperçu que j'étais « le rewind de linuxfr ». Il me connaissait depuis des années via ce biais, et IRL depuis moins longtemps par les hasards de la vie, et il a fait le lien cet été avec des yeux ébahis. C'était très drôle à voir. Donc, coucou à Gérald (qui n'a pas voulu me révéler son compte linuxfr) ;)

  • # Merci !

    Posté par . Évalué à 8.

    Un grand merci pour le temps que tu passes à rédiger tous ces articles aussi informatifs qu'agréables à lire !

    Il faudrait penser à une section spéciale, ou un tag spécial, pour mettre à l'honneur ce genre de dépêche de haute qualitai, et regrouper les regrouper dans des collections à thème estampillées "le meilleur des contributeurs de linuxfr"

    • [^] # Re: Merci !

      Posté par . Évalué à 6.

      Il faudrait penser à une section spéciale, ou un tag spécial, pour mettre à l'honneur ce genre de dépêche de haute qualitai, et regrouper les regrouper dans des collections à thème estampillées "le meilleur des contributeurs de linuxfr"

      Tu veux dire comme « Vous pourrez suivre cette série grâce au tag gamedev. »

      • [^] # Re: Merci !

        Posté par . Évalué à 5.

        non je veux dire: 'vous pouvez retrouver le meilleur de linuxfr grâce au tag badass, mais le mieux serait de donner une visibilité plus importantes à ces contenus en leur offrant un espace dédié et accessible depuis le menu situé en haut de la page quand on utilise le style par défaut'

    • [^] # Re: Merci !

      Posté par (page perso) . Évalué à 4.

      Il y a le tag gamedev comme indiqué plus haut, sinon la section DLFP^WLinuxFr.org met régulièrement en avant certains contenus, tu peux trier sur le tag contributeur_dlfp.

      Sinon, il y a la page wiki thèmes récurrents qui recense les sujets revenant régulièrement et généralement appréciés.

      Pour une demande d'évolution, c'est dans le http://linuxfr.org/suivi :-)

      À noter : il y aussi le tag journal_du_mois_2014 ainsi que les statistiques.

    • [^] # Re: Merci !

      Posté par . Évalué à 4.

      Un grand merci pour le temps que tu passes à rédiger tous ces articles aussi informatifs qu'agréables à lire !

      De rien, le plaisir est pour moi. Et puis je me délecte à mettre des liens sur des pages Wikipédia aussi importantes que «Vraie vie» ;)

  • # control & detect

    Posté par (page perso) . Évalué à 8.

    \o/ J'ai encore réussi à être cité dans la série Je crée mon jeu vidéo E12 \o/ Je vais devoir bien réfléchir au prochain moyen d'apparaître dans l'épisode 13…

    Pour la distinction des contrôles et de la détection, ça mérite une petite explication. Le but est de pouvoir gérer de multiples interactions:

    • pression (le bouton est-il appuyé ou non?)
    • activation (appuyer puis relâcher un bouton).
    • pression courte ou longue (le bouton est appuyé depuis un certain temps).
    • chargement et activation (le bouton est appuyé puis relâché au bout d'un temps variable).
    • les combinaisons dans le temps (séquence de pression/activation/…) ou dans l'espace (pressions de plusieurs touches simultanées).
    • etc…

    Les jeux de sport ou les jeux de baston réclament ce genre d'inputs complexes.

    http://devnewton.bci.im

    • [^] # Re: control & detect

      Posté par . Évalué à 2.

      Je vais devoir bien réfléchir au prochain moyen d'apparaître dans l'épisode 13…

      Je pense que ça va être plus difficile ;)

      Le but est de pouvoir gérer de multiples interactions

      Oui, on en avait discuté, mais du coup, c'est quand même assez flou pour moi la manière dont on pourrait programmer ce genre de chose en l'état avec jnuit. Après, pour beaucoup de jeux, un truc plus simple suffit. Et j'aime bien le KISS.

    • [^] # Re: control & detect

      Posté par (page perso) . Évalué à 2.

      ya aussi des actions et des contrôles qui ne sont pas binaires: les joystick doivent pouvoir influer plus ou moins fort sur l’acceleration dans beaucoup de jeux.

  • # Et le tactile

    Posté par (page perso) . Évalué à 2.

    Bon d'accord SFML ne gère pas encore le tactile (enfin je n'en suis pas sur).

    Mais est-ce que sa ne serai pas intéressant étant donnée l'évolution actuel du marché du jeux vidéo vers toujours plus de contrôle tactile, de commence a voir comment intégrer sa dans ta lib ?

    Après j'ai pas de solutions je n'est que des questions.

    • [^] # Re: Et le tactile

      Posté par . Évalué à 3.

      Quand SFML gérera le tactile, ça ne sera pas trop dur je pense d'ajouter ce périphérique. Mais bon, après, mon objectif, ça reste le desktop, pas le mobile. Un RPG sur mobile, j'en ai un (Andor's Trail) et c'est une calamité à jouer.

      Ensuite, je pense que le tactile, c'est un peu pareil que pour la WiiMote, il faut des jeux et des gameplays adaptés si tu veux vraiment en profiter.

  • # IRL

    Posté par (page perso) . Évalué à 10.

    En fait, cet été, quelqu'un s'est aperçu que j'étais « le rewind de linuxfr ». Il me connaissait depuis des années via ce biais, et IRL depuis moins longtemps par les hasards de la vie, et il a fait le lien cet été avec des yeux ébahis

    Ahah, j’ai vécu une expérience similaire.

    J’avais croisé à plusieurs reprises un sonneur de cornemuse lors de divers événements n’ayant absolument aucun rapport avec l’informatique en général, le logiciel libre ou Linux en particulier. Faisant beaucoup de photographie, j’avais donc plusieurs photos de lui, en situation, et certaines étaient vraiment bien. Mais j’ignorais complètement qui il était.

    Un jour, je recroise ce fameux sonneur, à un événement toujours aussi déconnecté du virtuel, et sans aucun rapport non-plus avec d’autres événements où j’avais pu le voir. Cette fois-ci en plus il ne jouait pas de cornemuse. Bon il l’avait dans son sac et il en joua plus tard, mais quand je l’ai retrouvé il n’en jouait pas mais je reconnais tout de même le fameux sonneur de cornemuse.

    Je vais le voir et je lui dis « bonjour, j’ai plusieurs photos de vous avec votre cornemuse et certaines sont vraiment bonnes, si ça vous intéresse, je suis Thomas Debesse et vous me retrouverez avec le groupe là-bas »

    Et là le gars fait lui aussi de grands yeux ébahis et s’exclame « Hey mais je suis ***** de LinuxFr ! », en fait je lisais ses dépêches et il lisait mes dépêches, et nous avions déjà eu l’occasion de corédiger plusieurs trucs grâce à l’espace de rédaction collaboratif, et nous avions du troller ensemble ou l’un l’autre souvent.

    Si je ne portais pas mon vrai nom sur LinuxFr, nous aurions pu nous connaître IRL sans jamais faire le lien avec le virtuel !

    Moralité, jouez de la cornemuse !

    ce commentaire est sous licence cc by 4 et précédentes

    • [^] # Re: IRL

      Posté par . Évalué à 2.

      Pasbill Pasgate est son vrai nom ?

      "La première sécurité est la liberté"

      • [^] # Re: IRL

        Posté par . Évalué à 7.

        C'est pas du pipeau qu'il joue lui ?

        splash!

        • [^] # Re: IRL

          Posté par (page perso) . Évalué à 1.

          Non lui c'est un orchestre à lui tout seul.

          La majeure partie des morts l'était déjà de son vivant et le jour venu, ils n'ont pas sentis la différence.

  • # internet est réel

    Posté par (page perso) . Évalué à 3. Dernière modification le 26/08/14 à 13:17.

    «Nous n’utilisons pas l’expression IRL. […] Nous préférons dire «AFK» — loin du clavier. Nous pensons qu’internet est réel». Peter Sunde.

    Source

    Écrit en Bépo selon l’orthographe de 1990

    • [^] # Re: internet est réel

      Posté par (page perso) . Évalué à 0. Dernière modification le 26/08/14 à 13:01.

      Pas d'accord, internet est virtuel, pas réel. On peut interagir avec lui, mais il n'a pas d'existence.

      (Pour ce qui est de la définition du réel, je laisse le soin à ceux qui se posent la question d'y réfléchir, moi je vais terminer ma digestion.)

      • [^] # Re: internet est réel

        Posté par . Évalué à 7.

        Non en fait c'est surtout que les interactions que tu as via internet ne sont pas moins réels que ceux que tu as AFK. Il y a à mon sens 2 bonne raison de militer pour l'AFK plutôt que l'IRL :

        1. pour ne pas dévaloriser les gens qui utilisent internet ;
        2. pour ne pas que les gens se mettent en tête que ce qui se passe sur internet reste sur internet, ce n'est pas un monde à par.

        Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)

        • [^] # Re: internet est réel

          Posté par (page perso) . Évalué à 1.

          Je me plaçais au niveau du concept, pas au niveau de la facilité à communiquer.

          Pour moi, tu peux interagir avec internet tout comme tu peux interagir avec un miroir : si tu braques une lampe torche dessus, tu verras la lumière éclairer ton plafond. Pour autant, l'image présente sur le miroir n'est pas réelle pour autant.

          Elle n'est pas imaginaire (elle existe objectivement), mais on ne peut pas parler de réalité pour autant.

          Après, on peut discuter pour se demander quelle définition on peut donner à « réalité », mais je pense avoir été trop marqué par Pirsig et Mage : l'Ascension pour avoir une définition objective…

          • [^] # Re: internet est réel

            Posté par . Évalué à 5.

            L'important c'est justement de dire qu'internet on s'en fout. Que tu communique via internet, des lettres, en parlant ou en gigotant les interactions sont toutes aussi réelles les une que les autres. Le fait de modifier le moyen de communiquer ne change rien à ça et c'est là tout l'intérêt d'utiliser AFK plutôt qu'IRL.

            Ton débat sur le réel ou le virtuel n'a pas d'intérêt là dedans.

            Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)

      • [^] # Re: internet est réel

        Posté par . Évalué à 3.

        internet est virtuel, pas réel. On peut interagir avec lui, mais il n'a pas d'existence.

        Pourtant, je peux en prendre un bout, y introduire un message, et récupérer à un autre bout, à plusieurs centaines de kilomètres de là, ce même message. Par quelle magie est-ce possible s'il n'a pas d'existence ?

        Internet n'est pas plus virtuel que l'air qui nous sépare, qui en transmettant les ondes sonores nous permet de l'utiliser pour communiquer.

        Please do not feed the trolls

        • [^] # Re: internet est réel

          Posté par (page perso) . Évalué à 1.

          Pourtant, je peux en prendre un bout

          Ah bon comment fais-tu ? Tu peux en extraire de l'information, la modifier, et l'enrichir. Pour autant cette information que tu possèdes n'est pas internet.

          Internet t'offre un support pour accéder à l'information, tout comme un quotidien. Les pages de ton journal sont réelles, l'encre qui est dessus l'est aussi. Mais est-ce que l'idée présente dans l'article que tu lis est réelle ?

          De la même manière, mon commentaire est fait de mots, et permet d'interagir avec toi (tu peux être d'accord, t'opposer, me donner des arguments qui me feront charger d'avis), mais ce commentaire n'a pas d'existence réelle. Il existe certes, mais virtuellement, à travers la représentation que tu en as.

          Cela n'enlève rien à la force d'internet, mais il n'est pas réel.

          • [^] # Re: internet est réel

            Posté par (page perso) . Évalué à 2. Dernière modification le 26/08/14 à 16:00.

            A mon sens, c'est plus compliqué que réel ou pas réel et ça dépend la définition qu'on donne au réel. Internet n'existe pas, physiquement parlant. On ne peut pas toucher Internet.

            Le même débat existe pour un jeu vidéo, est-il réel ? Physiquement parlant, un jeu vidéo n'a de réel que son support (CD/DVD/USB…).

            Il faut recentrer ce qu'est le réel. Le réel, c'est l'opposée de l'idée. J'aime beaucoup cette citation de Philip Kindred Dick :
            "La réalité, c'est ce qui refuse de disparaître quand on cesse d'y croire".

            Internet est-il une idée, un concept ? En me fiant à la citation ci-dessus, si je cesse de croire en Internet, il ne peut plus exister, hors il est toujours présent puisque même quand je ne crois pas en lui, d'autres agissent avec lui.

            Ce que je fais sur Internet, n'est pas l'oeuvre d'une idée. Je tape des mots, j'agis avec Internet et d'autres peuvent agir avec moi, ce n'est pas le fruit de mon imagination, c'est bien réel, vous êtes réels, seul le support est immatériel, mais il est bien réel.

            La majeure partie des morts l'était déjà de son vivant et le jour venu, ils n'ont pas sentis la différence.

            • [^] # Re: internet est réel

              Posté par (page perso) . Évalué à 1.

              Bon, on peut continuer encore assez loin comme ça :)

              Je suis d'accord avec toi pour dire que ce que l'on fait sur internet n'est pas le fruit de notre imagination. Comme je l'ai dit plus haut, notre interaction n'est pas imaginaire.

              Par contre, je pense qu'une idée n'exclue pas la possibilité d'action. Il y a des idées qui transforment le monde (entendre : qui changent la manière dont on perçoit le monde), et ça rejoins la citation de K Dick : la réalité est subjective.

              Et pour moi c'est dans cette catégorie que je classe internet, ça n'est pas palpable, ça n'a pas de texture, tu ne peux pas me montrer internet. Pourtant, nous sommes tous d'accord pour dire qu'internet existe et que les actions que l'on y réalise sont réelles. Et c'est pour ça que je le qualifie de virtuel. Ça ne lui donne pas moins de valeur, je ne nie pas le temps que j'y passe, au contraire !

              • [^] # Re: internet est réel

                Posté par . Évalué à 3.

                tu dis

                internet est virtuel, pas réel. On peut interagir avec lui, mais il n'a pas d'existence.

                puis

                nous sommes tous d'accord pour dire qu'internet existe

                Faudrait savoir, il existe ou pas ? ;-)

                Fais un petit effort, et bientôt tu nous diras

                nous sommes tous d'accord pour dire qu'internet est réel

                • [^] # Re: internet est réel

                  Posté par (page perso) . Évalué à 1.

                  Bien vu ! J'avais commencé à écrire :

                  internet est virtuel, pas réel. On peut interagir avec lui, mais il n'a pas d'existence réelle.

                  Puis avais retiré le « réel » pour ne pas faire écrire une tautologie. J'aurais du me relire davantage…

  • # Quelques oublis

    Posté par . Évalué à 4.

    Je viens de retomber sur quelques liens que j'avais prévu de mettre dans cet épisode, je les mets donc ici pour mémoire.

    • Gamepad : un draft du W3C pour gérer les manettes de jeu dans le navigateur. La partie intéressante est la normalisation de la manette (et notamment de la numérotation des boutons).
    • Game Input Simplified : une tentative de simplifier la gestion des inputs, et qui ressemble assez dans l'idée à ce qui se trouve dans jnuit, mais avec du Javascript.

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.