@NitramS : je t'ai envoyé le tuto de jam-jam et ma propre version par MP. Il y a encore du boulot mais ça te permet de voir où on est.

Ma démarche a d'abord été de tester le tuto de jam-jam pour apprendre le javascript, en réalisant mon propre jeu, puis je lui ai proposé de remplacer les illustrations de Zelda qu'il avait choisies par les miennes, jute pour qu'il ait des dessins libres de droits. Une fois que j'ai vu qu'il manquait de temps, j'ai attaqué ma propre version du tuto avec les petites modifs de code que j'avais testées et mes dessins.

Dans ma version, j'ai mis les taille de tiles et de sprites en variables. Ca me semble plus pratique ensuite pour les gens de transformer le jeu à leur gré.

On n'a pas utilisé la même technique pour le changement de carte, lui il utilise PHP (mais je n'avais pas réussi à reproduire ça à l'époque où je l'ai testé), moi j'ai essayé avec json.

Il me semble que pour un tuto destiné à des débutants, c'est mieux de rester sans PHP (et donc sans avoir à installer un serveur) le plus longtemps possible. mais je suppose qu'aborder PHP un peu plus tard sera utile aussi.

Ma technique pour le choix des persos est un peu bizarre, mais je ne sais pas quoi proposer d'autre et je n'ai pas eu le temps de revoir ça depuis un moment.

@Jean-ClaudeTorrel   : Moi aussi, j'attends de voir ce qu tu as fait. A bientôt !

Plus long que prévu à intégrer sur OC, mais le voici : https://openclassrooms.com/courses/3301671?status=waiting-for-publication

Du moins une première version. Il y a énormément de choses qui peuvent être ajoutés

Merci beaucoup

Je n'ai pas le temps de le lire aujourd'hui, mais dès que j'ai un moment, je m'y colle !

Super! Vraiment génial et incroyable ! Merci beaucoup JC ! Tu traites de quasi toutes les problématiques les plus compliquées à trouver une solution en un seul tutoriel (pour la 3D Iso), c'est une vrai perle rare! Merci beaucoup!

J'ai commencé à lire et à tester le tuto. La partie théorique au début est très bien, pas de soucis là-dessus.

Côté code, je suis bloquée à la fin de Implementation en HTML5 - 1.
Je pense que mon niveau est un peu juste pour bien tout comprendre car je maîtrise mal les constructeurs mais avec mes remarques, tu pourras peut-être rendre le tout plus accessible.

la Theorie - 3.

Donner le nom du fichier html.
Ajouter une bordure au canvas pour le visualiser tout de suite.

Implementation en HTML5 - 1.

Indiquer si on doit ajouter des balises <script> dans le fichier précédent pour y placer la fonction d'initialisation ou si ça rentre dans le fichier "3Diso.js" qui est relié à la page HTML (à moins qu'il n'y ait une erreur dans la 1ère phrase où tu dis de créer  le fichier "3Diso.html" ?)

Pour les explications sur le canvas, ajouter un lien vers d'autres tutos comme celui-ci : https://openclassrooms.com/courses/la-balise-canvas-avec-javascript et pour le B-A-BA programmation objet, celui-ci : https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/les-objets-5 . Il y a de bons tutos sur d'autres sites qu'Openclassroom mais puisqu'on est là...

Indiquer où l'on place les variables globales.

Je ne comprends pas tout à fait ce que c'est que l'élévation. Un petit schéma peut-être, à placer dans la partie théorique ?

Traduire les mots tiles et board utilisés dans le code.

Donner davantage de précision pour le placement de l'appel à la fonction setPoints() : est-ce dans la fonction Tile ou dans Tile.prototype ?, ce serait plus clair pour quelqu'un qui maîtrise mal les constructeurs. Les commentaires donnent des indications mais mieux vaut en rajouter !

Avec tous mes copier-coller, je n'obtiens pas le résultat escompté. Ce serait bien de mettre un lien vers le fichier js à ce stade pour qu'on puisse voir où on a fait une erreur ou alors pour pouvoir progresser et faire la suite.

Pas d'erreur dans la console web, cependant. Je suppose que je n'ai pas bien placé les méthodes draw mais je ne sais pas où les mettre.

En suivant http://t-templier.developpez.com/tutoriel/javascript/javascript-poo1/ je me suis dit qu'il fallait les mettre dans la partie .prototype, ce qui remet le canvas à la bonne taille (alors que quand c'est en dehors, le canvas devient minuscule) mais les losanges ne s'affichent pas.

-
Edité par doudoulolita 11 novembre 2015 à 2:49:25

Tu n'indiques pas où et comment on appelle les classes et les méthodes associées  dans le code que tu proposes.  A un moment, on devrait créer les instances, non?

Ooops, ça y est, en créant un nouveau board, j'ai quelque chose ! C'est donc que j'ai enfin réussi à ordonner correctement le placement de mes méthodes.

J'ai placé  juste ça dans la fonction window.onload, vu que new Tile() est déjà dans le constructeur Board (ce que je n'avais pas remarqué ni bien compris avant):

var board= new Board(ctx, '400', '400');
board.draw();

Mais ce serait cool de le mettre dans le tuto pour les plus débutants comme moi ! Toi, tu connais le principe d'un moteur de jeu, et de la programmation Objet, mais ce n'est quand même pas si évident pour tous.

Ce que j'ai du mal à comprendre, c'est pourquoi ça n'a pas l'air de changer ma page quand je change les valeurs de taille du board et pourquoi je n'ai pas de fond noir autour de ma grille comme sur ton image de fin de chapitre.

En changeant la valeur du pattern dans new Tile(this, i, j, "#ffffff") situé dans le constructeur Board, j'ai vu qu'on changeait la couleur et donc je vois où tu veux en venir avec ça par la suite. Ça promet de belles tuiles !

Bonjour,

merci pour ces retours.
Dès que j'ai un peu de temps je ferai une mise à jour par rapport aux questions/remarques donc n'hésitez pas à continuer à les soumettre !

 

++

JcT

Pas eu beaucoup de temps pour retourner sur ton tuto, mais dès que je peux, je le ferai.Là, j'ai avancé un peu sur le jaguar pour mon jeu, mais pas trop sur le code et le tuto associé.

Le temps, c'est toujours un problème pour ce genre de projetl. Bon courage pour en trouver de ton côté !

J'ai poursuivi avec le chapitre suivant de ton tuto, cela n'a pas été facile non plus !

Implémentation en HTML - 2.Ajouter de l'interaction à la souris

Au tout début, on ne sait pas trop où on place le code car le terme "fonction d’initialisation" n'est pas évident à se rappeler pour un débutant (à mettre peut-être en commentaire dans le code qui la constitue)

Est-ce que la fonction getMousePos(canvas, evt) est à la suite du code précédent ? A priori oui, mais ce n'est pas évident à 1ère vue.

Ce serait bien de mettre des accolades pour bien délimiter les boucles for et if parce qu'on perd les tabulations quand on fait du copier-coller et après on se perd un peu dans le code.

Pour l'ajout de la fonction onclick (que j'ai pensé à mettre dans la partie Board.prototype), il faut bien rappeler la nécessité d'ajouter la virgule après la fonction draw: précédente, car on oublie et ça fait n'importe quoi !

Je ne sais pas où mettre la fonction triangleTest(p, pt1, pt2, pt3), je vois qu'elle est appelée par la méthode contains, elle même appelée par onclick, donc pour l'appel, ça semble aller. Mais c'est peut-être l'emplacement où je l'ai mise qui cloche.

A la fin, je n'obtiens pas le résultat escompté et je ne sais pas pourquoi. Peut-être ajouter un chapitre pour prévoir et corriger les erreurs éventuelles + lien vers le fichier js que toi tu as fait.

Finalement, j'ai fait des tests en changeant certaines fonctions et en y ajoutant un alert() pour trouver l'erreur, ce qui m'a permis de trouver où placer cette fonction triangleTest (dans la méthode contains de la class Tile). En utilisant la Web console de Web developper sur Firefox, j'ai pu voir certains problèmes.

A la fin, j'ai fini par trouver la dernière erreur qui faisait que, même après avoir bien placé ma fonction, le contour rouge n'apparaissait pas.

Cette partie du code ne va pas à la fin de la méthode draw (class Board) comme indiqué dans le tuto, mais à la fin de la méthode onclick, juste après avoir défini this.selected = this.tiles[i][j]; :

	if (this.selected != null)
		this.selected.draw("#ff0000", undefined, 3); 

Bon, j'ai quand même fini par trouver, mais j'ai bien galéré !

Selon le même principe que le tien, j'aimerais créer un système de classes pour mon jeu. J'ai commencé par le faire sous forme textuelle. J'ai déjà publié la version pdf sur le site Guyana-Dream , même si je ne suis pas sûre qu'elle soit idéale. merci de me faire vos commentaires.

J'ai aussi commencé à faire des essais sur le code qui sera fait sur ce principe mais je galère un peu.

Je me dis que pour le tuto que je veux finir, c'est peut-être un peu compliqué, mais ce serait sûrement intéressant pour certaines personnes (et pour moi pour apprendre !)

Peut-être qu'après, je reverrai le début du tuto, en me basant un peu moins sur ce qu'avait fait jam-jam (dont je n'ai plus de nouvelles), mais je n'en suis pas encore là !

Super réunion du Blender User Group le samedi 5 décembre. J'ai profité de l'occasion pour demander de l'aide à un mec super calé en modélisation pour réaliser mon jaguar en 3D pour Guyana-Dream. Ma version à moi est très peu avancée, mais le modèle qu'il m'a fait est déjà super bien : jaguar3-bug.blend

Pas eu du tout le temps de finir ma propre version, mais j'ai pris en note les astuces intéressantes pour y parvenir par la suite. Dans un jeu, le code c'est bien, mais les graphismes aussi, et tout ça prend du temps, surtout si on n'a pas le niveau adéquat et la possibilité de s'y consacrer quand on veut.

Pour mes futures classes, je dois donc prévoir une classe perso générale et des classes qui en héritent :

• une classe joueur (dont l'image s'affichera à droite et on pourra en sélectionner un)
• une classe PNJ (c'est là que j'ai du mal dans mon code, quand je clique sur un singe, le perroquet apparaît, ça colle pas ! et pourtant, il ne fait pas partie des images à cliquer sur le côté, c'est bizarre)
• et une classe adversaire (avec possibilité de faire des combats, d'avoir une AI, etc...)

Déjà, je trouve qu'entre un perso ( ou plus précisément une pose de ce perso) et une tuile du décor, le principe de sélection de la partie d'image sur le tileset et la spritesheet se ressemble beaucoup.

Autre souci : la gestion du canvas (ou plus exactement des différentes couches avec des z-index différents) en tant que classe dans un autre fichier, est compliquée. Ma classe Jeu me permet d'afficher des textes à peu près comme je veux dans les blocs que j'ai préparés sur ma page html (après pas mal de galères) mais je ne peux pas faire appel au canvas associé à l'instance du jeu que j'ai créée du fait qu'il est dans une autre page.

Est-ce que je dois mettre toutes mes classes dans la même page ? Les trucs d'import que j'ai testés ne marchent pas bien, je ne sais pas trop les gérer.

Bon, pas le temps de mettre mon code actuel en ligne tout de suite pour mieux faire comprendre le souci. A la prochaine !

 Bonne année à ceux qui lisent encore ce topic (s'il en reste !)

@Jean-ClaudeTorrel : As-tu réussi à avancer sur le tuto ? Je n'ai pas eu le temps de continuer à le tester depuis un bon moment, mais je vais essayer de m'y remettre dès que possible.

Bonjour,

Pour info, et comme c'est corrrélé au thème de ce fil, j'ai mis dans le CoursLab un cours sur la création de jeu HTML5 avec la librairie pixie.js.

Cordialement

@doudoulolita : J'ai commencé à ajouter une partie sur le scrolling. Quand j'aurai réussi à la terminer, je repasserai sur l'ensemble - avec tes commentaires en tête - pour essayer d'améliorer ça

@bestmomo : Tu as bien fait, je regarde ça dès ce soir.Je ne connais pas du tout cette librairie.

J'ai essayé le jeu mais le pavé directionnel n'a pas l'air d'influer sur l'oiseau.

@Jean-claude Torrel : Tu avances plus vite que moi ! J'ai trop de projets en cours et donc peu de temps pour chacun. Sans compter que mon niveau technique est un peu bas pour ce que je comptes faire, mais bon, j'apprends des trucs quand même.

-
Edité par doudoulolita 16 janvier 2016 à 20:34:30

@doudoulolita : normal que le pavé numérique ne soit pas actif, ça fonctionne uniquement au clic de souris ou au toucher pour les smartphones.

Merci ! J'ai aussi essayé de cliquer mais je n'ai pas eu l'impression que l'oiseau suivait, je vais réessayer.

Je ne suis pas une très bonne joueuse, c'est peut-être le problème, et en plus Firefox a tendance à crasher de temps en temps, c'est un peu énervant (sans lien avec ton jeu)

J'ai re-testé les clics souris, ça a l'air de fonctionner à peu près mais c'est un peu lent à réagir.

J'ai prévu pas mal d'inertie pour le réalisme.

Dans la mesure où les graphismes sont plutôt amusants que réalistes, ce serait peut-être plus fun si l'oiseau montait et descendait plus vite, non ?

Je suppose que le code permet de changer ça sans trop de problème ?

Oui c'est facile à changer, surtout que lorsque les niveaux avancent et que les avions arrivent de plus en plus vite c'est pas évident de les éviter.

J'essaie la 1ère partie avec des images perso.

Préciser qu'il ne faut pas oublier <div id="message"></div> lorsque l'on veut afficher la progression, on a tendance à ne pas y penser. Après on passe du temps à chercher ce qui cloche.

Pourrait-on afficher la progression pour chacune des images dans le message, l'une  au dessus de l'autre ?

Pour la position du sprite, indiquer où on doit placer le code avec les coordonnées. On peut consulter le code plus bas mais autant le dire dès le début.

Pour l'animation, nickel.Bravo, tout est OK !

Par contre, cocher la case "j'ai terminé ce chapitre..." provoque une erreur mais ça vient d'OC, j'imagine ou c'est parce que c'est une version en cours d'écriture.

-
Edité par doudoulolita 16 janvier 2016 à 23:12:39

Merci pour les remarques, je vais voir ça.

Pour la progression on a pas le pourcentage par fichier mais on peut savoir quel fichier se charge, le détail c'est ici.

L'erreur du bouton "j'ai terminé..." c'est effectivement sans doute parce que c'est pas un cours publié.

Merci.

Je continuerai l'essai du tuto dès que possible.

Je viens de trouver ce topic de Bouldu16 qui fait son propre jeu en suivant le tuto de SebCap26. Peut-être l'un de vous peut l'aider.

Je reprendrais bien le tuto de SebCap26 comme base (Je viens de le finir, voir ici, je n'avais pas réussi les premières fois où je l'ai lu), il n'était pas contre lorsque je l'avais contacté il y a quelque temps.

J''ai un petit peu commencé à mettre à jour son tuto, pour l'instant sur traitement de texte, avec mes propres images, mais j'attends d'être sûre que ça ne l'embête pas que je le reprenne à ma sauce et que je le complète dans la mesure de mes moyens, avant de vous le soumettre.

Salut ! Je n'ai pas vraiment suivi toute le topic, mais j'ai crée il y a quelque mois un éditeur de map compatible avec le tuto rpg canvas de ce site. Il permet donc de créer des maps visuellement et d'avoir en sortie la map sous cette forme:

[3,2,2,6,4,2,2,6,2,2,2,6,2,4,2,6,2,3],[2,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,4,2],[6,7,7,7,7,7,7,4,7,7,7,7,7,7,7,7,7,6],[6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,2],[6,4,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,2],[6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,4,7,6],[6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,6],[2,7,7,4,7,7,7,7,7,7,7,7,7,7,7,7,7,2],[3,2,2,2,4,2,6,2,4,2,2,6,2,2,6,2,2,3]

Voici un screenshot: .

Il y a quelque changements à faire pour l'interface, mais l'éditeur fonctionne et supporte tout les tiles (64,48,96) et on peut choisir la taille de la map. Si quelqu'un est interéssé je peut sans problème partager le code.

-
Edité par jerkoco 22 janvier 2016 à 14:24:34

Merci, je regarde ça dès que j'ai un moment.

J'ai fais quelques changements, et j'ai mis le code sur github:

https://github.com/Jerkoco/HTML5-Map-Editor

Désolé le code est pas franchement propre, j'ai pas fais de POO et les calculs sont peu lisibles. J'améliorerais ça. Il y a un bug: il est possible de rajouter une tile de trop dans la map si on laisse la souris glisser dans le rebord droit du canvas, et il y a une virgule au dernier tableau des map. (Il suffit juste de l'enlever).

Sinon, pour utiliser l'éditeur:

• Télécharger le dépot
• glisser son tileset dans "tilesets"
• ouvrir config.html, puis remplir les champs et cliquer sur "save"
• C'est bon, on peut ouvrir index.html, c'est prêt !

-
Edité par jerkoco 26 janvier 2016 à 17:21:05

Je viens de tester très vite. Mon premier essai n'a pas eu l'air de fonctionner mais quand j'ai changé la taille de la map dans la config, finalement, ça a à peu près marché.

Il y a quand même un petit défaut assez gênant (peut-être parce que j'ai fait des changements de config en passant de la taille 32 à 16 puis de nouveau à 32) : le petit cadre affichant le tile sous forme d'image  montre 4 tiles en tout petit mais quand je clique sur la carte, c'est bien le tile du n° affiché qui apparaît.

Je vais tout de même vérifier que je n'ai pas un problème de cache en plus, car quand je supprime le dossier HTML5-Map-Editor et que j'extrais de nouveau l'archive, je retombe sur les mêmes réglages dans config.html.

Pour la page de config, il faudrait préciser que le nom du tileset doit contenir l'extension. Sinon, tu pourrais faire un bouton "parcourir" dans le formulaire pour qu'on puisse récupérer le tileset directement sur son ordi.

Fais peut-être un bouton "effacer" avec tile0 déjà paramétré. J'ai compris qu'il suffisait de l'afficher pour effacer mais ce n'est pas évident à première vue.

C'est un peu galère de devoir chercher chaque tuile avec les numéros, ce serait plus simple d'avoir tout le tileset affiché dans la page dans une grille et qu'en cliquant dedans, on le sélectionne. C'est un peu plus compliqué pour toi à programmer mais dans une version ultérieure, ce serait cool

Je n'arrive pas à copier-coller le tableau de la map qui est affiché sur le côté droit. Ce serait vraiment utile de pouvoir le faire, sans ça, l'éditeur ne sert pas trop à faire son propre jeu.

Ce cadre avec le tableau peut être agrandi, c'est super bien, mais sur Firefox, le coin d'agrandissement se retrouve collé sur le bord droit de la fenêtre, ce qui n'est pas super logique alors que le cadre s'étend vers la gauche. Mais le plus embêtant est que le cadre contenant le n° et le tile à placer se retrouve par-dessus.

Le plus simple serait de placer ce bloc au-dessus du cadre contenant le tableau.

Un dernier hic est que j'ai créé un tileset transparent et que ton fond est gris foncé, on ne voit pas très bien certaines tuiles.

Comme certaines personnes utiliseront peut-être ton editor pour des maps d'obstacles qui seront également transparentes, peut-être peux-tu proposer un bouton pour la couleur du fond dans ta config (en hexadécimal, par ex + quelques couleurs basiques)

Pour finir, quelques compliments : Je trouve que le fait que ce soit très sobre est un bon point. On comprend très vite le fonctionnement même s'il n'y a pas beaucoup de texte.

J'avais bien un problème avec le cache et les cookies, par contre, le petit carré affiche toujours 4 tiles au lieu d'une près de son n°. Le problème est le même avec ta map et ce avec 2 taille de tuiles différentes (32 et 16).

En faisant mon essai en repartant à 0, j'avais oublié de placer mon image du tileset dans la dossier adapté.Rien ne m'indique le problème quand le clique sur "save" dans la config, mais bien sûr rien n'apparaît dans la cadre de la tile à placer. Est-ce qu'un avertissement pourrait-être affiché ?

Il pourrait aussi y avoir un bouton pour "reseter" la config et tout remettre comme au début.

Ah, au fait, une fois le tileset placé dans le dossier qui va bien, on peut très bien lancer directement index.html puis cliquer sur l'engrenage pour se rendre dans la config (sans avoir besoin d'ouvrir config.html). Le bouton de retour en bas à gauche marche aussi très bien pour revenir sur l'éditeur mais il faut réactualiser la page.

Bref, c'est encore plus simple que ce que tu disais dans ton post de présentation

-
Edité par doudoulolita 27 janvier 2016 à 23:31:17