Entity Component System

ksta
Javascript

Bonjour, J'ai découvert depuis peu l'entity component systeme et j'ai voulu tester cette architecture avec javascript et canvas.

Ce que j'ai compris :

Entity :

  • contient un attribut unique
  • contient un ou plusieurs component

Component :

  • contient des attribut et / ou des fonctions

System:

  • partie logique du code qui va effectuer les opérations souhaiter sur les entity selon leur component (ex: RenderSystem, MouvementSystem...)

Situation

Pour mon test et pour bien comprendre cette architecture je fait un petit jeu platform pour bien comprendre le mécanisme, je préfère ne pas utiliser des librairy externe.

Mon problème se situe au niveau du system Render pour afficher des formes différentes.

J'ai commencer par une progress bar circulaire (se que je souhaite pour mon loaderRessources :D ). C'est quelque chose de basique.

Ma ProgressBarEntity :

/*
*   ProgressBarEntity 
*/
var ProgressBarEntity = Entity.extend(function(x, y, maxProgress){
    this.constructor = function (x, y, maxProgress){
        this.super();
        this.addComponent(new Position2DComponent(x, y));
        this.addComponent(new ProgressBarComponent(maxProgress));
        this.addComponent(new RenderableComponent(true, 1));
    };
});

Mes Components :

/*
*   Position2DComponent 
*/
var Position2DComponent = Component.extend(function(x, y){
    this.x;
    this.y;
    this.constructor = function(x,y){
        this.x =  x || 0;
        this.y =  y || 0;
        this._name = 'Position2D';
    }
});

/*
*   ProgressBarComponent 
*/
var ProgressBarComponent = Component.extend(function(maxProgress){
    this.maxProgress;
    this.currentProgress;
    this.constructor = function(maxProgress){
        this.maxProgress     =  maxProgress;
        this.currentProgress = 0;
        this._name           = 'ProgressBar';
    }
});

var RenderComponent = Component.extend(function(visible,opacity){
    this.visible;
    this.opacity;
    this.constructor = function(visible, opacity){
        this.visible = visible || false;
        this.opacity = opacity || false;
        this._name   = 'Render';
    }
});

Mon problème :

Se que je souhaite c'est d'avoir la possibiliter d'afficher dans le canvas la forme (arc, cercle, rect etc...)que je veux avec le system d'affichage (RenderableSystem).
A ce que j'ai compris cette architecture devrai avoir 1 seul System d'affichage et donc je n'arrive pas à savoir ou mettre ma fonction d'affichage.

Le Renderable system devrais ressembler à ceci :

var RenderableSystem = Systeme.extend(function('Renderable'){
    this.constructor = function(nameSystem){
        this.super(nameSystem);
    };
    this.update = function(ctx){
        for (var i = 0; i < this.entitiesList.length; i++) {
            var entity = this.entitiesList[i];
            if(entity.hasComponent('Position') && entity.hasComponent('Render') entity.components.Render.visible){
                entity.components.Render.draw(ctx);
            }
        };
    };
});

Donc ma question est ou devrais être ma fonction draw? car selon la form l'entity est composer de différent component car pour un cercle il faut le rayon tandis que le rectangle non. Pour l'arc de cercle il faut l'angle de départ et de fin etc....

J'aurais donc aimer savoir si quelqu'un aurais déja manipuler cette architecture un peu plus que moi pour pouvoir mieux m'éclairer dans ma recherche de solution.

Aucune réponse