Discussion :

[yaniss321]

Bonjour,

Actuellement je tente de développer un petit jeu en html5 js (librairie easelJS) et me heurte à un souci qui me bloque complêtement

J'ai une ligne composé de différents sprites : chaque sprite étant enregistré dans la matrice du jeu.


je souhaite bouger cette ligne de droite à gauche et faire en sorte que lorsque le sprite sorte à droite, il apparaisse à gauche.
bien sur, que ces sprites soient enregistrés dans la matrice.

J'ai pensé à : si le les coordonnées d'un sprite dépasse de peu la limite, je le clone, enregistre dans un tableau temporaire, et le place derrière le tout premier (et du coup je fais bouger le nouveau avec le reste).

si le sprite dépasse completement la limite, je le fait disparaitre, le supprime de la matrice et remplace par le nouveau.

Je ne sais pas si c'est la meilleure méthode (à savoir que je dois régulièrement recalculer la matrice en fonction des nouvelles coordonnées des sprites)

je vous envoie une partie du code source et dites moi si vous n'avez rien compris de la problématique
ah dernier détail : je bouge la ligne de droite a gauche en mode drag and drop

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
           function init() {
            //stage property's
            canvas = document.getElementById("demoCanvas");
            stage = new createjs.Stage(canvas);
            stage_X = 120;
            stage_Y = 120;
            stage_width = 600;
            stage_height = 420;
            //;
            //charge tous les éléments
            content = new ContentManager();
            content.SetDownloadCompleted(startGame);
            content.StartDownload();
            stage.update();
 
 
        }
 
        function startGame() {
            //on charge les niveau indépendament
 
            initLevel();
            placerSprite();
            placerbloquage();
            createjs.Ticker.addListener(window);
            stage.update();
        }
 
        function initLevel() {
            var shape = new createjs.Shape();
            shape.graphics.beginFill("white").drawRect(stage_X, stage_Y, stage_width, stage_height);
            stage.addChild(shape);
            constructWord();
        }
 
        function placerbloquage() {
            var shape = new createjs.Shape();
            /*shape.graphics.beginFill("purple").drawRect(stage_X - 100, stage_Y, 100, stage_height);
            stage.addChild(shape);
            shape = new createjs.Shape();
            shape.graphics.beginFill("purple").drawRect(stage_X + stage_width, stage_Y, 100, stage_height);
            stage.addChild(shape);            */
        }
 
        var tpArray;
        function constructWord() {
            var Ar1 = new Array(1, 2, 1, 1, 3, 2, 3, 2, 3, 5);
            var Ar2 = new Array(2, 3, 6, 5, 3, 2, 5, 4, 2, 1);
            var Ar3 = new Array(6, 5, 4, 2, 1, 3, 3, 2, 3, 5);
            var Ar4 = new Array(5, 5, 2, 2, 1, 5, 5, 4, 2, 1);
            var Ar5 = new Array(1, 1, 2, 1, 3, 3, 3, 2, 3, 5);
            var Ar6 = new Array(1, 3, 3, 2, 3, 5, 3, 2, 3, 5);
            tpArray = new Array(Ar1, Ar2, Ar3, Ar4, Ar5, Ar6);
        }
 
        function placerSprite() {
            var z;
            var tp;
            for (var i = 0; i < 6; i++) {
                tp = new Array();
                for (var j = 0; j< tpArray[i].length ; j++) {
                    z = tpArray[i][j];
                    switch (z) {
                        case 6:
                            cakeSpr = new cakeSprite("tartechoco", content.cakeF, 6);
                            break;
                        case 1:
                            cakeSpr = new cakeSprite("brownie", content.cakeA, 1);
                            break;
                        case 2:
                            cakeSpr = new cakeSprite("cakerose", content.cakeB, 2);
                            break;
                        case 3:
                            cakeSpr = new cakeSprite("gateaumoche", content.cakeC, 3);
                            break;
                        case 4:
                            cakeSpr = new cakeSprite("magnum", content.cakeD, 4);
                            break;
                        case 5:
                            cakeSpr = new cakeSprite("petiteglace", content.cakeE, 5);
                            break;
                    }
                    cakeSpr.y = i * 60 + stage_Y;
                    cakeSpr.x = j * 60 + stage_X;
                    tp[j] = cakeSpr;
                    //cakeSpr.addEventListener("click", onclick);
                    cakeSpr.addEventListener("mousedown", onmousedown);
                    stage.addChild(cakeSpr);
                }
                stage_Array[i] = tp;                
            }
 
        }
 
 
        /////////////////////// MOUSE EVENTS ////////////////////////////////////////////////////
        var offset;
        var tYy;
        var tY
        var choppe = false;
        /* func */
        function onmousedown(ev) {
                offset = { x: ev.target.x - ev.stageX, y: ev.target.y - ev.stageY };
                tYy = ev.stageY;
 
                //we call mouse handlers (move and up)                
                ev.addEventListener("mousemove", onmousemove);
                ev.addEventListener("mouseup", onmouseup);
        }
 
        /* func */
        var arrTemp = [null, null];
        function onmousemove(evt) {
            var locSprite;
 
            var oldx = evt.target.x;
            var mX = evt.stageX + offset.x;
            if (mX < stage_X)
                mX = stage_X;
            if (mX > stage_X + stage_width)
                mX = stage_width + stage_X;
            var ind = Math.floor(mX / 62);
            tY = Math.floor(tYy / 60) - 2;
            evt.target.x = mX;
            dec = evt.target.x - oldx;
 
            //MAJ de l'array
 
            for (var i = 0; i < stage_Array[tY].length  ; i++) {
                if (stage_Array[tY][i] != null && stage_Array[tY][i] != evt.target)
                    stage_Array[tY][i].x += dec;
 
                //depassement de limite droite
                if (stage_Array[tY][i].x + 60 > stage_width + stage_X) {
                    if (arrTemp[0] == null) {
                        locSprite = stage_Array[tY][i].clone();
                        locSprite.x = stage_X - 60;
                        arrTemp[0] = locSprite;
                        stage.addChild(locSprite);
                    }
                    if (stage_Array[tY][i].x + 60 >= stage_width + stage_X + 60) {
                        stage.removeChild(stage_Array[tY][i]);                        
                        arrTemp[0] = null;
                    }
                    if (arrTemp[0] != null)
                        arrTemp[0].x += dec;
 
                }
 
                //dépassement de limite gauche
                if (stage_Array[tY][i].x < stage_X)
                    stage_Array[tY][i].x = stage_width + stage_X - 60;
            }
            stage.update();            
        }
 
 
        /* func */
        function onmouseup(evt) {
            var ef = 0;
            var et;
            var dc = -1
            var ex = Math.floor(stage_Array[tY][0].x / 60) * 60;
            if (ex + 60 - stage_Array[tY][0].x < stage_Array[tY][0].x - ex) {
                et = ex + 60 - stage_Array[tY][0].x;
                dc = 1
            }
            else
                et = stage_Array[tY][0].x - ex;            
            while (ef < et) {
                for (var i = 0; i < stage_Array[tY].length; i++) {
                    stage_Array[tY][i].x += dc;
                    stage.update();
                }
                ef++;
            }
            //testOneLine(tY);
        }

[Kannagi]

Les langages Web c'est pas mon rayon , et en ayant relu plusieurs fois ton message tu veux juste qu'on te dise si ta méthode est bonne ?

Je ne sais pas si c'est la meilleure méthode (à savoir que je dois régulièrement recalculer la matrice en fonction des nouvelles coordonnées des sprites)

Je dirais oui tu dois la recalculer mais si tu fais une fonction , ben ta fonction la recalcule automatiquement.

[yaniss321]

Et bien en fait ma question simplifiée (en tenant compte du code source) est mon algorithme est elle, d'après vous, la bonne?

[plegat]

Salut,

Et bien en fait ma question simplifiée (en tenant compte du code source) est mon algorithme est elle, d'après vous, la bonne?

Si ça fonctionne comme tu veux, c'est que c'est bon...

Si tu poses la question, c'est que ce n'est pas bon...

Tu parles d'un "soucis qui te bloque complètement" au début de ton post, et tu n'en parles pas ensuite...

Donc c'est quoi qui ne fonctionne pas comme tu veux?

[yaniss321]

Effectivement je n'ai pas parlé du problème
en fait une fois qu'un sprite dépasse à droite, elle réapparait à gauche mais ne suis pas les autres à la même vitesse (et des fois disparait même durant le mouvement.

[LittleWhite]

Bonjour,

Peut on voir la page en live, pour voir le problème nous même ?

[Mat.M]

je souhaite bouger cette ligne de droite à gauche et faire en sorte que lorsque le sprite sorte à droite, il apparaisse à gauche.
bien sur, que ces sprites soient enregistrés dans la matrice.

c'est une sorte de Space Invaders que tu veux faire ?
La logique est assez simple je dirais même ultra simple
1-créer des entités /classes de sprites , les initialiser au lancement du jeu avec une boucle qui va leur donner une position de départ

Code :

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

1
2
3
4
5
6
classe sprite
debut classe
position_X : entier
position_Y : entier
pointeur_image : entier
fin classe

2 mettre toutes les entités dans une liste -conteneur qui va mémoriser chaque sprite
3 initialiser un compteur de temps qui va mesurer le temps à intervalles réguliers en millisecondes
4 à chaque delta de temps on déplace les sprites et on regarde leur position
SI la position est supérieure à un certain seuil à droite de l'écran alors on décale le sprite à la position gauche de départ + décalage vers le bas

J'ai pensé à : si le les coordonnées d'un sprite dépasse de peu la limite, je le clone, enregistre dans un tableau temporaire, et le place derrière le tout premier (et du coup je fais bouger le nouveau avec le reste).

non il faut utiliser soit un tableau statique de n sprites soit une liste dynamique ( je ne sais pas comment on fait en Javascript )

[noobjava]

Mat >

En javascript on fait du object pooling, parce que le garbage collector est complètement foireux.

Yaniss >

J'ai rien compris à ton approche... ça m'a l'air bien compliqué tout ça.

Tracer un sprite en javascript ça se fait bêtement avec la fonction de blit drawImage(), et puis c'est tout, y'a rien d'autre à faire... en plus là t'es en rendu software donc tu n'as pas besoin de t'embêter avec une spriteram, quand on fait une liste d'objets sprite c'est pour optimiser la routine graphique en rendu hardware.

------------------------------
edit: eureka, je crois que ton problème vient de l'erreur de débutant qui consiste à faire la confusion entre les objets logiques (gâteaux) et les entités graphiques (sprites)

en fait on sépare les deux, un objet peut être affiché avec plusieurs sprites comme être invisible, donc il faut pas confondre les deux. un sprite n'est pas un objet mais un bête appel de tracé d'image.


En rendu software:

- phase 1: routine logique. Tes objets, se génèrent/détruisent, bougent, s'entrechoquent, définissent qui est visible et qui l'est pas etc.

- phase 2: routine graphique. On parcourt tous les objets visibles, et selon leur état, on trace les X sprites adéquats pour chaque objet. si ton objet est à cheval sur les bords de l'ecran, tu vas donc tracer deux sprites au lieu d'un

En rendu hardware (pour la culture si jamais tu veux faire du webgl):

- phase1: routine logique (ça ne change rien)

- phase 2: au lieu de tracer directement les sprites, on met à jour un buffer appelé spriteram qui encode de la façon la plus simple possible les infos necessaires pour tracer chaque sprite (index de tile, x, y, flipx, flipy, etc). il faut théoriquement définir un nombre sprites limite pour éviter de recréer un tableau à chaque frame, mais je suis pas sûr qu'en javascript ça soit obligatoire

- phase 3: routine graphique, on lit la spriteram et on trace les sprites

------------------------------------
edit 2: ça me semble important à préciser aussi pour un débutant... contrairement à ce que laisse croire sa syntaxe, le javascript n'est pas un langage de classes d'objet comme le java ou le C++. il n'y a pas toutes les contraintes de la poo avec du public private static et tout le tralala

Le javascript est un langage procédural, en javascript tout est "objet" certes (même les nombres et les fonctions) mais ce qu'on appelle "objets" en javascript c'est beaucoup plus simple que les objets de la poo, c'est l'équivalent des struct en C, en plus souple. (on peut tout à fait s'en servir pour reproduire le système compliqué des classes d'objet, mais ça n'est pas obligatoire, surtout pour un débutant, avant d'attaquer les concepts compliqués de la poo il faut déjà maîtriser le procédural)

Il faut raisonner en procédural, ça va simplifier tous les problèmes.

[yaniss321]

Bonjour à tous,

Je viens juste de voir vos réponses ayant abondonné l'idée de html5/javascript pour finalement le développer avec C# Monogame.

Je vous remercie sincèrement pour toutes vos réponses.

En rendu software:

- phase 1: routine logique. Tes objets, se génèrent/détruisent, bougent, s'entrechoquent, définissent qui est visible et qui l'est pas etc.

- phase 2: routine graphique. On parcourt tous les objets visibles, et selon leur état, on trace les X sprites adéquats pour chaque objet. si ton objet est à cheval sur les bords de l'ecran, tu vas donc tracer deux sprites au lieu d'un

Merci beaucoup pour la phase 2!!! je n'avais pas du tout penser à tracer deux sprites!!! je vais tenter cette logique. si je bloque à nouveau