【cocos2dx】ソーシャルメディアへの「スクリーンショット」を工夫する

cocos2d cocos2d-x

前作までは、スクリーンショットをそのまま利用してTwitterに投稿できるように実装をしていました。 ただ、ゲーム画面そのままを送るのは味気ないと思っていたので、今作品では少し工夫をしてみました。 今回は、この実装方法をブログに書いていきたいです。

工夫一覧

cocos2d-xではじめるスマートフォンゲーム開発 [cocos2d-x Ver.3対応] for iOS/Androidcocos2d-xではじめるスマートフォンゲーム開発 [cocos2d-x Ver.3対応] for iOS/Android
三木 康暉

技術評論社
売り上げランキング : 7906

Amazonで詳しく見る

基本

Twitterの投稿に関しては、下記サイトを参考にしています。 実装に関しては、こちらをご確認下さい。

何をスクリーンショットに移すか

ゲーム画面そのままを送りたい場合は何もしなくて良いのですが、画面上から必要なモノ・必要では無いモノがあると思います。 これを予め選別をして、スクリーンショットを撮るよう工夫をしました。

2015 2 18 dsasa

例えば、kTagGameLayerというタグのレイアーを撮影する場合は以下のようなコードになります。 [c] //撮影したいレイアーなりオブジェクトを取り出す。 auto bg =_scene->getChildByTag(kTagGameLayer);

Size size = Director::getInstance()->getVisibleSize(); RenderTexture* texture = RenderTexture::create(size.width,size.height); texture->setPosition(Point(size.width/2,size.height/2));

//撮影開始 texture->begin();

//撮りたいレイアーを描画
bg->visit();

//撮影終了 texture->end();

//保存 texture->saveToFile("screenshot.jpg", Image::Format::JPG);

[/c]

こうすれば、必要なオブジェクトだけ撮影することができます。

スクリーンショットに画像を挿入する

先ほどの応用で、画面上になり画像をスクリーンショットに挿入することができます。 これを利用すれば、カメラアプリのように画像が少し面白くなります。 【参考:こんな感じにしたかった】

実装は非常に簡単です。 まず、スクリーンショットに挿入したい画像を用意します。

Share icon000

これを先ほどと同じようにスクリーンショットに挿入する際に追加をしてあげます。 [c] texture->begin();

auto sprite = Sprite::create("image.png"); sprite->setPosition(winsize.width/2,winsize.height/2); sprite->retain();

sprite->visit();

texture->end();

[/c]

追加する画像を置く位置は調整をしてください。 これが結構難しかったです。

2015 2 18 dsas2a

確認画面を作る

下記のような画面です。

IMG 1609

先ほど撮影をしたスクリーンショットを取り出して表示するだけで実装ができます。 [c] std::string fileNamePath = FileUtils::getInstance()->getWritablePath().append("screenshot.jpg"); auto sprite = Sprite::create(fileNamePath.c_str()); this->addChild(sprite,0,121); [/c]

注意点

個人的に凄く悩んだことなのですが、スクリーンショットの撮影をやり直した場合に画像が更新されないという問題です。 これは、キャッシュが残っているために発生しているみたいで、撮影をやり直す前に、スクリーンショットを削除する必要があります。 [c] std::string fileNamePath = FileUtils::getInstance()->getWritablePath().append("screenshot.jpg"); Director::getInstance()->getTextureCache()->removeTextureForKey(fileNamePath); [/c]

サイズを変更する - iOS

スクリーンショットを撮影すると、デバイスの画面全体が撮影されます。 とても大きくなってしまうのは、タイムライン上に表示した時に鬱陶しく感じるのではないかと思い、この部分を調整しました。

なおコードは先ほどのCocos2d-x 3.2でスクリーンショットを撮ってツイートを参考にして下さい。 [c] NSString serviceType = SLServiceTypeTwitter; SLComposeViewController composeCtl = [SLComposeViewController composeViewControllerForServiceType:serviceType]; [composeCtl setInitialText:tweet]; UIImage *_image = [UIImage imageWithContentsOfFile:filePath];

//切り抜き int imageW = image.size.width; int imageH = image.size.height;

// 切り抜く位置を指定するCGRectを作成する。 // 今回は、画像の中心部分を320×320で切り取る例。 // なお簡略化のため、imageW,imageHともに320以上と仮定する。 int posX = (imageW - 320) / 2; int posY = (imageH - 880) / 2; CGRect trimArea = CGRectMake(posX, posY, 640, 750);

// CoreGraphicsの機能を用いて、 // 切り抜いた画像を作成する。 CGImageRef srcImageRef = [_image CGImage]; CGImageRef trimmedImageRef = CGImageCreateWithImageInRect(srcImageRef, trimArea); UIImage *trimmedImage = [UIImage imageWithCGImage:trimmedImageRef];

[composeCtl addImage:trimmedImage]; [/c]

Android

Androidはやり方がわからなかったので、もし良い方法があれば教えて下さい。

最後に

スクリーンショットを工夫するのは、あくまでソーシャル的な広がりを誘導するためです。 今回のこの実装は、去年大ヒットした「みつけて！おじぽっくる【ちっさいおっさん発見＆収集ゲーム】」を真似しました。 どこかで見たことあると思われた方、それは「みつけて！おじぽっくる」です。 tweet機能を使うなら、みんなが拡散をしやすいようなスクリーンショットを作成したいですね。