Forums Développement Multimédia

Aller au contenu

- - - - -

[HTML5/JS] Jeux à base de tuiles [4]

html5 javascript isométrie map TUTO

10 réponses à ce sujet

#1 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 13 August 2012 - 13:35 PM

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 ;)

#2 Badwolf

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 667 messages

Posté 16 August 2012 - 10:11 AM

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 ;)
Haoooooooooooooooooooooooooooooooooooooooooooooou !!!

#3 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 16 August 2012 - 18:11 PM

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 ;)

#4 Badwolf

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 667 messages

Posté 16 August 2012 - 18:17 PM

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.
Haoooooooooooooooooooooooooooooooooooooooooooooou !!!

#5 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 16 August 2012 - 18:42 PM

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 ;)

#6 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 20 August 2012 - 17:01 PM

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 :$

#7 Badwolf

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 667 messages

Posté 20 August 2012 - 19:26 PM

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

#8 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 20 August 2012 - 20:35 PM

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 ;)

#9 larson72

    Ceinture Blanche

  • Members
  • Pip
  • 2 messages

Posté 12 October 2012 - 21:40 PM

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?

#10 cestlahas

    Ceinture Blanche

  • Members
  • Pip
  • 1 messages

Posté 24 May 2013 - 16:43 PM

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.

#11 nicolas.gauville

    Ceinture Noire

  • Moderateur
  • PipPipPipPipPipPipPip
  • 238 messages

Posté 26 May 2013 - 23:04 PM

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.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP