J'ai fait un petit essai de déplacement de mon ara à partir du tuto sur la balise canvas où il donne comme exemple une balle qui rebondit. Ça m'a permis de mieux comprendre la fonction d'animation. Voici canvas.js et le sprite (très mal nommé ici).

J'essaierai bien de changer aussi la taille pour donner un effet de perspective mais on verra si j'ai le temps.

J'ai aussi fait une présentation du jeu sur FreeGameDev, histoire de voir si je peux avoir de l'aide, pour les dessins surtout. Apparemment, le fait de parler du jeu ici ou là donne des résultats dans les MP !

-
Edité par doudoulolita 25 juillet 2014 à 18:40:35

J'avance un peu sur la programmation, où j'ai essayé de supprimer allowWalk pour remplacer par deux maps, une pour le fond de carte et une pour les arbres, comme tu le montres à la fin du tuto.

Ça marche à peu près, ce qui signifie que je m'améliore un peu en javascript, même si je passe beaucoup de temps à régler des petites choses. Vivement que tu avances sur le tuto pour que je n'aie qu'à recopier !

Ce qui est bien quand même, c'est que ça peut te montrer qu'est-ce que j'ai envie de faire. Par exemple, pour la prochaine étape de mon code perso, j'aimerais faire des événements où on attrape un fruit et que ça fasse monter le score.

En plus de Blenderclan pour les modèles en 3D, j'ai fait une demandes sur Linuxgraphic pour mieux utiliser Inkscape pour les perspectives.

Je m'étais inscrite il y a longtemps sur GamesCreator, j'y ai posté un message pour mon ancien jeu, Wardance-USF et pour Guyana-Dream.

Comme j'ai du mal à avancer pour dessiner correctement les persos et les décors, je recherche de l'aide le plus possible.

J'ai quand même dessiné à la main, sur papier, le perroquet en suivant vaguement mon modèle sur Blender.

J'ai été un peu inspirée aussi par le tuto Apprendre à dessiner, que je commence à lire !

La vue de dos n'est pas super car j'ai voulu corriger une erreur du modèle vue de dessus Blender au niveau du cou mais c'est pas mieux. Quant à la vue de face, elle manque de symétrie, je n'avais plus de place sur ma feuille !

-
Edité par doudoulolita 1 août 2014 à 19:41:59

Voici mon atèle avec le rendu toon permis par Blender 2.71 que j'ai téléchargé. Il commence vraiment à ressembler à quelque chose !

Il faut que je mette une armature pour lui donner les poses que je veux. Je l'ai mis sur Blenderclan où j'ai eu beaucoup d'aide pour mes modèles.

Voici mon ara. Pour les liens vers les autres vues, voir sur Blenderclan.

eh bien c'est tout jolie tout ça!

Et maintenant, le palétuvier (voir Blenderclan pour le détail)

Voici le tucum (vue de dessus sur Blenderclan), le cadrage est un peu large mais c'est pour que les mesures soient cohérentes avec la vue de dessus.

hum doudoulolita pourquoi tu ne crée un ton propre sujet pour parler de ton projet?

+1 : pour l'instant, c'est plus le tiens que le mien doudoulolita. Et je suis d'avis de laisser mourir cette page, de toute façon, on a complètement changé de projet depuis le projet initial de ce post...

tu ne comptes pas finir le tuto pour HTML5 et Canevas?

je trouve que c'était une super bonne idée pourtant

ouai je sais mais comme je l'ai déjà dis, je ne peux pas me permettre de le faire tout seul... et vu que absolument tout le monde m'as lâché... Du coup pour le moment, comme j'aime bien les maths, je me documente et je travail sur les nombres premiers... Mais si j'avais des collaborateurs, on pourrais continuer...

malheureusement je ne maitrise pas du tout le canevas et la création d'un rpg avec cette méthode (ni avec aucune autre d'ailleurs :p) donc je ne suis pas en mesure de t'aider
Bon courage à toi!

Essaye pe de découper ton tutos de manière plus précise, afin de te concentrer sur les choses les plus importantes! Et je penses n'hésite pas à faire un plan détaillé, comme ça les gens vont peut-être se dire "ha il sait où il va ce gars, il à une feuille de route, il à fait ça et ça! Tient je pourrais pe participer et faire cette petite partie!" Ca facilitera sans doute le travail à plusieurs et ça sera aussi valorisant pour toi de voir où tu vas, comment tu avance etc!

@ jam-jam68140 : Désolée d'avoir donné l'impression que le tuto ne m'intéressait pas! Au contraire, j'aimerais vraiment beaucoup que tu le finisses. Je suis tout à fait d'accord avec Demandred sur ce point, ne nous lâche pas !

Mon intérêt premier est aussi d'apprendre le javascript et si possible d'aider en testant le tuto et en faisant suffisamment de graphismes pour pouvoir l'illustrer par un vrai jeu.

C'est pour  cette raison que j'ai lancé des topics sur Guyana-Dream sur des forums plus basés sur la programmation, comme Games creator network, Free Game dev, Developpez.com. On peut indiquer sur ces forums que tu recherches de l'aide pour écrire le tuto, pour l'instant j'ai surtout parlé des besoins pour les graphismes. Il y a peut-être d'autres forums où on peut trouver des gens.

Le plan du tuto et le code est bien conçu pour toute la première partie selon moi, il faut juste revoir le php sur la fin (erreur de frappe ? je n'ai pas réussi à trouver ce qui n'allait pas ) et continuer le code pour la deuxième partie, éventuellement même avec des graphismes schématisés que je reprendrai plus en détail plus tard.

Peut-être que si tu permettais à tout le monde de le lire et de le tester comme je l'ai fait, ça donnerait envie aux autres de collaborer. J'en ai conservé une version, avec tous tes exemples. Elle est sur le même serveur que G-D, c'est facile de faire un lien.

Note que je ne t'ai pas lâchée, alors ne le fais pas avec moi !

@ Demandred : il y a déjà une grande partie du tuto qui est écrite, vu que je l'ai suivi jusqu'ici et qu'il m'a permis de beaucoup progresser en javascript. Au lieu de refaire le même jeu que celui proposé, j'ai même réussi à faire le début de mon  propre jeu, ce qui est à priori le but recherché par les futurs lecteurs.

Les nouveaux graphismes, qui illustreront le tuto,  sont juste là pour améliorer les choses. Ceux en 3D vont pouvoir s'insérer dans le jeu d'exemple vu que je vais m'arranger pour qu'ils rentrent dans les tiles.

Je peux continuer à progresser sur les graphismes dans d'autres forums (genre Blenderclan) ou sur un autre topic, pas de problème. Si vous préférez que j'aille plus vite en continuant sur les dessins en 2D plutôt qu'essayer d'autres techniques, ce n'est pas un souci non plus.

Je me disais cependant qu'on peut encore plus aider les gens à faire leur propre jeu (vrai RPG ou plus simple) si on leur offre en annexe des liens vers des tutos de graphismes comme je le fais sur Guyana-Dream. Comme ça, ça aide à la fois les programmeurs et les graphistes qui veulent faire leur jeu eux-mêmes.

Pour donner un côté plus RPG à mes dessins, je peux aussi mettre des armures aux singes et des chapeaux de sorciers aux perroquets ! Demandred, tu peux exiger tout ce que tu veux, même d'autres personnages, si tu nous soutiens.

-
Edité par doudoulolita 13 août 2014 à 21:22:26

@doudoulolita, je ne te lâche pas pour ton jeu, je dis simplement que pour le tuto, pour l'instant c'est plutôt mort... :/

Pour moi, les graphismes de Guyana-Dream serviront principalement pour illustrer le tuto et remplacer les tilesets que tu avais choisis (qui n'étaient pas des dessins originaux). De plus, si j'ai des graphismes en nombre suffisant, ça me permettra de tester la suite du tuto si tu la fais.

C'était bien ce que tu souhaitais au début, et personnellement, je le fais pour ça et suis prête à changer des choses sur mon jeu et ajouter les graphismes utiles si ça peut mieux aider pour le tuto. C'est pour ça que je te demande régulièrement de quels graphismes tu as besoin.

Voici en tout cas ce que donnent les 2 arbres en 3D une fois insérés dans le tileset : o3.html . Je trouve ça assez joli.

Dis toi bien que c'est grâce à la première partie du tuto que j'ai pu en arriver là car avant, j'étais totalement nulle en javascript. Je continue les dessins en attendant la suite du tuto pour pouvoir progresser, et le tuto permettra à d'autres de le faire aussi.

Il est vraiment important que tu continues le tuto, Guyana-Dream est moins important car il concerne moins de gens. Je répète: c'est pour illustrer le tuto et le tester. Si tu parviens à avancer sur le tuto, ça me permettra automatiquement d'avancer sur G-D.

Si tu publies déjà tout ce que tu as écrit pour le tuto (en montrant ce que j'ai réussi à construire avec) + que tu cherches (avec mon aide, si tu veux) des gens pour t'aider sur différents forums, ça peut très bien repartir.

L'idée de Demandred de faire une feuille de route me semble bien pour attirer des gens sur le tuto. Selon moi, tu es parfaitement capable de faire la suite, même si ça prend du temps, il n'y a pas d'urgence.

Si tu veux, je peux te dire ce que je ressens comme besoins pour G-D, au stade du tuto où je suis arrivée. On peut faire progresser le tuto et le jeu en même temps, à mon avis. Il pourrait être publié par épisodes et non d'un seul coup.

Moi, j'ai commencé à diverger du tuto à peu près là : http://usf.tuxfamily.org/guyana-dream/tuto/k1.html et surtout quand tu as commencé à mettre du php, du fait qu'il y avait une petite erreur de frappe dans ton code.

Tu peux si tu veux contrôler le code que j'ai fait jusqu'à o3.html et voir si ça peut s'intégrer ou non dans le tuto.

Pour les changements de carte, j'ai réussi à le faire sans php mais ce n'est peut-être pas une bonne idée lorsqu'on a beaucoup de cartes. Je suppose que le choix des personnages tel que je le fais est assez stupide, une explication sur le sujet dans le tuto serait la bienvenue.

Il y a aussi le problème des bords de la carte, où le perso est bloqué et où on doit recharger. Je ne sais pas si ça vient de moi ou s'il y avait déjà un mini-bug dans le code du tuto.

-
Edité par doudoulolita 13 août 2014 à 23:45:00

Blobzeblob a trouvé de nouvelles idées pour Guyana-Dream, pour lui donner un aspect RPG et coller mieux au tuto.

J'ai ajouté une page sur le site consacrée justement au tuto, en essayant de faire une feuille de route (à relire). Il ne manque pas grand chose à ce qui est déjà écrit pour la première partie mais tu verras que j'ai un peu changé l'ordre de ce qui serait présenté.

Il faut peut-être ajouter à cette feuille de route les exercices à prévoir + un tileset et une spritesheet un peu différents pour les exercices de début (mesures différentes, ainsi que pour le canvas). C'est un moyen de permettre aux gens de comprendre les variations possibles.

Là, ce serait bien que ce soit quelqu'un d'autre qui le teste.

-
Edité par doudoulolita 15 août 2014 à 8:50:46

Je viens de trouver un tuto sur un moteur de jeu 2D avec la balise canvas sur developpez.com. Je le lis pour voir si ça ressemble à ce qu'on veut faire.

Le début est très simple, ça reprend des choses que je connaissais à part le fait de sauvegarder le context et de le restaurer. C'est juste de l'affichage de lignes, de formes et d'une image.

La suite est directement de la programmation objet et comme ce n'est pas expliqué de manière assez détaillée, je fais du copier-coller sans rien comprendre et sans maîtriser s'il y a des erreurs de frappe dans le code, vu qu'on ne voit aucun résultat pendant qu'on code les classes (ou plutôt les constructeurs, en javascript, ce ne sont pas des classes si j'ai bien compris).

Donc ton tuto reste utile pour tout ce qu'il y a au milieu !

-
Edité par doudoulolita 16 août 2014 à 22:21:33

mdr pour les class en fait on s'en fiche complètement comment on les appels au final, l'important est de savoir de quoi on parle mais c'est vrai qu'il me semble qu'on parle + de constructeur en JS... En suite, Maintenant que j'ai découvert une sorte de BDD sur les nombres premiers et que j'ai découvert avec horreur que mon nombre de 4000 chiffres avait déjà été découvert en 2002, je vais perdre moins de temps dessus... Et comme tu as vraiment l'air de tenir à ce que je me replonge dans le tuto, je vais le faire prochainement. (juste, depuis le début tu me dis qu'il y a une erreur dans mon tuto à quelque part, peut tu me donner l'erreur qui est afficher dans ta console stp et me dire à peu près à quel niveau du tuto c'est ? Merci )

Moi, j'ai un souci  de déplacement du canvas que je ne pige pas sur http://usf.tuxfamily.org/guyana-dream/ (équivalent de o2.html pour le code js, mais sur le jeu en page d'accueil, il y a un bug ). Note que je n'ai pas utilisé tout à fait le même code que toi (j'ai tout mis sous forme de variables: taille des tuiles et du sprite), donc le bug vient peut-être de moi.

Pour les blocages au bord de la carte, regarde i.html. ça commence avec la fonction allowWalk.

Regarde aussi le chapitre III- Création d’une fonction de chargement de l’objet map avec de l’AJAX , c'est là que j'ai bloqué, pour la partie php. (n/index.html). Moi, j'ai fait une autre manière ensuite, sans php : m3.html

Je vais voir plus tard pour te donner ce que ça dit dans la console car je pars au boulot dans quelques minutes.

Peux-tu m'envoyer ton mail par MP, je voudrais t'envoyer la version du tuto que j'ai corrigée (fautes d'orthographe) et annotée sur la première partie. J'ai fait la table des matières ce w-e.

As-tu regardé le tuto de developpez.com ? Pour les + avancés, c'est sûrement pas mal mais moi, j'ai bloqué dès qu'on arrive à la POO. Apparemment, il a des petites fautes de frappe dans son code, c'est ce que dit un des commentaires.

-
Edité par doudoulolita 18 août 2014 à 9:13:36

ah! C'est le scroll qui te fais chier... Dans ton événement keydown tu dois rajouter un "e.preventDefault()"

Et pour le tuto, oui j'ai lu mais de toute manière à partir du moment ou il parle de matrice il va perdre plein de monde... en fait presque même l’intégralité je suis sûr!! C'est pour ça que je ne donnais pas de détails supplémentaire quand aux outils mathématiques utilisés...

Le problème sans utiliser AJAX, c'est que si tu fait un GROS jeu, pour tout charger tu va avoir du mal. Et si ce n'est pas le temps de chargement qui est emmerdant, c'est la taille des données à stocker... Tu peux pas avoir un jeu fluide si tu as des milliards de variables en standby... Ton navigateur va planter au bout d'un moment...

D'accord avec toi pour l'autre tuto, je n'ai pas réussi à faire grand chose dessus, j'ai planté très vite. Il manque donc bien un tuto intermédiaire entre un simple drawImage et les matrices.

Je comprends l'intérêt d'Ajax. Je propose dans la feuille de route (provisoire) de montrer comment faire un passage d'une map à l'autre sans php dans la 2ème partie, avec un exemple sur 2 maps, et de montrer le passage d'une map à l'autre avec php (donc avec Ajax, il faut que je corrige dans la feuille de route) dans la 3ème partie, sur un exemple à 4 maps. Ça permet aux débutants de faire la première méthode et aux plus avancés de se lancer dans la seconde (il faut un peu connaître php, ce qui n'est pas le cas de tout le monde).

Pour la première partie (selon la feuille de route),  j'avais essayé de simplifier mon code avec cet essai (pas fini, il n'y a pas de fonction allowWalk ou équivalent). Je suis partie pour ça d'un autre mini tuto puis j'ai voulu voir si j'arrivais quasiment toute seule à refaire la base des tuiles et de l'animation. J'avoue que j'ai dû encore regarder ton tuto de temps à autre !

-
Edité par doudoulolita 21 août 2014 à 22:03:51

Juste un mot pour dire que même si je n'avance pas sur le projet en ce moment, je reste dans la course pour m'améliorer en javascript, en suivant un cours sur FUN.

Ca ne me permettra pas de remplacer jam-jam68140 pour l'écriture du tuto (quand il aura le temps !) mais je le comprendrai mieux ensuite.

Salut salut

écoute dans ma classe j'ai plein de chouettes personnes, je peux éventuellement regarder pour faire un projet collectif. Vu qu'ils connaissent html/css et pas JS, je peux le filer le tuto en leur demandant où il plantent. Je vais voir ça

Super ! Beaucoup de testeurs sont très utiles ! Ce qui serait encore mieux, c'est que chacun parte avec un tileset différent et une spritesheet différente (à chercher sur internet). Ça permettrait de voir si le tuto permet de faire (presque) n'importe quel jeu par la suite.

Pour  moi, là où ça plantait le plus, c'était pour l'ajax, pour le changement de carte que je n'ai pas réussi à reproduire, tout ce qu'il y a avant fonctionne assez bien.

Il y a quand même juste avant ça l’événement provoquant l'apparition de la boite de dialogue. Le hic est qu'il faut appuyer en même temps sur les flèches droite et bas. Pour ma part, j'avais remplacé la boite de dialogue par l'apparition d'une nouvelle tuile, je trouvais ça plus cool (C'est même comme ça que ça m'a donné l'idée de faire mon changement de carte sans utiliser php, histoire d'avancer un peu dans mon jeu).

Et aussi, j'avais le problème du blocage du perso sur les bords de la map. Voir s'ils l'ont aussi. Comme j'avais mis la taille des tuiles et des sprites en variable (ce qui me semble plus pratique car adapté à tous les tilesets, je te conseille d'intégrer ça au tuto), j'ai peut-être fait des erreurs à ce stade.

Demande leur s'ils préfèrent directement un gros tileset comme celui que tu proposes (mais qu'il faudra changer à cause des problèmes de droits) ou un petit puis un moyen pour tester sans risquer de se planter au début.

Le truc, c'est que quand on commence à mettre les arbres (ou autres éléments) sur un canvas séparé du background, c'est un peu bête de s'être pris la tête avant à dessiner un gros tileset mélangeant le tout. Quitte à faire un gros tileset, autant le faire pour la deuxième partie uniquement, quand on commence à séparer les canvas. Suis-je claire ?

Peut-être auront-ils des idées d'autres graphismes ou d'autres gameplays pour utiliser les persos existants de Guyana-Dream. Si on est plusieurs, je serai plus motivée pour refaire d'autres graphismes et avancer sur ceux faits avec Blender. Pour donner un côté plus RPG, il faudrait peut-être que mes singes soient habillés ?

Sinon, un lien avec plusieurs petits tutos pour dessiner des persos simples avec Inkscape, destiné aux développeurs : http://jeux.developpez.com/tutoriels/graphisme-2d-programmeurs/

Voiciun blog présentant des tutos sur javascript en même temps que la création d'un jeu : http://maximechagnolleau.wordpress.com/category/tutoriels/. Il utilise les librairies Box2dWeb et EaselJS

Dans son cas, les premiers tutos ne sont pas visuellement très attractifs, mais le plus récent commence à être sympa à regarder. Il met à disposition toutes les sources, c'est cool.

Son jeu est un jeu de plate-forme puzzle, c'est donc assez différent de ce qu'on veut faire mais ça peut aider de voir la manière de faire d'autres personnes.

En fait, en utilisant le format du blog, la publication du tuto se fait au fur et à mesure de l'avancée du jeu, il n'attend pas d'avoir tout fini pour publier. Je ne sais pas si c'est possible sur Openclassroom, mais je trouve cette façon de faire plutôt sympa.

C'est peut-être un peu risqué car on peut sans y prendre garde publier quelque chose sur lequel on aura à revenir à l'avenir, mais c'est plus motivant pour les visiteurs de voir le projet jeu/tuto avancer au fur et à mesure.

Mon petit site G-D est beaucoup moins pratique qu'un blog (ou un CMS) pour une publication de ce type, par petits bouts, mais je pense qu'il serait quand même possible d'y mettre toute la partie du tuto que j'ai testée avec relativement de succès, c'est-à-dire tout ce qui a été fait sans ajax. Sinon, il faudrait utiliser un CMS genre Wordpress, mais je ne sais pas si on peut mettre un canvas dedans, je vérifierai.

Si tu le testes bientôt ton tuto avec d'autres personnes, on sera sûrs que cette partie est OK et là, ça vaudra vraiment le coup de la mettre en ligne.

Bonne année 2015 à ceux qui voudraient nous rejoindre et nous aider à avancer sur le tuto (graphismes, test du tuto)...

Je n'avance pas très vite sur les graphismes mais je reste sur le coup.

J'ai réussi à mettre une armature sur mon singe et sur mon ara réalisés avec Blender. Ce n'est pas encore fini mais j'avance un peu grâce aux ateliers du BUG à la Villette (chaque premier samedi du mois).

Et toi, un peu de temps pour le tuto ?

Je me sens un peu seule sur ce topic, Est-ce que quelqu'un d'autre que Jamjam68140 (très occupé ces temps-ci) et moi est intéressé par un tuto de jeu en RPG en HTML5 ou faut lâcher l'affaire ?

Si c'est le cas, va falloir que je trouve un autre tuto ailleurs pour finir mon jeu !

Il y a celui-ci qui n'est pas pour un RPG,  faut que je voie si ça tient la route par rapport à mon projet (qui n'est pas franchement un RPG) et si ça ne n'est pas trop compliqué. Ça manque un peu d'images, par contre.

En plus, il utilise Quintus, une librairie que je ne connais pas du tout. J'étais plus tentée par Jquery, dont j'ai entendu parler (y a des cours sur Openclassroom, d'ailleurs), mais je ne sais pas si c'est utile dans mon cas.

Ce qui est bien, c'est que ce tuto HTML5 propose 2 liens de tutos pour débuter avec la balise canvas.

-
Edité par doudoulolita 4 mars 2015 à 1:54:15

Encore un message en espérant que ce ne soit pas dans le vide : j'ai réussi à dessiner une map à partir d'un fichier json comme dans ce tuto mais un peu plus simple. Je me suis aussi inspirée du cours sur javascript, partie ajax.

Je vais bientôt être capable de finir toute seule le tuto de Jamjam68140 et au moins mon jeu Guyana-Dream !