Source code

// Simple drag component
class DragComponent extends Component {
  constructor() {
    super();

    this.dragging = false;
    this.clickPos = new Vector();
  }

  onAdded(gameObject) {
    // Add InputComponent is required in order to Sprite listen for input
    gameObject.addComponent(new InputComponent());

    gameObject.on('pointerDown', this.onPointerDown, this);

    Black.input.on('pointerMove', this.onPointerMove, this);
    Black.input.on('pointerUp', this.onPointerUp, this);
  }

  onPointerDown(msg) {
    this.clickPos = this.gameObject.globalToLocal(Black.input.pointerPosition);
    this.dragging = true;
  }

  onPointerMove(msg) {
    if (this.dragging === false)
      return;

    // Find the offset relative to its parent
    let parentPos = this.gameObject.parent.globalToLocal(Black.input.pointerPosition);

    // Set a new position
    this.gameObject.x = parentPos.x - this.clickPos.x + this.gameObject.pivotX;
    this.gameObject.y = parentPos.y - this.clickPos.y + this.gameObject.pivotY;
  }

  onPointerUp(msg) {
    this.dragging = false;
  }
}

class MyGame extends GameObject {
  constructor() {
    super();

    Black.stage.scaleMode = StageScaleMode.LETTERBOX;
    Black.stage.setSize(500, 500);

    // Pick up default AssetManager
    var assets = new AssetManager();

    // Preload images and sounds

    assets.enqueueImage('bg', `/assets/examples/backgrounds/popart_bg_b_2.png`);
    assets.enqueueImage('speaker', `/assets/examples/popart_speaker.png`);
    assets.enqueueImage('ear', `/assets/examples/popart_ear.png`);
    assets.enqueueSound('music1', '/assets/examples/drum.mp3');
    assets.enqueueSound('music2', '/assets/examples/bass.mp3');
    assets.enqueueSound('music3', '/assets/examples/strings.mp3');
    assets.enqueueSound('music4', '/assets/examples/vibes.mp3');

    // Listen for a complete message
    assets.on('complete', this.onAssetsLoaded, this);

    // Start preloading all enqueued assets
    assets.loadQueue();
  }

  onAssetsLoaded(m) {
    this.touchable = true;

    this.speakers = [];
    this.sounds = [];

    // Creating sprites for each sound with assigned specific sound component
    for (let i = 0; i < 4; i++) {
      let speaker = new Sprite('speaker');
      speaker.alignPivot();
      this.addChild(speaker);
      let comp = new Sound('music' + (i + 1), 'master', true, 8);
      comp.playOnAdded = false;
      speaker.addComponent(comp);
      this.speakers.push(speaker);
      this.sounds.push(comp);
    }

    this.speakers[0].x = 50;
    this.speakers[0].y = 70;

    this.speakers[1].x = 450;
    this.speakers[1].y = 70;

    this.speakers[2].x = 50;
    this.speakers[2].y = 430;

    this.speakers[3].x = 450;
    this.speakers[3].y = 430;

    let ear = this.addChild(new Sprite('ear'));
    ear.touchable = true;
    ear.alignPivot();
    ear.x = 250;
    ear.y = 250;
    ear.add(new DragComponent());

    // Creating sound listener and assigning it to dragable sprite
    let listener = new SoundListener();
    ear.addComponent(listener);
    listener.listen();

    Black.input.once('pointerDown', this.startSounds, this);
  }

  startSounds(msg) {
    this.sounds.forEach(x => x.play(1, true));

    this.speakers.forEach(x => {
      let t = new Tween({ scaleY: [1.1, 1], scaleX: [1.1, 1] }, 0.4, { delay: 0.34, ease: Ease.cubicOut, loop: true });
      x.addComponent(t);
    });
  }
}

var engine = new Engine('game-container', MyGame, CanvasDriver, [Input, MasterAudio]);
engine.start();