Render Sumo (#3)

[rbdr/sumo] / lib / factories / pixi.js

import { Graphics } from 'pixi.js';

/**
 * Factory object that contains many methods to create prefab pixi
 * objects
 *
 * @type object
 * @name PixiFactory
 */
export default {

  /**
   * Creates a sumo container
   *
   * @function createSumo
   * @memberof PixiFactory
   * @return {external:CreateJs.Container} the created container
   */
  createSumo() {

    const radius = 25;

    // The body
    const body = new Graphics();
    body.beginFill(0x87c5ea)
      .drawCircle(0, 0, radius)
      .endFill();

    // The mouth
    const mouth = new Graphics();
    mouth.lineStyle(10, 0xff0080, 1)
      .arc(
        0, 0, // center
        radius * 0.6,
        Math.PI / 6,
        5 * Math.PI / 6
      );

    const leftEye = new Graphics();
    leftEye.beginFill(0xffffff)
      .drawCircle(-radius / 3 - radius / 8, -radius / 4, radius / 5)
      .endFill();

    const rightEye = new Graphics();
    rightEye.beginFill(0xffffff)
      .drawCircle(radius / 3 + radius / 8, -radius / 4, radius / 5);

    const leftPupil = new Graphics();
    leftPupil.beginFill(0x11)
      .drawCircle(-radius / 3 - radius / 8, -radius / 4, radius / 10);

    const rightPupil = new Graphics();
    leftPupil.beginFill(0x11)
      .drawCircle(radius / 3 + radius / 8, -radius / 4, radius / 10);

    // The group
    body.addChild(mouth);
    body.addChild(leftEye);
    body.addChild(rightEye);
    body.addChild(leftPupil);
    body.addChild(rightPupil);

    return body;
  }
};