Bonjour,

mon objectif est d'obtenir un rendu efficace d'une grande image (l'image en question est une sorte de map, je souhaite obtenir le rendu le plus fluide possible), l'image se translatera lors de la navigation de l'utilisateur. Mon serveur envoie des chunks (morceaux de cette image 512x512, ces morceaux peuvent potentiellement être modifiés plus tard...) et je dois les afficher dans la page HTML. Mais je ne sais pas quelle est la solution la mieux adaptée pour résoudre mon problème. J'ai pensé à plusieurs solutions:

Solution 1 :

Avoir un seul canvas, et faire le rendu des chunks visible à chaque frame de déplacement... (i.e. appelé drawImage à chaque frame de déplacement pour chaque chunk visible)

• Avantage : un seul élément canvas
• Inconvénient : appel de drawImage pour chaque chunk visible à chaque frame de déplacement (impact sur la fluidité du rendu)

Solution 2 :

Je crée un div nommé "tiledCanvasDiv", qui est parent de 256 canvas. Dans ces canvas j'affiche un chunk. Lorsque l'utilisateur déplacera l'image, je ferais translater le div parent "tiledCanvasDiv". Ainsi, les X chunks se déplacera sans appelé imageDraw dans chacun.

Voilà mon code :

var $ = require('jquery');

/*
x : screen pos x
y : screen pos y
*/
function View(x, y){
	this.x = x;
	this.y = y;
}
View.prototype.setPos = function(x, y){
	this.x = x;
	this.y = y;
}
View.prototype.getPos = function(){
	return {x: this.x, y: this.y};
}
View.prototype.center = function(){
	this.x = 0;
	this.y = 0;
	this.updateView();
}
View.prototype.updateView = function(){
	View.jTiledCanvasDiv.css('transform', 'translateX('+(-this.x+View.jWin.width()/2)+'px) translateY('+(-this.y+View.jWin.height()/2)+'px)');
}
View.jTiledCanvasDiv = $('#tiledCanvasDiv');
View.jWin = $(window);

module.exports = View;

 D'après ce que j'ai compris :

• Avantage : 1 imageDraw par chunk
• Inconvénient : 256 éléments canvas dans mon div

J'aimerais bien ne pas avoir à appelé drawImage pour chaque chunk tout en gardant un nombre d'éléments canvas raisonnable (1 seul serait bien).

Question :

Comment faire en sorte de :

- d'appelé drawImage pour chaque chunk 1 fois

- avoir un seul élément canvas

Merci d'avance pour vos réponses ! 

-
Edité par R1_9 16 juin 2018 à 19:36:58

Bonjour,

Mauvais forum

Le sujet est déplacé dans le forum approprié : JavaScript

Alors pour le rendu c'est mieux d'utiliser un canvas, pour ce qui est de ton mapping y'a un problème là : 512x512 c'est beaucoup, si t'es obligé de télécharger des images de cette taille là (j'imagine le poids qui va avec), peu d'utilisateurs auront une expérience fluide.

Le mieux serait d'utiliser un tileset, de charger les patterns de tes chunks (en gros 1 case c'est de l'herbe, 1 autre c'est ça, etc.) et ensuite le serveur renvoie le tableau des numéros sur un chunk. L'avantage c'est que le graphique sera chargé une seule fois.

Niveau code t'as le choix : Selon ton déplacement tu peux regarder la limite de tes tileset (puisque y'aura un moment où ta caméra va déborder), si t'as rien chargé, tu envoies au serveur une requête pour récupérer les tableaux selon le chunk que tu appelles, et le serveur te renvoie ça et tu stockes en mémoire jusqu'à ne plus être dans une zone où tu aurais un intérêt de le garder en mémoire (exemple: Tu es à 3 chunks de là où tu étais avant, tu peux supprimer le tableau de chunk pour garder une mémoire à peu près potable)