Premiers pas avec PanelWave CMS

Ce guide transforme une poignée d’images de cases terminées en un petit roman graphique interactif, jouable : deux pages, un embranchement, deux langues, le tout publié en lien d’aperçu à envoyer à un ami. Chaque étape renvoie à la page correspondante de la documentation PanelWave, pour approfondir quand vous le souhaitez. Vous préférez commencer par une version plus longue, avec de nombreuses captures d’écran ? La documentation propose un tutoriel guidé : Votre premier roman graphique.

Étape 1 : créer une œuvre

Dans PanelWave, tout vit dans une œuvre : un projet autonome avec ses propres chapitres, médias, personnages, traductions et réglages. Sur l’écran My Works, cliquez sur Create New Work. L’assistant en quatre étapes demande un titre et un slug d’URL (dont la disponibilité est vérifiée en direct), votre langue par défaut et vos langues supplémentaires, les formats de page que vous comptez utiliser, ainsi qu’une classification par âge et des tags. Un modèle de départ comme Webcomic ou Branching Novel préremplit des réglages par défaut judicieux.

Deux choix comptent pour ce tutoriel. Sous Languages, choisissez l’anglais comme langue par défaut et cochez l’allemand (ou n’importe quelle deuxième langue) pour avoir quelque chose à traduire plus tard. Sous Page Formats, sélectionnez Mobile portrait et Desktop ; chaque format a sa propre mise en page, ne cochez donc que ceux que vous allez vraiment utiliser. Laissez Start with a first chapter coché pour que l’éditeur s’ouvre avec le chapitre 1 et une page 1 vide dans chaque format. La page Créer une œuvre détaille l’assistant pas à pas, et tous les réglages restent modifiables plus tard dans les propriétés de l’œuvre.

Vous avez déjà du matériel ? Le même écran propose Import Script pour un scénario Fountain (Import de scénario) et Import Pages, qui laisse l’IA découper des images de planches terminées en cases (Import de planches). Ici, nous construisons tout à la main : c’est le moyen le plus rapide d’apprendre l’éditeur.

Étape 2 : importer vos illustrations

L’œuvre s’ouvre dans l’éditeur. Dans la barre latérale gauche, passez à l’onglet Assets et faites glisser vos images de cases n’importe où sur l’éditeur ; une zone de dépôt apparaît. Chaque fichier affiche une carte de progression, puis un badge Processing pendant que le traitement en arrière-plan génère les variantes AVIF et WebP, une miniature et une gamme de tailles responsives de 640 à 2560 pixels. Vous continuez à travailler pendant ce temps, et les lecteurs recevront ensuite automatiquement la meilleure variante pour leur appareil.

Deux bonnes habitudes à prendre dès le premier jour. Créez un dossier par chapitre dans le volet des dossiers et sélectionnez-le avant d’importer : les nouveaux fichiers y seront rangés automatiquement. Ensuite, donnez un texte alternatif aux illustrations importantes via Edit Metadata : Preflight vous le rappellera de toute façon, et les personnes qui utilisent un lecteur d’écran en ont besoin. Tout est détaillé sur la page Médias, y compris les imports avec reprise pour les gros fichiers vidéo et l’action Replace File, qui remplace une illustration sans casser les références.

Étape 3 : s’orienter dans l’éditeur

L’éditeur s’organise en quatre zones autour du canevas central : la barre latérale gauche avec les onglets Tree, Assets et Tools, le canevas lui-même, l’inspecteur à droite avec les onglets Panel, Layer, Hotspot, Speech et A11y, et la timeline en bas pour les animations et l’audio. Vous pouvez redimensionner ou replier les deux barres latérales et la timeline. L’en-tête affiche le fil d’Ariane, l’état de sauvegarde, l’annulation et le rétablissement, un sélecteur de langue et les boutons Preview, Preflight et Publish. La page Disposition de l’éditeur en propose une visite guidée.

Inutile d’enregistrer. L’éditeur sauvegarde automatiquement deux secondes après votre dernière modification, et le badge passe de Unsaved changes à Saved just now ; Ctrl+S enregistre immédiatement si vous êtes sur le point de prévisualiser. L’historique d’annulation couvre chaque modification du canevas, de l’arborescence et de l’inspecteur. Deux raccourcis à retenir tout de suite : Ctrl+K (ou Cmd+K) ouvre la palette de commandes, et la touche point d’interrogation ouvre la vue d’ensemble des raccourcis. La liste complète se trouve sur Raccourcis.

Étape 4 : mettre en page votre première planche

Sélectionnez Page 1 dans l’onglet Tree. Le canevas passe en vue page, qui montre une page entière avec toutes ses cases. Faites maintenant glisser votre première image depuis l’onglet Assets vers un espace vide du canevas. Ce simple dépôt crée une case, place l’image comme calque d’arrière-plan et ajuste la case aux proportions de l’image dans tous les formats de page pris en charge par l’œuvre. Répétez l’opération pour deux ou trois autres images, puis disposez-les : faites glisser pour déplacer, utilisez les poignées d’angle pour redimensionner sans déformer, et laissez les guides intelligents aligner bords et centres. Quand plusieurs cases sont sélectionnées, le clic droit propose Align et Distribute.

Chaque case reçoit un badge bleu numéroté indiquant son ordre de lecture ; faites glisser les lignes dans l’arborescence pour le modifier. Les positions des cases sont enregistrées en pourcentages de la page, si bien que la même mise en page s’adapte quand vous passez le sélecteur de format de la barre d’outils du canevas de Desktop à Mobile portrait. Lisez Pages et cases pour l’arborescence et les propriétés de page, et Canevas pour le zoom, la sélection, le magnétisme et la différence entre vue page et vue case.

Un comportement du canevas surprend les nouveaux venus : en vue page, faire glisser les poignées latérales d’une case ne l’étire pas. Elles recadrent la zone visible : une même case peut ainsi montrer un cadrage différent dans chaque format de page. Utilisez les poignées d’angle pour redimensionner.

Étape 5 : ajouter un calque de légende

Double-cliquez sur une case pour passer en vue case, où vous modifiez son contenu. Une case est une pile de calques : image, vidéo, audio, texte et plugin, que le PanelWave Player assemble en une image finale. Appuyez sur T pour l’outil Texte et cliquez sur le canevas pour ajouter une légende ; l’onglet Layer de l’inspecteur règle la police, la taille, la graisse, la couleur et l’alignement, ainsi que la transformation, l’opacité et l’ordre d’empilement. La section Layers de l’onglet Panel liste tout ce que contient la case, avec des bascules de visibilité et des boutons haut/bas pour l’ordre de superposition. La page Calques dit tout sur le sujet, y compris le balayage facultatif Drag Reveal et la profondeur de parallaxe.

Étape 6 : lettrer avec des bulles

Toujours en vue case, appuyez sur S pour l’outil Bulle et cliquez là où vous voulez la bulle. Elle apparaît, et l’éditeur de texte s’ouvre aussitôt : tapez la réplique, puis Ctrl+Entrée. La bulle s’adapte en direct à la longueur du texte. Elle est rendue par le même moteur que le PanelWave Player open source : vous voyez donc exactement ce que verront les lecteurs. Faites glisser la bulle pour la déplacer, tirez la pointe de sa queue vers un personnage, et double-cliquez à tout moment pour retoucher le texte.

Le sous-menu Add Speech Bubble du clic droit liste les dix types de bulles : normale, rectangle, pensée, cri, chuchotement, connecteur, ainsi que les cartouches de narration et de haut de case qui se calent à fleur du bord de la case. Le style fonctionne en cascade : le réglage par défaut de l’œuvre dans Work Properties, une surcharge facultative par personnage et une surcharge par bulle dans le panneau Balloon Style. Définissez le style de base une fois : toutes les bulles suivent. La cascade, les réglages de queue et la taille du lettrage par format sont expliqués sur Bulles.

Attribuez ensuite la bulle à un personnage. Ouvrez le gestionnaire Personnages de l’espace Backstage, créez vos deux personnages principaux avec un portrait et, si vous le souhaitez, leur propre style de bulle, puis choisissez le bon dans la liste Speaker de la bulle. Le nom du personnage apparaît au-dessus de la bulle sur le canevas, et son style s’applique automatiquement.

Étape 7 : ajouter un choix avec une zone interactive

L’interactivité commence avec une zone interactive : une zone cliquable sur une case. Sur votre dernière case, appuyez sur R et cliquez pour placer un rectangle sur un élément que le lecteur pourrait choisir, une porte par exemple. Dans l’onglet Hotspot, donnez-lui un libellé et un libellé ARIA, puis cliquez sur Add Action et choisissez Set Variables : ajoutez une ligne qui donne à une variable nommée choice la valeur left. Ajoutez une deuxième zone interactive pour l’autre porte, qui donne à choice la valeur right. La page Zones interactives décrit leurs formes, actions, mutations et conditions.

Les variables sont la mémoire de votre histoire. Chacune a un type, une valeur par défaut et une portée parmi cinq, de la simple page à la persistance entre les sessions. Pour une décision dont toute l’histoire doit se souvenir, choisissez la portée globale. Pour définir, modifier et lire les variables dans les conditions, voir Variables et conditions ; le modèle sous-jacent est décrit dans le concept de variables.

Étape 8 : relier l’histoire dans le Graph Editor

Commencez par créer la page 2 avec deux cases, une pour chaque porte. Ouvrez ensuite le Graph Editor depuis la barre latérale Backstage ou le menu Work areas de l’en-tête de l’éditeur. Chaque chapitre a un graphe de déroulement : les cases sont des nœuds, les arêtes sont les flèches que suit le lecteur. La case d’entrée est marquée en vert avec une étoile, les impasses sont en rouge, et Auto-Layout (touche L) range la carte. Pour relier deux cases, sélectionnez la source, appuyez sur C, choisissez la cible avec les flèches et appuyez sur Entrée. L’arête est enregistrée immédiatement.

Reliez votre case de choix aux deux cases des portes, puis sélectionnez chaque arête et donnez-lui une condition en JSON Logic, un petit format de règles qui se lit comme une question : la variable choice vaut-elle left ? La page du graphe donne la syntaxe exacte sous Conditions d’arête, avec des exemples à copier et adapter. Les arêtes conditionnelles s’affichent en pointillés orange. Utilisez Simulate pour parcourir l’histoire avec les valeurs des variables en direct, et surveillez le panneau Validation pour repérer les cases inaccessibles et les impasses. Les graphes sont nouveaux pour vous ? La page de concept Navigation par graphe explique pourquoi PanelWave les préfère à un ordre de pages fixe.

Étape 9 : traduire

Ouvrez Localization depuis la barre latérale Backstage. Cliquez sur Extract Strings : tous les textes destinés aux lecteurs, répliques et titres de cases compris, apparaissent dans un tableau avec une clé stable, le texte source et un badge Used in. Cliquez sur une cellule de traduction pour taper la réplique allemande, ou cliquez sur Translate untranslated pour traduire automatiquement toute la langue en une passe ; les traductions automatiques portent un badge MT jusqu’à ce que vous les confirmiez. Les bulles se redimensionnent pour chaque langue : les traductions plus longues tiennent toujours. Le sélecteur de langue de l’en-tête de l’éditeur vous permet de vérifier chaque langue sur le canevas.

Sur un vrai projet, vous confierez sans doute les textes à un traducteur : le menu Export produit du CSV ou du XLIFF 1.2 pour les outils de TAO, et Import rapatrie le résultat. La mémoire de traduction propose les traductions déjà faites, un glossaire garde les termes clés cohérents, et la détection des traductions obsolètes signale celles dont le texte source a changé. Tout est détaillé sur Localisation ; pour enregistrer ou générer les répliques parlées dans chaque langue, voir Localisation audio.

Étape 10 : prévisualiser comme un lecteur

Cliquez sur Preview Work dans l’en-tête de l’éditeur. Le lecteur intégré n’est pas une approximation : c’est le même PanelWave Player open source que celui des œuvres publiées. Les touches 1, 2 et 3 changent de cadre d’appareil, L change de langue, et le panneau Variables permet de forcer choice sur left puis sur right : vous vérifiez ainsi les deux embranchements sans cliquer sur les zones interactives. Enregistrez la combinaison comme scénario si vous comptez la tester à nouveau. Les commandes, y compris les droits d’accès simulés pour tester le paywall, sont documentées sous Aperçu.

Étape 11 : valider et publier

Cliquez sur Preflight. La validation couvre huit catégories, dont l’accessibilité (calques d’image sans texte alternatif), la localisation (traductions manquantes), le déroulement (cases inaccessibles depuis l’entrée du chapitre), les performances (médias trop lourds) et l’intégrité (références cassées). Les erreurs bloquent la publication, les avertissements non. Chaque problème renvoie à la case concernée via un lien Open in editor, et beaucoup proposent un bouton Fix. Pour les images trop lourdes pour la publication, la correction Optimize les réencode en arrière-plan, sans toucher à l’original. Voir Validation et Preflight et la référence des codes de problème.

Cliquez ensuite sur Publish. L’assistant en quatre étapes relance Preflight, demande un environnement, propose une étiquette de version et une sauvegarde, et affiche la progression en direct pendant qu’il construit le manifeste et envoie les médias. Pour votre première œuvre, choisissez l’environnement Preview : il crée un lien impossible à deviner et révocable, que n’importe qui peut ouvrir dans un PanelWave Player sans compte CMS. Envoyez-le à un ami et regardez-le choisir une porte. Chaque publication rejoint l’historique des versions, avec comparaison côte à côte et aperçu de retour arrière. Le processus complet est décrit sur Publication.

Et maintenant ?

Vous voilà avec un roman graphique à embranchements de deux pages, en deux langues, et un lien pour le prouver. À partir d’ici, l’éditeur s’ouvre dans toutes les directions :

Et si vous vous demandez un jour ce que le CMS produit en coulisses : c’est le manifeste PanelWave, ouvert et documenté champ par champ dans la référence du schéma. Votre œuvre vous appartient, dans un format que vous pouvez lire.

• Animations et Audio : mouvements de caméra, images clés et un mixage sur quatre bus (ambiance, musique, bruitages et voix) dans la timeline.
• Cases vidéo : calques vidéo avec modes de lecture et de démarrage, boucles et images d’affiche.
• Mise en page sur canevas : le canevas infini, où les cases se posent sur un plan continu avec des mouvements de caméra définis.
• Bonus : couvertures, fiches de personnages, illustrations bonus et interviews dans la barre d’outils du lecteur.
• Monétisation : règles de paywall par œuvre, chapitre ou case, et simulateur de droits d’accès.
• Export : PDF pour l’impression, PowerPoint pour les présentations, vidéo pour les bandes-annonces, et une archive d’œuvre qui déplace tout le projet d’un système à l’autre.
• Statistiques : le parcours de lecture, l’engagement par case et les cartes de chaleur des clics sur les zones interactives, dès que les lecteurs arrivent.