mexDev

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

Recommended Posts

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):

rre8Dcp.png

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

LinkButton-sample.zip

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.