10 réponses à ce sujet

[nicolas.gauville]

Bonjour à tous,
Je présente donc le chapitre 4 : la classe Map, du tuto sur les jeux isométriques en HTML5 et JavaScript.
Il est disponible ici : Chapitre 4

J'attends vos retours

[Badwolf]

Hello juste une petite remarque sur :

var index = this.tiles.indexOf ( $tile );
 

et plus particulièrement sur l'utilisation de "indexOf" sur des Array, Internet Explorer (ie <= 8) ne supporte pas la fonction indexOf sur les arrays.
donc il faudrait préciser de redéfinir cette fonction :

        if(!Array.indexOf){
        Array.prototype.indexOf = function(obj){
                for(var i=0; i<this.length; i++){
                        if(this[i]==obj){
                                return i;
                        }
                }
                return -1;
         }
        }
 

ou bien utliser la fonction de jquery (par exemple) : $.inArray();

sinon bon tuto, bien commenté, continue comme ca

[nicolas.gauville]

Oui en effet, j'avais hésité à le faire, mais tu as raison : c'est ajouté en remarque, à la fin de la partie sur la méthode "removeTile" .
Merci à toi

[Badwolf]

enfin d'un autre coté, faire fonctionner createJS avec ie8 ou inférieure c'est une telle galère...

même avec les librairies excanvas ou fxcanvas , c'est très compliqué de mixer les deux.

[nicolas.gauville]

Oui.
D'ailleurs globalement, faire quelque chose de bien en HTML/JS/CSS pour les anciennes versions d'IE, c'est un cauchemar. Pour mes projets personnels, j'ai arrêté, j'ai passé des années à faire des patchs pour IE, sachant que certains bugs ne se produisent que sur une version précise (6/7/8 ou parfois 9), qu'en plus de ça on ne peu pas avoir IE sur mac, pas avoir IE9 sur XP, ... et on finit par se rendre compte qu'on à plus de 60% du code d'un projet qui concerne uniquement IE...

Après, c'est toujours bien d'indiquer les méthodes comme celles là, pour ceux qui sont encore courageux

[nicolas.gauville]

Je viens de me rendre compte d'une belle erreur de ma part dans le tuto. J'ai corrigé, mais je le signale quand même pour ceux qui l'ont déjà lu.

Il s'agit de l'utilisation de la méthode splice : la méthode splice permet d'extraire une partie d'un tableau. La partie extraite est donc renvoyée par la méthode splice, et enlevée du tableau initial. Du coup, l'utilisation de cette méthode dans la fonction "removeTile" était fausse :
J'ai affecté la partie extraite (donc la tuile à supprimer) :

this.tiles = this.tiles.splice ( index, 1 );
 

Alors qu'il fallait garder le reste, et donc simplement :

this.tiles.splice ( index, 1 );
 

Désolé pour l'erreur :$

[Badwolf]

A priori ça ne bloquait pas le fonctionnement du projet.

[nicolas.gauville]

Dans le chapitre là, non (c'est d'ailleurs pour ça que je ne m'en suis pas rendu compte).

Dans le chapitre 7 par contre (que je viens de terminer), le jeu ne marche pas sans ce correctif

[larson72]

Bonjour,

D'abords merci pour ce tuto qui est très bien fait.

Je ne connais pas très bien le language javascript mais je suis surpris sur la manière dont vous stockez les tiles dans l'objet maps.
Pourquoi ne pas utiliser un tableau à 3 dimensions (x,y,z) correspondant aux coordonnées des tiles?

Cela permettrai par exemple d'améliorier les performance de la méthode getTileAt qui serait du coup beacoup plus simple et surtout sans boucle?

[cestlahas]

Bonjour,

Tout d'abord, merci pour ce formidable tuto.
Ma question: je n'arrive pas à mettre une tuile en PNG.
J'utilise ce code pour générer ma tuile sur gfx.js et la rajouter sur la map sur core.js.

gfx.t1 = function ()
{
            img = new Image();
            img.src = "t1.png";
            img.onload = drawBitmap;     
            function drawBitmap()
            {
                            this.gfx = new createjs.Bitmap(img);
                            return this.gfx;
            }
};
 

myMap.addTile ( new Tile ( TileType.PNG, gfx.t1, false ), i, j, 0 );
 

Quelqu'un peut-il éclairer ma lanterne sur où est mon erreur ?

Merci d'avance.

[nicolas.gauville]

Salut,
C'est vrai que le chargement d'images n'est pas totalement abordé dans le tuto.

Pour trouver une erreur, en général, reporte toi à la console de ton navigateur (Google Chrome en fournit une très complète), qui te donnera en général la source de l'erreur de manière assez précise, tu pourras également utiliser la documentation de CreateJS en complément.

Une bonne idée aussi pourra être d'utiliser la bibliothèque "PreloadJS" de CreateJS, qui gèrera mieux le chargement de ton image. Si tu ne trouve pas, je pourrai essayer de te donner un exemple de préchargement d'image pour ce type d'utilisation.