Je serait ravi de t'aider ! Je ferai de mon mieux. Par contre je commencerait que demain car là je dois finir mon travail, puis je vais manger, puis je vais au cinéma, puis je vais manger chez ma soeur, puis je vais dormir, puis ...
De toute manière, pas la peine de se presser, l'éditeur de tutoriels sort dans dix ans.
On est sur un site, on respecte les coutumes: l'échelle de temps de la roadmap est celle officielle sur ce site, merci d'y être conforme, et de dire "L'outil de rédaction de tutoriels arrivera dans quelques jours".
EDIT: cette histoire me fait penser au film Asterix chez Cléopatre, quand Cléopatre dit à l'architecte qu'il à 3 mois; et que l'architecte lui répond "3 mois, oui, mais avec combien d'années de retard ?" xD
Bonne chance pour le tuto sinon.
- Edité par Etoile Filante 10 novembre 2013 à 19:30:28
"Working on my five-year plan. Just need to choose a font"- Chuck Bartowski
De toute manière, pas la peine de se presser, l'éditeur de tutoriels sort dans dix ans.
On est sur un site, on respecte les coutumes: l'échelle de temps de la roadmap est celle officielle sur ce site, merci d'y être conforme, et de dire "L'outil de rédaction de tutoriels arrivera dans quelques jours".
Il ne faut pas oublier la règle du 90-90 ... (bon ok, peut être pas 10 ans mais au moins quelques mois).
Pour ma part, je cherchais plutôt un tuto pour un jeu de plateformes en javascript mais avec celui sur le rpg, je crois pouvoir apprendre aussi beaucoup de choses.
En effet, j'ai commencé à transformer un jeu existant pour créer le mien mais pour l'améliorer, je dois reprendre les bases du javascript et bien comprendre comment tout fonctionne. Dans un tuto, c'est cet aspect très didactique et progressif qui m'intéresse, pas forcément un jeu entier trop compliqué à réaliser.
Le problème, c'est que je bloque déjà sur sur Découpage et utilisation dans le tuto d'Openclassroom. La bordure du canvas s'affiche mais pas les tiles.
Je crois avoir suivi le tuto bien comme il faut mais ce n'est pas bien précisé où on doit placer certaines lignes de code pour le fichier Tileset.js.
Je viens de vérifier avec le code de la classe Tileset fourni sur partie1.zip et je crois que je ne me suis pas trompée. D'ailleurs, ça ne marche pas non plus quand je récupère sa classe Tileset.
Le problème vient donc sans doute du fichier rpg.js (qui n'est pas le même dans le code fourni plus loin, une fois la carte entière créée):
var ts = new Tileset("basique.png");
window.onload = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ts.dessinerTile(1, ctx, 10, 10);
ts.dessinerTile(5, ctx, 50, 10);
ts.dessinerTile(6, ctx, 90, 10);
ts.dessinerTile(7, ctx, 130, 10);
}
Manque-t-il quelque chose sur un des 2 fichiers js ? Pour bien vérifier, je fournis mon code complet. J'espère que quelqu'un ici prendra le temps de m'aider.
Lors du chapitre précédent, j'avais bien les cadres et le smiley qui s'affichait dans mon canvas, mais cette étape-là, je la connaissais déjà.
En fait, ce que j'ai du mal à comprendre, c'est l'utilisation des classes et le programmation Objet. Il y a un autre cours sur openclassroom que je vais devoir lire plus avant.
Je vais regarder le tutoriel de jam-jam68140 pour voir si je comprends mieux. Comme je suis animatrice multimédia, j'ai l'habitude de rédiger des tutos et de m'adapter au niveau des gens, par contre, je suis trop nulle en javascript pour aider beaucoup.
- Edité par laurenceepn13 23 novembre 2013 à 15:59:05
J'ai mis mes remarques sur tutoriel-corrigé.docx. J'ai un peu galéré mais comme j'avais téléchargé le dossier tutoriel, j'ai pu vérifier là où je m'étais plantée.
J'ai bloqué sur V. TP : créer un programme pour facilité la création des cartes, je n'ai pas réussi même le début de l'exercice (et en plus, je dois m'arrêter).
Bonne continuation pour ce tuto qui démarre plutôt bien !
Désolée pour le message en double, quand je modifie mon premier message, ça crée un double au lieu de prendre en compte la modif' et il n'y a pas possibilité de supprimer, on dirait.
J'ai encore un chouïa de temps avant l'arrivée de mes invités.
Que penses-tu de mettre un exemple très simple d'affichage du sprite dès le début du tuto avec la partie consacrée au sprite issue de d.html (mais sans la map, qui est plus complexe ni le double canvas) .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mon RPG de la mort qui tue</title>
</head>
<body>
<style>
canvas {
border: ridge;
}
</style>
<canvas width="480" height="480">Votre navigateur ne supporte pas HTML5! Je vous conseil de vous mettre à jour!</canvas>
<script>
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
//Nous écrirons ici le reste du code pour le personnage
var sprite = new Image();
sprite.onload = function() {
//on manipulera ici le sprite
drawPerso(0, 0);
}
sprite.src = "sprite.png" ;
var posX = 240, posY = 240;//position du personnage
function drawPerso(direction, step) {
context.drawImage(sprite, direction*25, step*20, 20, 25, posX, posY, 20, 25);
}
</script>
</body>
</html>
En plus, quand j'affiche d.html, je ne le vois pas ce drôle de petit bonhomme, j'ai l'impression. Comme si la couche du perso n'était pas visible sur mon navigateur.
Oups, voilà les copains qui arrivent !
- Edité par laurenceepn13 23 novembre 2013 à 18:48:07
@laurenceepn13 : je n'arrive pas à télécharger ton document... quand je clique sur ton lien, BAM! erreur 404 :/ (et pour ton navigateur, pour le moment utilise chrome avec mes codes )
@doudoulolita : excellent travail
pour les liens, ils sont exprès en local à vrai dire cela dit, je pensais que si tu avais le dossier complet, les liens locaux fonctionneraient... mais mon tuto est pour l'instant qu'un brouillon en fait, mais t'inquiète pas une démo en ligne sera faite avec les bon liens
pour les guillemets ( " ), il est vrai que si tuto copie et tu colle depuis le tuto du docx, tu va avoir un problème car le docx change automatiquement les guillemets dans sont caractère préféré (il faudra faire attention à ça si je fais un propre)
pour les trucs pas cool que je devrais expliquer (comme canvas ou encore la méthode drawImage), il y a déjà des tuto dessus, donc je trouvais que pour l'instant c'était inutile de passer du temps dessus. Mais une fois que l'essentiel du tuto aura évoluer, on pourra toujours y revenir pour pas que le lecteur ai besoin de faire des vas et viens sur différents tuto
quand rien ne s'affiche sur ton canvas, c'est certainement car ton navigateur n'est pas google chrome. J'ai créer tout mes codes avec un seul navigateur et c'est ce dernier. Cela dit, je sais pourquoi ça marche pas sous les autres navigateurs que chrome ; il faut donc que je corrige le bug. (mais j'insiste! essayez mes codes avec chrome! )
si j'ai bien compris, tu me reproche le fait de voir les choses en trop gros dès le départ... je suis entièrement d'accord avec toi mais j'ai économisé un temps fou à faire tout de suite un truc gros... c'est un peu comme pour les renvois sur d'autre tuto ici ; j'y reviendrais par la suite si j'arrive à faire en sorte que mon tuto tire un jolie gueule.
par rapport aux bouts de codes à modifier, à ce niveau, les lecteurs devraient savoir qu'il y a possibilité de faire clic droit -> afficher la source. Ainsi, tu peux aisément savoir ce qui à été modifié (et c'est aussi pour ça qu'au début, le temps que tu te mette à l'aise dans mes codes, je ne créer pas de fichier js externe) mais de toute manière , je pense qu'au départ, je vais donner à chaque fois des codes complet à chaque fois en redonnant toutes la page (je crois que c'est la meilleure des solutions ).
Pour le .PNG, oui c'est une erreur. La nuit tombe vite chez moi et ça me donne mal au crane! par ailleurs, quand j'ai mal au crane, je bâcle le travail :/ désolé
pour les sprites, je n'ai aucune idée si oui ou non elle sont libres de droit mais il me semble que oui (à vérifié, je ferais ça plus tard). Et tu peux pas savoir le soulagement que tu me fais là! enfin quelqu'un qui fait des sprites!! (pour l'instant, non, fais encore rien, mais si le projet devient sérieux, oui, ton aide me sera très utile )
pour le code que t'arrive pas à voir dans oppenoffice, il faut le sélectionner et l'agrandir! je l'ai réduit pour pas que ça me prenne trop de pages car franchement, avec un traitement de texte, je suis perdu quand il y a trop de pages
et, pour ce qui est de ton dernier commentaire, à savoir "code détestable dans le dossier m", oui je suis d'accord :/ j'ai coder tous ça en hiver et la nuit tombe avant que je rentre chez moi en hiver
C'est vrai que je rétorque énormément mais franchement, c'est tout à fais le genre d'aide que je recherchais! Merci beaucoup!
Je vais faire un doc sur google drive que tout les participants pourront modifier! Mais, il me faut les adresses gmail de toutes les personnes voulant participer afin que je puisse partager ce document avec vous. Une fois que vous aurez accès à ce document, vous pourrez le commentez là où ça ne va pas (on respectera un code couleur pour savoir qui a dis quoi) et nous chercherons en suite un moyen d'arranger tous ça. ATTENTION, dans le cas d'une bonne aide, ce tutoriel ne sera plus à moi mais sera bien à nous! (je tien pas du tout à en tirer toute la gloire! Si le tuto avance et que vous avez aider, lors de sa diffusion, ça sera indiqué :p)
"code détestable dans le dossier m" je ne crois pas avoir écrit ça vu que je suis trop nulle pour juger du code des autres. Simplement, si je ne vois pas le sprite ou si je n'arrive pas à recopier le code, je me demande ce qui se passe !
Mais bon, moi aussi je fais des choses assez tard et je peux me tromper !
As-tu vu le problème sur le premier tuto ? Si je n'arrive pas à faire celui-là, j'ai peur d'avoir du mal à suivre le tien.
J'ai regardé ton code et je suis d'accord avec doudoulolita, je pense qu'il serait plus simple à comprendre si tu le découpais en différents fichiers.js et que tu expliquais le rôle de chacun.
Et surtout cela augmenterait la visibilité du code sur un projet plus conséquent...
De plus je pense qu'il faudrait commencer par une chose plus simple, par exemple :
- Présenter le canvas en expliquant ce qu'il peut faire & ne peut pas faire ? (Un exemple de multiscrolling pour montrer l'ajout d'image et animation ? Utilisation d'un vecteur vitesse ?)
- Présenter les contrôles avec un jeu simple, Pacman serait un bon début (Contrôle d'un personnage, principe de map, collision, son, Interface... Utiliser un découpage "Standard" des fichiers JS : Game(Tous les contrôles, déplacement, ...), Ghost, Grid, Hero(Pacman), HUD ; ainsi qu'une arborescence pour les fichiers sources : Sprites, son, ...)
Ça ferait une grosse introduction, mais cela aiderait à comprendre le fonctionnement de base de l'affichage, déplacement, collision, HUD,...
Ou cela permettrait à ton tutoriel de devenir plus général et d'aider à coder tout type de jeu en HTML5 (Découpé en plusieurs parties: Mario, pacman, RPG)
Notions avancées - HUD -> C'est mieux quand même - Loot -> 99% des jeux s'en servent - Monstres -> Afficher des ennemis aléatoire - IA -> C'est mieux s'ils bougent - Son -> Vive l'ambiance --> TP Pacman (On quitte le scrolling pour prendre une vue de dessus, on ajoute une interface, des loot, monstres qui bougent et avec du son) http://www.masswerk.at/JavaPac/
Pour aller plus loin - Déplacement en diagonale - Combat dynamique (Nouvelles touches) - Ecrire une histoire --> RPG (ENFIN!)
Il est vrai que ce serait un gros projet, mais si on se promène un peu sur internet on peut trouver des sources un peu partout
Et cela permettrait de mètre ton cour en ligne petit à petit et augmenterait la visibilité du projet de cours
Je plussoie
Ça pourrait même être une expérience communautaire si tu demandes notre aide. On s'organise et : quelqu'un commence le noyau du pacman, ensuite un autre s'occupe des map, l'autre du HUD ... Avec un code bien commenté et skype, tout peut se passer correctement. On pourrait même poursuivre : chacun rédige la partie qu'il a codé
Par contre pour le plan de Azamdir je ne suis pas totalement d'accord. Je vois plutôt le Pacman et le RPG comme des "études de cas". Ca mérite au moins 1 partie pour chacun (Je ne suis pas sur d'ailleurs que ça tienne sur un seul big-tuto, le RPG pourrait en être un autre qui suit le premier.)
- Edité par CappaFlow 27 novembre 2013 à 17:34:02
Je vous ai aidé ? Appuyez sur le bouton "Ce message est utile", avec le pouce levé vers le haut ! (en bas à gauche de mon message)
MMh, l'objectif du site est de fournir de bonnes bases, des outils qui pourraient être utilisés par tout le monde, pas de leur donner tout d'un coup, il faut bien les faire travailler
Car au final, le RPG, c'est le cumul de tout ce qui a été acquis dans les parties d'avant, pareil pour Pacman. C'est pour cela que j'ai pensé à un plan comme ça, car on pourrait directement insérer les exemples en rapport au niveau du cours:)
Par exemple, si tu as compris le principe des sprites et de la map pour faire du Mario, tu dois savoir réaliser une map de Pacman ou une map de RPG.
Enfin, c'est comme ça qu'on m'a appris l'informatique, 50% de théorie et étude de petit cas, puis 50% de mise en pratique où il faut se souvenir de ce qu'on a fait avant pour avoir un bon résultat
@jamjam68140 : sur l'autre tuto, je n'arrive pas à afficher l'essai proposé dans la partie "découpage et utilisation". Seule la bordure du canvas apparaît, alors que les tests précédents d'affichage d'image avec ctx.drawImage fonctionnent. Dans son exemple de code nommé partie1, j'ai récupéré sa classe Tileset et ça ne fonctionne pas avec non plus. Son fichier rpg.js lui, est très différent, il a été transformé pour la partie suivante.
L'avantage de cette première partie, dans ce tuto qui peut servir d'intro à ton propre big-tuto, c'est qu'on avance progressivement et qu'on comprend bien quelle case on affiche et où on l'affiche. Le seul problème est de parvenir à réellement afficher ces fichues case ! Donc sur sur l'autre tuto, si on pouvait avoir l'exemple de code pour la partie découpage et utilisation, tu n'aurais pas besoin de faire une longue intro sur les maps. Je ne suis pas allée plus loin sur l'autre tuto pour l'instant, car je n'aime pas avancer sans comprendre ce que je fais. Il faudra tester chaque partie pour voir s'il est bien conçu et reproductible par un débutant.
J'aime bien l'idée des autres participants de faire vraiment un gros tuto. Pour ma part, j'ai acheté 2 bouquins pour apprendre à faire un jeu en javascript, un en français ("développer des jeux en HTML5 & javascript" de Samuel Ronce) et un en anglais ("learning HTML5 game programming" de James L. Williams), mais ils ont un plan tel que c'est trop compliqué pour moi.
Ma difficulté dans ces bouquins, c'est quand il y a 3 tonnes de code pour une partie du jeu et que si on plante, on ne sait pas d'où ça vient et aussi les classes et lesx frameworks, qui sont compliqués à maîtriser. D'où l'intérêt de faire un tuto très progressif, où chaque étape doit être maîtrisée et bien comprise avant de passer à la suite.
Il faut donc soit donner des liens utiles pour avoir les bases (et que ces liens fonctionnent toujours plus tard, ce qui n'est pas toujours le cas sur openclassrooms), soit inclure les bases dans le big-tuto.
Les exercices comme celui que tu proposes après avoir montré comment faire une map sont une bonne idée mais doivent reprendre uniquement ce qu'on a déjà appris, pas obliger à appliquer des choses qui ne sont pas dans le tuto (à moins de donner le lien vers un autre tuto ou d'ajouter les éléments complémentaires nécessaires dans l'énoncé)
Moi, je serai contente d'avoir un exemple simple de type Pacman (mais avec des images libres, genre Tux) puisque de toute façon mon but est de travailler sur un jeu de plateformes (issu de 2 jeux : USF et wardance) et non un RPG qui est trop complexe pour mon niveau.
Vous pouvez si vous voulez prendre mes dessins sur mon album web, ils sont sous licence libre (il suffit de citer mon pseudo). Je peux vous faire d'autres dessins pour les maps ou les persos, j'adore dessiner !
Bon, okay. Je vois le genre, Je vais en effet tout recommencer depuis ZERO. Je vais d'abords expliquer comment créer un petit jeu d'adresse puis un jeu de plate forme du genre pacman. Si les dessinateurs veulent bien me filer les images libres de droit pour le faire le pacman, c'est bon (je n'aime pas spécialement faire des recherches sur des ressources libre en droit... je ne suis jamais trop sur de ce que je peux prendre ou pas... :/).
Et plutôt que de faire une archive téléchargeable, tu pourrais faire une dropbox publique / Google Doc? Cela permettrait de suivre ton avancement en direct :)
Comment on fait pour se donner les mails sans que tout le monde les récupère et spamment ?
Sinon, oui, il y a des nuls ici vu qu'avant, ça s'appelait le site du zero...
Je ne sais pas ce qui ne va pas dans le tuto dont je te parle depuis le début mais au lieu de tout refaire (même si c'est une bonne idée), déjà le corriger ou le compléter serait un début. Il faut voir s'il n'y a pas déjà d'autres tutos de jeux en javascript qui pourraient être utilisés comme base pour ton big tuto, sur openclassrooms ou ailleurs (mais libres).
Si tu refais tout, ça va prendre un temps fou !
Voir avec les concepteurs du site pour avoir des liens permanents vers les autres tutos.
Je te mets en lien des images du jeu USF (jeu libre) : BiX.zip, personnage créé par necroluckyboy (à citer) qui ressemble pas mal à Pacman. Si tu as besoin d'une spritesheet toute faite, je te la prépare dès que j'ai un peu de temps.
Pour des images libres de droits, voir Opengameart.
- Edité par doudoulolita 3 décembre 2013 à 21:46:54
désolé de ne pas vous avoir prévenus plus tôt, mais je ne pourrais finalement pas participer pour coder en javascript.
Vous voulez un grand tuto, mais si je me charge de coder le javascript je vais me faire frapper par les professionnels avec mes rafistolages à l'ancienne...
Voilà, en espérant que le projet aboutisse, je vous suis ...
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Je vous ai aidé ? Appuyez sur le bouton "Ce message est utile", avec le pouce levé vers le haut ! (en bas à gauche de mon message)
Je vous ai aidé ? Appuyez sur le bouton "Ce message est utile", avec le pouce levé vers le haut ! (en bas à gauche de mon message)