Discussion :

[Xpiz71]

Bonjour,

je programmais un moteur 2D iso, et le code étant plus que brouillon, j'ai décidé de tout refaire.

La fonction qui affichait les tiles semble ne plus fonctionner, pourtant copier à l'identique de l'ancien moteur. De plus après plusieurs test, toutes les variables sont disponibles avec les bonnes informations et les fichiers à leur bonne place.
Le canvas se redimensionne, mais ne m'affiche pas ma map. Je ne comprends pas.

Voici le code, merci d'avance si vous trouver le problème, moi je sèche...

Le main :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
window.onload = function() {
	var view = new SCENE();
 
//  Map creation:
	view.newObjectFromJSON("MAP", "Class/Maps/testMap.json");
	view.resizeCanvasFrom(0);
	view.displayObject(0);
}

SCENE.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
function SCENE()
{
	this.canvas = document.getElementById('canvas');
    this.ctx = canvas.getContext('2d');
 
	this.objects = new Array();
}
 
SCENE.prototype.newObject = function(pattern, size, tileSize, coords, src)
{
	this.objects.push(new OBJECT(pattern, size, tileSize, coords, src));
}
 
SCENE.prototype.newObjectFromJSON = function(pattern, src)
{
	var xhr = getXMLHttpRequest();
	var src = src;
 
	switch(pattern)
	{
		case "MAP":
			xhr.open("GET", src, false);
			xhr.send(null);
 
			if(xhr.readyState != 4 || (xhr.status != 200 && xhr.status != 0)){ // this.xhr :: CODE 0 == LOCAL
				throw new Error("Error loading map \"" + src + "\" (HTTP CODE :: " + xhr.status + ").");}
 
				var tempData = xhr.responseText;
				var data = JSON.parse(tempData);
 
			var size = new Array();
			size.push(data.size[0]);
			size.push(data.size[1]);
 
			var coords = new Array();
			coords.push(data.size[0]);
			coords.push(data.size[1]);
 
			var tilesetSRC = data.tileset;
			this.objects.push(new OBJECT(pattern, size, data.tileSize, coords, tilesetSRC, data.field));
			break;
	}
}
 
SCENE.prototype.resizeCanvasFrom = function(ID)
{
	if(this.objects[ID].pattern == "MAP"){
		this.canvas.width = this.objects[ID].size[0];
		this.canvas.height = this.objects[ID].size[1];}
	else{
		alert('You can not resize Canvas from [' + this.objects[ID] + '] type OBJECT !');}
}
 
SCENE.prototype.moveObject = function(ID, coords)
{
	this.objects[ID].coords = coords;
}
 
SCENE.prototype.resizeObject = function(ID, size)
{
	this.objects[ID].size = size;
}
 
SCENE.prototype.resizeObjectTiles = function(ID, size)
{
	this.objects[ID].tileSize = tileSize;
}
 
SCENE.prototype.displayObject = function(ID)
{
	var object = this.objects[ID];
 
	switch(object.pattern)
	{
		case "MAP":
			var tilesCoords = new Array();
			var tempTileset = new Tileset(object.image, object.tileSize[0], object.tileSize[1]);
			var z = 0;
 
			var lines = object.data;
			for(J = 0; J < lines.length; J++)
			{
				for(I = 0; I < lines[J].length; I++)
				{
//					if(lines[J][I] == 2){ z = 2; } for example
					tempTileset.Draw(lines[J][I], this.ctx, convertToRealCoords(J, I, z, object.tileSize)[0], convertToRealCoords(J, I, z, object.tileSize)[1]);
				}
			}
			break;
 
		case "BUILDING":
//			...
			break;
	}
}
 
SCENE.prototype.animeObject = function(animation, object, coords) //destination's coordinates.
{
	switch(animation)
	{
		case "MOVE":
			// ...
			break;
	}
}

OBJECT.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function OBJECT(pattern, size, tileSize, coords, src, data)
{
	this.pattern = pattern;	
 
	this.size = size;
	this.tileSize = tileSize;
	this.coords = coords;
 
	this.image = new Image();
	this.image.onload = function() {
		if(!this.complete)
			throw new Error("Tileset loading error : '" + imgSrc + "'.");
	}
	this.image.src = src[0] + '/' + src[1] + '/' + src[2];
 
	if(typeof(data)){ this.data = data;}
}

Tileset.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Tileset(image, w, h)
{
	this.image = image;
	this.tile_w = w;
	this.tile_h = h;
}
 
Tileset.prototype.Draw = function(num, ctx, xDestination, yDestination){
	var xst = num % this.tile_w;
	if(xst == 0) xst = this.tile_w;
 
	var yst = Math.ceil(num / this.tile_w);
 
	var xSource = (xst - 1) * this.tile_w;
	var ySource = (yst - 1) * this.tile_h;
	ctx.drawImage(this.image, xSource, ySource, this.tile_w, this.tile_h, xDestination, yDestination, this.tile_w, this.tile_h);
}

Et la fonction pour convertir en coordonnées réels les coordonnées iso(fonctionnelle, la formule et les calcul viennent d'un tuto que je ne retrouve plus):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
convertToRealCoords = function(J, I, tileSize)
{
	var realCoords = new Array();
 
	var X = (J - I) * ( tileSize[0] / 2 );
	var Y = (J + I) * ( tileSize[1] / 2 );
 
	realCoords.push(X);
	realCoords.push(Y);
 
	return realCoords;
}

Le fichier de map :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
{
	"tileSize" : [32, 32],
	"size" : [160, 160],
	"field" : 
	[
		[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]
	],
	"tileset" :  "Class/img/chipsets/basics.png"
}

Le seul message d'erreur que j'ai, et que je traîne depuis un moment car il n'avait aucune incidence sur le bon fonctionnement :

GET http://localhost/v01/C/l/a 404 (Not Found)

Mais je n'ai jamais entrer une telle url et j'ai pourtant verifié toutes les url que j'ai entré.

Désolé par avance si mon code est un peu bizarre où mal construit, je débute totalement dans ce langage xD .