Gulix

Geckos - Un éditeur de cartes

Recommended Posts

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/

 

Modifié par Gulix

Partager ce message


Lien à poster
Partager sur d’autres sites

Ah tiens ca m’intéresse ca. Faut que je regarde de plus pres...

Partager ce message


Lien à poster
Partager sur d’autres sites

N'hésitez pas à me remonter le moindre souci, ou la moindre interrogation.

J'ai prévu de faire un tuto ce weekend sur la création d'un template simple, de A à Z. Donc si je peux intégrer des trucs demandés dedans.

Partager ce message


Lien à poster
Partager sur d’autres sites

Alors ca mon cher Gulix, je te félicite 100 fois, je viens de dl et je vais tester, mais y a pas de exe? J'ai plein de template de cartes que j'ai fait pour tes tests.

Partager ce message


Lien à poster
Partager sur d’autres sites

Alors, non, il n'y a pas d'exe. C'est d'ailleurs le but : ne pas dépendre d'une plateforme (un exe fonctionnera généralement sous windows, mais quid de Linux, MacOs, ChromeOS ou les tablettes ?)

 

Pour les templates, n'hésite pas à les mettre à dispo. Il s'agit de code Json indiquant les champs à remplir, et comment est construite la carte. Pour cette dernière partie (la partie graphique), ça se base sur FabricJS. Ce qui marche avec ce framework marchera dans Geckos.

Il ne faut pas hésiter à partir du template existant pour expérimenter.

Le Wiki est aussi là pour guider, et va être étoffé au fur et à mesure de l'avancement du projet.

 

Pour ce qui est des templates, un répertoire va être créé dans l'arborescence du projet pour les stocker.

Partager ce message


Lien à poster
Partager sur d’autres sites

Bon je suis pas fan fan ^^ C'est plus le graphisme qui pêche à mon sens. Après je n'ai pas trop compris comment mettre une image et comment remplir la carte, par rapport à un Magic Set Editor très beau graphiquement et très intuitif. Le seul défaut de MSE c'est que je n'ai pas trouvé comment incorporer une image ailleurs que l'endroit prévu !

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 37 minutes, LuciusForge a dit :

Bon je suis pas fan fan ^^ C'est plus le graphisme qui pêche à mon sens.

Le graphisme de la page en général, ou celui de la carte ? Pour la page en général, ce sera sans doute revu, mais j'ai pas de designer web sous la main pour l'instant (et je me concentre sur les fonctionnalités d'abord).

 

Pour la carte, je pars sur un modèle simple en démo de l'alpha, pour présenter un cas simple facile à dériver. Dans la partie supérieure (Template) se trouve tout le code décrivant la carte. En le modifiant, tu peux modifier le rendu de la carte (c'est d'ailleurs l'objectif).

 

il y a 37 minutes, LuciusForge a dit :

Après je n'ai pas trop compris comment mettre une image et comment remplir la carte, par rapport à un Magic Set Editor très beau graphiquement et très intuitif.

Alors, en effet, je n'ai pas repris l'optique de Magic Set Editor de modifier directement sur l'image de la carte. Pourquoi ? Pour avoir plus de libertés (et parce que c'est vraiment coton aussi). Par exemple, en faisant une carte pour Warhammer Quest Silver Tower (ce que je suis en train de faire), tu peux définir un champ "Nombre d'armes", et faire en sorte que ça modifie en conséquence l'aspect de la carte. C'est plus propre d'avoir ce champ à côté (Editable Fields) qu'en combo quelque part sur la carte (je trouve).

 

Pour l'image, dans l'exemple, c'est le champ "Miniature's Image" qui gère ça. Tu charges une image, elle apparaît sur la carte.

 

il y a 37 minutes, LuciusForge a dit :

Le seul défaut de MSE c'est que je n'ai pas trouvé comment incorporer une image ailleurs que l'endroit prévu !

En le poussant dans ses retranchements, il a bien plus de défauts que ça ^^. Mais il est aussi bien plus mûr comme produit.

 

Après, mettre une image ailleurs que prévu, ce n'est ni le but de Geckos, ni le but de Magic Set Editor. Ces programmes visent à rendre plus aisé la création de cartes personnalisées, sans utiliser de logiciel à la Photoshop. Donc c'est cadré, mais ça permet de garder une certaine homogénéité.

 

Pour Geckos, disons qu'une image du web t'intéresse, et que tu veux la mettre en bas à droite de la carte.

Rajoute ce code dans la section canvasFields du Template, entre l'accolade et le crochet fermant à la tout fin, après le "?isHealthDisplayed" :

 

{"type":"rect","width":330,"height":40,"left":5,"top":450,"fill":"#B1E29E","stroke":"#000000","visible":"?isHealthDisplayed"},
{"type":"image","width":50,"height": 50, "src": "https://upload.wikimedia.org/wikipedia/commons/d/d4/Gecko_de_la_Gomera_(Tarentola_gomerensis).JPG", "left":290,"top":450}

 

J'ai remis la ligne avec "?isHealthDisplayed" histoire de préciser où placer ce code. En gros, la deuxième ligne indique :

-> que je place une image de 50*50

-> la source de l'image (url ou dataurl)

-> sa position sur la carte

 

C'est assez simple, puisqu'on rajoute des blocs d'éléments sur le template. Mais toutes les cartes utilisant ce template auront cette image. Que tu peux bien sûr remplir avec une variable pour qu'elle soit modifiée par l'utilisateur.

 

Une fois le template modifié, il faut valider ses modifications avec le bouton SET.

 

Le Wiki reprendra pleins d'exemples et de tutos au fur et à mesure.

Modifié par Gulix

Partager ce message


Lien à poster
Partager sur d’autres sites

Oula je suis bien incapable de taper du code ^^ Pas grave j'ai réussi à faire ce que je voulais sous MSE :

 

Carnotaure.jpgDrak%25C3%25B4n.jpg

Protoceratops.jpgTric%25C3%25A9ratops.jpg

B%25C3%25A9b%25C3%25A9%2BIguanodon.jpgB%25C3%25A9b%25C3%25A9%2BSpinosaurus.jpg

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

 

@Lucius : C'est comme ça que j'ai mis la main dans la création de cartes via Magic Set Editor : utilisation des templates Magic basiques pour faire de cartes "Gormiti / Song of Blades & Heroes". Vois où ça m'a mené ^^.

Partager ce message


Lien à poster
Partager sur d’autres sites

Oué perso j'ai utilisé The Gimp derrière :x

 

Les lignes de code c'est pas possible pour moi, avec ou sans tuto :x

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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 !
 

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

 

ea9cea58-562e-11e6-9c90-7ee9c56f366a.png

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 titre.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 !

Modifié par Gulix

Partager ce message


Lien à poster
Partager sur d’autres sites

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

Partager ce message


Lien à poster
Partager sur d’autres sites

A venir ...

Des évolutions, bien sûr. Mais aussi un nouveau template pour Pulp Alley, base de plusieurs templates pour ce jeu (cartes de personnages, de faction, de Fortune, de Récompenses, ...)

 

Indiana Jones.png

Partager ce message


Lien à poster
Partager sur d’autres sites

Non, pas encore. J'ai pas mal de projets sur le feu en ce moment, et pour Geckos, y a une petite pause. J'ai créé les templates dont j'avais besoin (Pulp Alley). Je vais en refaire pour Pulp City bientôt, et j'ai l'ergonomie du projet à bosser encore.

 

Mais faudrait que je gagne au Loto pour pouvoir bosser à temps plein sur mes projets annexes ^^. Et puis, j'ai un gros projet qui vient de s'achever, là (mon mariage !). Donc ça devrait libérer du temps.

Partager ce message


Lien à poster
Partager sur d’autres sites

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

Modifié par Gulix

Partager ce message


Lien à poster
Partager sur d’autres sites

J'ai un Template GIMP (.xcf) pour Au Nom de l'Empereur. Ca le ferait tu le croit?

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Connaissant pas les format Gimp, aucune idée.

Le meilleur format d'image en entrée, c'est le SVG (vectoriel) qui s'adapte tout seul. Mais genre vraiment ^^.

Après, faut voir le format de ton template : image fixe avec juste des valeurs numériques qui change, éléments visuels (icônes, cadres) qui changent selon certaines valeurs, ...

Tu peux déjà me faire une maquette (genre une image, avec des indications de ce qui varie, et je peux regarder à faire une pré-version.

Partager ce message


Lien à poster
Partager sur d’autres sites

Bah écoute voila a quoi ça ressemble:

template_GIMP_carte_au-nom-de-empereur_v4.00.jpg

 

Et l'explication est dans le PDf mais je la reproduit i

exemple_carte.png

 

  • A. Ce cartouche regroupe les informations générales concernant l’archétype:
    • A1. La faction auquel il appartient. Ici l'Imperium.
    • A2. Le nom de l’archétype.
    • A3. Le portrait sous forme d’icône de l’archétype.
       
  • B. En périphérie de portrait se trouve les valeurs de caractéristiques s’exprimant en tant que seuil. Elles sont au cœur du système d'ANdE:
    • B1. La valeur de Cran de l’archétype. C’est le résultat nécessaire sur un dé pour sauver le personnage d’une touche ou pour utiliser ou résister à un pouvoir de Psyker.
    • B2. la valeur d’Armure de l’archétype. C’est le résultat pour les assaillants à dépasser afin de toucher l’archétype.
       
  • C. Le cartouche latéral gauche regroupe les valeurs de caractéristiques s’exprimant sous formes de bonus :
    • C1. La valeur de Rapidité. Elle s’ajoute au mouvement de base du personnage (6''), modifie les attaques de tir contre le personnage et s’ajoute aux tests d’initiative du Leader.
    • C2. La valeur de Combat. C’est le bonus que le personnage reçoit pour son test lors d’un combat au corps à corps.
    • C3. La valeur de Tir. C’est le bonus que le personnage reçoit pour son test lors d’un combat à distance.
       
  • D. Le cartouche du bas regroupe les différentes armes et donc attaques de l’archétype.
    • D1. L’icône d’une arme de Tir portée par l’archétype. Dans cet exemple un pistolet a aiguille.
    • D2. Le Bonus de l’arme. C’est le modificateur au jet d’1D6 pour toucher lors d’un combat à distance.
    • D3. La portée de l’arme en pouces. Dans cet exemple 12’’. Pour les armes de corps à corps cette icône est absente.
    • D4. Certaines armes infligent à la cible de l’attaque un malus sur son jet de Cran. C’est le cas ici ou un personnage touché par le pistolet fera son test de Cran avec un malus de -2 sur 1D6.
    • D5. L’icône d’une arme de Combat portée par l’archétype. Dans cet exemple une Épée Énergétique.
    • D6. Le Bonus de l’arme. Le modificateur au jet d’1D6 pour toucher lors d’un combat au corps à corps.
       
  • E. L’espace centrale accueille les icônes des Capacités Spéciales, Équipements et éventuellement Pouvoirs liés a l’archétype. Ici notre Inquisiteur est un Leader et possède donc l’icône correspondante.
     
  • F. Le coin droit du bas accueille une puce avec le coût total du profil, armure et armes inclussent.

 

Sachant que toutes les valeurs numériques et les icônes sont amenées a varier sauf celle de B1, B2, C1, C2, C3 et D4.

Reste fixe donc les cartouches gris et puces blanches et les icônes B1, B2, C1, C2, C3 et D4.

A1, A3, D1, D5 et E sont respectivement les icônes de factions, de portrait, d'arme(s) et de capacités spéciales. J'ai les banques de donnees en .png pour chaque type d'icones.

Pour te donner une idée voici un export en .SVG du template GIMP actuel.

 

:happy:

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant