Salut, merci des retours. J'améliorerais ça dès que je trouverais un peu de temps. Sinon pour les 4 tiles affichées dans le carrée c'est normal, j'ai mis des valeurs fixes (64px) au lieu de mettre les valeurs choisies. Je change ça ce soir à coup sur. J'ajouterai aussi la gomme bientôt, et l'outil qui permet de sélectionner chaque tile, mais je ne sais pas encore comment je vais m'y prendre.

Sinon, j'avais pas remarqué qu'on pouvais pas copier, c'est parce que j'ai ajouté la modification des données de la map en temps réel, et ça à l'air d'empêcher le "copier". Je vais m'y pencher

-
Edité par jerkoco 28 janvier 2016 à 17:19:10

Bonjour,

J'aurais vraiment été intéressé pour le tuto de ce projet. Le projet a t-il été annulé ? Je suis en ce moment novice en javascript mais créer un rpg à toujours été motivant pour moi.

Plus le temps de m'en occuper, plein d'autres projets aussi.

Donc je réponds hyper tard en espérant que tu reviendras dans le coin...

L'idéal serait de repartir de l'ancien tuto. L'auteur est OK pour qu'on le reprenne, mais ça veut dire tout recommencer sur mon jeu Guyana-Dream  si c'est moi qui m'en occupe. Je crois que je n'ai pas encore le niveau en javascript,même si j'avais le temps et que j'ai un autre projet en javascript, json et php, pour le boulot. Je reprendrai peut-être plus tard en faisant des sprites plus simples (mais j'aime bien Blender)

En refaisant un petit tour sur Google, je viens de trouver ce tuto d'un MMO en javascript.

Moins récent, il y a aussi un petit article avec des liens à aller voir.

Ce n'est pas un RPG mais ça peut être intéressant : Créer un jeu HTML5 avec Quintus, Peut-être ai-je déjà mis ce lien ici, je ne me souviens plus.

Ce serait super ! Bon courage pour cet été.

Je pense que les gens qui viennent ici recherche surtout un tuto qui complète l'ancien, quelque chose d'assez simple pour commencer, quitte à compléter après. L'ancien tuto est plus difficile à trouver aujourd'hui qu'avant, donc je pense qu'il faudrait l'intégrer au nouveau tuto (en le changeant un peu au besoin)

Pour ma part, mon niveau en javascript est un peu meilleur qu'au début grâce au tuto de jam-jam68140  et à quelques moocs sur Openclassroom (HTML5, javascript, et Ajax)  et FUN, mais je reste assez débutante.

Ta version en 3D iso est une bonne idée, mais j'espère que faire un tuto dessus ne rendra pas les choses trop compliquées?

Pour la création d'un moteur de jeu, j'avais trouvé ce tuto Comment créer un moteur d'affichage 2D en HTML5 de Developpez.com mais à part le début, le reste est trop complexe pour moi.

Sinon, je viens de trouver rpg js que je ne connaissais pas encore alors qu'il date de 2013, mais je ne sais pas si c'est encore développé.

Mais un petit sondage vaudrait le coup ! Peut-être les autres préféreront-ils un éditeur de map.

Pour aider les gens, tu peux faire référence à ce tutoriel canvas  du site MDN et pour des idées et des liens un vieux topic sur jeuweb (de 2011 à 2013). J'ai aussi placé des liens sur la page liens de GD

Il faut bien vérifier que les images que sebcap26 utilise (et que toi tu utilises) sont sous licence libre, sinon, n'hésite pas à utiliser les miennes, que ce soit celles de Guyana-Dream ou du jeu de plate-forme Ultimate Smash Friends

Sur ce dernier, il y a eu d'autres contributeurs, dont l'excellent Redshrike venant du site OpenGameArt

Pour ma part, tous les dessins que j'avais mis sur mon picasaweb, ou sur mon compte Opengameart dont beaucoup ont été conçus pour USF, que je souhaitais transformer en wardance-usf (version en javascript non finie), sont sous licence libre.

-
Edité par doudoulolita 25 juin 2016 à 3:38:48

Re

J'ai commencé ce matin par faire un preloader en JS; il peut dès maintenant charger des fichiers Image et des fichiers JSON. J’ajouterai par la suite la possibilité de charger des sons. Voilà le code: https://jsfiddle.net/mv4vxot8/2/

@jerkoco:

Je crois avoir compris comment marche ton loader, je viens de réessayer (pas trop tôt !) en mettant le nom de mon tileset et de ma carte json, mais une fois que je supprime la fonction alert(), je n'ai pas l'impression que mes images sont vraiment chargées car le décor ne s'affiche pas immédiatement, je dois relancer la page pour qu'il s'affiche.

Mais il est possible que le problème vienne d'autres erreurs dans mon code, par exemple d l'utilisation XMLHttpRequest de façon synchrone, qui est signalée comme obsolète dans la console web.

Dans l'affaire, je suis aussi revenue sur ton éditeur de carte, qui apparemment n'est plus en lien sur ton github, je ne sais pas si tu l'as retravaillé depuis et mis ailleurs.

Dernièrement, j'ai essayé de faire des classes avec la méthode prototype, j'arrive pour l'instant seulement à afficher un canvas avec une couleur de fond, j'ai encore du boulot pour comprendre la programmation objet.

J'espère que tu reviendras continuer ce projet de temps à autre !

Salut possibilité de résumer ce qu'il c'est passer pendant ces 3 ans ?

Je suis déjà tomber sur ce projet il y a environs 1 an et je dois dire que je serais plus qu'interesser par ce tuto (pour m'en servir, non pas pour le crée j'ai pas de connaissance)

Je me fais chier depuis mes 16 ans à crée des jeux en php mais sans aboutissement malheureusement php n'est pas fait pour des jeux RPG ..

du coup si il y a un cours plus ou moins à jour qui explique comment crée un RPG de A à Z (hors / avec multijoueur) je suis prenneur !

Re j'ai mis à jour le pre-loader, et mon framework avance bien. Je viens de rentrer de vacances et je me suis remis dessus. Le preloader de mon framework permet désormais de charger les sons également.

https://jsfiddle.net/57aadcfo/

voilà pour le code, il y a un exemple en dessous.  J'espère que c'est assez clair, sinon suffit de demander

Ton problème venait surement du fait que tu assigner les variables avant que tout soit chargé, du coup le preloader ne marchait pas et tu devais attendre que ton navigateur mette le fichier en cache.

 Le fonctionnement ressemble un peu à celui de Phaser.

Sinon pour un tuto je vais d'abord finir mon framework de jeu pour maîtriser tout les concepts à expliquer et je ferais ensuite un tutoriel si  le temps me le permet.

-
Edité par jerkoco 3 août 2016 à 21:12:05

@ florianlecoconnier:

    function () {
     //on assigne les fichiers au variable dès que tout est chargé
        create(); 
     //ensuite, on lance le jeu
        requestAnimationFrame(monJeu);
    }

En fait, dans mon framework, il suffit de faire game.run(); Je pensais que tu utilisais requestAnimationFrame pour ton jeu, ducoup j'ai mis ça.

Si jamais tu utilise setTimeout ou setInterval (à proscrire, vaut mieux requestAnimationFrame), c'est l'équivalent de setInterval(fonctionDeMonJeu, 1000/60);

Pour t'aider, si je devais décrire le fonctionnement du loader, je dirais:

•  Je crée les variables pour les assets de mon jeu (image, sons, documents) mais je ne les assigne pas. ex:  var monSprite;
• je décris les fichiers à charger comme dans mon lien
• dans le callback du loader (là ou il y a une fonction en paramètre), j'assigne mes variables. ex: monSprite = assets.getFile('monsprite'); puis je lance mon jeu via setInterval, requestAnimationFrame ou autre.

-
Edité par jerkoco 4 août 2016 à 10:02:12

@florianlecoconnier  : C'est fait !

Pour les autres : Les liens vers le tuto original de jam-jam et vers ma version (qui est basée en grande partie dessus mais qui est illustrée par mes images personnelles) devraient bientôt pouvoir être publiés ici.

Jam-jam comptait utiliser du PHP pour le changement de carte mais je trouvais ça trop compliqué, je n'y arrivais pas bien.

J'ai suivi le cours d'Openclssroom sur le javascript qui m'a donné l'idée de faire autrement. J'ai vu aussi que Sebcap utilisait json pour les maps dans son tuto (que je pigeais pas beaucoup non plus au début !)

J'utilise donc XMLHttpRequest de façon synchrone mais la console web indique que ce n'est pas conseillé. Dans mon code, il y a de toute façon pas mal de choses qui clochent, pour le changement de map en particulier, qui n'est pas super fluide.

Je rappelle que ni l'un ni l'autre de ces tutos n'ont pu être terminés, faute de temps pour lui et de compétences pour moi. Ça permettra d'avoir des commentaires et de l'aide en attendant que jerkoco fasse le sien.

@jerkoco:

Dans mon fichier perso.js, j'ai le code suivant, mais je ne l'utilise pas pour carte.js, qui gère la map. Dommage car c'est surtout  le tileset qui ne s'affiche pas si je ne relance pas en cliquant dans la barre d'adresse et en appuyant sur "entrée". Une fois en cache, il n'y a plus trop de soucis, c'est juste au début que ça cloche.

window.requestAnimationFrame = (function(){//on crée la fonction pour gérer l'animation
	return window.requestAnimationFrame || // La forme standardisée
	window.webkitRequestAnimationFrame  || // Pour Chrome et Safari
	window.mozRequestAnimationFrame     || // Pour Firefox
	window.oRequestAnimationFrame       || // Pour Opera
	window.msRequestAnimationFrame      || // Pour Internet Explorer
	function(callback) {                   // Pour les élèves du dernier rang
		window.setTimeout(callback, 1000 / 60);
	};
})();

Je l’appelle à l'intérieur d'une fonction dessinePerso(direction, step, nomCarte) qui dessine un des 2  singes disponibles, et une fonction dessinePnj(pnjDirection, step, nomCarte) qui affiche l'ara (qui pour l'instant bat des ailes mais ne se déplace pas)

requestAnimationFrame(function() { dessinePerso(dir,step, nomCarte); });//on rappelle la fonction qui sera exécutée plusieurs ( une trentaine ) de fois par seconde

requestAnimationFrame(function() {dessinePnj(pnjDirection,step, nomCarte); });//on rappelle la fonction qui sera exécutée plusieurs ( une trentaine ) de fois par seconde

Le lancement du jeu est géré comme ça à la fin de carte.js :

// lancement du jeu, quand on charge la page
window.onload = function() { 
	addImageChoix(); // sur le côté, on ajoute les images pour choisir le perso
	
	couleurFond(); // on remplit le canvas d'une couleur unie #5b6634	
	fondCarte=donneesCarte.background1; // on va chercher dans le fichier json les données du background(fond) du niveau 1
	dessineFondCarte(fondCarte, context[0]); // on dessine le fond de la carte en fonction des données précédentes sur le premier canvas
	
	nomCarte=donneesCarte.carte1;	// on va chercher dans le fichier json les données de la carte (arbres) du niveau 1
	dessineCarte(nomCarte, context[1]); // on dessine la carte (arbres) en fonction des données précédentes sur le second canvas
	dessinePnj(0,0, nomCarte);	// le personnage non joueur est placé sur la carte	
}

et dans persos.js :

perso.onload = function() {	
	dessinePerso(0,0, nomCarte); // une fois la spritesheet (= image qui contient toutes les positions) du perso chargée , on dessine le personnage de face (ligne 0 sur la spritesheet) et statique (colonne 0 sur la spritesheet)
}

Pour que tu puisses voir exactement où j'en suis sans l'utilisation de ton pre-loader (que j'ai testé en local sur une copie de cette version), je te donne le lien vers mon jeu Guyana-Dream. J'ai même mis sur la page le lien vers mes 3 fichiers js pour les trouver plus vite.

Bref, je ne fais pas trop les choses comme il faut, je crois !

Est-ce que c'est possible d'avoir un lien vers ton framework, même s'il n'est pas fini ?

Le framework n'a que peut de fonctionnalités pour l'instant. Je ne pense pas donner le code avant ça quasi finalisation. Sinon, ton jeu guyana dream marche correctement mais le code HTML contient pas mal d'erreur, (selon HTMLhint) et la gestion des ressources est bizarre. Le chargement des ressources doit être concentré au lancement du jeu, pour éviter les problèmes (là, je suis obligé de rafraichir le page, la map ne s'affiche pas du premier coup). Sinon, je ne comprends pas trop pourquoi tu utilise plusieurs requestAnimationFrame et autant de canvas ? deux couches ou trois aurait été suffisante, si tu souhaite absolument séparer ton jeu en couches.

Comme tu charge tes fichiers à pleins d'endroit différents, j'ai un peu de mal à utiliser mon preloader dans ton jeu.

Le problème qui se pose est: Je charge pleins d'image, mais elle ne sont pas accessible forcément tout de suite hein ? Il faut les télécharger ! Or, si j'essaye d'utiliser une image qui n'est pas encore chargée; rien ne va s'afficher ?

Ils faut donc un système capable d'attendre le chargement de toute les ressources pour pouvoir lancer le jeu au moment voulu.

Je pense que tu connais mieux ton code que moi, je te laisse faire des modifications.

je vais essayer de t'aider pour améliorer ton jeu:

• Corrige les erreurs de ton code HTML, il y a plein de détecteurs d'erreurs sur Internet
• Essaye d'utiliser mon loader ou code le tien, en respectant ces règles: 1) on crée les variables en rapport avec nos fichiers sans les assigner (exemple: var monSprite;var largeurDuSprite; etc..) 2) on lance le chargement les fichiers 3) dès que c'est fais; on assigne nos variables (ex: monSprite = assets.getFile('sprite');largeurDuSprite = monSprite.width; ) 4) On lance notre jeu en dessinant tout ce qu'il faut dans le canvas et en lançant notre boucle de jeu (requestAnimationFrame)

P-S:  /!\  Le code du preloader que j'ai envoyé était incomplet ! voilà le bon:

https://jsfiddle.net/w8yyrgx2/

Voilà le code pour l'utiliser:

// on crée nos variables liés au fichiers du jeu
var fire;
var music;
var jacky;
//on déclare les fichiers dont on a besoin et on défini un callback
var assets = new Loader(
    [
        {
            type: "image",
            file: "/images/fire.png",
            key: "fire"
       },
        {
            type: "sound",
            file: "/sounds/jr.mp3",
            key: "music"
        },
        {
            type: "json",
            file: "/json/jacky.json",
            key: "jacky"
        }
    ],
    function () {
// CALLBACK
     // on assigne les variables
        music = assets.getFile('music');
        fire = assets.getFile('fire');
        jacky = assets.getFile('fire');
        //on lance notre jeu
      requestAnimationFrame(monJeu);
      music.play();
    }
);
// on démarre le chargement des fichiers
//dès que ce sera fini, le callback s'executera
assets.load();

-
Edité par jerkoco 5 août 2016 à 17:36:33

Bonjour

@doudoulolita  serait-il possible de m'envoyer le tuto par mp ?^^

@jerkoco : Merci d'avoir regardé mon code, c'est cool !

Comme je suis plutôt débutante, c'est tout à fait normal qu'il y ait encore beaucoup d'erreurs et je suis là pour apprendre !

La séparation en plusieurs canvas était suggérée dans le tuto de jam-jam (qu'il n'a pas eu le temps de finir, je le rappelle) en prévision d'ajouts complémentaires comme des textes et des dialogues, etc...

Je n'avais pas bien compris l'histoire du pré-chargement des images que j'avais vue dans des bouquins trop compliqués pour moi. Effectivement, il y a bien un problème à ce niveau là, que l'on voit directement au moment de charger la page.

La plupart des bouquins parlent de ça au départ, mais comme ça ne se voit pas trop et que c'est compliqué à comprendre, j'avais laissé tomber. Du coup je n'avais pas réussi à suivre le reste des bouquins, dommage !

Dans son tuto, jam-jam avait prévu ça aussi, mais pas au tout début, et malgré ça,  je n'avais pas réussi à le reproduire correctement.

Merci aussi pour le code du preloader que je testerai quand mon code à moi sera un peu remanié.

@Yo4n : Je t'envoie ça, mais rappelle-toi  il n'est pas parfait, comme Jerkoco l'a remarqué.

Jam-jam est de nouveau en contact avec moi et y reviendra plus tard pour l'améliorer mais pas dans l'immédiat. La base actuelle du tuto reste donc sa propriété car il a beaucoup bossé dessus, déjà, mais tu peux quand même t'en inspirer pour un jeu perso.

jerkoco a écrit:

Le fais de séparer en couche n'est pas une erreur, c'est plus une façon de faire. Mais ça ne fais gagner de la performance que dans certains rare cas et cela rajoute surtout de la complexité; ça demande une grande rigueur et un pattern où l'on si retrouve bien, et c'est pas très pratique.

Je suis d'accord que cela rajoute énormément de complexité  mais cela fait gagner e performances dans bien plus que de "rares cas"

Un simple exemple, une flamme animé doit être redessiné h24. Mais si le bonhomme arrête de bouger dans la map (à supposer que la map suive le bonhomme et qu'il faille aussi la redessiner dès qu'on bouge le bonhomme), il n'est pas nécessaire de redessiner la carte h24. Cela pourrait créer des lags dans des dialogues ou mêmes dans des interactions plus basiques. Les couches permettent donc de dessiner uniquement le nécessaire lorsque c'est nécessaire et on gagne ainsi très largement dans la majorité des cas un bon facteur 10 de rapidité

Je ne sais pas trop si c'est la façon correcte de faire ou non, mais pour ma part, je n'ai pas trouvé ça trop compliqué, alors que je suis plutôt débutante.

Avec les logiciels de graphismes, j'utilise beaucoup les calques, donc je le vois un peu de la même manière. C'est aussi ce qui se faisait avec les dessins animés à l'ancienne, avec les feuilles de celluloïd.

Peut-être que le mieux est de faire une recherche sur internet à ce sujet, en choisissant des articles récents, pour savoir ce qu'il convient de préconiser ou pas dans le tuto (ou si vous avez encore vos profs de programmation à portée de mails...). Je n'ai pas trouvé grand chose mais au moins ça:

Dans Optimiser les Canvas , ils semblent trouver que c'est bien mais l'article est noté comme demandant relecture. Dans certains forums, ils ne le recommandent pas, tandis que d'autres conseillent d'en utiliser plusieurs mais pas trop. Peut-être qu'on pourrait limiter à 3 ou 4 ?

Dans le W3C, c'est trop compliqué, je ne sais pas ce qu'ils préconisent à ce sujet.

Là où j'ai eu plus de mal dans le tuto de jam-jam, c'est d'avoir une map pour le fond et une map pour indiquer les obstacles (les arbres dans mon jeu). Ça oblige à créer 2 tables, ce qui était assez embêtant pour moi car je n'avais pas réussi à finir l'éditeur de niveaux proposé par jam-jam en exercice (il ne me manquait que récupérer le code de la map mais c'était surtout cela dont j'avais besoin) .

Dans RPGMaker, ils utilisent des tilesets différents pour le fond et les obstacles, je ne sais pas si c'est plus facile avec cette méthode, et je suppose qu'il y a quand même 2 maps de même taille.

Pour ma part, je verrais bien un tileset avec la partie du haut qui correspond aux éléments sur lesquels on peut marcher et la partie du bas comprenant les éléments qui font obstacle. Grâce aux numéros, on saurait ainsi si la tuile permet ou non de se déplacer.

Sinon, j'ai trouvé quelques nouveaux tutos sur la balise canvas que je vais mettre en lien dans mon site, mais ils sont en anglais.

• HTML Game Tutorial de w3schools.com
• No Tears Guide to HTML5 Games
• HTML5 Game Development (plusieurs tutos, mais je n'ai pas tout regardé)

J'ai aussi trouvé des listes de moteurs de jeu, mais je ne sais ce qu'ils valent.

il y a ce tuto Comment créer un moteur d'affichage 2D en HTML5 pour le faire soi-même, il est trop complexe pour moi, mais pour vous deux, ça doit aller.

En ce moment, je profite des vacances pour relire le tuto d'Openclassroom sur HTML et je fais une ou 2 pages de mon site sur la base de ce tuto, histoire de bien revoir les notions les plus actuelles, car quand j'ai appris le HTML vers 1998/99, il n'y avait pas tout à fait les mêmes balises.

Pour juste donner l'impression qu'un objet est au-dessus d'un autre, comme des décors au dessus d'un personnage, il suffit de changer l'ordre de dessin dans un seul et même canvas, et ça marche. Si le jeu contient du scrolling pour la map, il n'y a pas vraiment d’intérêt à séparer le jeu en calque. Si la map est statique et tiens dans le canvas, on peut le faire, mais comme le jeu n'est pas bien complexe alors, la question d’optimisation ne se pose pas vraiment. Il semble par contre que prérendre une frame sur un canvas non affiché à l'écran puis rendre l'image du canvas invisible dans le canvas présent à l'écran fais gagner des performances. À tester.

De nouveaux tutos de jeux HTML5 en français découverts sur le web:

• Html : Créer le jeu pong en html5 et javascript
• [Tutorial] Créer un jeu web avec du HTML 5 Canvas et Javascript
• Journal de bord: création d’un RTS en HTML5 Ca va du jour 1 au jour 17 et après, il y a un bomberman-like
• Créer un jeu HTML5 avec Quintus

Ça peut donner des idées pour le code mais aussi pour la façon d'expliquer et de mettre en forme le futur tuto.

@jerkoco : Pour l'instant, Guyana-Dream n'est pas complexe (et pas fini !), mais le but final du tuto sera de permettre de créer un jeu avec beaucoup plus de choses.

Dans l'idéal, ce futur tuto devra aider les gens à réaliser un RPG vraiment avancé en HTML5 et à faire leur version personnelle, exactement comme ils en ont envie.

Mon jeu à moi va aussi se complexifier quand j'aurai les capacités et le temps pour le faire. Ne faut-il pas prévoir cela à l'avance, plutôt que de tout changer au moment où je me retrouverai limitée ?

@jerkoco et @jam-jam68140

Est-ce que vous auriez l'un ou l'autre des exemples de RPG un peu complexes en HTML5 dont on pourrait regarder le code source pour voir comment ils font ?

Peut-être que dans le début du tuto, au moment où on apprend à afficher un perso, on peut expliquer les 2 (ou 3) techniques, avec 1 seul calque ou plusieurs, et chacun choisira la technique qu'il aime le mieux (ou faire des liens vers des exemples)

Pour la possibilité de faire du scrolling, je ne sais pas à quel moment du tuto on peut le proposer, mais ce serait bien de montrer comment faire pour ceux qui préfère ça, sauf si ça implique un changement total de la gestion des déplacements et collisions...

Dans un tuto où le but est de généraliser, on peut également proposer les 2 techniques de changement de map, soit via json, soit avec PHP. Par exemple, le PHP sera proposé un peu plus tard quand au lieu d'avoir juste 2 maps, on décide d'en avoir beaucoup.

En fait, plutôt qu'un simple tuto sous forme de pas à pas pour réaliser tous le même jeu avec juste les images qui changent, ce serait peut-être pas mal de faire carrément un cours où on explique plusieurs techniques pour chaque chose (même si c'est plus compliqué, mais ça dépend comment on structure ça).

Ou au moins préciser qu'il y a moyen de faire autrement (et donner des liens vers d'autres tutos qui l'expliquent, quand il y en a).

@jam-jam68140: Dans ton tuto, les maps et le tileset sont très grands et ça alourdit le code. Je crois que ce sera plus facile de mettre des tilesets et des maps plus petits comme je l'ai proposé dans ma version, juste comme exemple. C'est aussi ce qu'avait fait Sebcap dans son tuto.

Tu pourras par contre mettre quelques images et/ou des liens vers d'autres exemples plus complexes pour montrer les possibilités et que ça fasse plus envie.

Le fait de mettre le plus possible d'éléments sous forme de variable, comme la taille des tuiles et des sprites est plutôt pratique aussi. Cela permettra aux personnes qui suivront ton tuto de ne pas avoir à les changer plusieurs fois au sein du code, mais juste à les définir au début.

Je sais que tu ne vas pas t'en occuper maintenant mais garde ces idées en tête pour plus tard !

-
Edité par doudoulolita 14 août 2016 à 22:51:21

Merci pour cette idée, j'ajoute le lien vers la démo pour y aller plus vite

Effectivement, le code HTML ne montre qu'une seule balise canvas mais je ne comprends pas comment les scripts fonctionnent, c'est trop compliqué.

Cependant, en cherchant bien avec la console web de Firefox, j'ai trouvé effectivement des fichiers json, par exemple une map nommée terrain.json  et dans le fichier game-base.js on trouve une fonction ajax dont le début est:

    ajax: function(url) {
        var req = this.createXMLHTTPObject();

Bon, ça nous donne déjà quelques indices !

J'ai déjà un peu parler à un développeur du jeu, il m'a dis qu'il utilisais un canvas offscreen où ils dessinaient dessus pour ensuite le dessiner dans un canvas affichée à l'écran, ça leur permet de faire l'effet au début de la démo. Il m'ont également dit qu'il utilisaient destination-out pour leurs système de lumière. Notons que le jeu est tout de même très complexe par rapport au objectifs du tutoriel RPG de ce site ;) 

Il y a aussi le jeu Raining Chain fais en javascript, dont le développeur a fais une série de tutoriel sur les jeux HTML5 sur youtube (en anglais)

-
Edité par jerkoco 15 août 2016 à 22:09:47

Merci  

Le jeu Crosscode est vraiment trop compliqué pour moi. Je ne comprends pas bien tout ce dont tu me parles, je ne sais pas ce qu'est le canvas offscreen, par ex.

Je ne vais pas avoir le temps de regarder toutes les vidéos des tutos, ou alors très progressivement, mais avec le code qui est dispo facilement, ça va aider.

A titre perso, je ne suis pas très à l'aise avec les tutos vidéos, surtout pour la programmation, je suppose que c'est parce que je suis trop vieille !

En graphisme, c'est déjà plus facile de s'y retrouver. Mais beaucoup de gens aiment mieux ça.

Pas beaucoup de monde ici...

Faut dire que moi-même je n'ai rien fait depuis pas mal de temps sur mon jeu et pour le tuto. Quelqu'un a de nouveau du temps pour aider sur le tuto ?

De mon côté, je vais essayer de m'y remettre, j'aimerais travailler la POO pour un autre projet (professionnel). Si je commence sur GD, ça m'aidera peut-être à avancer plus vite.

Je ne sais pas si expliquer ce qu'on fait quand on est trop débutant est une bonne idée, mais je pourrai au moins trouver des liens qui seront utiles à d'autres que moi.

Je regarde aussi le développement de web apps pour mon autre projet, je ne sais pas si c'est adapté à un RPG simplifié. J'ai vu qu'on pouvait utiliser HTML5, CSS3 et javascript pour ça, mais apparemment il faut aussi Jquerymobile.

Quitte à faire un tuto dans ces langages, peut-être faut-il se diriger vers les versions mobiles ? Y a-t-il déjà des tutos intéressants qui ressemblent à ce que l'on veut ici ou qui pourraient aider ? Je n'ai pas encore eu le temps de regarder ?

Petit aparté : Comme je m'intéresse à la 3D également, j'ai vu que quelqu'un souhaitait faire un tuto sur le Blender Game Engine pour un RPG, j'espère qu'il avancera plus vite que celui-ci !

Up ?

J'ai ajouté des sites intéressants sur la page Liens de Guyana Dream, tutos et autres.

Voir surtout l'éditeur de carte opensource à télécharger Tiled.

J'ai fait un essai rapide, ça me semble plutôt intéressant. L'export par défaut est au format tmx (sorte de xml) mais on peut aussi faire un export en json et sous forme d'image.

Le json généré est un peu complexe et la map n'est pas au format utilisé dans le tuto (il n'ya pas plusieurs lignes, c'est un seul tableau), mais ça doit être utilisable quand même en changeant le code du jeu.

J'ai trouvé aussi le site du moteur de jeu Phaser mais il faut un serveur pour le tester et ce n'est pas l'option que j'ai choisie pour mon jeu. Avis d'utilisateurs bienvenus.

-
Edité par doudoulolita 24 octobre 2016 à 5:20:59