Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.
Els components són els elements que podem agregar al nostre joc. Normalment definim elements nous com a extensió dels components bàsics. Els tipus més habituals són:
| Component | Descripció | Comentaris |
| PositionComponent | Element genèric | Requereix sobrescriure el mètode render que en defineix la forma |
| RectangleComponent | Element rectangular | Entre altres usos, s'empra com a àrea de joc |
| CircleComponent | Element circular | Adequat per representar boles i projectils |
Els components solen tenir diversos paràmetres. No tots tenen els mateixos paràmetres. Els paràmetres més habituals són:
| Paràmetre | Descripció | Comentaris |
| position | Vector que defineix la posició | |
| size | Vector que defineix la mida | |
| radius | Radi | En els elements circulars |
| cornerRadius | Radi de curvatura de les cantonades | |
| anchor | Punt de l'element que correspon a la posició | Les opcions possibles són: Anchor.bottomCenter Inferior al mig Anchor.bottomLeft Inferior a l'esquerra Anchor.bottomRight Inferior a la dreta Anchor.center Centrat al mig Anchor.centerLeft Centrat a l'esquerra Anchor.centerRight Centrat a la dreta Anchor.topCenter Superior al mig Anchor.topLeft Superior a l'esquerra Anchor.topRight Superior a la dreta |
| paint | Estableix el format (color, estil, etc.) |
Els components tenen un mètode update, que ens és útil quan necessitem que es moguin al llarg del temps. Aquest mètode té un paràmetre anomenat dt que correspon al concepte de durada del fotograma. Llavors, sabent la velocitat vectorial, podem calcular la nova posició.
...
@override
void update(double dt) {
super.update(dt);
position += velocity * dt;
}
...
Els mètodes onDragUpdate (corresponent al ratolí) i moveBy (corresponent al teclat) permeten definir el moviment del component.
Podem fer que un component desaparegui quan ja no és necessària la seva presència. Podem posar la instrucció en la definició de les col·lisions del component.
...
@override
void onCollisionStart(
...
removeFromParent();
...
Sovint, però, voldrem un cert retard (en segons); perquè l'usuari tingui una percepció més clara del que ha passat o per esperar que l'element deixi de ser visible abans d'eliminar-lo.
... import 'package:flame/effects.dart'; ...
...
@override
void onCollisionStart(
...
add(RemoveEffect(delay: 0.35)); // 0,35 s
...
En alguns casos, però, ens caldrà eliminar altres components que no són el que ha detectat la col·lisió. Llavors cal anar a l'arbre del joc a cercar l'element.
... game.world.removeAll(game.world.children.query<Bola>()); ...
Important: Els elements són eliminats a l'acabar el fotograma actual, abans de començar el següent. Això vol dir que just després de les instruccions removeFromParent, RemoveEffect i removeAll el component encara hi és.
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.