Geckos - Un éditeur de cartes en ligne

Geckos

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

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 Alpha sort tout juste : https://github.com/Gulix/geckos/releases/tag/v0.0.1


Qu’est-ce que cela signifie ? Que les fonctionnalités de base, validant mon idée, fonctionnent. Ce n’est pas encore totalement exploitable, mais l’objectif de cette Alpha (et la suivante) est de mettre en place les fondations, pour ensuite s’étendre. Une béta bien plus complète verra ensuite le jour, 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/

C’est intéressant!

Pour tout ceux qui veulent se faire un proto rapide c’est un gain de temps et un gain en visibilité pour les testeurs. Par contre il serait bien de pouvoir bouger les champs disponibles et de pouvoir en ajouter à volonté.

Genre les déplacer sur un GridPane ou un TablePane (systèmes de cases/taille d’éléments).

Qu’entends-tu par bouger les champs ?

Pour l’instant, la partie inférieure de l’éditeur est générée par le template de la partie supérieure (code Json).
Voir le wiki notamment : https://github.com/Gulix/geckos/wiki/Templates


Dans ce fichier Template, le créateur indique les champs qu’il souhaite afficher (cadre inférieur gauche), et leur ordre. Puis quand l’utilisateur modifie le contenu de ces champs, la carte à droite est rafraîchie (en reprenant les éléments du template, là aussi).

Donc, le template “maîtrise” tout. Rajouter des champs à la volée n’aurait pas de sens puisqu’on ne pourrait pas les lier à un élément de la carte.

Par contre, il est prévu de développer un éditeur graphique pour créer le fichier template, qui peut rebuter en effet quand on est pas à l’aise avec du code “informatique”.

Si je n’ai pas bien compris ta remarque, n’hésite pas à la préciser (schéma, dessin).

Bonjour et bonne semaine !

Les Geckos ont travaillé ce week-end et produit un tutoriel complet pour concevoir une carte de A à Z : https://github.com/Gulix/geckos/wiki/Tutorial01
Le tutoriel est pour l’instant en anglais, mais il est prévu de le traduire.

Tient c’est marrant je voulais faire la même chose mais faute de temps…
ça a l’air pas mal par contre ça manque d’ergonomie.

Mon retour (plus ou moins ce que j’avais prévu) :
- Le JSON ça ne parle pas à tout le monde, il faudrait réserver son édition à un mode expert et permettre l’édition du template via un formulaire (qui lui génère le json).
- Le design général est old school, un simple framework permettrait d’avoir un affichage “moderne qui a de la gueule”, par exemple http://materializecss.com/
- Les valeurs disponibles ne sont pas toujours à afficher en texte, parfois il s’agit d’image ou d’icones, il faudrait prévoir ce cas de figure (pour les icones la possibilité d’utilisé une police d’icone serait pas mal)
- Pouvoir ajouter plusieurs images superposé (gérer les niveaux de profondeur également avec les champs) pour le template et pas un seul background.

Voilà pour un premier retour.

J’ai déjà pas mal travailler le truc pour mon éditeur en ligne (dédié à Heroclix) :
http://hctools.dahkon.com/

Dahkon dit :Tient c'est marrant je voulais faire la même chose mais faute de temps...
ça a l'air pas mal par contre ça manque d'ergonomie.

Mon retour (plus ou moins ce que j'avais prévu) :
- Le JSON ça ne parle pas à tout le monde, il faudrait réserver son édition à un mode expert et permettre l'édition du template via un formulaire (qui lui génère le json).
- Le design général est old school, un simple framework permettrait d'avoir un affichage "moderne qui a de la gueule", par exemple http://materializecss.com/
- Les valeurs disponibles ne sont pas toujours à afficher en texte, parfois il s'agit d'image ou d'icones, il faudrait prévoir ce cas de figure (pour les icones la possibilité d'utilisé une police d'icone serait pas mal)
- Pouvoir ajouter plusieurs images superposé (gérer les niveaux de profondeur également avec les champs) pour le template et pas un seul background.

Voilà pour un premier retour.

J'ai déjà pas mal travailler le truc pour mon éditeur en ligne (dédié à Heroclix) :
http://hctools.dahkon.com/

Merci pour ce retour bien complet. Je vais essayer d'y répondre point par point.

Concernant le JSON, j'ai déjà eu la remarque "c'est du code beurk" heart . Et je conçois parfaitement que pour l'utilisateur lambda c'est pas top top. Mais pour l'instant, en alpha, c'est le mieux que j'ai trouvé pour mettre à disposition et en test des templates. Et ça restera la base sur laquelle seront basées les templates.
Mais j'ai déjà prévu un éditeur de template (voir Issue #14). Mais c'est quelque chose qui va demander du temps pour arriver à maturation. Me basant sur FabricJS pour créer la carte "graphique", il est possible d'utiliser, par exemple, leur Kitchensink pour obtenir le JSON correspondant. Un article du wiki là-dessus est prévu.

Pour l'interface et le design, bah, rien à dire yes. Je suis avant tout développeur, et pour ce qui est de l'alpha, je me concentre sur l'arrière-boutique et la gestion des templates / cartes. Si je trouve un designer pour me concocter une interface moderne et attirante, ben je lui donnerai les clés de la carrosserie. Mais pour l'instant, j'ai juste fait une interface basique et je travaille sur le reste. Au passage, j'aime bien la présentation de ton interface.

Pour les valeurs non-textuelles, c'est en partie dans les plans (voir Issue #31), mais l'idée d'une liste d'image à sélectionner est intéressante. Ca existe déjà d'ailleurs dans Magic Set Editor (et je m'en sers pas mal), donc idée à développer. Ca va rejoindre la liste des Issues, tout ça.

Pour les images superposées, c'est déjà possible. Comme indiqué plus haut, j'utilise FabricJS pour générer le Canvas affichant la carte. N'importe quel canvas de FabricJS est importable via le JSON. J'ai même testé des cartes complexes en SVG qui peuvent être importées dans FabricJS, puis passées à Geckos. Mais ce n'est pas dans le tutorial. Parce que je voulais un truc simple pour commencer. Une carte basique, sans élément complexe, pour que les créateurs de template découvrent la structure et la méthode de création d'un template.

En tout cas, merci encore pour ton retour. Je vois Geckos comme un véritable projet open-source, et suis ouvert à toute contribution. Je le fais en priorité pour mes besoins, en attendant des retours, des demandes, des besoins. Les créateurs de jeux / protos, ou ceux qui tunent leurs jeux et ont besoin de cartes personnalisées sont les bienvenus pour voir ce qu'il est possible de leur faire.

Kitchensink pourrait en effet être pas mal pour designer son template, mais pareil l’interface laisse à désirer. Par contre je ne sais pas si ça permet de poser préciser les éléments mais c’est primordiale dans le design de carte d’être au pixel près si on veut les imprimer correctement.

En tout cas, bon courage parceque c’est ambitieux mais tout à fait faisable techniquement. Je vais suivre ça de près.

Sinon je suis développeur aussi c’est pour ça que je te suggérais un framework pour le design, c’est un gain de temps énorme.

Dahkon dit :Kitchensink pourrait en effet être pas mal pour designer son template, mais pareil l'interface laisse à désirer. Par contre je ne sais pas si ça permet de poser préciser les éléments mais c'est primordiale dans le design de carte d'être au pixel près si on veut les imprimer correctement.

En tout cas, bon courage parceque c'est ambitieux mais tout à fait faisable techniquement. Je vais suivre ça de près.

Sinon je suis développeur aussi c'est pour ça que je te suggérais un framework pour le design, c'est un gain de temps énorme. 

Kitchensink ne permet pas de placer au pixel près (juste à la souris), mais ce que je compte faire (en me basant sur Kitchensink) le permettra (déplacement à la souris grossier, mais champs de "placement" modifiables et accessibles). Mais ça attendra au moins la beta (même s'il y aura des version intermédiaires).

Quelques nouvelles concernant l’avancée du projet Geckos.

8 Issues ont été fermées et résolues. On avance donc vers l’Alpha 2 correctement, même s’il en reste encore à traiter.

Le wiki a continué à se développer également, avec le début de traduction du premier tutoriel. Des explications sur le traitement des chaines ont été ajoutées, et celles sur l’inclusion de code dans le template ne saurait tarder. Enfin, concernant le wiki, un tutorial sur l’utilisation de Kitchensink est prévu.

Concernant le projet, ça avance à petites touches, et les fonctions disponibles permettent déjà d’obtenir des cartes intéressantes. Au niveau des fonctionnalités ajoutées depuis la dernière version :

* Ajout de code dans le template (Issue #10)
* Remplacement de variables avancé (Issue #11)
* Utilisation de polices personnalisées (Issue #28)
* Texte Multilignes (Issue #27)
* Texte riche (avec gras et italique) (Issue #12)

Trois cartes sont pour l’instant en cours de développement : Personnages pour Pulp Alley, Champions pour Blood Bowl et Héros pour Warhammer Quest Silver Tower. Les templates sont visibles sur github.

A noter que des bugs bloquent la création de certains templates évolués. C’est en cours de correction.

Voir la release sur Github

Pour les Geckos, la route de l’Alpha s’arrête aujourd’hui.

La version actuelle valide ce que j’avais défini comme fonctionnalités nécessaires. Plusieurs Issues ont été cloturées, et des cartes très sympas peuvent déjà être créées.

Cette version est mise à disposition avec un template par défaut, pour le jeu Pulp Alley. Un jeu  de figurines qui vaut le coup d’oeil, et un template qui propose une bonne base pour créer le sien. Un répertoire templates contient déjà trois templates : celui de la démo, un pour Blood Bowl (à retrouver dans son Tutorial en cours de traduction), et un pour Warhammer Quest Silver Tower.

Comment tester ?

Vous pouvez télécharger une archive sur la page de la release et tester en local en lançant la page index.html du répertoire src.

Ou vous pouvez aller sur la page http://gulix.github.io/geckos.

Et la suite ?

La phase beta va maintenant commencer. Des fonctions vont être rendues plus robustes, l’interface générale va être revue pour adopter un ton plus moderne, la documentation va s’enrichir (en français notamment) et de nouveaux morceaux vont être ajoutés. Jetez un oeil aux Issues répertoriées.

Quelques versions beta sont prévues, qui contiendront notamment les gros travaux à venir :

  • La nouvelle interface (voir Issue #42)
  • L’éditeur de templates (voir Issue #14)
  • Plusieurs styles pour un seul template (voir Issue #57 )
  • La liste des templates

J’ai toujours besoin de votre aide pour faire de geckos un produit au moins bien : rapport de bug, proposition de nouvelles fonctions, création de templates, amélioration de la documentation, … N’hésitez pas à créer des Issues !

Et une fois de plus, si vous avez besoin d’un coup de main pour créer un template, n’hésitez pas à me demander !

Voici une petite carte rapide que j’ai faite :

cb35a73cb92a50bd225749154033330480b6.jpe



Une carte d’effet assez basique, qui pourra facilement s’intégrer dans n’importe quel type de jeu de rôle, par exemple. C’est dans l’idée des cartes de Tranchons & Traquons, ou Barbarians of Lemuria.

Ce genre de cartes est facile à créer, et avec un fond d’image thématisé, on peut facilement produire des cartes de ce style pour une ambiance particulière.

Le template est dispo là : https://github.com/Gulix/geckos/tree/master/templates


Un aperçu de la future interface du logiciel. Du moins, sa version actuelle de travail :




Vous pouvez la tester en téléchargeant les sources là : https://github.com/Gulix/geckos/tree/skeletonsWithTabs

Bien mieux l’interface. Bravo 

Merci !

J’ai suivi en partie tes conseils sur le Framework CSS, mais materializecss me plaisait pas trop sur certains points. Et j’ai trouvé quelque chose qui me plaisait plus.
Là, le gros travail actuel est sur l’architecture interne (RequireJS, Knockout components, …).

Mais dès cette étape franchie, c’est l’éditeur de Templates et de nouvelles fonctionnalités qui seront développées. Ainsi que des templates.

Pour information, un petit billet de blog sur l’avancement du projet : http://www.gulix.fr/blog/spip.php?article373

La première beta se rapproche à grands pas. Un nouveau tutoriel qui mixera SVG et couleurs est sur le feu. Et la Beta 2 sera consacrée (entre autres) à l’éditeur de templates.

Une première Beta de disponible pour les Geckos !

En premier lieu, vous pouvez jeter un oeil à ce qui a été fait via la page des Tickets terminés. Puis direction la page de démo !

Si l’on compare avec la précédente livraison (Alpha 2), Geckos a surtout changé d’apparence. Une nouvelle interface, plus moderne, plus adaptable, en somme meilleure ? Et bien c’est à vous de me le dire. Et si vous disposez de talents en design web, et que vous êtes prêt à les partager, j’accueille chaleureusement tout coup de main.

La nouvelle interface

La nouvelle interface

Des changements ont également été faits parmi les champs éditables : Listes avec image, Sélecteur de couleur, ... Tout ceci est bien sûr documenté dans le wiki (en anglais, en attendant l’avancée de la traduction). Quelque chose d’incorrect, de manquant ou de peu clair : créez un Ticket / Issue pour le demander. Les traductions peuvent même être réclamées par ce biais, ça me permettra de savoir ce qu’il est important de traduire. Et vous pouvez vos questions en français, bien sûr.

Maintenant, c’est au tour de la seconde Beta d’entrer en développement. De nombreux éléments sont prévus. Le principal étant l’éditeur de template. Si important qu’il pourrait être décalé à plus tard. Mais nous verrons.

Des templates pour de nouvelles cartes sont également à venir. Et les existantes vont être mises à jour avec les nouveautés de Geckos : options partagées, description du template, ...

sans_titrepn49ff-b0fc4.png

Le Template Arabesque va être le sujet d’un tutorial dédié dans les jours à venir. Celui-ci décrira la méthode à utiliser pour transférer une carte au format SVG vers Geckos (en utilisant le Kitchensink de FabricJS), puis on jouera avec les couleurs (et pleins de fonctions autour des couleurs ont été rajoutées). J’essaierai de produire la version française du tutorial en même temps que celle en anglais. Le premier tutorial sera ensuite revu pour coller à la nouvelle interface, et sa traduction suivra également.

Vous pouvez utiliser cette sortie via la page de démo, ou en téléchargeant le code source sur Github pour l’utiliser sur votre serveur web. Les tests ont été réalisés principalement sur Firefox. Si quelque chose ne fonctionne pas bien sur un autre navigateur, n’hésitez pas à l’indiquer dans un Ticket.

Merci de votre intérêt !

Une légère mise à jour de la beta, avec l’ajout des styles multiples, ainsi que de l’héritage de styles.
Pourquoi une mise à jour légère et si rapide ? Et bien, mes templates de démo (Pulp Alley, Silver Tower) vont être modifiés en conséquence, et autant que la page de démo suive.

Plus d’infos sur la page de release : https://github.com/Gulix/geckos/releases/tag/v0.1.1

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

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).

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

9852e70aa01b9fffc79cb1e44ffde9bb467a.png

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 !