Journal de la création d'un RTS en HTML5

Version imprimable

1 pièce(s) jointe(s)

Introduction
Ce billet fait suite au billet précédent: http://blog.developpez.com/ducodeetd...n-html5-jour-1

Dans ce billet je vais vous détailler les fichiers rts.js et canvas.js , leur utilisation, leur construction.

Faire une application HTML5/canvas
Mais avant, je dois vous expliquer le fonctionnement global d’une application HTML5: pour ceux qui ont déjà fait des jeux en flash, il faut se dire vous dire que l’HTML5 est plus austère: oubliez la scène, la timeline et les clips, ici juste un canvas, soit une image fixe.
Ce que l’on fait pour créer une animation, selectionner un élement.. ce sont des maths : aucun objet sur un canvas, juste des pixels de couleurs différentes imprimés ou éffacés sur une image (le canvas).
Pour simplifier un peu la gestion et les performances, on créé autant de canvas que de calques nécéssaires:
Un canvas pour le sol, un canvas pour les batiment, un autre pour les personnage, le brouillard, la selection…

lib3/canvas.js
Cette classe est très importante dans ce projet, elle permet de faciliter les interactions avec les canvas.
Vous pouvez ainsi coder plus facilement:
Code:

1 2 var oCanvas = new Canvas('idDeMonCanvas'); oCanvas.drawRectStroke(x,y,largeur,hauteur,epaisseur,couleur);
Au lieu de :
Code:

1 2 3 4 5 6 7 8 var canvas = document.getElementById('idDeMonCanvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.lineWidth=epaisseur; ctx.strokeStyle=couleur; ctx.strokeRect(x,y,largeur,epaisseur); ctx.closePath();
La suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-2

31/12/2013, 09h16
SylvainPV

Salut,

Sympa l'idée d'un journal de bord, ça sert à la fois de tuto et de retour d'expérience :ccool:
A une époque, j'ai commencé un projet de RTS en HTML5, mais j'ai abandonné par manque de temps et d'ambition. J'utilisais alors des <div> et des background-image pour gérer tous mes sprites, tandis qu'un <canvas> superposé servait à tous les effets HUD (barres de vie, de chargement etc...). L'avantage d'utiliser le DOM et des <div>, c'est qu'on pouvait très facilement associer une instance JS à un élément HTML et manipuler l'élément en utilisant les animations CSS. Mais utiliser canvas partout est généralement plus performant, bien qu'un peu plus compliqué à gérer niveau code.
Si ça intéresse quelqu'un, le jeu est encore en ligne ici et le code source n'est pas obfusqué.
31/12/2013, 09h20
imikado

Merci
Votre jeu est pas mal du tout, effectivement le problème avec les canvas, mais j'en parlerai dans le prochain journal c'est le fait qu'on ai pas d'objets:

Avec un div, on ajoute un onclick et l'on peut indiquer de faire ceci en cliquant sur tel div, par exemple changer ses coordonnées x/y

Avec un canvas, il faut recuperer les coordonéés, en soustraire le scroll du navigateur puis diviser par la largeur des cases pour en déduire des coordonnées
Enfin il faut stoquer les elements js dans un tableau indexé puis effacé et réafficher au nouvel emplacement :(

[HTML5] Journal de bord: création d’un RTS en HTML5, jour 3

Introduction
Ce billet fait suite au billet précédent: http://blog.developpez.com/ducodeetd...n-html5-jour-2

Dans ce billet je vais vous détailler le fichiers rts_Game.js et son utilisation, sa construction.

Faire une application HTML5/canvas : les interactions
J’expliquai lors du dernier billet que l’utilisation du canvas était un peu moins confortable que de faire du flash.
Une chose toute bête c’est d’identifier où l’on clique: sur une unité, sur un batiment, un arbre ou dans le vide.
Pour cela plusieurs choses: on recupère l’evenement clic, ses coordonnées, on leur soustrait le scroll du navigateur.
Puis on cherche à savoir si on trouve dans un tableau indexé par coordonnées x y un élément.

Cette méthode se trouve dans la classe Game.

La classe Game, fichier rts_Game.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
//Game
function Game(){
    //tableau de coordonnées des unités
    this.tCoordUnit=Array();
    //tableau de corrdonnées des batiments/arbres/mine d'or
    this.tCoordBuild=Array();
    //le mode en cours 
    this.mode='';
    //l'element selectionné (unité/batiment...)
    this.selected='';
    //le batiment selectionné à construire
    this.buildcreation='';
    //le tableau des cases visibles sur la carte
    this.tVisible=Array();
    //tableau contenant tous les batiments (utilisé pour reconstruire la map lors d'un scroll)
    this.tBuild=Array();
    //idem pour les unités
    this.tUnit=Array();
 
    //ressources
    this.iOr=250;
    this.iWood=150;
}

Je ne vais pas ici coller la classe Game en entier (plus de 400 lignes), je vais plutot présenter bloc par bloc pour expliquer certains principe de développement
Pour rappel, l’ensemble du projet est disponible sur github (voir en bas d’article)

La récupération des coordonnées
Lorsque l’on clique sur un endroit du canvas, il faut faire plusieurs choses: récupérer l’evenement, recupérer les coordonnées du clic, puis diviser par la taille des cases pour récupérer les coordonnées du tableau.

Code:

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
 
//recuperation de X + le decalage de la scrollbar
getXmouse:function(e){
    if(e &amp;&amp; e.x!=null &amp;&amp; e.y!=null){
        return e.x +document.body.scrollLeft;
    }else{
        return e.clientX +document.body.scrollLeft;
    }
},
//recuperation de X + le decalage de la scrollbar
getYmouse:function(e){
    if(e &amp;&amp; e.x!=null &amp;&amp; e.y!=null){
        return e.y + document.body.scrollTop;
    }else{
        return e.clientY + document.body.scrollTop;
    }
},
//recuperation de la coordonnée de tableau: divisition de x par la largeur d'une case
getX:function(e){
    var x=this.getXmouse(e);
    x=parseInt( x/widthCase);
 
    //ajout du decallage (scrolling sur la map)
    return x+currentX;
},
getY:function(e){
    var y=this.getYmouse(e);
    y=parseInt( y/widthCase);
 
    return y+currentY;
},

Lire la suite dans le billet:
http://blog.developpez.com/ducodeetd...n-html5-jour-3

Le clic gauche
Lorsque l’on veut séléctionner une unité, on doit cliquer sur l’image de celle-ci.
Mais malheureusment, cette image est un dessin sur le canvas, il n’y donc pas possibilité de mettre un evement sur l’image.
On doit récupérer les coordonnées du clic pour retrouver l’image en dessous.
Pour cela, on recupere les coordonnées « tableau » puis l’on demande si il y a une unité ou un batiment en dessous.

Lors du clic gauche, si on a demandé à l’unité de construire un batiment, on va vérifier que l’on peut le construire sur ces coordonnées

Code:

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
 
 getUnit:function(x,y){
        //console.log('search x:'+x+' '+y);
        if(this.tCoordUnit[y] &amp;&amp;  this.tCoordUnit[y][x]){
            return this.tCoordUnit[y][x];
        }
        return null;
    },
    getBuild:function(x,y){
        if(this.tCoordBuild[y] &amp;&amp;  this.tCoordBuild[y][x]){
            return this.tCoordBuild[y][x];
        }
        return null;
    },
    //appelée lors d'un clic gauche sur le canvas (sélection d'une unité/batiment)
    click:function(e){
        //recuperation des coordonnées "tableau" x y
        var x=this.getX(e);
        var y=this.getY(e);
 
        //si l'utilisateur a séléctionné un batiment à construire
        if(this.buildcreation!=''){
 
            //on veririfie ensuite les coordonnées 
            //des 4 cases nécéssaires à la construction du batiment
            var ok=1;
            if(!oGame.checkCoordVisible(x,y) || !oGame.checkCoord(x,y) ){
                ok=0;
            }else if(!oGame.checkCoordVisible(x+1,y) || !oGame.checkCoord(x+1,y) ){
                ok=0;
            }else if(!oGame.checkCoordVisible(x,y+1) || !oGame.checkCoord(x,y+1) ){
                ok=0;
            }else if(!oGame.checkCoordVisible(x+1,y+1) || !oGame.checkCoord(x+1,y+1) ){
                ok=0;
            }
 
            if(!ok){
                //si une des cases indisponible, on annule
                return;
            }
 
            //si c'est ok, on efface la selection d'emplacement
            this.buildcreation.clear();
            //on indique à l'unité qui doit construire
            //le batiment à construire
            this.selected.buildOn(this.buildcreation);
 
            //on annule la construction en cours
            this.buildcreation='';
 
            return;
 
        } 
 
        //on recherche si il y a quelquechose aux coordonnées
        var oUnit=this.getUnit(x,y);
        var oBuild=this.getBuild(x,y);
 
        //si il y a une unité
        if(oUnit){
            //on selectionne celle-ci
            this.select(oUnit);
        }else if(oBuild){
            //si  il y a un batiment,
            //on le selectionne
            this.select(oBuild);
        }else{
            //sinon on supprime la selection sur le canvas
            console.log('pas trouve');
            this.clearSelect();
        }
    },

La suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-3

Journal de bord: création d’un RTS en HTML5, jour 4

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-3

Dans ce billet je vais vous détailler le fichier rts_Map.js, son utilisation, sa construction.

Faire une application HTML5/canvas: construire la Map
Dans ce jeux de stratégie, comme dans beaucoup d’autres jeux, la carte est trop grande pour être affichée dans son ensemble,.
Il faut donc afficher une partie de la carte, et permettre de visualiser ce que l’on regarde par rapport à la carte complète.

C’est là qu’intervient la classe Map (fichier rts_Map.js)
Comme pour la classe Game, nous allons ici voir bloc par bloc

Création de la map
Code:

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 build:function(){ for(var y=0;y< maxY;y++){ for(var x=0;x< maxX;x++){ //decalage x/y en fonction du scrolling var x2=x+currentX; var y2=y+currentY; if(this.tMap[y2] && this.tMap[y2][x2]){ //si c'est un arbre if(this.tMap[y2][x2]==4){ //on dessine un case normale this.drawImage( 3 ,x,y); //puis on créé un objet arbre par dessus var oWood=new Wood(); oWood.x=x; oWood.y=y; oWood.build(); //on ajoute cette arbre au tableau des batiments //pour les reconstruire lors du scrolling oGame.tBuild.push(oWood); } //on dessine sur le canvas la valeur du tableau this.drawImage( this.tMap[y2][x2] ,x,y); } } } }, //la methode pour dessiner sur le canvas drawImage:function(iImg,x,y){ if(!this.tOImg[iImg]){ var oImg=new Image(); oImg.src='img3/'+this.tImg[iImg]; oImg._x=x; oImg._y=y; oImg.onload=function(){ oLayer_map.drawImage(this,this._x*widthCase,this._y*heightCase,widthCase,widthCase); } this.tOImg[iImg]=oImg; }else{ oLayer_map.drawImage(this.tOImg[iImg],x*widthCase,y*heightCase,widthCase,widthCase); } },
Petite parenthèse sur les images
Pensez bien que lorsque vous souhaitez dessiner une image sur un canvas, vous n’etes pas en local: les images de votre jeu ne sont pas chargées.
Pour gerer ce mode asynchrone: on créé un objet image, on lui assigne des propriétés comme ces coordonnées et enfin on lui indique du code à éxécuter au moment du chargement avec « onload »
Mais il faut également prévoir le fait que l’image ai déjà été chargée précédement.
C’est pour cela que je stoque ici l’objet image dans un tableau de propriété de la classe, ainsi, si l’objet existe on le dessine tout de suite.
En revanche si il n’existe pas on instancie avec les propriétés ainsi que la méthode onload.

La suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-4

Journal de bord: création d’un RTS en HTML5, jour 5

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-4

Dans ce billet, nous verrons la classe Unit, qui permet de gerer des unités

Le constructeur d’unité

Code:

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
function Unit(name,src){
    //le nom type d'unité
    this.name=name;
    //l'adresse de l'image
    this.src='img3/'+src;
    this.oImage='';
 
    //les coordonnées + les vies
    this.x=0;
    this.y=0;
    this.life=100;
 
    //la destination cible
    this.targetX='';
    this.targetY='';
 
    //la largeur/hauteur de l'unité
    this.width=widthCase;
    this.height=widthCase;
 
    //contiendra le moment venu un batiment à construire
    this.oBuildOn=null;
 
    //compteur utilisé lors de la récupération de ressource
    this.counter=0;
    //ressources or/bois transporté
    this.or=0;
    this.wood=0;
 
    //pour une ronde point de départ
    this.cycleFromX='';
    this.cycleFromY='';
 
    //pour une ronde point d'arrivée
    this.cycleToX='';
    this.cycleToY='';
 
    //tableau contenant les batiments que l'unité peut construire
    this.tBuildCreation=Array();
 
    if(this.name=='soldat'){
        this.tBuildCreation[0]=new Buildcreation('buid2','build2.png');
    }
}

L’affichage de l’unité
Méthode utilisée pour afficher l’unité
Comme vous pouvez le voir il y a également une partie pour la construction effective d’un batiment.

Code:

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
build:function(){
    //partie affichage de l'image de l'unité sur le canvas
    if(this.oImage==''){
        this.oImage=new Image(this);
        this.oImage.src=this.src;
        this.oImage._x=this.x;
        this.oImage._y=this.y;
        this.oImage.onload=this.drawImage;
    }else{
        oLayer_perso.drawImage(this.oImage ,((this.x-currentX)*widthCase),((this.y-currentY)*heightCase),widthCase-2,widthCase-2);
 
        oLayer_perso.fillRect((this.x-currentX)*widthCase,((this.y-currentY)*heightCase)+heightCase-2,widthCase,2,'#00ff00');
 
    }
 
    //si l'unité doit construire un batiment, et qu'elle se trouve sur les lieux de la construction
    if(this.oBuildOn &amp;&amp; this.x+1==this.oBuildOn.x &amp;&amp; this.y==this.oBuildOn.y){
 
        //création du batiment à l'emplacement
        var aBuild=new Build(this.oBuildOn.name,this.oBuildOn.src);
        aBuild.x=this.oBuildOn.x;
        aBuild.y=this.oBuildOn.y;
        aBuild.build();
 
        //ajout du batiment à la liste des batiments (pour la reconstruction lors des scroll)
        oGame.tBuild.push(aBuild);
        //on sauvegarde les coordonnées du batiments
        oGame.saveBuild(aBuild);
 
        //on reset les propriétés de construction
        oGame.buildcreation='';
        this.buildOnX='';
        this.buildOnY='';
        this.oBuildOn='';
 
        //on décrément la ressource or
        oGame.iOr-=100;
        //on réactualise les ressources
        oGame.buildRessource();
        //on reset la sélection
        oGame.clearSelect();
 
    }
    //on enregistre les nouvelles coordonnées de l'unité
    oGame.saveUnit(this);
},

La suite: http://blog.developpez.com/ducodeetd...n-html5-jour-5

1 pièce(s) jointe(s)

Journal de bord: création d’un RTS en HTML5, jour 6

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-5

Nous avons dans les précédents billets expliqué chaque fichier du projet, nous allons à partir d’aujourd’hui continuer ce rts pour arriver à un jeu fini ;)

Gerer les couts des batiments
Plutot que d’avoir écrit en dur 100 d’or pour les batiments, on va stoquer dans l’objet batiment le cout en or et en bois de chaque batiment

Pour cela on va editer la classe Build, on y ajoute 2 propriétés costOr et costWood
J’en ai profité pour remanier un peu le constructeur: cette fois on ne recoit que le type de batiment et le constructeur fait le reste (adresse de l’image, cout…)

Code:

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
//build
function Build(name,src){
    this.name=name;
    this.oImage='';
 
    this.x=0;
    this.y=0;
    this.life=100;
 
    this.width=widthCase*2;
    this.height=widthCase*2;
 
    this.color='#064474';
    this.bVisibility=1;
 
    this.costOr=0;
    this.costWood=0;
 
    if(this.name=='or'){
        this.color='#e8bb08';
        this.bVisibility=0;
        this.shortname='Mine d\'or';
        this.src='img3/mine-or.png';
        this.unitCreation ='';
    }else if(this.name=='QG'){
        this.shortname='Quartier g&eacute;n&eacute;ral';
        this.src='img3/build1.png';
 
        this.unitCreation =new Unit('Worker');
    }else if(this.name=='SoldierHouse'){
        this.shortname='Batiment des soldats';
        this.src='img3/build2.png';
 
        this.costOr=100;
        this.costWood=100;
 
        this.unitCreation =new Unit('Soldier');
    }else if(this.name=='ArcherHouse'){
        this.shortname='Batiment des archers';
        this.src='img3/build3.png';
 
        this.costOr=200;
        this.costWood=50;
 
        this.unitCreation =new Unit('Archer');
    }
 
}

J’ai également remanié la classe unit, c’est également le constructeur qui fait tout: image, nom et batiments constructibles.

Code:

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
function Unit(name){
    this.name=name;
    this.oImage='';
 
    this.x=0;
    this.y=0;
    this.life=100;
 
    this.targetX='';
    this.targetY='';
 
    this.width=widthCase;
    this.height=widthCase;
 
    this.oBuildOn=null;
 
    this.counter=0;
    this.or=0;
    this.wood=0;
 
    this.cycleFromX='';
    this.cycleFromY='';
 
    this.cycleToX='';
    this.cycleToY='';
 
    this.tBuildCreation=new Array();
 
    if(this.name=='Soldier'){
        this.shortname='Soldat';
        this.src='img3/WPface.png';
 
    }else if(this.name=='Archer'){
        this.shortname='Archer';
        this.src='img3/WC.png';
 
    }else if(this.name='Worker'){
        this.shortname='Ouvrier';
        this.src='img3/WK.png';
 
        this.tBuildCreation.push(new Build('SoldierHouse'));
        this.tBuildCreation.push(new Build('ArcherHouse'));
    }
}

Limitation du scroll à la carte
Pour éviter que l’on puisse scroller à l’infini, on va ajouter un garde fou à la classe Game

Code:

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
Game.prototype={
    drawDirection:function(){
        oLayer_cadre.clear();
        //left
        oLayer_cadre.drawRect(0,0,10,oLayer_map.height,'#eeaf17','#eeaf17');
        //right
        oLayer_cadre.drawRect(oLayer_map.width-10,0,10,oLayer_map.height,'#eeaf17','#eeaf17');
        //bottom
        oLayer_cadre.drawRect(0,oLayer_map.height-10,100,10,'#eeaf17','#eeaf17');
        oLayer_cadre.drawRect(500,oLayer_map.height-10,300,10,'#eeaf17','#eeaf17');
        //top
        oLayer_cadre.drawRect(0,0,oLayer_map.width,10,'#eeaf17','#eeaf17');
    },
    goLeft:function(){
        if(currentX-1  map.tMap[0].length){
            return ;
        }
 
        currentX+=1;
        this.rebuild();
        oLayer_cadre.drawRect(oLayer_map.width-10,0,10,oLayer_map.height,'#eeaf17','#eeaf17');
    },
    goDown:function(){
        if(currentY+1+maxY &gt; map.tMap.length){
            return ;
        }
 
        currentY+=1;
        this.rebuild();
        oLayer_cadre.drawRect(0,oLayer_map.height-10,100,10,'#eeaf17','#eeaf17');
        oLayer_cadre.drawRect(500,oLayer_map.height-10,300,10,'#eeaf17','#eeaf17');
    },
    goUp:function(){
        if(currentY-1 &lt; 0){
            return ;
        }
 
        currentY-=1;
        this.rebuild();
        oLayer_cadre.drawRect(0,0,oLayer_map.width,10,'#eeaf17','#eeaf17');
    },

Voir la suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-6

Journal de bord: création d’un RTS en HTML5, jour 7

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-6

Modification de la selection d’unités
Si on veut par la suite pouvoir faire une multiple selection, on va remplacer la variable selected par un tableau tSelected
Et ainsi en selectionnant une unité on l’ajoute à ce tableau
Code:

1 2 3 4 5 6 7 8 9 10 select:function(oMix){ //on enregistre l'unité/batiment this.tSelected.push(oMix); //on demande son dessin this.drawSelected(); //on affiche la navigation oMix.buildNav(); },
Et lors de l’affichage des unités sélectionnés, on va boucler sur celui-ci
Code:

1 2 3 4 5 6 7 8 9 10 drawSelected:function(){ //on efface le calque oLayer_select.clear(); for(var i=0;i<this.tSelected.length;i++){ //on dessine un cadre sur un des calques au dimension de l'élement oLayer_select.drawRectStroke((this.tSelected[i].x-currentX)*widthCase,(this.tSelected[i].y-currentY)*heightCase,this.tSelected[i].width,this.tSelected[i].height,'#880044',3); } },
suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-7

08/01/2014, 12h09
pouli

Bonne initiative Mika !

1 pièce(s) jointe(s)

Journal de bord: création d’un RTS en HTML5, jour 8

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-7

Ajourd’hui nous allons passer aux sprites
L’idée est d’éviter d’avoir une image par éléments, mais 2-3 images qui contiendrait l’ensemble afin d’avoir peu de fichiers à télécharger
On va créer 2 images: une qui contiendra les images 1×1 (map, unités, arbres…) cases et l’autre les images 2×2 (batiment, mine d’or…)

Ensuite on va créer une classe qui permettra dans un premier temps de charger les 2 images, et dans un second temps d’identifier chaque élément du sprite

Création de la classe de gestion de sprites
Code:

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 function Images(){ this.tOImg=new Array(); this.tDetail=new Array(); this.counter=0; } Images.prototype={ //methode qui permet de charger une image load:function(src,idImg){ this.tOImg[idImg]=new Image(); this.tOImg[idImg].src=src; this.tOImg[idImg].onload=function(){ oImages.counter++; preload2(); } }, //methode qui permet d'identifier un élément du sprite setDetailOnId:function(id,y,x,width,height,idImg){ this.tDetail[id]=new Array(); this.tDetail[id]['x']=x; this.tDetail[id]['y']=y; this.tDetail[id]['width']=width; this.tDetail[id]['height']=height; this.tDetail[id]['idImg']=idImg; }, //methode qui permet de dessiner un element sur un des canvas drawImageOnLayer:function(id,x,y,width,height,sLayer){ var oCanvasTmp; if(sLayer=='map'){ oCanvasTmp=oLayer_map; }else if(sLayer=='apercu'){ oCanvasTmp=oLayer_apercu; }else if(sLayer=='perso'){ oCanvasTmp=oLayer_perso; }else if(sLayer=='building'){ oCanvasTmp=oLayer_building; } oCanvasTmp.drawImage2(this.tOImg[ this.tDetail[id]['idImg'] ],this.tDetail[id]['x'],this.tDetail[id]['y'],this.tDetail[id]['width'],this.tDetail[id]['height'],x,y,width,height); }, };
Chargement des sprites et identification
Il faut ensuite identifier chaque éléments:
On créé un tableau qui représente virtuellement les éléments sur le sprite
En bouclant dessus, on identifie dans la classe Images ceux-ci
Code:

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 oImages=new Images(); var tDetailTmp=new Array(); tDetailTmp=[ ['case-beige2','case-water','case-beige','case-wood'], ['unit-worker'], ['unit-soldier'], ['unit-archer'], ]; for(var y=0;y<tDetailTmp.length;y++){ for(var x=0;x<tDetailTmp[y].length;x++){ oImages.setDetailOnId(tDetailTmp[y][x],y*40,x*40,40,40,'1x1'); } } var tDetailTmp=new Array(); tDetailTmp=[ ['build-SoldierHouse','build-SoldierHouse_-2','build-SoldierHouse_-1'], ['build-QG','build-QG_-2','build-QG_-1'], ['build-ArcherHouse','build-ArcherHouse_-2','build-ArcherHouse_-1'], ['build-mineOr'], ]; for(var y=0;y<tDetailTmp.length;y++){ for(var x=0;x<tDetailTmp[y].length;x++){ oImages.setDetailOnId(tDetailTmp[y][x],y*80,x*80,80,80,'2x2'); } } oImages.load('img3/sprite1x1.png','1x1'); oImages.load('img3/sprite2x2.png','2x2');
Dessin d’une image issu du sprite
Pour dessiner, il suffit d’appeler l’objet ainsi.
Exemple pour la classe Build: on dessine l’id « this.idImg sur le canvas « building »

Code:

oImages.drawImageOnLayer(this.idImg+this.sSprite,(this.x-currentX)*widthCase,(this.y-currentY)*heightCase,widthCase*2,widthCase*2,'building');

Lire la suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-8

1 pièce(s) jointe(s)

Journal de bord: création d’un RTS en HTML5, jour 9

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-8

Gérer un mouse over
Il serait utile de pouvoir, au survol afficher un curseur particulier en fonction de l’unité/batiment présent sous la souris

Après avoir ajouté une variable onMouseOver à la classe Game, on va indiquer dans la méthode mousmove quand l’initialiser à 1
Code:

1 2 3 }else if(this.mouseX > 0 && this.mouseX 0 && this.mouseY < oLayer_map.height){ this.onMouseOver=1; }
On ajoute également dans la méthode refreshunit de dessiner la selection sous la souris
Code:

1 2 //on dessine le mouseover this.drawMouseOver();
Qui ressemble à ceci:
Code:

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 drawMouseOver:function(){ oLayer_cursor.clear(); if(this.onMouseOver==0){ return; } if(!this.checkCoordVisible(this.mouseCoordX,this.mouseCoordY)){ return false; } var oBuild=this.getBuild(this.mouseCoordX,this.mouseCoordY); var oUnit=this.getUnit(this.mouseCoordX,this.mouseCoordY); var sColor='#ffffff'; if(oBuild){ if(oBuild.name=='or'){ sColor='yellow'; }else if(oBuild.name=='wood'){ sColor='#01ad4e'; }else if(oBuild.team!=this.team){ sColor='red'; } this.strokeMouseOver(oBuild,sColor); }else if(oUnit){ if(oUnit.team!=this.team){ sColor='red'; } this.strokeMouseOver(oUnit,sColor); } },
Ajout de la gestion d’équipe
On va ajouter une propriété team à la classe Build et Unit afin de différencier ses unités et les unités enemies.

On modifie également le process pour que le brouillard ne soit éclairci que par les unités de notre équipe
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 saveUnit:function(oUnit){ //on recupere les coordonnées de l'unité var y=oUnit.y; var x=oUnit.x; //on enregistre dans un tableau indexé //les nouvelles coordonnées if(!this.tCoordUnit[y]){ this.tCoordUnit[y]=Array(); } this.tCoordUnit[y][x]=oUnit; //on rend la zone visible //que si c'est une unité de notre équipe if(oUnit.team==this.team){ this.setVisibility(x,y); } },
Ajout de gestion d’attack
Pour l’instant on va gerer l’attaque si une unité est à proximité, on va également indiquer de se rapprocher si une unité enemie est à proxmimité

La suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-9

1 pièce(s) jointe(s)

Journal de bord: création d’un RTS en HTML5, jour 10

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-9

Dans ce jour 10, j’ai corrigé pas mal de bug notamment concernant le problème de suppression d’un arbre ou d’une unité
En effet, ces derniers étaient bien supprimés de la variable tCoordBuild/tCoordUnit mais pas du tableau tBuild/tUnit
J’ai également changé le comportement de base des unités: seule les unités enemies cherchent à se rapprocher pour attaquer: c’est d’ailleurs mieux car les ouviers n’ont pas la même capacité d’attaque que les soldats enemies qui font une ronde.

On va ici permettre à une unité qui coupe du bois, une fois que l’arbre n’existe plus d’aller en chercher un autre à proximité

note: pour rappel, le projet est toujours disponible sur github, dans les billets sur developpez je détaille des parties que je considère interressante, mais je ne détaille pas forcément certains bugfix ou réorganisation du code (pour le rendre plus propre)
N’hésitez pas à suivre le projet github (lien en bas du billet)

Trouver un autre arbre à proximité
On va dès l’instant que l’arbre est supprimé d’en trouver un autre et de mettre à jour la ronde de l’unité
Code:

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 }else if(aBuild && aBuild.name=='wood' && oUnit.counter >= 8 && oUnit.cycleToX!=''){ //on indique à l'unité qu'elle transporte 10 oUnit.wood=10; //a chaque iteration on decremente la ressource aBuild.ressource-=10; //si l'arbre est épuisé, on le supprime de la carte if(aBuild.ressource<=0){ aBuild.clear(); oGame.removeBuild(aBuild); //on définit un nouvel arbre à prendre en compte var tWood=[ [-1,-1], [0,-1], [1,-1], [-1,0], [1,0], [-1,+1], [0,+1], [1,+1], ]; for(var i=0;i<tWood.length;i++){ var oBuild2=this.getBuild(aBuild.x+tWood[i][0],aBuild.y+tWood[i][1]); if(oBuild2 && oBuild2.name=='wood'){ oUnit.cycleToX=oBuild2.x; oUnit.cycleToY=oBuild2.y; break; } } } //on remet le compteur à 0 oUnit.counter=0; //on redéfinit la nouvelle cible (c'est un cycle) oUnit.setTarget(oUnit.cycleFromX,oUnit.cycleFromY);
Arretez son cycle bois si plus d’arbre
On a vu précédement que dans le cas où l’on a terminé de couper l’arbre il cherche à proximité pour changer d’arbre.
Nous rajoutons maintenant le cas où il n’en trouve pas pour cesser son cycle bois.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 }else if(oUnit.cycleFromX!='' && (oUnit.targetX==oUnit.x || oUnit.targetY==oUnit.y) ){ //si arrivee a destination et cycle if(oUnit.cycleObject=='wood'){ //si il arrive a venir sur les coordonnées cible //c'est que l'arbre n'y est plus oUnit.clearCycle(); }else if(oUnit.cycleFromX==oUnit.x && oUnit.cycleFromY==oUnit.y ){ oUnit.setTarget(oUnit.cycleToX,oUnit.cycleToY); }else{ oUnit.setTarget(oUnit.cycleFromX,oUnit.cycleFromY); } }
Donner un prix aux unités comme pour les batiments
Jusqu’à présent on pouvait créer autant d’unité que l’on voulait, désormais chaque unité à un prix, comme pour les batiments
D’abord dans la classe Unit, on ajoute un cout dans le constructeur.
Code:

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 if(this.name=='Soldier'){ this.shortname='Soldat'; this.src='img3/unit-soldier.png'; this.idImg='unit-soldier'; this.life=150; this.attak=20; this.costOr=200; }else if(this.name=='Archer'){ this.shortname='Archer'; this.src='img3/WC.png'; this.idImg='unit-archer'; this.life=100; this.attak=30; this.costOr=500; }else if(this.name='Worker'){ this.shortname='Ouvrier'; this.src='img3/unit-worker.png'; this.idImg='unit-worker'; this.life=50; this.attak=5; this.costOr=100; this.tBuildCreation.push(new Build('SoldierHouse',this.team)); this.tBuildCreation.push(new Build('ArcherHouse',this.team)); }
La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-10

Journal de bord: création d’un RTS en HTML5, jour 11

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-10

Dans ce jour 11, on va ajouter un peu de son sur ce jeux qui est bien muet pour l’instant
On ne pas va pas encore mettre l’ambiance, juste 2-3 son histoire d’ajouter un peu de vie

On va ajouté un son lorsqu’une unité coupe du bois, travaille dans la mine, construit un batiment se bat ou meure.
J’ai trouvé ces divers sons sur ce site: http://www.universal-soundbank.com/

Le son en html5
Tout d’abord comment jouer un son en HTML5, comme il y a une classe Image pour créer un objet image, il y a une classe Audio pour crée un objet son.
Vous pouvez ensuite interagir avec ce son: le lire, le mettre en pause…

Nous créons ici dans une classe Sound

Code:

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
function Sound(){
 
    this.counter=0;
    this.total=0;
    this.tSrc=Array();
    this.tOAudio=Array();
    this.tPlaying=Array();
}
Sound.prototype={
    resetPlaying:function(){
	this.tPlaying=Array();
    },
    add:function(src,id){
	    this.tSrc[this.total]=Array();
	    this.tSrc[this.total]['src']=src;
	    this.tSrc[this.total]['id']=id;
 
	    this.total++;
    },
    load:function(){
 
	    for(var i=0;i&lt; this.total;i++){
		var id=this.tSrc[i]['id'];
 
		this.tOAudio[id]=new Audio();
		this.tOAudio[id].src=this.tSrc[i]['src'];
		this.tOAudio[id].onload=function(){
 
		};
		this.tOAudio[id].load();
		oSound.counter++;
			preload2();
 
	    }		
    },
    playSound:function(sType){
	console.log(&quot;play sound &quot;+sType);
	this.tPlaying[sType]=1;
       //on joue le son
	this.tOAudio[sType].play();
    },
    stopSound:function(sType){
	console.log(&quot;stop sound &quot;+sType);
 
 
	//on remet le son au début
	this.tOAudio[sType].pause();
	this.tOAudio[sType].currentTime=0;
 
	this.tPlaying[sType]=0;
    },
    stopPlaying:function(){
	//return;
	for(var i=0;i&lt; this.total;i++){
	    var id=this.tSrc[i]['id'];
	    if( !this.tPlaying[ id ] &amp;&amp; id!='building'){
		this.stopSound(id);
	    }
 
	}
 
    }
 
};

Ajoutons un son de coupe du bois
Il y a deux choses à faire: démarrer le son au début de la coupe du bois avec oGame.playSound('wood');
Et l'arretez une fois le travail terminé avec oGame.stopSound('wood');

Code:

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
}else if(aBuild &amp;&amp; aBuild.name=='wood' &amp;&amp; oUnit.counter = 8 &amp;&amp; oUnit.cycleToX!=''){
	//on indique à l'unité qu'elle transporte 10
	oUnit.wood=10;
 
	//a chaque iteration on decremente la ressource
	aBuild.ressource-=10;
	//si l'arbre est épuisé, on le supprime de la carte
	if(aBuild.ressource&lt;=0){
		aBuild.clear();
		oGame.removeBuild(aBuild);
 
		//on définit un nouvel arbre à prendre en compte
		var tWood=[
			[-1,-1],
			[0,-1],
			[1,-1],
 
			[-1,0],
			[1,0],
 
			[-1,+1],
			[0,+1],
			[1,+1],
		];
		for(var i=0;i&lt;tWood.length;i++){
			var oBuild2=this.getBuild(aBuild.x+tWood[i][0],aBuild.y+tWood[i][1]);
			if(oBuild2 &amp;&amp; oBuild2.name=='wood'){
				oUnit.cycleToX=oBuild2.x;
				oUnit.cycleToY=oBuild2.y;
 
				break;
			}
		}
	}
 
	//on remet le compteur à 0
	oUnit.counter=0;
 
	//on redéfinit la nouvelle cible (c'est un cycle)
	oUnit.setTarget(oUnit.cycleFromX,oUnit.cycleFromY);
 
	oSound.stopSound('wood');
 
//si la cible c'est une mine d'or et que le compteur est inferieur à N
}

Faisons de même pour la mine d'or

Ajoutons un son pour le combat
Ici il y a deux sons ici à mettre en place: celui du combat et celui de la mort d'une unité.
Pour le combat à chaque fois qu'on est en position d'attaque (à proximité d'une unité enemie)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if(iAttack){
	oSound.playSound('attack');
 
	//on decremente l'enemie de la puissance d'attaque
	oUnit2.life-=oUnit.attak;
	if(oUnit2.life &lt;=0){
		//on joue le son d'attaque
		oSound.stopSound('attack');
 
		//si unite dead, on l'efface du jeu
		oUnit2.clear();
		oGame.removeUnit(oUnit2);
 
		//on joue le son de mort de l'unite
		oSound.playSound('dead');
 
	}

La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-11

Journal de bord: création d’un RTS en HTML5, jour 12

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-11

Dans ce jour 12, on va gérer des sprites d’animation et en profiter pour réorganiser la gestion du son de manière plus propre.

Ajout d’une méthode animate
On va ajouter une méthode animate qui permettra à la fois de modifier l’image affichée mais également de jouer le bon son

Code:

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
animate:function(action){
    //on commence par effacer la zone
    oLayer_perso.clearRect(((this.x-currentX)*widthCase),((this.y-currentY)*heightCase),widthCase-2,widthCase-2);
 
    var tmpImg;
    if(action=='attack'){
        tmpImg=this.idImg+'_attack';
        this.playSound('attack',this.action);
    }else if(action=='walking'){
        //si le précédent sprite était A 
        //on prend le B (pour créer une animation)
        if(this.tmpIdImg==this.idImg+'_walking2'){
            tmpImg=this.idImg+'_walking';
        }else{
            tmpImg=this.idImg+'_walking2';
        }
        //on arrête tout son (on marche)
        this.stopSound();
        //on stoque le sprite affiché pour la prochaine animation
        this.tmpIdImg=tmpImg;
    }else if(action=='dead'){
        this.playSound('dead',this.action);
        return;
    }else if(action=='wood'){
        tmpImg=this.idImg;
        this.playSound('wood',this.action);
    }else if(action=='mining'){
        tmpImg=this.idImg;
        this.playSound('mining',this.action);
    }else if(action=='stand'){
        tmpImg=this.idImg;
    }
 
    oImages.drawImageOnLayer(tmpImg,((this.x-currentX)*widthCase),((this.y-currentY)*heightCase),widthCase-2,widthCase-2,'perso');
 
    this.action=action;
},

Pour recentrer le son sur l’unité, on a du recréé des méthodes de gestion de son que voici:
Note: on stoque la précédente animation afin lorsqu’une animation/action se déroule en plusieurs temps, on lise le son en entier plutot que de saccader celui-ci.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
playSound:function(action,lastAction){
    //si la précédente action était la même, on fait rien
    if(action==lastAction){
        return;
    }
    this.stopSound();
 
    this.oAudio=new Audio();
    this.oAudio.src=oSound.getSrc(action);
    this.oAudio.play();
 
},
stopSound:function(){
    if(!this.oAudio){
        return;
    }
    this.oAudio.pause();
},

La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-12

2 pièce(s) jointe(s)

Journal de bord: création d’un RTS en HTML5, jour 13

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-12

Dans ce jour 13, j’ai modifié la gestion des ressources pour permettre de stoquer l’information par équipe. Ainsi il sera plus simple d’une part de développer une intelligence artificielle qui pourra interagir avec ses ressources comme nos unités et également de faciliter la gestion multi utilisateur.
On ajoute également une gestion de sprite multi-direction.

Le stoquage multi team
Code:

1 2 3 4 5 6 7 this.team='blue'; //ressources this.tRessource=Array(); this.tRessource[this.team]=Array(); this.tRessource[this.team]['or']=250; this.tRessource[this.team]['wood']=150;
L’intéraction avec celles-ci
Code:

1 2 3 4 5 6 7 8 9 10 11 addRessource:function(team,ressource,nb){ this.tRessource[team][ressource]+=nb; this.buildRessource(); }, useRessource:function(team,ressource,nb){ this.tRessource[team][ressource]-=nb; this.buildRessource(); }, getRessource:function(team,ressource){ return this.tRessource[team][ressource]; },
Modifier l’appel par des unités/batiments
On modifie l’appel à la méthode lorsque l’on construit un batiment
En modifiant dans la méthode build de la classe Unit
Code:

1 2 3 //on décrément la ressource or et bois oGame.useRessource(this.team,'or',aBuild.costOr); oGame.useRessource(this.team,'wood',aBuild.costWood);
Idem pour la classe Build : batiment
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 createUnit:function(){ oGame.useRessource(this.unitCreation.team,'or',this.unitCreation.costOr); oGame.buildRessource(); var oUnit; oUnit =new Unit(this.unitCreation.name,this.team); oUnit.x=this.x+2; oUnit.y=this.y; oUnit.build(); oGame.tUnit.push(oUnit); oGame.displayVisibility(); }
D’ailleurs, on modifie également la construction de la navigation
Pour vérifier les ressources disponible avec cette nouvelle méthode.

Code:

if(oGame.getRessource(this.team,'or') > this.unitCreation.costOr){

Je profite de cette mise à jour pour assombrir totalement le brouillard de niveau 1.

Lire la suite du billet: http://blog.developpez.com/ducodeetd...-html5-jour-13

15/01/2014, 23h10
imikado

1 pièce(s) jointe(s)

Journal de bord: création d’un RTS en HTML5, jour 14
Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-13

Dans ce billet peu de choses technique:
Une mise à jour graphique ainsi qu’une amélioration de la fluidité de déplacement

Modification du déplacement de 1 à 0.5
Plutot que de déplacer d’une case à la fois, j’ai modifié la vitesse de déplacement de 1 à 0.5 (multiplié par la largeur d’une case)

Les problèmes à gérer
Cela change plusieurs choses: les coordonnées x et y étant jusqu’à présent utilisées comme les coordonnées du tableau, il a fallu modifier un peu pour que le jeux fonctionne toujours.

Ajout de deux méthodes getX() et getY() dans la classe Unit
Code:

1 2 3 4 5 6 getX:function(){ return parseInt(this.x); }, getY:function(){ return parseInt(this.y); },
Vérification des coordonnées utilisant ces nouvelles méthodes:
Code:

1 2 //si l'unité doit se rendre quelques part }else if(oUnit.targetX!='' && oUnit.targetY!='' && (oUnit.targetX!=oUnit.getX() || oUnit.targetY!=oUnit.getY() ) ){
Modification de certaines méthodes pour prendre en compte la coordonnées entières et non les coordonnées décimales

La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-14

1 pièce(s) jointe(s)

Journal de bord: création d’un RTS en HTML5, jour 15

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-14

Dans ce jour 15, j’ai ajouté la gestion de la bière: les unités consomment de la bière pour attaquer. Il faut constuire un champ de houblon ainsi qu’une brasserie.
Enfin assigner un ouvrier au houblon pour qu’il fasse des aller retour entre le champ de houblon et la brasserie.
J’en ai également profité pour ajouter un bouton pour activer/désactiver le son.

Ajout des nouveaux batiments: champ de houblon et brasserie
Premièrement on ajoute dans le sprite le champ de houblon ainsi que la brasserie

Enquite on ajoute ce sprite au tableau d’identification
Dans la fonction preload du fichier rts.js

Code:

1
2
3
4
5
6
7
8
9
10
var tDetailTmp=new Array();
tDetailTmp=[
    ['build-SoldierHouse','build-SoldierHouse_-2','build-SoldierHouse_-1'],
    ['build-QG','build-QG_-2','build-QG_-1'],
    ['build-ArcherHouse','build-ArcherHouse_-2','build-ArcherHouse_-1'],
 
    ['build-mineOr'],
    ['case-houblon','case-houblon_-2','case-houblon_-1'],
    ['build-brasserie','build-brasserie_-2','build-brasserie_-1']
];

Ensuite on ajoute ces deux batiments à la liste constructible par une unité worker:
Dans le constructeur de la classe Unit

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
}else if(this.name='Worker'){
    this.shortname='Ouvrier';
    this.src='img3/unit-worker.png';
    this.idImg='unit-worker';
    this.life=100;
    this.attak=5;
 
    this.costOr=100;
    this.costBeer=5;
 
    this.tBuildCreation.push(new Build('SoldierHouse',this.team));
    this.tBuildCreation.push(new Build('ArcherHouse',this.team));
    this.tBuildCreation.push(new Build('Houblon',this.team));
    this.tBuildCreation.push(new Build('Brasserie',this.team));
}

Prise en compte d’un clic droit sur un champ de houblon
Dans la méthode goto de la classe Game:

Code:

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
}else if(this.tSelected.length &amp;&amp; aBuild &amp;&amp; ( aBuild.name=='Houblon')){
    //on créé une ronde du bois/or vers le QG
    //pour alimenter les ressources Or/bois
 
    for(var i=0;i&lt;this.tSelected.length;i++){
 
        //on indique que la destination de cycle c'est la mine d'or ou l'arbre
        var cycleToX=x;
        var cycleToY=y;
 
        //on indique que la provenance du cycle c'est la brasserie
        var cycleFromX=-1;
        var cycleFromY=-1;
 
        for(var j=0;j&lt; this.tBuild.length;j++){
            if(this.tBuild[j].name=='Brasserie'){
                cycleFromX=this.tBuild[j].x;
                cycleFromY=this.tBuild[j].y;
            }
        }
 
        if(cycleFromX &lt; 0){
            alert('Il vous manque une brasserie');
        }
 
        this.tSelected[i].setCycle(cycleToX,cycleToY,cycleFromX,cycleFromY,aBuild.name);
 
        //on donne comme cible de deplacement la mine d'or/l'arbre cliqué
        this.tSelected[i].setTarget(cycleToX,cycleToY);

La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-15

19/01/2014, 23h37
imikado

Journal de bord: création d’un RTS en HTML5, jour 16

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-15

Aujourd’hui nous allons décliner ce jeu en une version multiplayer

Pour cela, nous allons utiliser les websockets ainsi qu’un server node.js

Présentation de node.js et socket.io
Node.js est un serveur javascript utilisant le moteur de chrome, plus d’infos sur le site de nodejs: http://nodejs.org/
Socket.io est un serveur temps réel qui permet de transmettre des messages.
Les deux réunis couplés aux nouvelles capacités d’html5 permettent de mettre en place un jeu multi-joueur en temps réel.

Installons le serveur
Sur un serveur ubuntu, ouvrez un terminal et lancez la commande suivante:

Code:

sudo apt-get install nodejs

Pour les utilisateurs windows et mac, rendez-vous sur le site de nodejs: http://nodejs.org/

Installer ensuite socket.io
Pour cela il faut le binaire npm
Installez le avec la commande
[code]sudo apt-get install npm[code]
Puis installer le packet socket.io

Code:

npm install socket.io

Principe de base du jeu multi-player
Le principe de ce serveur tient dans un concept evenementiel: un client peut emettre un message et également être à l’écoute.
Le serveur est dans le même cas, il peut emettre soit vers l’émetteur (comme une réponse), soit vers tous les autres clients connectés.
On peut ainsi imaginer à chaque déplacement, avertir les autres joueurs, et vice versa.

Mise en place dans notre jeu
Pour ce RTS, il y a plusieurs solution différente et efficace.

Ici on va choisir d’avoir le premier joueur maitre, qui fera tourner le cycle du jeu et diffusera les ordres d’affichage des unités et batiments.
Pour cela, on va ajouter dans les classes Unit et Build, des copie de certains méthodes

La suite dans le billet: http://blog.developpez.com/ducodeetd...-html5-jour-16

Journal de bord: création d’un RTS en HTML5, jour 17

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...-html5-jour-16

Ce jour 17 a été utilisé surtout pour corriger les moultes bugs de la version multi player.
Au fur et à mesure de développement multi joueur, je me suis heurté à beaucoup de soucis.

L’effet Larsen
Premièrement: node.js/socket.io, j’avais identifié les actions coté client et coté serveur avec les mêmes noms, exemple: Unit.build.
Je me suis rendu compte d’un effet Larsen: j’emettais avec le client sur id pensant l’envoyer uniquement au serveur, puis coté serveur j’emmetais vers les clients avec le même identifiant pour que chacun mette à jour son écran.
J’ai donc différencier les identifiants client et serveur avec un suffixe « Broadcast »
Ainsi coté client on fait un

Code:

socket.emit('Unit.buildBroadcast',this.id,x,y);

Coté serveur, on écoute l’evenement et l’on broadcast un évenement différent (sans le suffixe Broadcast)
Code:

1 2 3 4 socket.on('oBuild.buildBroadcast',function(id,x,y){ socket.broadcast.emit('oBuild.build',id,x,y); socket.emit('oBuild.build',id,x,y); });
Et ainsi coté client, on écoute l’evenement pour intéragir avec l’écran du joueur
Code:

1 2 3 4 5 6 7 socket.on('oBuild.build',function(id,x,y){ var oBuild=oGame.getBuildById(id); oBuild.clear(); oBuild.x=x; oBuild.y=y; oBuild.build(); });
Persistance de la partie
Sur la première version multijoueur, il fallait lancer les deux navigateurs à peu près en meme temps, pour qu’ils se broadcaste l’un l’autre leurs unités respectives.
Mais ceci n’était pas une bonne idée, j’ai donc ajouté plusieurs choses:
- on stocke sur le serveur deux tableaux: tBuild et tUnit qui stoque les entités (unités et batiments)
- lors de la connection d’un joueur, on boucle sur ces tableaux pour lui afficher l’état actuel de la partie
- pour le debug: 4 boutons pour choisir sa team
Pour info, c’est la team bleu qui mène la danse: c’est ce joueur qui possède la boucle de jeu (cycle de raffraichissement des unités et batiments)

Note: pour sauvegarder les informations de partie, on met à jour les données des tableaux tUnit et tBuild
Code:

1 2 3 4 5 6 7 8 socket.on('unit.buildBroadcast',function(id,x,y){ var i=getUnitById(id); tUnit[i].x=x; tUnit[i].y=y; socket.broadcast.emit('unit.build',id,x,y); socket.emit('unit.build',id,x,y); });
La fonction pour récupérer les données de l’unité:
Code:

1 2 3 4 5 6 7 function getUnitById(id){ for(var i=0;i<tUnit.length;i++){ if(tUnit[i].id==id){ return i; } } }
Le prototype qui sert juste à stoquer les informations d'unité et batiments:
Code:

1 2 3 4 5 6 7 8 9 10 function Data(){ this.team; this.name; this.id; this.x; this.y; }; Data.prototype={ };
Copie de Unit.js et Build.js
Pour permettre de gérer plus facilement certains éléments du jeu multiplateforme, j’ai du dupliquer les classes Unit et Build

Modification de la méthode build de la classe Unit pour broadcaster la création d’un batiment: en effet, à la création d’une unité et d’un batiment, il faut avertir les autres joueurs.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 //si l'unité doit construire un batiment, et qu'elle se trouve sur les lieux de la construction if(this.oBuildOn && this.getX()+1==this.oBuildOn.x && this.getY()==this.oBuildOn.y){ oGame.createBuildBroadcast(oGame.team,this.oBuildOn.name,this.oBuildOn.x,this.oBuildOn.y); var aBuild=new Build(this.oBuildOn.name,this.team); //on reset les propriétés de construction oGame.buildcreation=''; this.buildOnX=''; this.buildOnY=''; this.oBuildOn=''; //on décrément la ressource or et bois oGame.useRessource(this.team,'or',aBuild.costOr); oGame.useRessource(this.team,'wood',aBuild.costWood); //on réactualise les ressources oGame.buildRessource(); //on reset la sélection oGame.clearSelect(); }
note: un bug que j’ai mis longtemps à identifier: le mauvais nom d’event, en effet, si vous vous trompez de nom d’évenement à emettre, vous ne le savez pas : pas d’erreur :(
si vous avez un doute, ajoutez des console.log() pour vérifier que vous passer bien dans vos évenements ;)

Voilà pour le résumé des derniers déboires ;)
J’espère que ce journal de bord vous évitera de perdre autant de temps que moi.

Je pense améliorer un peu leu jeu, en ajoutant un menu, permettre de créer une nouvelle partie mais ce sera tout pour ce jeu.

Le prochain jeu sera un bomberman-like multijoueur ;)

Le github
Le projet GitHub : https://github.com/imikado/rtshtml5

Le billet: http://blog.developpez.com/ducodeetd...-html5-jour-17