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

Publié le par

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetdulibre/p12427/developpement/journal-de-bord-creation-dun-rts-en-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

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

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

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

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.

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

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

Permettre de rapporter des ressources hors cycle
Imaginons que vous ayez une unité qui a coupé du bois ou récupéré de l’or, vous cliquez dessus pendant son retour pour lui faire faire autre chose, il serait sympa de pouvoir rapporter cette ressource au QG une fois l’action terminée.
Pour cela, il faut pouvoir cliqué droit sur le QG et permettre aux unités transportant une ressource de s’y rendre pour déposer la ressource.

Pour cela on modifie la méthode clic droit (goto de la classe Game) pour ajouter ce cas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
}else if(this.tSelected.length && aBuild && ( aBuild.name=='QG' )){
           
    for(var i=0;i0){
        //on ajoute une ressource or
        this.addRessource(oUnit.team,'or',oUnit.or);
    }else   if(oUnit.wood >0){
        //idem pour le bois
        this.addRessource(oUnit.team,'wood',oUnit.wood);
    }

    //on reset les ressources de l'unité
    oUnit.or=0;
    oUnit.wood=0;
   
    oUnit.buildNav();

Ajouter une gestion de sprite de direction
Il serait plus agréable d’avoir l’unité animé en fonction de sa direction, pour cela plusieurs choses:
1. créer des sprites de direction différente
2. choisir le bon sprite en fonction de la direction de déplacement
Dans la partie identification des sprites, on rajoute les différents sprites de direction

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
    'unit-worker',
    'unit-worker_attack',
   
    'unit-worker_walkingRight',
    'unit-worker_walking2Right',
   
    'unit-worker_walkingLeft',
    'unit-worker_walking2Left',
   
    'unit-worker_walkingDown',
    'unit-worker_walking2Down',
   
    'unit-worker_walkingUp',
    'unit-worker_walking2Up'
   
],

Dans la classe Unit on analyse la direction et chargeons ainsi le bon sprite

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
}else if(action=='walking'){
           
    var sDirection='';
    if(this.targetY  this.y){
        sDirection='Down';
    }else if(this.targetX > this.x){
        sDirection='Right';
    }else{
        sDirection='Left';
    }
   
    if(this.tmpIdImg==this.idImg+'_walking2'){
        tmpImg=this.idImg+'_walking'+sDirection;
    }else{
        tmpImg=this.idImg+'_walking2'+sDirection;
    }

rts_sprites

Le jeux actuellement
rts_spritesjeux

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

Laisser un commentaire