+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Les réalisations de la communauté (https://jeuweb.org/forumdisplay.php?fid=39)
+--- Forum : Nos autres projets (https://jeuweb.org/forumdisplay.php?fid=54)
+--- Sujet : Reinom: Créer son jeu web (/showthread.php?tid=7318)
RE: [Blog] Reinom, carnet de bord de jeux web - Xenos - 24-06-2017
^^
C'est implémenté pour le partage du challenge: l'URL sera maintenant spécifique à chaque challenge. Donc, https://xenos.reinom.com/doodle-challenge/?challenge=WzE4MDAwMCwiYSBzaGFyayIsImEgYmFsbCIsImEgdGFuayIsImEga2V5IiwiYSBmZW1hbGUgaHVtYW4iLCJhIGxvY2siXQ%3D%3D renverra toujours au même challenge (je vous laisse découvrir les doodles qu'il faut faire
)
RE: [Blog] Reinom, carnet de bord de jeux web - @lucard - 25-06-2017
Pour une version multi-langue, tu ne peux pas de mettre les mots dans un fichier XML ? Avec un fichier par langue ?
A moins qu'il existe un truc plus simple.
Ainsi si des perso n'es veulent mettre des traductions de leur langue, il n'ont qu'à te renvoyer leur fichier traduit. (c'est participatif )
RE: [Blog] Reinom, carnet de bord de jeux web - Xenos - 25-06-2017
J'attendrai d'avoir déjà des propositions de mots à rajouter avant de faire encore plus complexe en demandant de traduire des XML :/ Pour l'instant, vu que je n'ai aucune proposition de catégorie/de mots à rajouter, je n'ai pas trop envie de me prendre la tête.
Sinon, si tu regardes ta console, tu verras qu'un JSON est transféré et contient la liste de tous les mots doodleables. Tu peux en rajouter puis m'envoyer ta liste si tu veux
RE: [Blog] Reinom, carnet de bord de jeux web - Xenos - 25-06-2017
Nouveau site-utilitaire aujourd'hui: art-dump maker
Le principe est d'accoler des images pour constituer un "art dump", c'est à dire une seule image les regroupant toutes. C'est souvent utilisé par les dessinateurs pour éviter d'uploader 40 esquisses/croquis/images qu'ils jugent pas terribles.
![[Image: artdump-47-2017-05-00_20_53_18.png]](https://xenos.reinom.com/art-dump-maker/samples/artdump-47-2017-05-00_20_53_18.png)
Ces expressions ont été faites par http://doragon-hane.deviantart.com/ pour Dracca. C'est un exemple d'utilisation des art-dump: poster 1 image sur deviantart pour chaque expression, c'est long, chiant et cela spam les watchers. D'où le artdump.
Disponible à cette adresse: https://xenos.reinom.com/art-dump-maker/
Techniquement, c'est "juste" un canvas dans lequel je dessine les images. Rien n'est uploadé: le sélecteur de fichier sert à ajouter des images à la liste à dumper (cf les sources JS) via URL.createObjectURL(this.files[i]) et un simple document.createElement('img') pour chacune d'elle. Une fois l'utilisateur satisfait de cette liste (il peut virer des images via un .removeChild), il lance la génération.
La partie la plus complexe a alors été de déterminer un algorithme de placement des images. Initialement, je voulais en implémenter un s'approchant de "comment agencer des rectangles de taille différente dans le plus petit rectangle possible". Mais l'implémentation était compliquée...
Du coup, j'ai tenté autrement: créer un canvas vide (0x0) et ajouter chaque image une à une. Si deux images se surperposent, on tire une nouvelle position. Si aucune position ne marche, on élargit le canvas. Mais la durée de traitement explose (même en essayant d'optimiser façon "ne tirer que des positions avec des chances de marcher").
J'ai donc appliqué une nouvelle idée qui m'est venue en observant un des premiers essais de dump: je pars d'un canvas 0x0, et je définis des "positions potentielles", la première étant "coin haut gauche de l'image à ajouter en 0;0". A chaque image à rajouter, je teste toutes les positions acceptables. Si l'image rentre dans l'une d'elles, alors je l'ajoute à cette endroit. Si l'image ne rentre nulle part, j'élargis le canvas (soit en largeur, de la même largeur que l'image à rajouter, et je réitère l'algo, soit en hauteur, selon le même principe). Enfin, quand une image est rajoutée dans le dump, elle crée 8 nouvelle "positions potentielles" qui remplacent la position précédente.
De cette manière, les images sont toujours jointives par au moins 1 bord, et le canvas est à peu près de la taille minimale possible. Note que j'ordonne aussi les images de la plus grande à la plus petite (à peu près, histoire de laisser un peu "d'aléatoire" bien que celui-ci soit en fait du faux aléatoire, à base de sinus, car Array.sort(callback) requière une callback qui soit déterministe donc exempte de tout Math.random).
J'ai aussi rajouté un scale down des images car Firefox plante sinon quand le canvas devient trop grand (et Opera est en rade aussi). Pour la sauvegarde du fichier, une simple ancre HTML suffit, alors un attribut "download" et un "href" valant l'URL du Blob du contenu du canvas
C'est encore potentiellement améliorable, mais ce sera suffisant pour l'instant
RE: [Blog] Reinom, carnet de bord de jeux web - @lucard - 26-06-2017
2.23mo + 300ko + 340ko = 7.8Mo (Outch)
Tu devrais également laisser le choix à l'utilisateur de laisser un vide de N pixels entre les images. Car parfois le bord à bord ne s'y prête pas.
Sinon c'est un bon outil pour des croquis de plus ou moins même taille. À tester avec de vrais exemples.
RE: [Blog] Reinom, carnet de bord de jeux web - Xenos - 26-06-2017
Merci!
L'export est en PNG, ce qui explique l'explosion de la taille. Je peux éventuellement chercher si le JPG peut se faire... Mais c'est pas certain :/
Je voulais limiter le nombre de paramètres, mais pourquoi pas. Un coefficient de "compactage" peut se faire (< 1 signifiant que les images se chevauchent, > 1 laisse un bord libre, =1 les accolent comme maintenant). Ou le même système avec une "marge" en pixels (négative = chevauchement, positive = espacement).
N'hésite pas à croquifier pour pouvoir tester ^^
PS: il faudra que je trouve un petit algo pour "rapprocher" la taille des images les unes des autres; ie ici, pour que la photo soit réduite et fasse en gros la taille des deux autres images.
RE: [Blog] Reinom, carnet de bord de jeux web - Xenos - 09-07-2017
Bonsoir à tous,
Avez-vous déjà joué à Egypte, l'énigme de la la tombe Royale, de 1999? Si oui, vous vous rappelez peut-être du jeu de Senet qui s'y trouve. n'ayant pas pu trouver facilement de version en ligne de ce jeu (sans devoir passer par des inscriptions, du flash ou autres conneries), j'ai décidé d'en faire un rapidement... Je réutiliserai peut-être cette base pour faire des mini-jeux de société pour Dracca
![[Image: senet-game.PNG]](https://xenos.reinom.com/senet/senet-game.PNG)
https://xenos.reinom.com/senet/
Sur ce, bonne nuit, il est tard, mais il fait toujours aussi chaud...
RE: [Blog] Reinom, carnet de bord de jeux web - Air - 09-07-2017
Tu n'arrêtes jamais Xenos. Tout le temps à fond en train de développer :-)
RE: [Blog] Reinom, carnet de bord de jeux web - Xenos - 09-07-2017
Eheh, non
Maintenant que j'ai des méthodes et des archis qui tournent (même si là, franchement, niveau "archi" y'a pas lourd ^^), ça devient vraiment agréable de sortir ces petits jeux
Nota: j'ai boosté l'IA, histoire qu'elle arrête de jouer totalement au pif. En revanche, la fin de partie est beaucoup trop longue :/ Si j'adapte ce jeu sur Dracca, je tâcherai de trouver des solutions pour l'accélérer (et le rendre bien moins "pifique-la-chance").
Note2: je viens de le tester sur mobile, c'est fonctionnel
Note 3: Comme les parties ont tendance à tourner en rond sur la fin, j'ai un peu altéré les règles du jeu: pour le dernier pion, il suffit d'atteindre l'une des 3 dernières cases (celles après le Nil). Quand notre dernier pion atteint l'une de ces cases, il sort immédiatement, ce qui évite de tourner en rond pendant des plombes sur le dernier pion.
RE: [Blog] Reinom, carnet de bord de jeux web - Xenos - 18-07-2017
Salutations nocturnes,
Je suis un peu à court d'idées pour l'apparence de la page de projets (le "portfolio") https://toile.reinom.com/realisations/
![[Image: reinom-projects.png]](https://xenos.reinom.com/jeuweb/attachments/reinom-projects.png)
Des idées? :/
PS: 3e niveau rajouté sur Dragon Eggs, introduisant la limite de temps https://xenos.reinom.com/dragon-eggs/