cyclobots-pixi-launcher.js

/*
 * dam-plus-widgets-web.js, pixi-min.js, pixi-viewport.js, and cyclobots.js must be loaded before this source.
 * After loading this source, call launch() to create and start the gewgaw.
 */

function removeVisuals(cyclobots) {
  cyclobots.forEachBot(function(bot) {
    if (bot.graphics) {
      bot.graphics.destroy();
    }
    bot.graphics = undefined;
  });
}

function setClassicVisuals(cyclobots, viewport) {
  cyclobots.forEachBot(function(bot) {
    if (bot.graphics) return;
    var graphics = new PIXI.Graphics();
    graphics.lineStyle(0);
    graphics.beginFill(0xff0000);
    graphics.drawCircle(0, 0, 10);
    graphics.endFill();
    viewport.addChild(graphics);
    bot.graphics = graphics;
  });
}

function setBlurredVisuals(cyclobots, viewport) {
  cyclobots.forEachBot(function(bot) {
    if (bot.graphics) return;
    var graphics = new PIXI.Graphics();
    graphics.lineStyle(0);
    graphics.beginFill(0xff0000);
    graphics.drawCircle(0, 0, 10);
    graphics.endFill();
    graphics.filters = [new PIXI.filters.BlurFilter()];
    viewport.addChild(graphics);
    bot.graphics = graphics;
  });
}

function setUpPixiApp(config, cyclobots) {
  var app = new PIXI.Application({ 
    width: config.width,
    height: config.height,
    forceCanvas: config.forceCanvas,
    antialias: true,
    backgroundColor : 0xffffff
  });

  var viewport = new PIXI.extras.Viewport({
      screenWidth: config.width,
      screenHeight: config.height,
      worldWidth: 1000,
      worldHeight: 1000,
      interaction: app.renderer.plugins.interaction
  });

  app.stage.addChild(viewport);
  viewport.drag();

  config.container.insertBefore(app.view, config.container.firstChild);

  app.ticker.add(function(delta) {
    cyclobots.update();
  });

  return { app: app, viewport: viewport };
}

function getRenderer(app) {
  if (app.renderer instanceof PIXI.WebGLRenderer) {
     return "WebGL";
  } else if (app.renderer instanceof PIXI.CanvasRenderer) {
     return "Canvas";
  }
  return "unknown";
}

function launch(config) {
  var cyclobots = new Cyclobots().init({
    width: config.width,
    height: config.height,
    onUpdateBot: function(bot) {
      if (!bot.graphics) return;
      bot.graphics.x = bot.x;
      bot.graphics.y = bot.y;
    }
  });

  var r = setUpPixiApp(config, cyclobots);
  var app = r.app;
  var viewport = r.viewport;

  setClassicVisuals(cyclobots, viewport);

  var div=DAM.maker('div'), button=DAM.maker('button'), span=DAM.maker('span');

  /*----- renderer panel -----*/
  var renderer = getRenderer(app);
  var rendererSpan = span("Renderer: " + renderer + ".");
  var forceRendererButton = null;
  if (renderer !== "Canvas") {
    forceRendererButton = button(
      "Force Canvas renderer",
      {
        onclick: function(e) {
          removeVisuals(cyclobots);
          app.destroy(true, true);
          config.forceCanvas = true;
          r = setUpPixiApp(config, cyclobots);
          app = r.app;
          viewport = r.viewport;
          setClassicVisuals(cyclobots, app.stage);
          forceRendererButton.remove();
          rendererSpan.innerHTML = "Renderer: Canvas.";
        }
      }
    );
  }
  var rendererPanel = div(
    rendererSpan,
    forceRendererButton
  );

  /*----- visuals panel -----*/
  var visualsPanel = div(
    DAM.makeSelect(
      {
        title: "Visuals:",
        options: [
          { text: "Classic", value: "1", setVisuals: setClassicVisuals },
          { text: "Blurred", value: "2", setVisuals: setBlurredVisuals }
        ],
        onchange: function(option) {
          removeVisuals(cyclobots);
          option.setVisuals(cyclobots, viewport);
        }
      }
    )
  );

  var actionsPanel = div(
    button("Mass confusion!", { onclick: function(e) { cyclobots.massConfusion(); } }),
    button("Revolution!", { onclick: function(e) { cyclobots.shuffle(); } })
  );

  config.container.appendChild(div(rendererPanel, visualsPanel, actionsPanel));
}