/ / / / / / / / / 【Game Maker Studio 2 】アセット「Share」を用いて，ゲーム内にシェアボタンを実装する方法（Spriteの画像を保存する方法）

【Game Maker Studio 2 】アセット「Share」を用いて，ゲーム内にシェアボタンを実装する方法（Spriteの画像を保存する方法）

インターン先で「Game Maker Studio 2（以下GMS2）」というゲームエンジンを用いてゲーム制作をしていました。ちなみに現在は完成させたので，素材と企画書の完成待ちです。その間にウェブ系のお仕事いただきました。ウェブ系は苦手なんですけどね汗

このGMS2くんは海外でこそUnityに次いで用いられているそうですが，日本ではほぼ使われていないようで，ネットで検索してもUnityなどのように日本語の参考になるサイトはヒットしません（辛い）。
※一応最近Switch対応ということである程度知られた気もしますが，相変わらず日本語資料は少ないし，日本国内の知名度は低い。Undertailとかはこのゲームエンジン製。

ということで，備忘録としてシェアボタン実装方法を残しておきたいと思います。
「Share」という有料アセット(約600円)を今回用いました。
マーケットでのスクリーンショットは各OSのバージョンが古めですが，最新のOSでも動きます。また，アセットの対応GMSのバージョンが1.4となっていますが，2.0以降でも使えました。
Shareアセットの購入方法等は省きます。

素材(Sprite)の準備

まずは素材の準備をしましょう。
今回はTwitterとFacebookのシェアボタンを実装したので，これらの素材を公式の画像からいただきます。今回は一応仮実装なので，もし正式にリリースする場合には著作権等をよく確認してから使用しましょう。
　
 

GMS2側の作業に移ります。Spritesを新規作成します。名前を適当に「spr_Share」にでもしておきます。

Import ImageでまずTwitterの画像を読み込みます。Spriteが1つ表示されました。これをコピペし，Edit Imageを選択します。スポイトで水色を吸い取り，少し暗くさせて，バケツで塗りつぶします。
Color Picker…スポイトツールで色を吸い取って
少しだけ暗くします（縦長い部分で矢印を下に下げれば暗くなります）

これでボタンを押したときの画像が完成。GMS2のいいところは，ゲーム内で簡単な画像編集が行える点ですね。

同様にしてFacebookも取り込みたいところですが，Import ImageをするとTwitter画像が上書きされてしまいます。なので，保存したファイルをドラッグアンドドロップで追加します。
今回用意したFacebookの画像は四隅が丸くなっていて，Twitterのものと統一感がないのでこれを編集で四隅も塗りつぶします（塗りつぶしきれなかった場合は，鉛筆ツールで地道に塗りつぶしましょう）。そしたら，残りの作業はTwitterのものと同じくコピペして，少し暗めの色で塗りつぶして終了です。
（シェアマークのスプライトも追加しました）
ここで注意なのがSpriteのSpeedを0にしておくことです。こうしておかないと，gifのように動いてしまいます。
Twitterの画像はSprite[0]～Sprite[1]，Facebookは2～3です。image_indexでこれらのインデックスを指定すると，対応した画像になります。

「Share」の取り込み

プロジェクトに「Share」を取り込みます。すでに購入済みであるとします。
「Marketplace＞My Library」ウィンドウを開き，Shareを選択し，Importをクリックして取り込みましょう。


オブジェクトの実装

ボタンオブジェクトを用意します。
今回はすでにobj_buttonを用意してあったので，これを継承してシェアボタンを作ります。名前はobj_share_buttonとでもしておきましょう。

インスタンスオブジェクトのCreation Codeの方でTwitterシェアボタンのimage_index_leaveを0，image_index_pressedを1にします。
Facebookは2と3です。

obj_buttonのEventsに関して

obj_buttonにはCreate，Draw，Left Pressed，Left ReleasedそしてMouse Leaveが用意してあります。
ちなみにこのオブジェクトは最初にプロジェクトにいた方が作ったものです笑
  • Create 
    self.is_valid = true;
  • Draw 
    // Write Creation Code

draw_self();

draw_set_color(c_black);
draw_set_halign(fa_center);
draw_set_valign(fa_middle);
draw_set_font(fnt_button_0);

draw_text(x, y, self.text);
  • Left Pressed 
    if(self.is_valid)
{
 image_index = self.image_index_pressed;
}
  • Mouse Leave 
    if(self.is_valid)
{
 image_index = self.image_index_leave;
}
Left Pressedは長いうえに，今回オーバーライドするので省きます。

今回オーバーライドするのはDrawとLeft Releasedです。
obj_buttonでは文字を出力することを想定しているので，draw_self();だけにします。
Left Releasedに関しては次節で説明していきます。

Sprite画像をpng画像として保存し直す

画像を共有したい場合がほとんどだと思いますが，ここで厄介なのが，GMS2がサンドボックス化されているということです。自分もここら辺はまだ完全には理解できてはいないのですが，Include File等に配置した画像などはShareのshare_ext_add_image()では使用できないです。
あと，今回そもそもSpriteに設定している画像を保存したかったので，そもそもInclude Fileのものでは困るということもありました。

正直ここが今回の一番の肝です（自分が苦戦したってだけですが）。

GMS2にはSurfaceにSpriteを貼り付け編集することができるようになっています。Spriteの合成等もできます。これを用いれば，画像を新規に保存できます。合成できると特性を生かせば，ロゴ入りのものをシェアさせる等も容易に実装できそうですね（今回は仮のカード絵を共有するだけにとどまります）。

Left Releasedは以下の通り。self.is_validというのは，ボタンが有効かどうかということのよう。おそらく，何かしらの操作でフォーカスがずれることを想定しての実装でしょう。つまり今回は気にすることはない部分ということです笑
if(self.is_valid){
 image_index = self.image_index_leave;
 
 share_ext_prepare();
 share_ext_add_text(string(global.card_name[? string(self.show_number)]) + "を持っています。"); 
 
 var surf, sprites, sp_w, sp_h;
 sp_w = 720;
 sp_h = 960;
 surf = surface_create(sp_w, sp_h);
 surface_set_target(surf);
 draw_sprite(spr_card_demo, 1, 0, 0);
 sprites = sprite_create_from_surface(surf, 0, 0, sp_w, sp_h, false, true, 0, 0);
 surface_reset_target();
 surface_free(surf);
 
 sprite_save(sprites, 0, "ShareImage.png");
 sprite_delete(sprites);
 
 share_ext_add_image("ShareImage.png");
 
 switch(self.action){
  case 0:
   //Twitter
   share_ext_set_activity(ACTIVITY_TYPE_TWITTER);
   break;
  case 1:
   //顔本
   share_ext_set_activity(ACTIVITY_TYPE_FACEBOOK);
   break;
 }
 share_ext_launch();
}

「Share」自体の細かいことは付属のドキュメントを見ていただくとして…
問題はshare_ext_add_image()に送るイメージファイルです。

今回はShareImage.pngというネームで保存し，それをシェアに渡す形になっています。
まずSurfaceを，共有する画像のサイズで作り，編集のターゲットにします。
今回は値を直に入力していますが，いろいろなSpriteに対応させたい場合は，各々のサイズを取得するようにしましょう。

今回共有したいSpriteはspr_card_demoという名前ですので，draw_sprite()の第一引数にこちらを入れます。第二引数はSpriteのインデックス値で，0から始まります。今回は2つ目のSpriteを共有したので1になっていますが，多くの場合は0でしょう。
0が続く残りの引数ですが，こちらはSpriteを置く位置です。左上が0,0になります（GMS自体がそういう仕様）。今回共有するSpriteの座標基準ポジション，いわばSpriteの0,0をLeft Topにしているので，0,0にそのまま置くだけでいいのですが，たとえばSpriteの0,0をど真ん中などに設定している場合は少し設置する際に座標を気にする必要が出てきます。
Spriteを複数追加したい場合はここで行います。
今回は1つだけなので，spritesにSurfaceから作成したSpriteを代入して終了です。
falseやtrueはSpriteをそのままの状態（透過度等）で保存したい場合は上記コードと同じようにすれば問題ないです。色々カスタマイズしたい方は，公式のリファレンス見てくださいね。
resetだのfreeだのは，使ったSurfaceはしっかりとターゲットから外したうえで解放してあげましょうねということです。
sprite_saveで先ほどのSpriteを保存します。0というのはSpriteのインデックス値です。第三引数に保存名を指定します。
保存したら要らなくなったspritesは削除します。

ここまで書いといてなんですが，sprite_saveの第一引数にpngとして保存したいSpriteを入れればいいので，わざわざSurfaceに書き出して～なんてことしなくてもよさそうですね笑
書きながら気づいた笑
ただ，既存のSpriteに，共有時ロゴを入れたいという場合は上記の方法でやるのが有効です。

まとめ（？）

GMS2にはビジュアルプログラミングも可能になっているので，お手軽にゲームが作成できるのが売りらしいですが…今回はゴリゴリ書いてく方で説明していきました。慣れたらゴリゴリ書いた方が実際楽だと思います，たぶん。
2Dゲームを作る際はUnityだけではなくGMS2を使ってみてはいかがでしょうか？

0 Response to 【Game Maker Studio 2 】アセット「Share」を用いて，ゲーム内にシェアボタンを実装する方法（Spriteの画像を保存する方法）

コメントを投稿
登録: コメントの投稿 (Atom)