Geckos, éditeur de cartes online

[Gulix]

Geckos

http://www.github.com/gulix/geckos

 

 

J'ai déjà parlé de Geckos sur le Warfo : http://www.warhammer-forum.com/index.php?showtopic=242309

Il s'agit d'un post où je présente mon template de carte pour les personnages de Silver Tower. Parce que j'ai envie de jouer en français (avec une épée large plutôt qu'une broadsword), parce que j'ai envie d'avoir un joli support physique pour les profils de l'app que je vais prendre, et pourquoi pas pour des profils customs.

 

Geckos est un éditeur de carte comme peut l'être Magic Set Editor : à partir d'un template, on peut créer une infinité de cartes reprenant un style identique. Et on peut bien sûr créer ses propres templates.

 

Geckos est un projet d'outil à destination des joueurs, que ce soit pour des cartes de profils, de sorts, de compétences, pour des jeux de figurines, de rôles, de plateau, voire même pour autre chose (cartes d'invitation, ...). Basé sur des technologies accessibles et open-source, il a pour objectif de l'être aussi (open-source et accessible).

 

Ayant beaucoup manipulé et trituré Magic Set Editor, j'en étais arrivé à découvrir quelques limites agaçantes, et une ergonomie pas toujours au top. Geckos est, en quelque sorte, ma réponse à ces limites. De plus, Geckos est 100% Web, et peut donc être utilisé depuis n'importe quelle machine disposant d'un navigateur moderne : ordinateur sous Windows, Linux, Mac, ChromeOS ou autre, Tablette voire même Smartphone !

 

Geckos travaille avec des templates. Ceux-ci permettent de définir les données qui définiront chaque carte, ainsi que la manière dont la carte va être générée. On charge / copie le code du template dans l'interface, et il ne reste plus qu'à ajouter les cartes et les éditer. Les images des cartes sont ensuite générées, et on peut les utiliser à notre convenance. Sachant que des exports évolués sont prévus (archives zip, documents pdf, ...). Il est bien sûr possible de sauver son travail pour le réutiliser plus tard.

 

Geckos est un produit très jeune, dont la première Beta sort tout juste : https://github.com/Gulix/geckos/releases/tag/v0.1.1

 

Qu'est-ce que cela signifie ? Que les fonctionnalités de base, validant mon idée, fonctionnent. Que l'interface utilisateur commence à être fixée. L'outil est utilisable, les fondations sont là, mais il reste encore du travail avant que le produit final ne soit disponible. Mais le produit continuera à évoluer, au gré des besoins, des envies.

 

Le gros morceau des templates sera aussi la cible d'un gros travail. J'ai déjà prévu de passer mes templates pour Magic Set Editor sous Geckos. Et je serai ravi de voir de nouveaux templates pour d'autres jeux, d'aider à les concevoir voire de les faire. Geckos possèdera aussi un mode "jeu unique", qui permettra par exemple à un éditeur d'héberger une version de Geckos à l'image de son jeu, avec ses propres templates.

 

Bref, pleins de belles choses.

Pour que tout se concrétise, il faudra que le projet intéresse du monde bien sûr. Sur github, les Issues permettent de centraliser les demandes, les bugs, de répondre aux questions. Il ne faudra pas hésiter à l'utiliser pour pousser vos souhaits d'évolution favoris.

 

Vous êtes développeur et intéressé par le projet : c'est open-source, github peut vous permettre de développer vos évolutions et de les intégrer au projet.

Vous êtes designer et avez envie de faire des cartes : posez vos questions sur les méthodes de création des templates et aidez-moi à enrichir le wiki

Vous êtes anglophobe : le projet est prévu pour passer multilingue à plus ou moins court terme

Vous voulez tester le bouzin : http://gulix.github.io/geckos/

 

PS : je ne sais pas si ce post est à sa place ici, mais c'est le meilleur endroit que j'ai trouvé.

[zedo]

Yep.

 

Je vais tester ça de suite.

 

Merci a toi.

[Gulix]

Merci de tester le logiciel   :wink2: .

Si tu as des questions / retours / avis, n'hésite pas !

[Dreadaxe]

C'est trop compliqué pour charger les templates.

À quand un éditeur WYSI pour fabriquer les templates.

[Dreadaxe]

Matrice de carte à convertir ^^

http://www.conf-federation.fr/packs/matrice.psd

[Gulix]

Il y a 8 heures, Dreadaxe a dit :

C'est trop compliqué pour charger les templates.

À quand un éditeur WYSI pour fabriquer les templates.

Qu'entends-tu par "charger les templates" ? Il suffit de copier / coller le code dans le cadre prévu, puis de cliquer sur le bouton adéquat. Bon, la documentation est prévue mais pas encore faite (j'attends de finaliser l'interface pour pas la refaire plusieurs fois).

Actuellement, je bosse sur un affichage de liste de templates. En gros, l'application serait fournie avec une liste de templates pré-chargés. Et plutôt que d'accéder au code, on accèderait à une liste de templates. Plus facile à manipuler.

Pour l'éditeur, c'est pour l'instant à l'état d'ébauche papier. C'est un (très) gros morceau. Vraiment. Et pour l'instant, j'en suis à l'étape de maquettage sur papier.

Il y a 8 heures, Dreadaxe a dit :

Matrice de carte à convertir ^^

http://www.conf-federation.fr/packs/matrice.psd

C'est clairement le genre de truc que je ne peux pas faire ... parce que je n'ai rien pour lire du PSD. Le tutorial 01 (concevoir une carte depuis zéro) est en cours de re-rédaction, et arrivera ensuite en français. Un second tutorial, qui présentera une carte de type vectorielle (svg) passée par la moulinette FabricJS arrivera ensuite. Quand ? Bah, quand j'aurai le temps ^^.

Pour une idée d'éditeur WYSIWYG, il y a ça : http://fabricjs.com/kitchensink

En gros, tu peux y concevoir ton modèle de carte de A à Z. C'est pas la panacée, mais ça marche pas trop mal. Ensuite, une fois satisfait de la carte, tu va dans l'onglet "Controls", tu cliques sur le bouton JSON. Puis tu vas dans l'onglet "JSON", et tu récupères l'ensemble du code. Que tu copies dans JsonLint.

Tu valides le tout pour mettre en forme, et tu obtiendras un truc de ce style :

{
  "objects": [
  	-- pleins de trucs
  ],
  "backgroundColor": "#114455"
}

Le contenu de objects, tu le mets dans la section canvasFields d'un template existant ou vierge (dispo sur le wiki). Et ça sera une bonne base.

Oui, il faut quelques notions de codage / programmation pour tirer le meilleur de Geckos. Mais l'éditeur essaiera de limiter cela. Mais ce n'est pas trivial à développer (sur mon temps libre). Mais tous ces retours me sont utiles pour voir quoi améliorer. Notamment dans l'interface (à l'utiliser, je trouve moi aussi des trucs pas terribles, à corriger). Faut pas hésiter à placer des messages sur Github (section Issues) pour m'indiquer ce qui va pas (en ajoutant des captures si besoin).

[Baramyne]

Je sais pas à qui s'adresse vraiment ce truc, mais ça à l'air quand même pour "geek only".

C'est comme si tu allais chez Ikea et qu'on te donne 40 planches d'agglo et un sceau de vis en te disant : "Tiens, avec ça tu peux faire des meubles".

L'interface est austère à souhait, avec des lignes de code à copier coller.....c'est vraiment une caisse à outil = faut savoir bricoler. C'est clairement pas pour tout le monde (qui veut faire des cartes personnalisées s'entend)

[Gulix]

Il y a 2 heures, Baramyne a dit :

Je sais pas à qui s'adresse vraiment ce truc, mais ça à l'air quand même pour "geek only".

C'est comme si tu allais chez Ikea et qu'on te donne 40 planches d'agglo et un sceau de vis en te disant : "Tiens, avec ça tu peux faire des meubles".

L'interface est austère à souhait, avec des lignes de code à copier coller.....c'est vraiment une caisse à outil = faut savoir bricoler. C'est clairement pas pour tout le monde (qui veut faire des cartes personnalisées s'entend)

Il y a en fait deux types d'approche sur ce genre d'outils (comme Magic Set Editor).

Il y a la création de templates. Et là, faut mettre les mains dans le cambouis. Il y aura un éditeur, mais même là, tout ne se fera pas en un claquement de doigt. Il y a quelques notions de programmation, du graphisme, de l'ergonomie. Donc oui, faut savoir bricoler. Mais au moins autant que pour faire un template sous Photoshop / Magic Set Editor / autre.

Et puis il y a l'utilisation pour créer des cartes. Choisir un template, le charger, créer des cartes, récupérer les fichiers images. Pour l'instant, ce n'est pas aussi user-friendly que ça, visiblement. Je travaille sur une liste de templates pré-installés qui s'afficherait sous forme de liste, avec une icône. Plus de code à copier/coller (mais cette option resterait accessible pour les bidouilleurs). Puis la création des cartes.

Austère à souhait : N'hésite pas à développer là-dessus, ça m'intéresse. Je suis développeur avant tout, et l'ergonomie est sans doute parfois mise à mal. Il manque sans doute des aides, des tutoriaux, des fonctionnalités (y en a une tripotée de listées sur Github). La prochaine beta intègrera la liste pré-chargée des templates. Le retour d'utilisateurs est très important, même si négatif. Ca permet de sortir de ma bulle d'utilisation personnelle.

[Baramyne]

Ca dépend à qui ça s'adresse. Veux tu faire un éditeur de carte grand public ? Si oui, j'imagine un truc un peu comme blogger.com. Tout est prémaché, tu choisi un template et tu rempli avec ton contenu, et tu choisi tes parametres (police, dimension, etc...)

Après, si le prémaché n'est pas ton objectif, ça s'adressera plus à des IT guys, c'est tout.

Mais en grattant un peu, on voit que la plupart des gens ne sont pas compétant en informatique, tout simplement. Pour certains, faire ses cartes correspond à l'application de compétences pro pour le loisir, pour d'autres, ce sera un handicap chronophage, et ils chercheront un moyen plus rapide même si moins pointu pour arriver à leur fin. Genre faire sa carte et son dos sur photoshop, et passer par un "imprimeur" de carte, genre printer studio.

[Gulix]

L'objectif final est d'avoir un outil qui permettra de générer des images de carte basées sur des templates. Pour créer ces templates, faudra passer par de la configuration / du codage / etc.. même si j'essaierai de mettre des outils d'aide.

Pour l'utilisateur, il sélectionnera son template, remplira les champs nécessaires, et aura sa carte / image de générée. Il pourra bien sûr faire plusieurs cartes, et générer une compilation de cartes (PDF, archive zip, ...).

En gros, en dehors de la sélection du template (en cours), c'est ce qui est déjà présent dans l'onglet "Card" de l'application. L'export fonctionne Carte par Carte pour l'instant. Mais d'autres exports sont en cours de réflexion. Le développement arrivera plus tard.

L'outil est open-source, et j'ai commencé à réfléchir également à un mode "Editeur de jeu". C'est-à-dire un mode d'utilisation dans lequel celui qui héberge l'application peut choisir les templates proposés (et ne pas autoriser d'en utiliser d'autres), pour par exemple proposer un éditeur spécifique à son jeu. Avec pourquoi pas une liste pré-existante de cartes (les profils officiels ?).

Mais bon, je fais ça sur mon temps libre, donc ça avance à petits pas ^^. Et puis, autant l'avouer, c'est aussi un outil pour moi avant tout : pour développer mes compétences en programmation web, et pour éditer des cartes pour mon usage à moi.

Modifié le 23 août 2016 par Gulix

[Dreadaxe]

Le 22/08/2016 à 09:50, Gulix a dit :

Qu'entends-tu par "charger les templates" ? Il suffit de copier / coller le code dans le cadre prévu, puis de cliquer sur le bouton adéquat. Bon, la documentation est prévue mais pas encore faite (j'attends de finaliser l'interface pour pas la refaire plusieurs fois).

Est ce qu'il n'y a pas une possibilité d'avoir des lien URL avec le template voulu déjà sélectionné.

 

Le 22/08/2016 à 09:50, Gulix a dit :

Actuellement, je bosse sur un affichage de liste de templates. En gros, l'application serait fournie avec une liste de templates pré-chargés. Et plutôt que d'accéder au code, on accèderait à une liste de templates. Plus facile à manipuler.

Oui

 

Le 22/08/2016 à 09:50, Gulix a dit :

Pour l'éditeur, c'est pour l'instant à l'état d'ébauche papier. C'est un (très) gros morceau. Vraiment. Et pour l'instant, j'en suis à l'étape de maquettage sur papier.

C'est clairement le genre de truc que je ne peux pas faire ... parce que je n'ai rien pour lire du PSD. Le tutorial 01 (concevoir une carte depuis zéro) est en cours de re-rédaction, et arrivera ensuite en français. Un second tutorial, qui présentera une carte de type vectorielle (svg) passée par la moulinette FabricJS arrivera ensuite. Quand ? Bah, quand j'aurai le temps ^^.

Dommage. Et si le fichier des cartes Confédé est déjà un fichier type vectorielle tu as possibilité de convertir pour avoir un template plus facilement ?

 

Le 22/08/2016 à 09:50, Gulix a dit :

Pour une idée d'éditeur WYSIWYG, il y a ça : http://fabricjs.com/kitchensink

En gros, tu peux y concevoir ton modèle de carte de A à Z. C'est pas la panacée, mais ça marche pas trop mal. Ensuite, une fois satisfait de la carte, tu va dans l'onglet "Controls", tu cliques sur le bouton JSON. Puis tu vas dans l'onglet "JSON", et tu récupères l'ensemble du code. Que tu copies dans JsonLint.

Tu valides le tout pour mettre en forme, et tu obtiendras un truc de ce style :

{
  "objects": [
  	-- pleins de trucs
  ],
  "backgroundColor": "#114455"
}

Le contenu de objects, tu le mets dans la section canvasFields d'un template existant ou vierge (dispo sur le wiki). Et ça sera une bonne base.

Compliqué déjà.

 

Le 22/08/2016 à 09:50, Gulix a dit :

Oui, il faut quelques notions de codage / programmation pour tirer le meilleur de Geckos. Mais l'éditeur essaiera de limiter cela. Mais ce n'est pas trivial à développer (sur mon temps libre). Mais tous ces retours me sont utiles pour voir quoi améliorer. Notamment dans l'interface (à l'utiliser, je trouve moi aussi des trucs pas terribles, à corriger). Faut pas hésiter à placer des messages sur Github (section Issues) pour m'indiquer ce qui va pas (en ajoutant des captures si besoin).

Ok

[Gulix]

il y a 8 minutes, Dreadaxe a dit :

Est ce qu'il n'y a pas une possibilité d'avoir des lien URL avec le template voulu déjà sélectionné.

Je pense qu'une fois la liste des templates en place, c'est un truc qui devrait être possible. Il faudra que le template en question soit présent dans la liste, bien sûr, mais c'est largement envisageable. C'est même une plutôt bonne idée

il y a 8 minutes, Dreadaxe a dit :

Dommage. Et si le fichier des cartes Confédé est déjà un fichier type vectorielle tu as possibilité de convertir pour avoir un template plus facilement ?

Compliqué déjà.

Avec une carte au format SVG, y a vraiment moyen de bien s'amuser et d'obtenir un truc très sympa rapidement. C'est ce que montrera le second tutorial. Qu'il faut que je rédige. Pour l'instant, j'ai en priorité les derniers développements liés à la Beta 2, puis direction le wiki pour de la documentation.

Je peux même faire une version basique de la carte à partir d'un fichier SVG. Après, il faut réfléchir aux champs éditables.

Je conçois bien qu'un néophyte en programmation / design, qui n'a jamais écrit une ligne de code de sa vie, soit intimidé. Mais c'est peut-être le moment de s'y mettre si on est intéressé, non ?

[Dreadaxe]

Peut-être que ce concurrent peut t'intéresser

http://www.nand.it/nandeck/

[Gulix]

Je ne connaissais pas. J'y jetterai un oeil. Y a peut-être quelques idées à récupérer.

[Gulix]

En attendant une Beta 2 (en cours de développement, avec comme gros morceaux une sélection de templates visuelle et un champ image plus complet), voici venir le premier Tutorial, "Et si on partait de rien ?", traduit complètement en français !

 

http://www.gulix.fr/geckos/wiki/doku.php?id=fr:tutorial:tutorial01

[Gulix]

La beta 2 approche, je m'y suis remis après une pause de quelques mois.
En attendant, et pour garnir la liste des templates, si vous avez des idées de templates, faites m'en part ! S'ils m'inspirent, je pourrais les faire pour les intégrer à la livraison.
Et si vous voulez développer les vôtres et les intégrer au logiciel, contactez-moi.

 

Je parle notamment aux créateurs de jeux indés / amateurs qui aimeraient disposer d'un éditeur de cartes en ligne. C'est un des axes à venir du développement : proposer un outil personnalisable avec intégration d'une liste pré-définie de templates (et customisation de l'interface).

[Dreadaxe]

Le 23/08/2016 à 16:58, Gulix a dit :

Je pense qu'une fois la liste des templates en place, c'est un truc qui devrait être possible. Il faudra que le template en question soit présent dans la liste, bien sûr, mais c'est largement envisageable. C'est même une plutôt bonne idée

 

Avec une carte au format SVG, y a vraiment moyen de bien s'amuser et d'obtenir un truc très sympa rapidement. C'est ce que montrera le second tutorial. Qu'il faut que je rédige. Pour l'instant, j'ai en priorité les derniers développements liés à la Beta 2, puis direction le wiki pour de la documentation.

Je peux même faire une version basique de la carte à partir d'un fichier SVG. Après, il faut réfléchir aux champs éditables.

Je conçois bien qu'un néophyte en programmation / design, qui n'a jamais écrit une ligne de code de sa vie, soit intimidé. Mais c'est peut-être le moment de s'y mettre si on est intéressé, non ?

 

http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/

https://github.com/adobe-photoshop/generator-assets/wiki/Configuration-Options

[Gulix]

N'ayant pas (les moyens d'avoir) Photoshop, ces liens ne m'aideront pas beaucoup, malheureusement.

Mais après, même avec un fichier bitmap, on peut faire de jolies cartes (c'est la base des cartes sous Magic Set Editor). Faut juste mettre la main à la pâte. Y a pas encore de solution toute faite.

Le développement de l'éditeur WYSIWYG n'est pas pour tout de suite. C'est assez complexe à mettre en oeuvre. Mais je peux tout à fait créer des templates simples si on me donne les bonnes ressources, ainsi qu'aider sur la création d'un template.

[Gulix]

La Beta 2 de Geckos est maintenant en ligne ! Et pour fêter ça, voici son logo tout neuf :



Il n'y a pas que ça, bien sûr. Pour la liste complète de ce qui a été accompli, consultez cette page. En voici un résumé :

- Plusieurs styles au sein d'un Template
- Héritage des Styles (nickel pour des cartes en plusieurs langues !)
- Déplacement de la documentation vers un meilleur wiki (en double-langage anglais-français)
- Le Gras et l'Italique pour les cadres de Rich Text
- Une liste de templates pré-installés (et une liste qui va continuer à grossir)
- Validation du code d'un Template
- Éditeur d'image avec découpage de l'image (histoire de pas déformer vos images)
- Champs regroupés ensemble

Toutes ces nouvelles fonctionnalités sont d'ores et déjà accessibles sur la page de démo, hébergée sur Github. Essayez-les, utilisez-les et pensez à rapporter les bugs, les fonctionnalités qui manquent, que vous aimeriez, ou n'importe quoi d'autre via la page Issues du projet.

La suite, c'est quoi ? Et bien, il reste encore quelques trucs à faire pour complètement finaliser la sortie de la Beta 2. Un peu de documentation, du tutorial de création de template, et la mise à jour des templates existants. Dans les prochaines semaines seront également ajoutés de nouveaux templates : Pulp City, Dungeon World, Silver Tower, ... Si vous êtes un créateur de jeu, et que Geckos vous intéresse pour créer vos cartes (ou proposer la création en ligne de cartes pour votre jeu), contactez-moi, et on verra ce qu'on peut faire. C'est ainsi qu'est né le template pour "Au nom de l'Empereur" (voir parmi les templates installés). Je peux vous aider à créer votre template, et Geckos s'installe facilement. Et de nouveaux templates permettent de faire connaître Geckos.

La Beta 3 est également sur les rails. J'ai beaucoup de choses de planifiées, et il y aura sans doute des sorties intermédiaires pour intégrer les fonctionnalités importantes. Dès que possible, je vais me mettre à préparer l'éditeur en ligne de templates. Mais il y a aussi des fonctionnalités importantes et intéressantes à venir. La liste est consultable ici.

Amusez-vous avec Geckos !

[Gulix]

Geckos s'associe avec le projet "En Terres Sauvages" (actuellement sur Ulule) pour vous fournir des templates de cartes pour Dungeon World (et sans doute utilisable pour bien d'autres usages).

Ces templates vont me permettre de développer de nouvelles choses pour Geckos (c'est déjà en cours) et vous proposer des cartes conçues par un véritable graphiste. Plus de news et d'exemples dans les jours à venir !



En attendant, n'hésitez pas à jeter un oeil à la campagne car elle vaut le coup. Et il y a des biens belles cartes, remplies de pistes pour jouer "à l'inspiration".

[Gulix]

A lire sur mon blog, un article sur l'état de Geckos et ce qui doit arriver : http://www.gulix.fr/blog/spip.php?article429

TLDR : ça avance tranquillement, pas à pas. Je suis ouvert à toute collaboration extérieure. Je me lance dans la création de templates à la demande, contre rémunération.

[cracou2]

Bon travail. Si tu veux que ton produit intéresse, je te conseille de mettre sur le produit gratuit un bon nombre de templates gratuits dont certains ave le même style que des produits existants (pour donner des exemples de la souplesse du produit). As tu aussi pensé à pouvoir importer des bibliothèques d'images gratuites qui trainent?

[Gulix]

il y a 29 minutes, cracou2 a dit :

Bon travail. Si tu veux que ton produit intéresse, je te conseille de mettre sur le produit gratuit un bon nombre de templates gratuits dont certains ave le même style que des produits existants (pour donner des exemples de la souplesse du produit).

Merci

Alors, pour les templates, tout est déjà gratuit (et le restera). Pour des templates sur des modèles existants, il y en a (Pulp Alley, Blood Bowl, ...), mais j'essaye aussi de respecter les droits en vigueur, et de ne pas reprendre d'éléments protégés. J'ai par exemple en projet une fiche pour Silver Tower. Et suis ouvert à toute contribution pour ajouter d'autres templates.

 

 

il y a 29 minutes, cracou2 a dit :

As tu aussi pensé à pouvoir importer des bibliothèques d'images gratuites qui trainent?

Je ne comprends pas trop la question. Un exemple ?

[cracou2]

Ton éditeur ne fait que de la mise en forme. Sans images c'est inutilisable donc que fournis tu comme images?

[Gulix]

En effet, je ne fournis pas d'images. Mais l'utilisateur peut en charger pour chaque carte (tu peux l'expérimenter sur la majorité des templates).

Pour l'instant, c'est un chargement depuis un fichier de l'utilisateur, mais ça pourrait être depuis une URL.

Je ne vois par contre pas l'intérêt de câbler sur des banques d'images. Parce qu'il faudrait en trouver une bien générique et libre qui collerait aux cartes, qui peuvent être vraiment variées. Après, qu'un Template propose une liste d'image, c'est faisable (et même déjà fait sur un template en cours de finition).