Partage
  • Partager sur Facebook
  • Partager sur Twitter

Canvas et le z-index

Pour un afficheur de map isométrique.

19 juillet 2011 à 15:29:05

Salut à tous :)

Je suis en train de crér un petit MMMMMPORPG isométrique :D
Pour faire original j'ai décidé de le créer avec la toute nouvelle technologie qui nous arrive avec HTML5, Canvas.

J'ai donc procédé ainsi pour dessiner ma map :


On créé un array contenant la map


[
	["1","1","1","1","1","1"],
	["1","1","1","1","1","1"],
	["1","1","1","1","1","1"],
	["1","1","1","1","1","1"],
	["1","1","1","1","1","1"],
	["1","1","1","1","1","1"]
]

(originale celle ci, non ?)

On la dessine avec Canvas


function draw_map() {
	for(x = 0;  x < map_array.length; x++) {
	  for(y = 0;  y < map_array[x].length; y++) {
	  
		var terrain = map_array[x][y];
		$("#map").draw(function(context) {
			var img = new Image();
			img.src = 'img/tiles/'+terrain+'.png';
			
			context.drawImage(img, x * tile_width, y * tile_height);
		});
	  }
	}
}




Jusqu'ici tout va bien.

Mon problème :-°


Image utilisateur
J'ai pas fait exprès de prendre des tiles Wakfu
</span> :D
Je me suis vite rendu compte en me renseignant un peu qu'il fallait une solide gestion de la superposition des tiles.

Pour cela, en HTML quand je faisais mon RPG avec des div j'utilisais le z-index. (j'avais un div pour une tile)

Avec Canvas, les éléments sont ordonnés au fur et à mesure qu'ils sont dessinés; et je ne vais certainement pas créer un canvas par tile :D
Je voudrais donc savoir si vous avez des idées pour me tirer de ce problème.

J'ai une petite piste : créer un autre array avec l'index de chaque tile, mais je ne vois pas quoi faire ensuite...


En gros, je ne vois pas comment ordonner les éléments pour leur superposition dans le Canvas.

Ceci dit, je vous serait infiniment reconnaissant pour vos idées et vos pistes. Je bloque vraiment.
Merci d'avance !

;)
  • Partager sur Facebook
  • Partager sur Twitter
19 juillet 2011 à 15:35:00

Salut,

Ca dépend du nombre de niveau que tu as. Si t'en à que 2 (en dessous et au dessus du perso), je te conseil de faire deux passages (d'abord le sol, puis les obstacles).
Le tuto est en cours mais avec un peu de patience et tu auras toutes les infos que tu voulais.

Mini-RPG avec canvas
  • Partager sur Facebook
  • Partager sur Twitter
19 juillet 2011 à 15:38:04

Hello,

alors d'abord merci beaucoup pour ta réponse.

Mais le z-index est un problème qui ne se pose pas avec des tiles carrées : en effet, aucune ne débordera sur l'autre à aucun moment...

Ce n'est pas le cas avec des tiles losange. (voir mon illustration)
J'ai donc besoin d'une infinité de couches en quelque sorte.

Des idées ? :D
  • Partager sur Facebook
  • Partager sur Twitter
19 juillet 2011 à 15:40:48

Bé si tu dessine de haut en bas, de gauche à droite, y'aura pas de problème. Sinon, c'est que j'ai pas compris ta question ^^"
  • Partager sur Facebook
  • Partager sur Twitter
19 juillet 2011 à 15:44:02

C'est sur que dessiner d'un sens à l'autre permet déjà d'avoir une gestion des index pour éviter ce problème.

Mais imagine maintenant que je veuille construire un bâtiment : il faudra a un moment ou à un autre bricoler l'index d'une tile pour avoir un rendu correct :D

Edit : une gestion de l'index côté client comme ceci : http://www.wakfufan.fr/flash/builder/
  • Partager sur Facebook
  • Partager sur Twitter
19 juillet 2011 à 15:50:59

Hum, encore une fois, ça dépend de ton bâtiment. Ce que je ferais moi, c'est, au lieu de dessiner les images à partir de leur coins haut-gauche utiliser celui bas-droite.

Toutes tes images tu les dessines en position x - Largeur et y - hauteur.
Ainsi, quand tu vas dessiner un bâtiment, il va se superposer au tiles déjà placées et suivantes seront en dessous.
  • Partager sur Facebook
  • Partager sur Twitter
19 juillet 2011 à 15:53:56

:) Super, je n'avais pas vraiment pensé à changer l'ordre de placement !
L'isométrique je m'y fais pas...

Merci beaucoup NoseborN.

Je reste cependant à l'affut de réponses supplémentaires :p
  • Partager sur Facebook
  • Partager sur Twitter
19 juillet 2011 à 22:05:33

Personnellement j'utilise un système de couche pour mon jeu (qui n'est par contre pas isométrique). Ainsi je dessine mes couches les unes après les autres (sol, objet, personnages etc.). Par défaut quand tu dessine un truc, celui-ci va par dessus les autres trucs déjà dessiné mais tu peu modifié ça : lien.

Si ça t'aide tu me paye un kiwi ? Image utilisateur
  • Partager sur Facebook
  • Partager sur Twitter
Mon Twitter : @Amatewasu
20 juillet 2011 à 9:53:04

Salut,

En effet, j'utilise moi aussi ce petit système de couches, évidemment je dessine les personnages après les tiles.
Mais mon problème ne se pose que pour la couche des tiles : pour avoir un éditeur de tiles à couches, il faut d'une part que l'index de la tile soit stockée dans ma base de donnés et d'autre part que le client JS puisse restituer l'ordre.

Or, les tiles se créent dans une boucle. Comment pourrais-je alors tenir compte de l'index ?

C'est juste un problème de pure logique pourtant ^^
J'ai pensé à faire un array index en plus de celui des terrains, mais je ne vois VRAIMENT pas comment le mettre en place :(


P.S: ton kiwi, Amatewasu
  • Partager sur Facebook
  • Partager sur Twitter
26 septembre 2021 à 19:47:49

Salut, pour mettre à jour les objets par z-index d'un tableau, il te suffit de trier ton tableau avant par ordre du z-index le plus petit, jusqu'au plus grand :)
  • Partager sur Facebook
  • Partager sur Twitter
26 septembre 2021 à 20:18:57

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)