Twitter Tutorial Phaser

Tweeting with Twitter API in Phaser

Getting started with making a twitter button

Social integration has become the corner stone of games. It's great to get 1 player who loves his / her experience in your game, but why not make it easy for them to tween about it?

Twitter is among the top 5 social features recommended to have in your game. Gamespakrs wrote a great post about this, which you can read about here.

So lets go ahead and set place a twitter button on our stage.


create() {
    // create background image
    let background = this.game.add.image(0, 0, 'menuBackground');
    // create twitter image
    let twitter = this.add.image(250, 250, 'twitterLogo')
}
Twitter Icon

Setting the input

Now we just need to enable the input on the display object, and add a function to the onInputUp callback.


create() {
    ...
    twitter.inputEnabled = true;
	twitter.events.onInputUp.add(() => {
		window.location = "https://twitter.com/intent/tweet"
    });
}
twitter example tween

Creating a reusable function

When clicking on this, it will take you to twitter, with the new tweet page already open. There is a slight problem though, it opens in the same tab as the game is being played in. To get around this, we can use the window.open function, in which the first parameters accepted is the url string. Just as a side note, you can't tell if it will open a new browser or window. That depends entirly on the users browser settings.

We can go a step further than this though. Twitters API allows additional parameters to be sent through as web querey parameters. You can read more on their API here https://dev.twitter.com/web/tweet-button

The twitter tween intent accepts two parameters by standard, message and hashtags. Passing in either or both will pre-fill your tween input box with the information you give it.

Lets go ahead and create a function that will open a new tween and pass some parameters.


tweet(message, hashtags) {
    let uri = 'https://twitter.com/intent/tweet';
    // if both message and hashtags are to be passed
    if(typeof(message) === 'string' && typeof(hashtags) === 'string') {
        uri += '?text=' + message;
        uri += '&hashtags=' + hashtags;
    // if only message is to be passed
    } else if (typeof(message) === 'string') {
        uri += '?text=' + message;
    // if only hashtags are to be passed
    } else if (typeof(hashtags) === 'string') {
        uri += '?hashtags=' + hashtags;
    }
    // open the new window
    window.open(uri);
}

Now, to use it, just simply call the function on the input down, and pass your parameters as you see fit.


twitter.events.onInputUp.add(() => {
    this.tweet('@sprite-storm awesome game guys!', 'sprite-storm,gaming,phaser');
});
Twitter tweet box with hashtags and a message

Of course, you can call this function whenever you like. If someone wins a level, maybe when they level up, or complete the game.

Stay tuned for more of these social integration tutorials.

Posted by Nicholas Mordecai

2 comments

Nice!

What about images? I can take a screenshot of a scoreboard, for example, but how can I share that image?

Nicholas Mordecai

Hmm, that’s a good point! I’ll go ahead and take a look at this as soon as I can =) Thanks!

Leave a Reply