1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| var sols_unis=new Image(); // On déclare un nouveau objet image..
sols_unis.onload=function(){ // Une fonction de l'image qui va lancer la fonction de dessin dés que l'image sera bien chargée en mémoire.
sols(sols_unis); // La fonction de dessin du terrain.
}
sols_unis.src="img/sols/sols_unis.png"; // L'image qui contient les différents sols du terrain, elle se charge ici..
// Ici c'est le terrain à dessiner, le 0 représente un type de sol et le 1 un autre type de sol. On choisit quel type de sol dans la fonction de dessin.
var monde=[
"00000000",
"11100000",
"11000000",
"11100000",
"00000000"
];
// La fonction de dessin. On va lui passer en paramètre l'image qui contient tous les sols, c'est un tileset (ou spritesheet c'est selon).
function sols(img){
var i=0;
let car;
let imgnum=0;
let sy=0; let sx=0; let dx=0; let dy=0; let dwidth=0; let dheight=0;
// Lit le terrain "monde" et utilisera lig pour la ligne et i pour la colonne du terrain.
for (lig=0; lig<monde.length; lig++){
let ligne=monde[lig];
console.log("ligne :"+ligne);
for(i=0; i<8; i++){
car=ligne.charAt(i); // ici la variable "car" lira chaque caractère de la ligne de caractères "ligne".
if(car=="0"){ // ici on teste si le caractère lu est un 0, si oui on choisit l'image numéro 3 du tileset, numéro qu'on met dans la variable imgNum.
// Choisit l'image voulue.
imgnum=3;
sx=imgnum*64; sy=0; // SX est la position X de l'image de sol numéro 3. et SY c'est sa position Y. (Source X et Source Y).
// C'est multiplié par 64 car chaque image de sol fait 64x64 pixels.
}
if(car=="1"){ // On teste un autre caractère pour avoir un autre type de sol. comme précédement. Cette fois le sol numéro 1.
//
imgnum=1;
sx=imgnum*64; sy=0;
}
dwidth=64; dheight=64; // Largeur et hauteur de l'image de sol à dessiner (64x64).
dx=200+(i*64); dy=200+(lig*64); // ici 200 pour X et 200 pour Y, c'est seulement la position ou je commence à positionner le terrain sur l'écran.(on le changera)
ctx2.drawImage(sols_unis,sx,sy,64,64,dx,dy,dwidth,dheight); // L'instruction qui dessine le sol sur le canvas.
}
}
} |
Dessiner un terrain via un tableau de caractères
Répondre avec citation
Partager