Bonsoir à tous !

J'utilise le framework Crafty.js dans le but de créer un jeu isométrique mais je suis confronté à un problème.

Comme vous pouvez le voir ici :

https://gamesdev.ihoster.fr/crafty/

Lorsque vous déplacez la souris sur la page, l'immeuble est censé suivre la souris pour se positionner sur les cases isométriques définies par Crafty, mais le déplacement n'est pas "fluide" et il y a de nombreux "sauts". Sauriez-vous comment résoudre ce problème ?

var sizeGrid = 70;

Crafty.init(900,800, document.getElementById('game'));
Crafty.multitouch(true);

Crafty.sprite(128, "building.png", {
	immeuble: [0,0,1,1]
});

Crafty.sprite(128, "hotel.png", {
	hotel: [0,0,1,1]
});

iso = Crafty.isometric.size(sizeGrid);

poly = new Crafty.polygon([28, 107,  63, 128,  98, 107, 63, 86]);

var immeuble = Crafty.e("2D, Canvas, immeuble, Collision, WiredHitBox, Obstacle")
.collision(poly)
.checkHits('Obstacle')
.bind("HitOn", function(hitData) {
     Crafty.log("Collision with Solid entity occurred for the first time.");
 })
 .bind("HitOff", function(comp) {
     Crafty.log("Collision with Solid entity ended.");
 });


var hotel = Crafty.e("2D, Canvas, hotel, WiredHitBox, Obstacle, Collision");

iso.place(0,5,0, immeuble);
//iso.place(0,5,0, hotel);

Crafty.bind("MouseWheelScroll", function(evt) {
    Crafty.viewport.scale(Crafty.viewport._scale * (1 + evt.direction * 0.1));
});

Crafty.s('Mouse').bind("MouseMove", function(evt) {

	position = iso.px2pos(evt.clientX,evt.clientY-128);
	console.log(Math.floor(position.y));
	iso.place(position.x-1,Math.floor(position.y)+1,0, immeuble);

});

Crafty.addEvent(this, Crafty.stage.elem, "mousedown", function(e) {
	if(e.button > 1) return;
	var base = {x: e.clientX, y: e.clientY};

	function scroll(e) {
		var dx = base.x - e.clientX,
			dy = base.y - e.clientY;
			base = {x: e.clientX, y: e.clientY};
		Crafty.viewport.x -= dx;
		Crafty.viewport.y -= dy;
	};

	Crafty.addEvent(this, Crafty.stage.elem, "mousemove", scroll);
	Crafty.addEvent(this, Crafty.stage.elem, "mouseup", function() {
		Crafty.removeEvent(this, Crafty.stage.elem, "mousemove", scroll);
	});
});

Je vous remercie !

-
Edité par alantheo 25 mars 2019 à 23:11:42

Bonjour,

Augmente la taille de ta grille. Plus tu auras de cases, plus le mouvement auras l'air fluide. Si c'est un problème de perf, vire les logs.

piero5673 a écrit:

Bonjour,

Augmente la taille de ta grille. Plus tu auras de cases, plus le mouvement auras l'air fluide. Si c'est un problème de perf, vire les logs.

En faite,

var sizeGrid = 70;

.. représente la taille des cases de la grille (donc 70x70), et non la taille de la grille

-
Edité par alantheo 26 mars 2019 à 16:22:48

Et si tu fais des cases deux fois plus petites, tu en as pas 4 fois plus =) ?

piero5673 a écrit:

Et si tu fais des cases deux fois plus petites, tu en as pas 4 fois plus =) ?

Je viens de mettre à jour le code mais ça ne change rien

https://gamesdev.ihoster.fr/crafty/

En faite je pense que quand je suis au centre de deux cases il suffit de quelques pixels pour que ça change de case, alors que je pense qu'il faudrait un système de "marge". Je ne sais pas si c'est clair

Oui, c'est clair, il faut que tu calcule les marges dans ton listener dans ce cas. Tu as un petit problème avec le zoom. Une amélioration possible pour rendre l'aspect plus fluide : sort l’hôtel du canvas, met le dans une div en dessous (dans le DOM), comme ça tu peux le drag en tant qu'élément html. Ensuite tu peux mettre en surbrillance les cases du canvas sur lesquelles tu vas poser ton hôtel.

piero5673 a écrit:

Ensuite tu peux mettre en surbrillance les cases du canvas sur lesquelles tu vas poser ton hôtel.

Mais du coup il n'y aura pas de "placement automatique" et l'utilisateur pourra le placer n'importe où ?

Et surtout je ne sais pas comment gérer les marges

-
Edité par alantheo 26 mars 2019 à 21:51:00

 Pour la partie drag avec html c'est juste du design. Au lieu d'aller mettre l'objet draggable dans crafty tu le met dans en dehors, et une fois que la position est validée tu le met dans crafty (ça ne t’empêche pas de bloquer certains endroit pour le placement). Regarde comment sont placés les bâtiments dans les rts comme aoe, starcraft, warcraft.

Pour les marges, deux options. Soit tu te passe de crafty et tu fais tout tout seul (je n'ai pas vu d'option pour créer des marges dans crafty). Soit tu te base sur la position de la souris et les cases déjà présentes (tu peux les avoir avec la méthode area()) et tu créer tes margins programmatiquement (si la souris est dans le margin, tu ne fais rien).