Kei Osumi – ページ 2

cocos2d-xアニメーション

くまのがっこう神経衰弱バトル

くまのがっこう神経衰弱バトルのオープニングとエンディングのアニメーションの作り方をご紹介します。

opening

はじめはベタにアニメーションの処理をプログラムに書いていたのですがコードが長くなりちょっとした変更も難しくなってしまいました。そこでシナリオをplistにして外に出し、それを読み込んでタイマーでアニメーション処理をする仕組みを作りました。

HelloWorldScene.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

USING_NS_CC;

class HelloWorld : public cocos2d::Layer
{
private:
    
    // スタートボタン
    Menu* _start;
    
    // アニメーション
    ValueVector _Animation;
    int         _size;
    int         _step;
    double      _time;
    double      _startTime;
    Layer*      _layerAnimation;
    
    void animationStart(Ref* sender);
    void animationStop();
    
    // アニメーションに使う画像のタグ
    std::map<std::string, int> animationTag;
   
    // アニメーションを実行する関数
    void animation(int step, ValueMap frame);
    
    // タイマー処理
    void timerAction(float fDelta);
    
    // unix時間を取得
    double unixtime();
    
public:
    static cocos2d::Scene* createScene();
    virtual bool init();
    CREATE_FUNC(HelloWorld);
    
};

#endif // __HELLOWORLD_SCENE_H__

#ifndef __HELLOWORLD_SCENE_H__

#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

USING_NS_CC;

class HelloWorld : public cocos2d::Layer

{

private:

// スタートボタン

Menu* _start;

// アニメーション

ValueVector _Animation;

int _size;

int _step;

double _time;

double _startTime;

Layer* _layerAnimation;

void animationStart(Ref* sender);

void animationStop();

// アニメーションに使う画像のタグ

std::map<std::string, int> animationTag;

// アニメーションを実行する関数

void animation(int step, ValueMap frame);

// タイマー処理

void timerAction(float fDelta);

// unix時間を取得

double unixtime();

public:

static cocos2d::Scene* createScene();

virtual bool init();

CREATE_FUNC(HelloWorld);

};

#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp

#include "HelloWorldScene.h"

// アニメーション用の画像のタグの初期値
#define TAG_ANIMATION  100

Scene* HelloWorld::createScene()
{
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    
    // アニメーションを初期化
    _size = 0;
    _step = 0;
    _time = 0;
    _Animation = FileUtils::getInstance()->getValueVectorFromFile("animation.plist");
    
    // アニメーションの素材を載せるレイヤーを生成
    _layerAnimation = Layer::create();
    this->addChild(_layerAnimation);
    
    // スタートボタン表示
    auto start = MenuItemFont::create("START", CC_CALLBACK_1(HelloWorld::animationStart, this));
    _start = cocos2d::Menu::create(start, NULL);
    _start->setPosition(Point(320, 120));
    _start->alignItemsHorizontally();
    this->addChild(_start);
    
    // タイマー処理登録
    this->schedule(schedule_selector(HelloWorld::timerAction));
    
    return true;
}

// アニメーション開始
void HelloWorld::animationStart(Ref* sender)
{
    // ボタンを非表示
    _start->setVisible(false);
    
    // アニメーションの画像を初期化
    animationTag.clear();
    _layerAnimation->removeAllChildren();
    
    // アニメーションをスタート
    _startTime = unixtime();
    _size = (int)_Animation.size();
    _step = 0;
    _time = _Animation.at(_step).asValueMap().at("time").asDouble();
}

// タイマー処理
void HelloWorld::timerAction(float fDelta)
{
    // 現在の時間を取得
    double now = unixtime();
    
    // 最後のステップではない場合はアニメーションを実行
    if (_step < _size)
    {
        // フレームの実行時間を過ぎていたらフレームの内容を実行
        if (_time <= now - _startTime)
        {
            // フレームを取得してアニメーションを実行
            auto frame = _Animation.at(_step).asValueMap();
            animation(_step, frame);
            
            // ステップを進める
            _step++;
            
            // 次のフレームを実行する時間を取得
            if (_step < _size)
            {
                _time = _Animation.at(_step).asValueMap().at("time").asDouble();
            }
        }
    }
    else
    {
        // スタートボタンを表示
        _start->setVisible(true);
    }
}

// アニメーションを実行する関数
void HelloWorld::animation(int step, ValueMap frame)
{
    // アニメーションのフレーム情報から画像名を取得
    auto imageName = frame.at("image").asString();
    
    // 画像の処理
    Sprite* image;
    if(frame.at("mode").asString().compare("ACTION") == 0)
    {
        // アニメーションフレームのモードが[ACTION]の場合は既に表示されている画像のタグから画像を取得
        image = (Sprite*)_layerAnimation->getChildByTag(animationTag[imageName]);
    }
    else if(frame.at("mode").asString().compare("ADD") == 0)
    {
        if(imageName.compare("") != 0)
        {
            // 画像名がある場合は画像を表示
            image = Sprite::create(StringUtils::format("%s", imageName.c_str()));
            // 画像を指定の座標へ設置
            image->setPosition(Point(frame.at("x").asInt(), frame.at("y").asInt()));
            // 画像を指定の透明度へ設定
            image->setOpacity(frame.at("opacity").asFloat());
            // 画像を指定の縮尺へ設定
            image->setScale(frame.at("scale").asFloat());
            // 画像を指定の角度へ設定
            image->setRotation(frame.at("rotation").asFloat());
            
            // 画像のタグを設定
            image->setTag(TAG_ANIMATION + step);
            // 画像タグリストの画像名に対するタグを記録
            animationTag[imageName] = TAG_ANIMATION + step;
            // 画像を表示
            _layerAnimation->addChild(image);
        }
    }
    
    // 画像にアクションをつける
    auto action = frame.at("action").asValueMap();
    // フレーム情報の[action]にデータがある場合はその内容を実行する
    if(0 < action.size())
    {
        if(action.at("type").asString().compare("MOVE") == 0)
        {
            image->runAction(MoveTo::create(action.at("duration").asFloat(), Point(action.at("param_1").asInt(), action.at("param_2").asInt())));
        }
        else if(action.at("type").asString().compare("FADE") == 0)
        {
            image->runAction(FadeTo::create(action.at("duration").asFloat(), action.at("param_1").asInt()));
        }
        else if(action.at("type").asString().compare("ROTATE") == 0)
        {
            image->runAction(RotateTo::create(action.at("duration").asFloat(), action.at("param_1").asFloat()));
        }
        else if(action.at("type").asString().compare("SCALE") == 0)
        {
            image->runAction(ScaleTo::create(action.at("duration").asFloat(), action.at("param_1").asFloat()));
        }
    }
}

// unix時間を取得
double HelloWorld::unixtime()
{
    struct timeval t;
    gettimeofday(&t, NULL);
    return (double)t.tv_sec + (double)t.tv_usec / 1000000;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

#include "HelloWorldScene.h"

// アニメーション用の画像のタグの初期値

#define TAG_ANIMATION 100

Scene* HelloWorld::createScene()

{

auto scene = Scene::create();

auto layer = HelloWorld::create();

scene->addChild(layer);

return scene;

}

bool HelloWorld::init()

{

if ( !Layer::init() )

{

return false;

}

// アニメーションを初期化

_size = 0;

_step = 0;

_time = 0;

_Animation = FileUtils::getInstance()->getValueVectorFromFile("animation.plist");

// アニメーションの素材を載せるレイヤーを生成

_layerAnimation = Layer::create();

this->addChild(_layerAnimation);

// スタートボタン表示

auto start = MenuItemFont::create("START", CC_CALLBACK_1(HelloWorld::animationStart, this));

_start = cocos2d::Menu::create(start, NULL);

_start->setPosition(Point(320, 120));

_start->alignItemsHorizontally();

this->addChild(_start);

// タイマー処理登録

this->schedule(schedule_selector(HelloWorld::timerAction));

return true;

}

// アニメーション開始

void HelloWorld::animationStart(Ref* sender)

{

// ボタンを非表示

_start->setVisible(false);

// アニメーションの画像を初期化

animationTag.clear();

_layerAnimation->removeAllChildren();

// アニメーションをスタート

_startTime = unixtime();

_size = (int)_Animation.size();

_step = 0;

_time = _Animation.at(_step).asValueMap().at("time").asDouble();

}

// タイマー処理

void HelloWorld::timerAction(float fDelta)

{

// 現在の時間を取得

double now = unixtime();

// 最後のステップではない場合はアニメーションを実行

if (_step < _size)

{

// フレームの実行時間を過ぎていたらフレームの内容を実行

if (_time <= now - _startTime)

{

// フレームを取得してアニメーションを実行

auto frame = _Animation.at(_step).asValueMap();

animation(_step, frame);

// ステップを進める

_step++;

// 次のフレームを実行する時間を取得

if (_step < _size)

{

_time = _Animation.at(_step).asValueMap().at("time").asDouble();

}

else

{

// スタートボタンを表示

_start->setVisible(true);

}

// アニメーションを実行する関数

void HelloWorld::animation(int step, ValueMap frame)

{

// アニメーションのフレーム情報から画像名を取得

auto imageName = frame.at("image").asString();

// 画像の処理

Sprite* image;

if(frame.at("mode").asString().compare("ACTION") == 0)

{

// アニメーションフレームのモードが[ACTION]の場合は既に表示されている画像のタグから画像を取得

image = (Sprite*)_layerAnimation->getChildByTag(animationTag[imageName]);

}

else if(frame.at("mode").asString().compare("ADD") == 0)

{

if(imageName.compare("") != 0)

{

// 画像名がある場合は画像を表示

image = Sprite::create(StringUtils::format("%s", imageName.c_str()));

// 画像を指定の座標へ設置

image->setPosition(Point(frame.at("x").asInt(), frame.at("y").asInt()));

// 画像を指定の透明度へ設定

image->setOpacity(frame.at("opacity").asFloat());

// 画像を指定の縮尺へ設定

image->setScale(frame.at("scale").asFloat());

// 画像を指定の角度へ設定

image->setRotation(frame.at("rotation").asFloat());

// 画像のタグを設定

image->setTag(TAG_ANIMATION + step);

// 画像タグリストの画像名に対するタグを記録

animationTag[imageName] = TAG_ANIMATION + step;

// 画像を表示

_layerAnimation->addChild(image);

}

// 画像にアクションをつける

auto action = frame.at("action").asValueMap();

// フレーム情報の[action]にデータがある場合はその内容を実行する

if(0 < action.size())

{

if(action.at("type").asString().compare("MOVE") == 0)

{

image->runAction(MoveTo::create(action.at("duration").asFloat(), Point(action.at("param_1").asInt(), action.at("param_2").asInt())));

}

else if(action.at("type").asString().compare("FADE") == 0)

{

image->runAction(FadeTo::create(action.at("duration").asFloat(), action.at("param_1").asInt()));

}

else if(action.at("type").asString().compare("ROTATE") == 0)

{

image->runAction(RotateTo::create(action.at("duration").asFloat(), action.at("param_1").asFloat()));

}

else if(action.at("type").asString().compare("SCALE") == 0)

{

image->runAction(ScaleTo::create(action.at("duration").asFloat(), action.at("param_1").asFloat()));

}

// unix時間を取得

double HelloWorld::unixtime()

{

struct timeval t;

gettimeofday(&t, NULL);

return (double)t.tv_sec + (double)t.tv_usec / 1000000;

}

このプログラムにアニメーションのシナリオのanimation.plistを読み込ませるとアニメーションを表示します。

http://gameshonen.com/blog/uploads/animation.plist

このplistはエクセルで作ったシナリオを一旦csvへ保存してphpを使ってplistへ変換しています。

http://gameshonen.com/blog/uploads/animation.xlsx

これはplistを生成する為のエクセルデータです。

animationXls

time: アニメーションの処理を実行する時間（秒）intervalから自動計算
interval: スレームの表示時間（秒）
image: 表示する画像ファイル名
mode: 処理の内容
position: 画像を表示する座標（x y）
scale: 画像を表示する倍率
rotation: 画像を表示する角度
opacity: 画像の透明度（0〜1.0）
action: 表示した画像にかけるエフェクト
parameter: actionのパラメーター（SCALE:倍率、MOVE:座標、FADE:透明度）
duration: actionの実行時間

このエクセルデータをcsvで保存して下記のphpでplistへ変換してアプリへ組み込みました。（ブログで表示するために拡張子を無効にしています）

http://gameshonen.com/blog/uploads/generate_plist_php

$ php generate_plist_php > animation.plist

自分が使えれば良いというレベルで作っているのでオレオレ仕様ですが、くまのがっこう神経衰弱バトルを作るときにはこの方法で正確かつ効率的にアニメーションを作る事ができましたのでご参考になればと思い公開しました。

実際にゲームに組み込んでいる処理は座標の指示や途中でイベントを差し込んだりともう少し複雑ですが、見づらくなるので根幹の部分を抽出してあります。

これからもアニメーションがたくさん入った楽しいゲームを作りたいと思います。

Pocket

cocos2d-xSNSへ画像を投稿

Pocket

くまのがっこう神経衰弱バトル

くまのがっこう神経衰弱バトルのSNS投稿の作り方をご紹介します。スコアとランクとアイテムを画像にしてTwitterへ投稿しています。Lineはテキストのみ。FacebookはSDKを入れないと投稿できないようでしたので今回は見送っています。

sns

iOS、Androidとネイティブ連携をする為に以下の3つのファイルを追加します。

SnsLauncher.h （iOS、Android共通のヘッダーファイル）

#ifndef SnsLauncher_h
#define SnsLauncher_h

#include "cocos2d.h"

class SnsLauncher
{
public:
    static void openTW(const char* msg, const char* img);
    static void openFB(const char* msg, const char* img);
    static void openLN(const char* msg, const char* img);
};

#endif

#ifndef SnsLauncher_h

#define SnsLauncher_h

#include "cocos2d.h"

class SnsLauncher

{

public:

static void openTW(const char* msg, const char* img);

static void openFB(const char* msg, const char* img);

static void openLN(const char* msg, const char* img);

};

#endif

SnsLauncher.mm （iOSのネイティブ連携用のファイル）

#include "SnsLauncher.h"
#import <Social/Social.h>
#import <UIKit/UIKit.h>

void SnsLauncher::openTW(const char* msg, const char* img)
{
    if([SLComposeViewController isAvailableForServiceType:SLServiceTypeTwitter])
    {
        NSString* message = [NSString stringWithUTF8String:msg];
        NSString* image   = [NSString stringWithUTF8String:img];
        
        UIViewController *myViewController = [UIApplication sharedApplication].keyWindow.rootViewController;
        SLComposeViewController *vc = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeTwitter];
        
        [vc setInitialText: message];
        [vc addImage:[UIImage imageWithContentsOfFile:image]];
        [myViewController presentViewController:vc animated:YES completion:nil];
    }
}

void SnsLauncher::openFB(const char* msg, const char* img)
{
    // 未実装
}

void SnsLauncher::openLN(const char* msg, const char* img)
{
    NSString* message = [NSString stringWithUTF8String:msg];
    NSString* image   = [NSString stringWithUTF8String:img];
    
    UIImage* imageData = [UIImage imageWithContentsOfFile:image];
    UIPasteboard* pasteboard = [UIPasteboard generalPasteboard];
    [pasteboard setData:UIImagePNGRepresentation(imageData) forPasteboardType:@"public.png"];
    
    // Lineの場合はテキストか画像どちらかしか投稿できません
    NSString *LINEUrlString = [NSString stringWithFormat:@"line://msg/image/%@", pasteboard.name];
    //NSString *LINEUrlString = [NSString stringWithFormat:@"line://msg/text/%@", message];
    
    if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:LINEUrlString]])
    {
        [[UIApplication sharedApplication] openURL:[NSURL URLWithString:LINEUrlString]];
    }
}

#include "SnsLauncher.h"

#import <Social/Social.h>

#import <UIKit/UIKit.h>

void SnsLauncher::openTW(const char* msg, const char* img)

{

if([SLComposeViewController isAvailableForServiceType:SLServiceTypeTwitter])

{

NSString* message = [NSString stringWithUTF8String:msg];

NSString* image = [NSString stringWithUTF8String:img];

UIViewController *myViewController = [UIApplication sharedApplication].keyWindow.rootViewController;

SLComposeViewController *vc = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeTwitter];

[vc setInitialText: message];

[vc addImage:[UIImage imageWithContentsOfFile:image]];

[myViewController presentViewController:vc animated:YES completion:nil];

}

void SnsLauncher::openFB(const char* msg, const char* img)

{

// 未実装

}

void SnsLauncher::openLN(const char* msg, const char* img)

{

NSString* message = [NSString stringWithUTF8String:msg];

NSString* image = [NSString stringWithUTF8String:img];

UIImage* imageData = [UIImage imageWithContentsOfFile:image];

UIPasteboard* pasteboard = [UIPasteboard generalPasteboard];

[pasteboard setData:UIImagePNGRepresentation(imageData) forPasteboardType:@"public.png"];

// Lineの場合はテキストか画像どちらかしか投稿できません

NSString *LINEUrlString = [NSString stringWithFormat:@"line://msg/image/%@", pasteboard.name];

//NSString *LINEUrlString = [NSString stringWithFormat:@"line://msg/text/%@", message];

if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:LINEUrlString]])

{

[[UIApplication sharedApplication] openURL:[NSURL URLWithString:LINEUrlString]];

}

SnsLauncher.cpp （Androidのネイティブ連携用のファイル）

#include "SnsLauncher.h"
#include <jni.h>
#include "platform/android/jni/JniHelper.h"
#define JNICLASSNAME "org/cocos2dx/cpp/AppActivity"

USING_NS_CC;

void SnsLauncher::openTW(const char* msg, const char* img)
{
    JniMethodInfo mi;
    if(JniHelper::getStaticMethodInfo(mi, JNICLASSNAME, "openTW", "(Ljava/lang/String;Ljava/lang/String;)V"))
    {
        jstring jstrMsg = mi.env->NewStringUTF(msg);
        jstring jstrImg = mi.env->NewStringUTF(img);
        
        mi.env->CallStaticVoidMethod(mi.classID , mi.methodID, jstrMsg, jstrImg);
        
        mi.env->DeleteLocalRef(jstrMsg);
        mi.env->DeleteLocalRef(jstrImg);
        mi.env->DeleteLocalRef(mi.classID);
    }
}

void SnsLauncher::openFB(const char* msg, const char* img)
{
    // 未実装
}

void SnsLauncher::openLN(const char* msg, const char* img)
{
    JniMethodInfo mi;
    if(JniHelper::getStaticMethodInfo(mi, JNICLASSNAME, "openLN", "(Ljava/lang/String;Ljava/lang/String;)V"))
    {
        jstring jstrMsg = mi.env->NewStringUTF(msg);
        jstring jstrImg = mi.env->NewStringUTF(img);
        
        mi.env->CallStaticVoidMethod(mi.classID , mi.methodID, jstrMsg, jstrImg);
        
        mi.env->DeleteLocalRef(jstrMsg);
        mi.env->DeleteLocalRef(jstrImg);
        mi.env->DeleteLocalRef(mi.classID);
    }
}

#include "SnsLauncher.h"

#include <jni.h>

#include "platform/android/jni/JniHelper.h"

#define JNICLASSNAME "org/cocos2dx/cpp/AppActivity"

USING_NS_CC;

void SnsLauncher::openTW(const char* msg, const char* img)

{

JniMethodInfo mi;

if(JniHelper::getStaticMethodInfo(mi, JNICLASSNAME, "openTW", "(Ljava/lang/String;Ljava/lang/String;)V"))

{

jstring jstrMsg = mi.env->NewStringUTF(msg);

jstring jstrImg = mi.env->NewStringUTF(img);

mi.env->CallStaticVoidMethod(mi.classID , mi.methodID, jstrMsg, jstrImg);

mi.env->DeleteLocalRef(jstrMsg);

mi.env->DeleteLocalRef(jstrImg);

mi.env->DeleteLocalRef(mi.classID);

}

void SnsLauncher::openFB(const char* msg, const char* img)

{

// 未実装

}

void SnsLauncher::openLN(const char* msg, const char* img)

{

JniMethodInfo mi;

if(JniHelper::getStaticMethodInfo(mi, JNICLASSNAME, "openLN", "(Ljava/lang/String;Ljava/lang/String;)V"))

{

jstring jstrMsg = mi.env->NewStringUTF(msg);

jstring jstrImg = mi.env->NewStringUTF(img);

mi.env->CallStaticVoidMethod(mi.classID , mi.methodID, jstrMsg, jstrImg);

mi.env->DeleteLocalRef(jstrMsg);

mi.env->DeleteLocalRef(jstrImg);

mi.env->DeleteLocalRef(mi.classID);

}

SnsLauncher.cppはiOSのビルドの対象にしないために、ファイルを追加する際にAdd to targetsのチェックを外してください。

snsXcode

次に投稿する画像を生成してSnsLauncherを呼び出すところです。

HelloWorldScene.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

USING_NS_CC;

class HelloWorld : public cocos2d::Layer
{
private:
    // SNSの種類を定義
    enum SnsType
    {
        TW,
        FB,
        LN
    };

    // SNS画面を表示する関数
    void openSnsTW(Ref* sender);
    void openSnsLN(Ref* sender);
    void openSns(SnsType sns, std::string msg);
    
    // メッセージをURLエンコードする関数
    std::string urlEncode(std::string &str);
    
public:
    static cocos2d::Scene* createScene();
    virtual bool init();
    CREATE_FUNC(HelloWorld);
};

#endif // __HELLOWORLD_SCENE_H__

#ifndef __HELLOWORLD_SCENE_H__

#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

USING_NS_CC;

class HelloWorld : public cocos2d::Layer

{

private:

// SNSの種類を定義

enum SnsType

{

TW,

FB,

};

// SNS画面を表示する関数

void openSnsTW(Ref* sender);

void openSnsLN(Ref* sender);

void openSns(SnsType sns, std::string msg);

// メッセージをURLエンコードする関数

std::string urlEncode(std::string &str);

public:

static cocos2d::Scene* createScene();

virtual bool init();

CREATE_FUNC(HelloWorld);

};

#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp

#include "HelloWorldScene.h"
#include "SnsLauncher.h"

USING_NS_CC;

// テクスチャーのタグを定義
#define TAG_TEXTURE_SNS   100

// テクスチャーを保存するファイルをデバイス毎に設定
#if(CC_TARGET_PLATFORM == CC_PLATFORM_IOS)

#define SHARE_FILE   "sns.png"

#elif (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)

#define SHARE_FILE   "share/sns.png"

#endif

Scene* HelloWorld::createScene()
{
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    
    // テキストボタンを表示
    auto buttonTW = MenuItemFont::create("Twitter", CC_CALLBACK_1(HelloWorld::openSnsTW, this));
    auto buttonLN = MenuItemFont::create("Line", CC_CALLBACK_1(HelloWorld::openSnsLN, this));
    auto menu = cocos2d::Menu::create(buttonTW, buttonLN, NULL);
    menu->setPosition(Point(250, 160));
    menu->alignItemsHorizontallyWithPadding(100.0);
    this->addChild(menu);
    
    /* SNSに投稿する画像を生成
     ----------------------------------------------------- */
    // テクスチャを生成
    RenderTexture* texScore = RenderTexture::create(480, 320);
    texScore->setPosition(300, 320);
    texScore->setTag(TAG_TEXTURE_SNS);
    
    // 画面上に0.8倍で表示
    texScore->setScale(0.8);
    this->addChild(texScore);
    
    // テクスチャに画像を追加
    texScore->begin();
    
    auto imageBg = Sprite::create("HelloWorld.png");
    imageBg->setPosition(Point(240, 160));
    imageBg->visit();
    
    auto image1 = Sprite::create("CloseNormal.png");
    image1->setPosition(Point(60, 100));
    image1->visit();
    
    auto image2 = Sprite::create("CloseSelected.png");
    image2->setPosition(Point(120, 100));
    image2->visit();
    
    
    texScore->end();
    
    return true;
}

void HelloWorld::openSnsTW(Ref* sender)
{
    openSns(TW, "こんにちは Twitter");
}

void HelloWorld::openSnsLN(Ref* sender)
{
    openSns(LN, "こんにちは Line");
}

void HelloWorld::openSns(SnsType sns, std::string msg)
{
    RenderTexture* texture = (RenderTexture*)this->getChildByTag(TAG_TEXTURE_SNS);
    texture->saveToFile(SHARE_FILE,
                        Image::Format::PNG,
                        true,
                        [&,sns,msg](RenderTexture* rt, const std::string& path){
                            if (sns == TW)
                            {
                                SnsLauncher::openTW(msg.c_str(), path.c_str());
                            }
                            
                            if (sns == FB)
                            {
                                // 未実装
                            }
                            
                            if (sns == LN)
                            {
                                SnsLauncher::openLN(msg.c_str(), path.c_str());
                            }
                        });
}

100

101

102

103

104

105

106

107

#include "HelloWorldScene.h"

#include "SnsLauncher.h"

USING_NS_CC;

// テクスチャーのタグを定義

#define TAG_TEXTURE_SNS 100

// テクスチャーを保存するファイルをデバイス毎に設定

#if(CC_TARGET_PLATFORM == CC_PLATFORM_IOS)

#define SHARE_FILE "sns.png"

#elif (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)

#define SHARE_FILE "share/sns.png"

#endif

Scene* HelloWorld::createScene()

{

auto scene = Scene::create();

auto layer = HelloWorld::create();

scene->addChild(layer);

return scene;

}

bool HelloWorld::init()

{

if ( !Layer::init() )

{

return false;

}

// テキストボタンを表示

auto buttonTW = MenuItemFont::create("Twitter", CC_CALLBACK_1(HelloWorld::openSnsTW, this));

auto buttonLN = MenuItemFont::create("Line", CC_CALLBACK_1(HelloWorld::openSnsLN, this));

auto menu = cocos2d::Menu::create(buttonTW, buttonLN, NULL);

menu->setPosition(Point(250, 160));

menu->alignItemsHorizontallyWithPadding(100.0);

this->addChild(menu);

/* SNSに投稿する画像を生成

----------------------------------------------------- */

// テクスチャを生成

RenderTexture* texScore = RenderTexture::create(480, 320);

texScore->setPosition(300, 320);

texScore->setTag(TAG_TEXTURE_SNS);

// 画面上に0.8倍で表示

texScore->setScale(0.8);

this->addChild(texScore);

// テクスチャに画像を追加

texScore->begin();

auto imageBg = Sprite::create("HelloWorld.png");

imageBg->setPosition(Point(240, 160));

imageBg->visit();

auto image1 = Sprite::create("CloseNormal.png");

image1->setPosition(Point(60, 100));

image1->visit();

auto image2 = Sprite::create("CloseSelected.png");

image2->setPosition(Point(120, 100));

image2->visit();

texScore->end();

return true;

}

void HelloWorld::openSnsTW(Ref* sender)

{

openSns(TW, "こんにちは Twitter");

}

void HelloWorld::openSnsLN(Ref* sender)

{

openSns(LN, "こんにちは Line");

}

void HelloWorld::openSns(SnsType sns, std::string msg)

{

RenderTexture* texture = (RenderTexture*)this->getChildByTag(TAG_TEXTURE_SNS);

texture->saveToFile(SHARE_FILE,

Image::Format::PNG,

true,

[&,sns,msg](RenderTexture* rt, const std::string& path){

if (sns == TW)

{

SnsLauncher::openTW(msg.c_str(), path.c_str());

}

if (sns == FB)

{

// 未実装

}

if (sns == LN)

{

SnsLauncher::openLN(msg.c_str(), path.c_str());

}

});

}

ここでの注意点はテクスチャに画像を追加する際にretain()するかどうかです。この実装ではretain()するとメモリリークを起こしたのでretain()しませんでした。必ずXcodeのデバッグナビゲータを使ってメモリの使用状況を確認しましょう。

// このようにretain()するとメモリリークする
    auto image1 = Sprite::create("CloseNormal.png");
    image1->retain();
    image1->setPosition(Point(60, 100));
    image1->visit();

// このようにretain()するとメモリリークする

auto image1 = Sprite::create("CloseNormal.png");

image1->retain();

image1->setPosition(Point(60, 100));

image1->visit();

iOSの場合はSocial.frameworkを追加すれば完了です。

socialFw

Androidの場合は以下の設定を追加します。

proj.android/jni/Android.mk

# SnsLauncher.cppを追加
LOCAL_SRC_FILES := hellocpp/main.cpp \
                   ../../Classes/AppDelegate.cpp \
                   ../../Classes/SnsLauncher.cpp \
                   ../../Classes/HelloWorldScene.cpp

# SnsLauncher.cppを追加

LOCAL_SRC_FILES := hellocpp/main.cpp \

../../Classes/AppDelegate.cpp \

../../Classes/SnsLauncher.cpp \

../../Classes/HelloWorldScene.cpp

proj.android/src/org/cocos2dx/cpp/AppActivity.java

package org.cocos2dx.cpp;

import org.cocos2dx.lib.Cocos2dxActivity;

import java.io.*;
import android.support.v4.content.FileProvider;

import android.content.Intent;
import android.content.pm.PackageManager;
import android.os.Bundle;
import android.os.Build;
import android.net.Uri;

public class AppActivity extends Cocos2dxActivity {
	
    private static Cocos2dxActivity me = null;

	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        me = this;
		
        // ファイル共有をするディレクトリを作成
        File sharedDirectory = new File(me.getFilesDir(), "share");
        sharedDirectory.mkdirs();
    }

	static {
        System.loadLibrary("cocos2dcpp");
    }

    /* sns
     ----------------------------------------------------- */
    // twitter
    public static void openTW(String msg, String img)
    {
        Intent intent = new Intent();
        intent.setAction(Intent.ACTION_SEND);
        intent.setPackage("com.twitter.android");
        intent.setType("image/png");
        intent.putExtra(Intent.EXTRA_TEXT, msg);
        
        File sharedFile = new File(img);
        Uri contentUri = FileProvider.getUriForFile(me, "com.gameshonen.hello.fileprovider", sharedFile);
        intent.putExtra(Intent.EXTRA_STREAM, contentUri);
        intent.setFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_RESET_TASK_IF_NEEDED);
        
        try
        {
            me.startActivity(intent);
        }
        catch (android.content.ActivityNotFoundException e)
        {
            Intent intent2 = new Intent(
                                        Intent.ACTION_VIEW,
                                        Uri.parse("http://twitter.com/intent/tweet?text=" + msg));
            me.startActivity(intent2);
        }
    }
    
    // face book
    public static void openFB(String msg, String img)
    {
		// 未実装
    }
    
    // line
    public static void openLN(String msg, String img)
    {
        Intent intent = new Intent();
        intent.setAction(Intent.ACTION_SEND);
        intent.setPackage("jp.naver.line.android");
		intent.setType("text/plain");
        intent.putExtra(Intent.EXTRA_TEXT, msg);
        
        try
        {
            me.startActivity(intent);
        }
        catch (android.content.ActivityNotFoundException e)
        {
            Intent intent2 = new Intent(
                                        Intent.ACTION_VIEW,
                                        Uri.parse("http://line.me/R/msg/text/?" + msg));
            me.startActivity(intent2);
        }
    }
}

package org.cocos2dx.cpp;

import org.cocos2dx.lib.Cocos2dxActivity;

import java.io.*;

import android.support.v4.content.FileProvider;

import android.content.Intent;

import android.content.pm.PackageManager;

import android.os.Bundle;

import android.os.Build;

import android.net.Uri;

public class AppActivity extends Cocos2dxActivity {

private static Cocos2dxActivity me = null;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

me = this;

// ファイル共有をするディレクトリを作成

File sharedDirectory = new File(me.getFilesDir(), "share");

sharedDirectory.mkdirs();

}

static {

System.loadLibrary("cocos2dcpp");

}

/* sns

----------------------------------------------------- */

// twitter

public static void openTW(String msg, String img)

{

Intent intent = new Intent();

intent.setAction(Intent.ACTION_SEND);

intent.setPackage("com.twitter.android");

intent.setType("image/png");

intent.putExtra(Intent.EXTRA_TEXT, msg);

File sharedFile = new File(img);

Uri contentUri = FileProvider.getUriForFile(me, "com.gameshonen.hello.fileprovider", sharedFile);

intent.putExtra(Intent.EXTRA_STREAM, contentUri);

intent.setFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);

intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_RESET_TASK_IF_NEEDED);

try

{

me.startActivity(intent);

}

catch (android.content.ActivityNotFoundException e)

{

Intent intent2 = new Intent(

Intent.ACTION_VIEW,

Uri.parse("http://twitter.com/intent/tweet?text=" + msg));

me.startActivity(intent2);

}

// face book

public static void openFB(String msg, String img)

{

// 未実装

}

// line

public static void openLN(String msg, String img)

{

Intent intent = new Intent();

intent.setAction(Intent.ACTION_SEND);

intent.setPackage("jp.naver.line.android");

intent.setType("text/plain");

intent.putExtra(Intent.EXTRA_TEXT, msg);

try

{

me.startActivity(intent);

}

catch (android.content.ActivityNotFoundException e)

{

Intent intent2 = new Intent(

Intent.ACTION_VIEW,

Uri.parse("http://line.me/R/msg/text/?" + msg));

me.startActivity(intent2);

}

今回は処理をAppActivity.javaに直接書きました。AppActivity.javaを継承するクラスを作るやり方もネットで紹介されていますので調べてみてください。

Twitterなどの他のアプリケーションと画像ファイルを共有する為にFileProviderの設定を追加します。

proj.android/AndroidManifest.xml

    <application android:label="@string/app_name"
                 android:icon="@drawable/icon">

        <provider
            android:name="android.support.v4.content.FileProvider"
            android:authorities="com.gameshonen.hello.fileprovider"
            android:grantUriPermissions="true"
            android:exported="false">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/filepaths" />
        </provider>
    </application>

<application android:label="@string/app_name"

android:icon="@drawable/icon">

<provider

android:name="android.support.v4.content.FileProvider"

android:authorities="com.gameshonen.hello.fileprovider"

android:grantUriPermissions="true"

android:exported="false">

<meta-data

android:name="android.support.FILE_PROVIDER_PATHS"

android:resource="@xml/filepaths" />

</provider>

</application>

android:authorities=”com.gameshonen.hello.fileprovider” を自分のアプリケーションのpackage名.fileproviderへ書き換えてください。

proj.android/res/xml/filepaths.xml を新規に追加します。

<?xml version="1.0" encoding="utf-8"?>

<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <files-path name="share" path="share/"/>
</paths>

<?xml version="1.0" encoding="utf-8"?>

<files-path name="share" path="share/"/>

</paths>

android-support-v4.jarをリンクして使えるようにします。一番簡単な方法はsdk/extras/android/support/v4/android-support-v4.jarをproj.android/libsへコピーすると使えるようになります。

Pocket

cocos2d-xスライドビュー

Pocket

くまのがっこう神経衰弱バトルのチュートリアルに使ったスライドビューの作り方をご紹介します。このビューはスワイプ操作かボタン操作を行うとページ単位でスライドが移動します。ここではスワイプ操作のみに絞ったサンプルをご紹介します。

slide

SlideView.h

#ifndef __SliderView__
#define __SliderView__

#include "cocos2d.h"

USING_NS_CC;

class SlideView : public cocos2d::Layer
{
private:
    // スライドの間隔と数
    int  _sliderSpan;
    int  _sliderNum;
    
    // スライドの座標
    int   _sliderX;
    int   _sliderP;
    float _swipeX;
    float _swipeD;
    
    // スライドの機能
    void slidePage();
    
    // スライドのレイヤー
    Layer* _layerSlide;
    
public:
    virtual bool init();
    CREATE_FUNC(SlideView);
    
    // タッチイベントの処理
    bool onTouchBegan(Touch* touches, Event *event);
    void onTouchMoved(Touch* touches, Event *event);
    void onTouchEnded(Touch* touches, Event *event);
    void onTouchCancelled(Touch* touches, Event *event);
    
    // スライドビューをセットアップ
    void setSpan(int span);
    void setNum(int num);
    void addSlide(Layer* layer);
};

#endif /* defined(__SliderView__) */

#ifndef __SliderView__

#define __SliderView__

#include "cocos2d.h"

USING_NS_CC;

class SlideView : public cocos2d::Layer

{

private:

// スライドの間隔と数

int _sliderSpan;

int _sliderNum;

// スライドの座標

int _sliderX;

int _sliderP;

float _swipeX;

float _swipeD;

// スライドの機能

void slidePage();

// スライドのレイヤー

Layer* _layerSlide;

public:

virtual bool init();

CREATE_FUNC(SlideView);

// タッチイベントの処理

bool onTouchBegan(Touch* touches, Event *event);

void onTouchMoved(Touch* touches, Event *event);

void onTouchEnded(Touch* touches, Event *event);

void onTouchCancelled(Touch* touches, Event *event);

// スライドビューをセットアップ

void setSpan(int span);

void setNum(int num);

void addSlide(Layer* layer);

};

#endif /* defined(__SliderView__) */

SlideView.cpp

#include "SlideView.h"

bool SlideView::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    
    /* 変数を初期化
     ----------------------------------------------------- */
    _sliderSpan   = 0;
    _sliderNum    = 0;
    _sliderX      = 0;
    _sliderP      = 0;
    
    /* レイヤーを生成
     ----------------------------------------------------- */
    _layerSlide = Layer::create();
    this->addChild(_layerSlide);
    
    /* タッチイベントの処理をリスナーへ登録
     ----------------------------------------------------- */
    auto listener = EventListenerTouchOneByOne::create();
    listener->onTouchBegan = CC_CALLBACK_2(SlideView::onTouchBegan, this);
    listener->onTouchMoved = CC_CALLBACK_2(SlideView::onTouchMoved, this);
    listener->onTouchEnded = CC_CALLBACK_2(SlideView::onTouchEnded, this);
    listener->onTouchCancelled = CC_CALLBACK_2(SlideView::onTouchCancelled, this);
    this->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);
    
    return true;
}

void SlideView::setSpan(int span)
{
    _sliderSpan = span;
}

void SlideView::setNum(int num)
{
    _sliderNum = num;
}

void SlideView::addSlide(Layer* layer)
{
    _layerSlide->addChild(layer);
}

// タッチイベントの処理
bool SlideView::onTouchBegan(Touch* touch, Event *event)
{
    // get touch point.
    auto point = Director::getInstance()->convertToGL(touch->getLocationInView());
    
    _sliderX = _layerSlide->getPosition().x - point.x;
    _swipeX = point.x;
    _swipeD = 0;
    
    return true;
}

void SlideView::onTouchMoved(Touch* touch, Event *event)
{
    // get touch point.
    auto point = Director::getInstance()->convertToGL(touch->getLocationInView());
    
    _layerSlide->setPosition(point.x + _sliderX, 0);
    _swipeD = _swipeX -point.x;
    _swipeX = point.x;
}

void SlideView::onTouchEnded(Touch* touch, Event *event)
{
    // swipe
    if (20 < fabs(_swipeD))
    {
        if (_swipeD < 0)
        {
            if (0 < _sliderP)
            {
                _sliderP--;
            }
        }
        else
        {
            if (_sliderP < _sliderNum - 1)
            {
                _sliderP++;
            }
        }
    }
    else
    {
        // slide
        int sX = _layerSlide->getPosition().x;
        
        if ((sX < -_sliderSpan * _sliderP - _sliderSpan / 4 ) && _sliderP < _sliderNum - 1)
        {
            _sliderP++;
        }
        else if ((-_sliderSpan * _sliderP + _sliderSpan / 4 < sX) && 0 < _sliderP)
        {
            _sliderP--;
        }
    }
    
    slidePage();
}

void SlideView::onTouchCancelled(Touch* touch, Event *event)
{
    slidePage();
}

void SlideView::slidePage()
{
    _layerSlide->runAction(EaseOut::create(MoveTo::create(0.3, Point(-_sliderSpan * _sliderP, 0)) ,2));
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

#include "SlideView.h"

bool SlideView::init()

{

if ( !Layer::init() )

{

return false;

}

/* 変数を初期化

----------------------------------------------------- */

_sliderSpan = 0;

_sliderNum = 0;

_sliderX = 0;

_sliderP = 0;

/* レイヤーを生成

----------------------------------------------------- */

_layerSlide = Layer::create();

this->addChild(_layerSlide);

/* タッチイベントの処理をリスナーへ登録

----------------------------------------------------- */

auto listener = EventListenerTouchOneByOne::create();

listener->onTouchBegan = CC_CALLBACK_2(SlideView::onTouchBegan, this);

listener->onTouchMoved = CC_CALLBACK_2(SlideView::onTouchMoved, this);

listener->onTouchEnded = CC_CALLBACK_2(SlideView::onTouchEnded, this);

listener->onTouchCancelled = CC_CALLBACK_2(SlideView::onTouchCancelled, this);

this->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);

return true;

}

void SlideView::setSpan(int span)

{

_sliderSpan = span;

}

void SlideView::setNum(int num)

{

_sliderNum = num;

}

void SlideView::addSlide(Layer* layer)

{

_layerSlide->addChild(layer);

}

// タッチイベントの処理

bool SlideView::onTouchBegan(Touch* touch, Event *event)

{

// get touch point.

auto point = Director::getInstance()->convertToGL(touch->getLocationInView());

_sliderX = _layerSlide->getPosition().x - point.x;

_swipeX = point.x;

_swipeD = 0;

return true;

}

void SlideView::onTouchMoved(Touch* touch, Event *event)

{

// get touch point.

auto point = Director::getInstance()->convertToGL(touch->getLocationInView());

_layerSlide->setPosition(point.x + _sliderX, 0);

_swipeD = _swipeX -point.x;

_swipeX = point.x;

}

void SlideView::onTouchEnded(Touch* touch, Event *event)

{

// swipe

if (20 < fabs(_swipeD))

{

if (_swipeD < 0)

{

if (0 < _sliderP)

{

_sliderP--;

}

else

{

if (_sliderP < _sliderNum - 1)

{

_sliderP++;

}

else

{

// slide

int sX = _layerSlide->getPosition().x;

if ((sX < -_sliderSpan * _sliderP - _sliderSpan / 4 ) && _sliderP < _sliderNum - 1)

{

_sliderP++;

}

else if ((-_sliderSpan * _sliderP + _sliderSpan / 4 < sX) && 0 < _sliderP)

{

_sliderP--;

}

slidePage();

}

void SlideView::onTouchCancelled(Touch* touch, Event *event)

{

slidePage();

}

void SlideView::slidePage()

{

_layerSlide->runAction(EaseOut::create(MoveTo::create(0.3, Point(-_sliderSpan * _sliderP, 0)) ,2));

}

HelloWorldScene.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
#include "SlideView.h"

USING_NS_CC;

class HelloWorld : public cocos2d::Layer
{
private:
    // スライドビュー
    SlideView* _viewSlide;
    
    // スライドを載せるレイヤー
    Layer* _layerSlide;

public:
    static cocos2d::Scene* createScene();
    virtual bool init();
    CREATE_FUNC(HelloWorld);
};

#endif // __HELLOWORLD_SCENE_H__

#ifndef __HELLOWORLD_SCENE_H__

#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

#include "SlideView.h"

USING_NS_CC;

class HelloWorld : public cocos2d::Layer

{

private:

// スライドビュー

SlideView* _viewSlide;

// スライドを載せるレイヤー

Layer* _layerSlide;

public:

static cocos2d::Scene* createScene();

virtual bool init();

CREATE_FUNC(HelloWorld);

};

#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp

#include "HelloWorldScene.h"

USING_NS_CC;

Scene* HelloWorld::createScene()
{
    auto scene = Scene::create();
    auto layer = HelloWorld::create();
    scene->addChild(layer);
    return scene;
}

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    
    // スライドビューを生成して表示
    _viewSlide = SlideView::create();
    _viewSlide->setSpan(500);
    _viewSlide->setNum(3);
    this->addChild(_viewSlide);
    
    // スライドのレイヤーのポインタをスライドビューに渡す
    _layerSlide = Layer::create();
    _viewSlide->addSlide(_layerSlide);
    
    // スライドのレイヤーにスライドを載せる
    auto slide1 = Sprite::create("HelloWorld.png");
    slide1->setPosition(Point(320, 320));
    _layerSlide->addChild(slide1);
    
    auto slide2 = Sprite::create("HelloWorld.png");
    slide2->setPosition(Point(820, 320));
    _layerSlide->addChild(slide2);
    
    auto slide3 = Sprite::create("HelloWorld.png");
    slide3->setPosition(Point(1320, 320));
    _layerSlide->addChild(slide3);
    
    return true;
}

#include "HelloWorldScene.h"

USING_NS_CC;

Scene* HelloWorld::createScene()

{

auto scene = Scene::create();

auto layer = HelloWorld::create();

scene->addChild(layer);

return scene;

}

bool HelloWorld::init()

{

if ( !Layer::init() )

{

return false;

}

// スライドビューを生成して表示

_viewSlide = SlideView::create();

_viewSlide->setSpan(500);

_viewSlide->setNum(3);

this->addChild(_viewSlide);

// スライドのレイヤーのポインタをスライドビューに渡す

_layerSlide = Layer::create();

_viewSlide->addSlide(_layerSlide);

// スライドのレイヤーにスライドを載せる

auto slide1 = Sprite::create("HelloWorld.png");

slide1->setPosition(Point(320, 320));

_layerSlide->addChild(slide1);

auto slide2 = Sprite::create("HelloWorld.png");

slide2->setPosition(Point(820, 320));

_layerSlide->addChild(slide2);

auto slide3 = Sprite::create("HelloWorld.png");

slide3->setPosition(Point(1320, 320));

_layerSlide->addChild(slide3);

return true;

}

スライドビューを生成するところとかスライドを載せるところとかをもっとスマートに書ければと思うのですが、ゲームを作っている最中はとりあえず動けばそのまま作業を進めてしまうのでどうしても書きっぱなしな感じになります。こうしてブログでまとめるとキレイに書き直したくなります。

Pocket