How to make a button link to an url using Panda'sJS framework?

[mexDev]

Hi guys!

Does anyone know how I can make a button with PandaJS that links to an URL?

Thank you in advance.

 

[SkyzohKey]

Hey,

Achieving this is pretty simple, you just have to create a Sprite that'll act as a Button and set it's onClick method to open the link you want. Here's a quick sample.

LinkButton.js :

game.module('game.LinkButton')
.body(function () {
  game.createClass('LinkButton', 'Container', {
    alt: "",
    link: "",
    opts: {
      backColor: "#ed8b00",
      foreColor: "#ed8b00",
      borderColor: "#ff8833",
      borderSize: 2,
      target: "_blank" // Can be `_blank`, `_self` or simply null.
    },
    size: {
      width: 150,
      height: 30
    },

    init: function (text, link, opts) {
      this.alt  = text || this.alt;
      this.link = link || this.link;
      game.merge(this.opts, opts); // Merge both arrays.
      this.size = this.opts.size || this.size;

      this.renderButton();
      this.renderText();
      this.connectSignals();
    },

    renderButton: function () {
      this.button = new game.Graphics();

      // Basic init of the base properties.
      this.button.anchorCenter();

      // Declare the button as a button, and set it to interactive.
      this.button.interactive = true;
      this.button.buttonMode  = true;

      // If border size is > 0, draw the border.
      if (this.opts.borderSize > 0) {
        this.button.fillColor = this.opts.borderColor;
        this.button.drawRect(
          0, 0,
          this.size.width, this.size.height
        );
      }

      // Then we set the button background and draw it.
      // We also compute the border size.
      this.button.fillColor = this.opts.backColor;
      this.button.drawRect(
        0  + this.opts.borderSize,
        0  + this.opts.borderSize,
        this.size.width  - this.opts.borderSize * 2,
        this.size.height - this.opts.borderSize * 2
      );

      // Now we add the button to the Container.
      //this.button.anchorCenter();
      this.button.addTo(this);
    },

    renderText: function () {
      // Now we render the text, centered on the button.
      this.text = new game.Text(this.alt, { font: 'Verdana' });
      this.text.position.x = (this.size.width / 2) - (this.text.width / 2);
      this.text.position.y = (this.size.height / 2) - (this.text.height / 2);

      // Declare the text as a button too, and set it to interactive,
      // This avoid dead click zones.
      this.text.interactive = true;
      this.text.buttonMode  = true;
      this.text.center();

      // Then we add the text to the Container.
      this.text.addTo(this);
    },

    connectSignals: function () {
      // Button/Text clicked.
      this.button.click = this.text.click = this.openLink.bind(this);

      // When mouse is up the button/text, set the alpha to 0.7 (hover)
      this.button.mouseup = this.onHover.bind(this);

      // When mouse is out, alpha goes back to 1.
      this.button.mouseout = this.onLeave.bind(this);
    },

    // And finally the method that'll open the link on click.
    openLink: function () {
      // First we trim the uri, to avoid errors when user click it.
      var url = String(this.link).replace(/^\s+|\s+$/g, '');
      if (url != undefined && url != "") {
        window.open(url, this.opts.target);
      }
    },

    onHover: function () {
      this.button.alpha = .7;
      this.text.alpha = .7;
    },

    onLeave: function () {
      this.button.alpha = 1;
      this.text.alpha = 1;
    }
  });
});

Usage:

// On your scene you can now instanciate many link buttons.
var google = new game.LinkButton("Google", "https://google.com");
var duckduckgo = new game.LinkButton("DuckDuckGo", "https://duckduckgo.com");

// Or create a LinkButton customized via opts.

// A flat button, without border.
var opts = {
  backColor: "#3aa5dc",
  foreColor: "#fff9ea",
  borderSize: 0
};

var ricin = new game.LinkButton("Ricin messenger", "https://ricin.im", opts);

Result (looks blurry cause of BitmapText, waiting for PIXI.Text to be back):

And to finish this post, here's the full source code if you want to experiment

LinkButton-sample.zip