Salut missnika

Je t'ai repondu par MP

@missnika : Le 1er tuto n'est pas évident à suivre et en plus, il n'est pas fini, il n'y a que le début. Celui de jam-jam68140 m'a semblé beaucoup plus facile. Il n'est pas terminé non plus mais j'ai eu l'impression de bien comprendre en le faisant.

As-tu déjà une idée de jeu précise ou est-ce que tu veux juste t'entraîner ?

@jam-jam68140 :

Je continue doucement à travailler sur les persos de Guyana Dream en 3D en particulier lors du BUG (Blender User Group) à la Villette tous les 1ers samedis du mois. Je suis maintenant sur le capucin.

La vue de dessus me semble meilleure quand je la fais avec les persos en 3D et si on décide de passer en 2D pour des parties spéciales, ça me servira.

Mon atèle a une drôle de démarche mais j'espère m'améliorer sur l'animation, comme j'ai déjà mon armature de faite, je peux faire des changements assez facilement. Tu peux le voir sur tuto/o4.html. Sur cet essai, le saimiri est une copie de l'atèle avec un changement de couleur, ce qui est assez moyen.

Je n'ai pas eu le temps de finir le cours de javascript d'Openclassroom, il ne me reste pourtant que la dernière partie, mais j'ai aussi un bouquin sur le sujet en cours.

Peux-tu me dire aussi si tu continues ou pas le tuto ?

Si j'avais la suite, ça me permettrait d'avancer davantage sur mon jeu !

Il y a quelques défauts sur la partie que j'ai déjà faite, j'aimerais corriger les bugs comme le blocage sur les bords du canvas et le fait d'être obligée de 'appuyer sur les flèches droite et bas en même temps pour le changement de carte.

Une fois que j'aurai au moins 2 singes corrects sur le plan du look et de l'animation, il faudra que je réfléchisse à leurs capacités, par exemple, des rapidités différentes sont assez facile à paramétrer. Même si je n'ai pas beaucoup d'animations différentes, il suffit de changer la vitesse de déplacement pour faire comprendre le principe. Dans l'idéal, des animations de courses seraient mieux mais faut pas que je me charge avec trop de choses.

Je veux aussi pouvoir leur faire attraper des fruits, ce qui leur donnera des points. En principe, je devrais déjà être capable de programmer quelque chose comme ça, mais je ne suis pas très sûre de moi. Là aussi, je dois prévoir l'animation adéquate.

Sinon, je vais peut être essayer directement en 3D avec babylon.js ou le game engine de Blender, mais je trouve ça un peu dommage de ne pas finir l'apprentissage de javascript et de canvas en 2D.

-
Edité par doudoulolita 13 mai 2015 à 15:23:11

@samir : MP

@doudoulolita : je vais voir pour le reprendre oui. J'ai encore quelques trucs à régler mais après je devrais pouvoir m'y remettre

Dis-donc, y a du monde qui est intéressé en tout cas !

J'ai scratché mon ordi, et celui qu'on a trouvé pour le remplacer à un chipset graphique que ma version d'Ubuntu ne reconnait pas. En attendant, je repasse un peu sur Windows et j'attends de l'aide pour remettre mon dual boot.

Heureusement, mes données sont sauvegardées, que ce soit Guyana-Dream ou ton tuto, si tu en as besoin, avec tous tes exemples.

Voici le résultat avec le capucin en 3D : o5.html , sa démarche est un peu étrange aussi et il est très penché, ce qui fait qu'il faudrait peut-être placer la caméra un peu différemment. Mais bon, il y a 2 singes en 3D maintenant !

J'aimerais mettre les fichiers blender des 2 singes sur mon site mais ils sont trop lourds, va falloir que je les héberge ailleurs.

-
Edité par doudoulolita 14 mai 2015 à 22:51:06

Je me suis amusée à ajouter un évènement, mon objectif étant de pouvoir comptabiliser les fruits et les feuilles de palmier jaunies que prend le singe.

Je n'en suis pas encore là mais j'ai réussi à en faire une petite partie sur p.html. Pour l'instant, quand on passe sur certains fruits et palmes, ils disparaissent (remplacés par une tuile verte), le score est incrémenté et 3 images (cachées dans un div grâce aux style) apparaissent. Je vois ça comme un début d'inventaire.

Mon souci est que le score continue à s'incrémenter quand le singe reste près de la zone. Normal, puisque c'est basé uniquement sur sa position sur le canvas et qu'à chaque rafraichissement, il revérifie sa position et repasse dans la boucle. Je pense que je dois changer le numéro de la tuile dans la map pour qu'il "pense" qu'il n'y a plus de fruit dès le 1er passage.

Ensuite, il faudra que je repère les tuiles de fruits dans la map en fonction de leur numéro sans avoir à écrire un tableau à la main. L'idéal serait d'avoir des scores pour chaque catégorie, fruit (1 ou 2 d'un coup) ou palme, et que le score ajoute 2 lorsqu'il va sur une tuile à 2 fruits.

Mais bon, même si le résultat est un peu naze, je suis contente d'avoir avancé toute seule !

J'ai nettoyé un peu mon code mais il y a encore un gros souci : q2.html

Le problème est que quand on passe à la croisée des chemins, on change bien de dessin de map (gérée par un fichier json) mais pour ce qui est des collisions et de la collecte de fruits, on reste bloqués sur les coordonnées de la map 1.

En fait, dès que le perso sort de la croisée des chemins, le jeu reprend les coordonnées de collision et de fruits de la map1 car je n'arrive pas à placer les évènements 2 et 3 hors de la fonction qui gère les collisions :

function isNextMoveAllow(newPosX, newPosY, mapName) {	
	map.evenements2();//on fait les vérifications pour les évènements de changement de carte selon la position du personnage
	map.evenements3(); // vérifications pour un passage sur les fruits

//on regarde si avec la position de coordonnées (newPosX, newPosY) on n'est pas sur une mauvaise case
	var centrePersoX = newPosX+(spriteWidth/2);//on créée un carré virtuel de coté 32 (taille de la tuile et largeur du sprite) et de centre (centrePersoX, centrePersoY)
	var centrePersoY = newPosY+(spriteHeight-(tileWidth/2));

// reste de la fonction
}

Voici les évènements placés dans le constructeur Map:

	this.evenements2 = function() {
		if (posX>=4*tileWidth && posX<=5*tileWidth && posY>=5*tileWidth && posY<=6*tileWidth){
			context[0].clearRect(0,0,canvasWidth,canvasHeight);
			context[1].clearRect(0,0,canvasWidth,canvasHeight);
			drawBackground();
			drawMap(mapData.background2, context[0]);
			mapName=mapData.map2;
			drawMap(mapName, context[1]);
		} 
	},
	
	this.evenements3 = function() {
			tableauFruitX=[13,2,11,5];
			tableauFruitY=[9,2,4,3];
		for (i=0; i<tableauFruitX.length-1; i++) {
			if (posX>=(tableauFruitX[i]*tileWidth) && posX<=((tableauFruitX[i]+1)*tileWidth) && posY>=(tableauFruitY[i]*tileWidth) && posY<=((tableauFruitY[i]+1)*tileWidth)){
				drawTileGround(tableauFruitX[i]*tileWidth,tableauFruitY[i]*tileWidth);
				upScore();
				afficheFruits();
			}			
		} 
	}	

Bon courage ! Tu es déjà bien calé en programmation ?

De mon côté, j'ai un peu avancé sur mon jeu Guyana Dream, même s'il y a encore beaucoup à faire.

Le changement de map se fait à la croisée des chemins. J'utilise un fichier json pour les coordonnées de la map.

Sur quoi tu bloques ? Peut-être puis-je t'aider ou quelqu'un d'autre sur Openclassroom.

Si ces sont les changements de map que te posent problème, tu peux peut-être utiliser la technique que j'ai trouvée, avec un fichier json.

Sur mon jeu Guyana-Dream, ça fonctionne assez bien maintenant. Bon, je n'ai que 2 maps, mais le principe est là.

-
Edité par doudoulolita 26 mai 2015 à 14:41:09

Encore moi car voici la dernière mouture du jeu. J'ai essayé de mettre un peu d'ordre dans les fichiers javascript, chacun gère un truc (persos, carte, événements) et est nommé en fonction.

Je viens d'ajouter un pnj animé (perroquet qui bat des ailes, sans bouger). Le singe peut passer sur lui, ce n'est pas très logique, je n'ai pas la gestion des collisions entre sprites à ce stade.

Pour les singes, j'ai revu mon animation dans Blender(elle a encore de petits défauts, mais c'est mieux, je crois) mais dans la spritesheet, je n'ai mis que 4 steps pour la marche, c'est un peu saccadé.

Est-il possible de réduire la vitesse de rafraichissement de l'animation ?

J'ai essayé de descendre le chiffre de 1000/60 ci-dessous mais ça n'a pas l'air de marcher.

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);
	};
})();

-
Edité par doudoulolita 31 mai 2015 à 8:40:49

Bonjour bonjour !

Je voulais vous demander s'il existe toujours le tuto qui a été apparemment amélioré par jam-jam68140 ? Si oui je serait très intéressé !

Merci d'avance!

Bonjour,

Essaie de lui envoyer un MP, car il a une version provisoire qui peut être utile. Il m'a dit qu'il était pas mal occupé mais qu'il espérait pouvoir continuer après.

Je lui demanderai de mon côté si je peux fournir cette version provisoire à ceux qui la demandent sur ce forum.

J'aimerais bien qu'il le publie mais il souhaite le retravailler d'abord.

Le tuto de départ est dispo ici. Je l'avais trouvé plus compliqué que celui de jamjam mais pour ce qui est de comment préparer les graphismes, il est OK.

Sinon, tu peux aussi lire cet article.

-
Edité par doudoulolita 28 juin 2015 à 22:41:16

Grâce à l'accord de jam-jam68140, je suis en train d'avancer sur une version légèrement différente de son tuto, en utilisant les graphismes de Guyana-Dream et en essayant au maximum d'utiliser des variables faciles à changer.

Je peux vous envoyer ce tuto par M-P sur demande.

A l'heure actuelle, il explique comment créer une carte, animer un perso et gérer les collisions, passer d'une carte à l'autre grâce à un événement et choisir entre 2 persos.

Mon objectif est déjà d'écrire comment arriver au même résultat que Guyana-Dream, en essayant en plus d'améliorer mon code précédent qui n'était pas forcément optimal.

Il y a encore pas mal de boulot et j'aurais bien besoin de l'aide de quelqu'un de plus compétent que moi en javascript, mais en attendant que jam-jam68140 soit un peu plus dispo, c'est déjà pas mal, non ?

Il faudra bien sût tester pour voir si le code que j'ai fait est facilement adaptable à un autre jeu et s'il ne présente pas de défaut

Retour sur la partie graphique : préparation de croquis de base pour le jaguar.

Côté tuto, je n'ai pas trop avancé dernièrement, d'autant que, en le rédigeant, j'avais revu mon code pour utiliser le principe des classes.

A cette occasion, j'avais découvert ce cours sur les objets personnalisés, qui m'a permis de mieux comprendre comment tout cela fonctionne.

Aujourd'hui, je me suis inscrite à un cours d'Openclassroom sur Jquery pour avancer sur un autre projet, pour le boulot, cela me servira peut-être pour ici.

Je n'ai pas trop avancé, ni sur le jaguar ni sur le tuto, mais la partie que j'ai déjà retravaillée peut être envoyée par MP au besoin.

Si personne n'est intéressé par le tuto, ce n'est pas super motivant pour travailler dessus...

Je continuerai dans ce cas là tranquillement mon jeu sans en parler dans ce topic, quitte à y revenir s'il y a des gens intéressés.

Haha, je suis peut-être le seul intéressé ?

Le projet m'intéresse beaucoup car ça remplacera surement mon petit jeu flash, pour l'instant j'en suis au cours HTML5, CSS3, Python et Swift donc pas encore de temps pour le Javascript :/

Si ça ne te dérange pas, continue de poster, il y a peut-être beaucoup d’intéressé muet

Merci de ton post, ça va m'encourager à progresser en javascript pour partager avec toi et d'autres.

J'espère aussi que jamjam68140 sera en mesure de retravailler dessus aussi, ne serait-ce que pour vérifier ce que j'aurai écrit.

Pas beaucoup de temps pour avancer sur le cours Jquery non plus mais j'en aurai besoin pour un autre jeu que j'ai commencé pour le boulot.

Oki Mais il n'y a pas besoin de se presser, prends ton temps

Bonjour à tous,

je profite de ce sujet pour une question corrélée.
J'ai dans les cartons un tuto sur la construction d'un moteur 3Diso en HTML 5 (canvas + js). Ça me parait une bonne base pour un jeu vidéo.

Est-ce que ça intéresse du monde ?

++

JcT

OJean-ClaudeTorrel a écrit:

Bonjour à tous,

je profite de ce sujet pour une question corrélée.
J'ai dans les cartons un tuto sur la construction d'un moteur 3Diso en HTML 5 (canvas + js). Ça me parait une bonne base pour un jeu vidéo.

Est-ce que ça intéresse du monde ?

++

JcT

Moi Oui

D'ac, c'est parti alors.

J'en ai pour quelques jours de boulot, je vous fais signe quand c'est en ligne. 

++
JcT 

Merci beaucoup et bon courage !

-
Edité par doudoulolita 8 octobre 2015 à 13:10:00

Bonjour à tous,

Je suis très intéressé par le tuto de JamJam si il est toujours possible de le recevoir? Et si le temps me le permet je vous aiderais volontiers à le compléter.

Le tuto sur la réalisation d'une carte en 3D iso m'intéresse aussi beaucoup Bon courage JC Torrel et merci beaucoup !