おもちゃラボ

Unityで遊びを作っていきます

【Unity】Social ConnectorでTwitterにスクショを投稿する

UnityでTwitterやFacebook、InstagramなどのSNSに画像を投稿する機能を追加するにはSocial Connectorを使うのが便利です。2018年5月現在、Androidをターゲットにするとうまく動かないポイントがあったので、それを含めて紹介していきたいと思います。

f:id:nn_hokuson:20180516195356j:plain

Social Connectorの入手と設定

Social Connectorは現在Asset Storeでは配布されていないようですので、次のサイトから入手して下さい。
github.com

ダウンロードできたら、SocialConnector.unitypackageをダブルクリックしてアセットをプロジェクトにインポートして下さい。Assets以下にSocialConnectorフォルダができるはずです。

f:id:nn_hokuson:20180512222321p:plain:w500

次にwrite accessの設定を行います。メニューバーからEdit→Project Settings→Playerを選択して、Player Settingsを表示して、Other Settingsのwrite accessの項目を「External(SD Card)」に設定して下さい。

f:id:nn_hokuson:20180516193500p:plain:w600

スクショを投稿するスクリプトを作成する

プロジェクトウィンドウで右クリック→Create→C# Scriptを選択し、ShareControllerという名前で保存します。保存できたら次のスクリプトを入力して下さい。

using UnityEngine;  
using System.IO;  
using System.Collections;  
using SocialConnector;  
using UnityEngine.UI;  
  
public class ShareController : MonoBehaviour  
{  
    public void Share()  
    {  
        StartCoroutine(_Share());  
    }  
  
    public IEnumerator _Share()
    {
        string imgPath = Application.persistentDataPath + "/image.png";

        // 前回のデータを削除
        File.Delete(imgPath);

        //スクリーンショットを撮影
        ScreenCapture.CaptureScreenshot("image.png");

        // 撮影画像の保存が完了するまで待機
        while (true)
        {
            if (File.Exists(imgPath)) break;
            yield return null;
        }

        // 投稿する
        string tweetText = "";
        string tweetURL = "";
        SocialConnector.Share(tweetText, tweetURL, imgPath);
    }
}

_Shareコルーチンの中でスクリーンショットの撮影と、SNSへの投稿を行っています。Unityでスクリーンショットを撮影するにはScreenCapture.CaptureScreenshotを使います。以前まではApplication.CaptureScreenshotでしたが、いつの間にか変わったようですね(^^;)

ただ、CaptureScreenshotの機能は変わっていません。相変わらず、スクリーンショットの保存が完了した時にコールバックを返してもらえないので、撮影画像の保存が完了するまで待つループを差し込んでいます。適当に数秒待つのは危険なので止めておきましょう。

最後に SocialConnectorクラスのShareメソッドを使ってSNSへの投稿画面を表示をしています。Shareを実行すると次のようにSNSの選択画面が表示され、投稿したいSNSを選択するとそのアプリが起動します。

f:id:nn_hokuson:20180516194159j:plain:w320

Androidで動かない場合の対策

2018年5月現在、iPhoneでは上記の手順で問題なく動作するのですが、Androidを使用した場合、上記の手順のままではSNSの選択画面が出てきませんでした。

原因と対策も上記サイトにまとめられています。

Android API Level 24 から、画像のシェアにおいて FileProvider の使用が必須となりました。このため、プロジェクト単位で AndroidManifest.xml をカスタマイズしなければいけません。

1. Androidフォルダの移動

Assets/SocialConnector/Plugins/AndroidフォルダをAssets/Plugins/Androidフォルダーに移動(Pluginsフォルダながければ作成)してください。

f:id:nn_hokuson:20180512224248p:plain:w500

2. AndroidManifest.xmlの編集

次に、Assets/Plugins/Android/AndroidManifest.xml内のcom.kyusyukeigo.socialconnector.fileproviderのxxx.xxx.xxx.fileproviderの「x」の部分を自分のパッケージ名に書き換えてください。パッケージ名は、Player SettingsのIdentificationやApplication.identifierで確認できます。

上の2つの手順を行うことで、AndroidでもSNSへの投稿画面が表示されるようになりました。

【Unityシェーダ】Shader Graph超入門

Unity2018からシェーダをノードベースで作れる「Shader Graph」という機能が提供されています(まだPreviewですが)これまでは、ノードベースでシェーダを開発しようとするとShader Forgeとかの有料アセットを使う必要がありましたが、これからは「Shader Graph」に一本化されそうですね。

f:id:nn_hokuson:20180508212141j:plain:w700

ここでは、2018年5月の段階で、とりあえずShader Graphを触ってみる、というところまで解説したいと思います。目次は次のとおりです。

プロジェクトを作成する

「Shader Graph」はUnity2018以降で使うことができます。ということで、まずはUnity2018をインストールしましょう。

インストールができたら、早速プロジェクトを作ります。「Shader Graph」は現在のところ、Lightweightのプロジェクトでしか使うことができないようです。プロジェクトを作成するときにはTemplateでLightweight RP(Preview)を選択するようにしましょう。

f:id:nn_hokuson:20180508201418p:plain:w500

Shader Graphをインストールする

Unity2018.0f2ではまだShader GraphはPreviewの状態なので、手動でインストールしなければ使うことができません。

ツールバーのWindow→Package Managerを選択して、Allのタブを選択し、「ShaderGraph 1.1.4」をクリック、右ペインで「Install」ボタンを押してください。

f:id:nn_hokuson:20180508201701j:plain:w600

これで、ようやくUnity2018で「Shader Graph」を使うことができるようになりました。

Shaderとマテリアルを作成する

通常のシェーダと同じく、まずはシェーダファイルを作ります。プロジェクトウィンドウで右クリックし、Create→Shader→PBR Graphを選択してください。名前はblendTexとしておきましょう。

f:id:nn_hokuson:20180508202037p:plain:w600

また、このシェーダを適用するマテリアルを作ります。作成したblendTexture.shaderを選択した状態で、右クリック→Create→Materialを選択してください。作成したマテリアルは適当なオブジェクトにアタッチしておきましょう。

f:id:nn_hokuson:20180508202453j:plain:w600

Shader Graphを使ってテクスチャブレンドする

さて、いよいよ「Shader Graph」の出番です。今回は初回なので2枚のテクスチャをブレンドするだけの超簡単なシェーダプログラムにしましょう。

まずはblendeTexをダブルクリックすると、「Shader Graph」のウインドウが立ち上がります。左側にあるのは外部からシェーダへ値を入力できるプロパティウインドウ、真ん中がGUIでシェーダを作る部分、右側が出力結果のウインドウ(やたらでかい)になります。

f:id:nn_hokuson:20180508202840j:plain

ノードを配置する

まずは使用する2枚のテクスチャ読み込むノードを配置しましょう。ウインドウ上で右クリックするとメニューが出てきます。Create Nodeをクリックして、Input→Texture→Sample Texture 2Dを選択してください。配置できたら、左側にあるタグの丸ポチをクリックして、テクスチャを読み込んでください。

f:id:nn_hokuson:20180508203602j:plain:w550

画面上にテクスチャ読み込み用のノードが配置されます。同様の方法で、同じノードをもう一つ追加しましょう(cmd+Dでノードを複製することもできます)追加できたら、こちらもテクスチャを読み込みましょう。

f:id:nn_hokuson:20180508203757j:plain:w550

続いてこの2枚のテクスチャをブレンドするためのノードを配置します。Create Nodeをクリックして、Artistic→Blend→Blendを選択して、Blendノードを配置してください。

f:id:nn_hokuson:20180508203916j:plain:w550

ノードを接続する

これで必要なノードを配置することができました。次はこれらのノードを接続していきましょう。1枚目のSample Texture 2Dノードの出力RGBA(4)からBlendノードのBase(1)へドラッグ&ドロップします。

f:id:nn_hokuson:20180508204254g:plain:w450

同様にして2枚目のSample Texture 2Dノードの出力RGBA(4)からBlendノードのBlend(1)へドラッグ&ドロップします。ノードを接続した結果はこんな感じになります。

f:id:nn_hokuson:20180508204918j:plain:w450

2枚のテクスチャをブレンドする割合はBlendノードのOpacityで設定します。ここではOpacityを0.5に設定して2枚のテクスチャが半分ずつ混ざるようにしておきましょう。

f:id:nn_hokuson:20180508205105j:plain:w300

最後にBlendノードのOut(1)からPBR MasterのAlbedo(3)へドラッグ&ドロップします。これで作成したシェーダの内容が出力結果に反映されるようになります。

f:id:nn_hokuson:20180508205344j:plain:w550

ここまでで、今回の「Shader Graph」の作成は終了です。最後に左上のSave Assetボタンを押して作成したシェーダを保存してください。

f:id:nn_hokuson:20180508205532p:plain:w450

もう少し便利にする

テクスチャのブレンド具合を変更する場合、いちいち値を入力するのは面倒ですね。(実はOpacityの「X」をドラッグすると値を変えられるのですが・・・笑)そんな時のためにSliderというノードが用意されています。

ウインドウ上で右クリックしてCreate Nodeを選択し、Input→Basic→Sliderを選択してください。SliderノードのOut(1)からBlendノードのOpacity(1)にドラッグ&ドロップして、これらのノードを接続してください。

f:id:nn_hokuson:20180508205916g:plain:w200

Sliderノードのスライダーをドラッグ&ドロップすることでブレンド具合を変更することができるようになります。

f:id:nn_hokuson:20180508211354g:plain:w450

インスペクタからシェーダの値を変えられるようにする

「Shader Graph」の中で指定した値をUnityのインスペクタから操作したい場合、値をPropertyに変換する必要があります。ここではSliderノードの値をインスペクタから変更したいので、Sliderノードを選択した状態で右クリックして、Convert to Propertyを選択して下さい。

f:id:nn_hokuson:20180508210711p:plain:w400

再度、ShaderGraphのウインドウ左上のSave Assetをクリックしてから、Unityエディタに戻ってインスペクタを見てみて下さい。Vector1という欄が追加されていると思います。ここの値を変更することで、ブレンド具合を変えることができます。

f:id:nn_hokuson:20180508211854j:plain:w350

結果確認

Unityのウインドウに戻ると、作成したシェーダが反映されていることがわかると思います。このように「Shader Graph」を使うことで、複雑なプログラムを書かなくても簡単にシェーダを作成することができるようになります。

f:id:nn_hokuson:20180508212141j:plain:w700

次回以降、これまでに作成したUnityのシェーダを「Shader Graph」を使って書き直していきたいと思います!その他のUnityシェーダはこちらからご覧になれます。

nn-hokuson.hatenablog.com

Unityの教科書 Unity 2017完全対応版  2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)

Unityの教科書 Unity 2017完全対応版 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)