git.r.bdr.sh - rbdr/sumo/blob - lib/factories/pixi.js

   1 import { Graphics } from 'pixi.js';
   2
   3 /**
   4  * Factory object that contains many methods to create prefab pixi
   5  * objects
   6  *
   7  * @type object
   8  * @name PixiFactory
   9  */
  10 export default {
  11
  12   /**
  13    * Creates a sumo container
  14    *
  15    * @function createSumo
  16    * @memberof PixiFactory
  17    * @return {external:CreateJs.Container} the created container
  18    */
  19   createSumo(config) {
  20
  21     const radius = config.radius;
  22
  23     // The body
  24     const body = new Graphics();
  25     body.beginFill(0x87c5ea)
  26       .drawCircle(0, 0, radius)
  27       .endFill();
  28
  29     // The mouth
  30     const smile = new Graphics();
  31     smile.name = 'smile';
  32     smile.lineStyle(10, 0xff0080, 1)
  33       .arc(
  34         0, 0, // center
  35         radius * 0.6,
  36         Math.PI / 6,
  37         5 * Math.PI / 6
  38       );
  39
  40     const frown = new Graphics();
  41     frown.name = 'frown';
  42     frown.visible = false;
  43     frown.lineStyle(10, 0xff0080, 1)
  44       .arc(
  45         0, radius,
  46         radius * 0.6,
  47         -Math.PI / 5,
  48         -4 * Math.PI / 5,
  49         true
  50       );
  51
  52     const leftEye = new Graphics();
  53     leftEye.beginFill(0xffffff)
  54       .drawCircle(-radius / 3 - radius / 8, -radius / 4, radius / 5)
  55       .endFill();
  56
  57     const rightEye = new Graphics();
  58     rightEye.beginFill(0xffffff)
  59       .drawCircle(radius / 3 + radius / 8, -radius / 4, radius / 5);
  60
  61     const leftPupil = new Graphics();
  62     leftPupil.beginFill(0x11)
  63       .drawCircle(-radius / 3 - radius / 8, -radius / 4, radius / 10);
  64
  65     const rightPupil = new Graphics();
  66     leftPupil.beginFill(0x11)
  67       .drawCircle(radius / 3 + radius / 8, -radius / 4, radius / 10);
  68
  69     body.addChild(this.createBlush({ radius }));
  70
  71     // The group
  72     body.addChild(smile);
  73     body.addChild(frown);
  74     body.addChild(leftEye);
  75     body.addChild(rightEye);
  76     body.addChild(leftPupil);
  77     body.addChild(rightPupil);
  78
  79     return body;
  80   },
  81
  82   /**
  83    * Creates an empty graphic
  84    *
  85    * @function createEmptyGraphic
  86    * @memberof PixiFactory
  87    * @return {external:CreateJs.Container} the created container
  88    */
  89   createEmptyGraphic(config) {
  90
  91     return new Graphics();
  92   },
  93
  94   /**
  95    * Creates a harness graphic
  96    *
  97    * @function createHarness
  98    * @memberof PixiFactory
  99    * @return {external:CreateJs.Container} the created container
 100    */
 101   createHarness(config) {
 102
 103     const radius = config.radius;
 104
 105     const lineThickness = 10;
 106
 107     // The body
 108     const body = new Graphics();
 109     body.lineStyle(lineThickness, 0xe1e1e1, 1)
 110       .drawCircle(0, 0, radius);
 111
 112     const center = new Graphics();
 113     center.beginFill(0xf1f1f1)
 114       .drawCircle(0, 0, radius - lineThickness / 2)
 115       .endFill();
 116
 117     body.addChild(center);
 118
 119     return body;
 120   },
 121
 122   /**
 123    * Creates an arena graphic
 124    *
 125    * @function createArena
 126    * @memberof PixiFactory
 127    * @return {external:CreateJs.Container} the created container
 128    */
 129   createArena(config) {
 130
 131     const radius = config.radius;
 132
 133     const lineThickness = 20;
 134
 135     // The body
 136     const arena = new Graphics();
 137     arena.lineStyle(lineThickness, 0xdfd4b2, 1)
 138       .drawCircle(0, 0, radius);
 139
 140     const leftLine = new Graphics();
 141     leftLine.lineStyle(20, 0xbdb08b, 1)
 142       .moveTo(-radius / 4, -radius / 8)
 143       .lineTo(-radius / 4, radius / 8);
 144
 145     const rightLine = new Graphics();
 146     rightLine.lineStyle(20, 0xbdb08b, 1)
 147       .moveTo(radius / 4, -radius / 8)
 148       .lineTo(radius / 4, radius / 8);
 149
 150     arena.addChild(leftLine);
 151     arena.addChild(rightLine);
 152
 153     return arena;
 154   },
 155
 156   /**
 157    * Creates a blush for the face
 158    *
 159    * @function createBlush
 160    * @memberof PixiFactory
 161    * @return {external:CreateJs.Container} the created container
 162    */
 163   createBlush(config) {
 164
 165     const radius = config.radius;
 166
 167     const blush = new Graphics();
 168
 169     blush.name = 'blush';
 170     blush.visible = false;
 171
 172     const leftEyebrow = new Graphics();
 173     leftEyebrow.lineStyle(4, 0x11, 1)
 174       .arc(
 175         -radius / 3 - radius / 4, -radius / 2 - radius / 4,
 176         radius / 3,
 177         Math.PI / 8,
 178         2 * Math.PI / 3
 179       );
 180
 181     const leftBlush = new Graphics();
 182     leftBlush.lineStyle(4, 0xe7bfe6, 1)
 183       .moveTo(-radius / 3 - radius / 4, radius / 10)
 184       .lineTo(-radius / 3, 0);
 185
 186     const rightEyebrow = new Graphics();
 187     rightEyebrow.lineStyle(4, 0x11, 1)
 188       .arc(
 189         radius / 3 + radius / 4, -radius / 2 - radius / 4,
 190         radius / 3,
 191         Math.PI / 3,
 192         7 * Math.PI / 8
 193       );
 194
 195     const rightBlush = new Graphics();
 196     rightBlush.lineStyle(4, 0xe7bfe6, 1)
 197       .moveTo(radius / 3 + radius / 4, radius / 10)
 198       .lineTo(radius / 3, 0);
 199
 200     blush.addChild(leftEyebrow);
 201     blush.addChild(leftBlush);
 202     blush.addChild(rightEyebrow);
 203     blush.addChild(rightBlush);
 204
 205     return blush;
 206   }
 207 };