Last update: 2014/08/22
ここでは、 Cocos2d-xでLive2Dを描画するためのコードを紹介します。
コードを追加・編集
最終的な構成は以下のようになります。
ページ内リンク
・AppDelegate.h は編集しません。
・HelloWorldScene.h は編集しません。
・HelloWorldScene.cpp
・SampleLive2DSprite.cpp は新規で作成します。
AppDelegate.cpp
AppDelegate.cppに追加を記述します。
Live2Dをインクルードしてlive2dをネームスペースとして宣言します。
- #include "Live2D.h"
-
- using namespace live2d;
AppDelegateにLive2D::dispose();を追加します。
applicationDidFinishLaunching()に Live2D::init();を追加します。
コードは最終的に以下のようになります。
- /**
- *
- * You can modify and use this source freely
- * only for the development of application related Live2D.
-
*
- * (c) Live2D Inc. All rights reserved.
- */
- #include "AppDelegate.h"
- #include "HelloWorldScene.h"
-
#include "Live2D.h"
-
- using namespace live2d;
- USING_NS_CC;
-
-
AppDelegate::AppDelegate() {
-
- }
-
- AppDelegate::~AppDelegate()
-
{
- Live2D::dispose();
- }
-
- bool AppDelegate::applicationDidFinishLaunching() {
-
// initialize director
- auto director = Director::getInstance();
- auto glview = director->getOpenGLView();
- if(!glview) {
- glview = GLView::create("Live2D Simple");
-
director->setOpenGLView(glview);
- }
-
- // turn on display FPS
- director->setDisplayStats(true);
-
- // set FPS. the default value is 1.0/60 if you don't call this
- director->setAnimationInterval(1.0 / 60);
-
- //Live2D
-
Live2D::init();
-
- // create a scene. it's an autorelease object
- auto scene = HelloWorld::createScene();
-
-
// run
- director->runWithScene(scene);
-
- return true;
- }
-
- // This function will be called when the app is inactive. When comes a phone call,it's be invoked too
- void AppDelegate::applicationDidEnterBackground() {
- Director::getInstance()->stopAnimation();
-
-
// if you use SimpleAudioEngine, it must be pause
- // SimpleAudioEngine::getInstance()->pauseBackgroundMusic();
- }
-
- // this function will be called when the app is active again
-
void AppDelegate::applicationWillEnterForeground() {
- Director::getInstance()->startAnimation();
-
- // if you use SimpleAudioEngine, it must resume here
- // SimpleAudioEngine::getInstance()->resumeBackgroundMusic();
-
}
-
HelloWorldScene.cpp
HelloWorldScene.cppに追加を記述します。
SampleLive2DSpriteをインクルードします。
- #include "SampleLive2DSprite.h"
SampleLive2DSpriteのインスタンスを生成、それをアドチャイルドします。
- Sprite* pLive2DSprite = new SampleLive2DSprite();
- this->addChild(pLive2DSprite);
コードは最終的に以下のようになります。
- #include "HelloWorldScene.h"
- #include "SampleLive2DSprite.h"
-
- USING_NS_CC;
-
- Scene* HelloWorld::createScene()
- {
- // 'scene' is an autorelease object
- auto scene = Scene::create();
-
- // 'layer' is an autorelease object
- auto layer = HelloWorld::create();
-
- // add layer as a child to scene
-
scene->addChild(layer);
-
- // return the scene
- return scene;
- }
-
- // on "init" you need to initialize your instance
- bool HelloWorld::init()
- {
- //////////////////////////////
-
// 1. super init first
- if ( !Layer::init() )
- {
- return false;
- }
-
- Size visibleSize = Director::getInstance()->getVisibleSize();
- Point origin = Director::getInstance()->getVisibleOrigin();
-
- /////////////////////////////
-
// 2. add a menu item with "X" image, which is clicked to quit the program
- // you may modify it.
-
- // add a "close" icon to exit the progress. it's an autorelease object
- auto closeItem = MenuItemImage::create(
-
"CloseNormal.png",
- "CloseSelected.png",
- CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
-
- closeItem->setPosition(Point(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
-
origin.y + closeItem->getContentSize().height/2));
-
- // create menu, it's an autorelease object
- auto menu = Menu::create(closeItem, NULL);
- menu->setPosition(Point::ZERO);
-
this->addChild(menu, 1);
-
- /////////////////////////////
- // 3. add your codes below...
-
-
// add a label shows "Hello World"
- // create and initialize a label
-
- auto label = LabelTTF::create("Hello World", "Arial", 24);
-
-
// position the label on the center of the screen
- label->setPosition(Point(origin.x + visibleSize.width/2,
- origin.y + visibleSize.height - label->getContentSize().height));
-
- // add the label as a child to this layer
-
this->addChild(label, 1);
-
- // add "HelloWorld" splash screen"
- auto sprite = Sprite::create("HelloWorld.png");
-
-
// position the sprite on the center of the screen
- sprite->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
-
- // add the sprite as a child to this layer
- this->addChild(sprite, 0);
-
- Sprite* pLive2DSprite = new SampleLive2DSprite();
- this->addChild(pLive2DSprite);
-
- return true;
-
}
-
-
- void HelloWorld::menuCloseCallback(Ref* pSender)
- {
-
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)
- MessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");
- return;
- #endif
-
-
Director::getInstance()->end();
-
- #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
- exit(0);
- #endif
-
}
-
SampleLive2DSprite.h
SampleLive2DSprite.hを記述します。
- /**
- *
- * You can modify and use this source freely
- * only for the development of application related Live2D.
-
*
- * (c) Live2D Inc. All rights reserved.
- */
- #ifndef __sampleCocos2dx__SampleLive2DSprite__
- #define __sampleCocos2dx__SampleLive2DSprite__
-
- #include "cocos2d.h"
- #include "2d/CCSprite.h"
- #include <vector>
- #include "Live2DModelOpenGL.h"
-
-
- class SampleLive2DSprite :public cocos2d::Sprite {
-
- live2d::Live2DModelOpenGL* live2DModel ;
-
std::vector<cocos2d::Texture2D*> textures ;
- cocos2d::Texture2D* texture1;
-
- public:
- SampleLive2DSprite();
-
virtual ~SampleLive2DSprite();
-
- virtual void draw(cocos2d::Renderer *renderer, const kmMat4 &transform, bool transformUpdated) override;
- void onDraw(const kmMat4 &transform, bool transformUpdated);
-
-
protected:
- cocos2d::CustomCommand _customCommand;
- };
-
- #endif /* defined(__sampleCocos2dx__SampleLive2DSprite__) */
SampleLive2DSprite.cpp
SampleLive2DSprite.cppを記述します。
コンストラクタで、モデルとテクスチャの読み込み、テクスチャの設定、描画位置の設定をします。
- SampleLive2DSprite::SampleLive2DSprite()
- {
- //Live2D Sample
- const char* MODEL = "haru.moc" ;
-
const char* TEXTURES[] ={
- "texture_00.png" ,
- "texture_01.png" ,
- "texture_02.png" ,
- NULL
-
} ;
- unsigned char* buf;
- ssize_t bufSize;
- buf = FileUtils::getInstance()->getFileData(MODEL,"rb", &bufSize);
-
-
live2DModel = Live2DModelOpenGL::loadModel( buf,bufSize ) ;
-
- for( int i = 0 ; TEXTURES[i] != NULL ; i++ ){
- Texture2D *texture = new Texture2D();
- Image *img = new Image();
-
- img->initWithImageFile(TEXTURES[i]);
- texture->initWithImage(img);
-
-
-
Texture2D::TexParams texParams = { GL_LINEAR_MIPMAP_LINEAR, GL_LINEAR_MIPMAP_LINEAR, GL_CLAMP_TO_EDGE, GL_CLAMP_TO_EDGE };
- texture->setTexParameters(texParams);
- texture->generateMipmap();
-
- int glTexNo = texture->getName() ;
-
- live2DModel->setTexture( i , glTexNo ) ;// テクスチャとモデルを結びつける
- textures.push_back( texture ) ;
- }
-
-
// Live2Dモデルはローカル座標で左上を原点にして(CanvasWidth、CanvasWidth)
- // のサイズになるため、以下のようにして調整してください。
- float w = Director::getInstance()->getWinSize().width;
- float h = Director::getInstance()->getWinSize().height;
- float scx = 2.0 / live2DModel->getCanvasWidth() ;
-
float scy = -2.0 / live2DModel->getCanvasWidth() * (w/h);
- float x = -1 ;
- float y = 1 ;
- float matrix []= {
- scx , 0 , 0 , 0 ,
-
0 , scy ,0 , 0 ,
- 0 , 0 , 1 , 0 ,
- x , y , 0 , 1
- } ;
-
-
live2DModel->setMatrix(matrix) ;// 位置を設定
-
- live2DModel->setPremultipliedAlpha( false );
- }
デストラクタで、モデルとテクスチャ解放します。
- SampleLive2DSprite::~SampleLive2DSprite()
- {
- delete live2DModel;
- // テクスチャを解放
-
for (int i=0; i<textures.size(); i++)
- {
- textures[i]->release();
- }
- }
-
drawをオーバーライドします。
- void SampleLive2DSprite::draw(Renderer *renderer, const kmMat4 &transform, bool transformUpdated)
- {
- Sprite::draw(renderer, transform, transformUpdated);
-
-
- _customCommand.init(_globalZOrder);
- _customCommand.func = CC_CALLBACK_0(SampleLive2DSprite::onDraw, this, transform, transformUpdated);
- renderer->addCommand(&_customCommand);
- }
-
onDrawを用意します。
- void SampleLive2DSprite::onDraw(const kmMat4 &transform, bool transformUpdated)
- {
- kmGLPushMatrix();
- kmGLLoadMatrix(&transform);
-
-
- // モデルのパラメータを変更。動作確認用です。
- double t = (UtSystem::getUserTimeMSec()/1000.0) * 2 * M_PI ;// 1秒ごとに2π(1周期)増える
- double cycle=3.0;// パラメータが一周する時間(秒)
-
double value=sin( t/cycle );// -1から1の間を周期ごとに変化する
- live2DModel->setParamFloat( "PARAM_ANGLE_X" , (float) (30 * value) ) ;// PARAM_ANGLE_Xのパラメータが[cycle]秒ごとに-30から30まで変化する
-
-
- // Live2Dの描画前と描画後に以下の関数を呼んでください
-
// live2d::DrawProfileCocos2D::preDraw() ;
- // live2d::DrawProfileCocos2D::postDraw() ;
- // これはOpenGLの状態をもとに戻すための処理です。
- // これを行わない場合、Cocos2DかLive2Dどちらかで状態の不整合が起こります。
- live2d::DrawProfileCocos2D::preDraw();
-
- live2DModel->update() ;
- live2DModel->draw() ;
-
- live2d::DrawProfileCocos2D::postDraw() ;
-
- kmGLPopMatrix();
- }
コードは最終的に以下のようになります。
- /**
- *
- * You can modify and use this source freely
- * only for the development of application related Live2D.
-
*
- * (c) Live2D Inc. All rights reserved.
- */
- #include "SampleLive2DSprite.h"
- #include "CCDirector.h"
-
#include "util/UtSystem.h"
-
- #include "graphics/DrawProfileCocos2D.h"
- #include "platform/CCFileUtils.h"
-
-
using namespace live2d;
- USING_NS_CC;
-
- SampleLive2DSprite::SampleLive2DSprite()
- {
-
//Live2D Sample
- const char* MODEL = "haru.moc" ;
- const char* TEXTURES[] ={
- "texture_00.png" ,
- "texture_01.png" ,
-
"texture_02.png" ,
- NULL
- } ;
- unsigned char* buf;
- ssize_t bufSize;
-
buf = FileUtils::getInstance()->getFileData(MODEL,"rb", &bufSize);
-
- live2DModel = Live2DModelOpenGL::loadModel( buf,bufSize ) ;
-
- for( int i = 0 ; TEXTURES[i] != NULL ; i++ ){
-
Texture2D *texture = new Texture2D();
- Image *img = new Image();
-
- img->initWithImageFile(TEXTURES[i]);
- texture->initWithImage(img);
-
-
- Texture2D::TexParams texParams = { GL_LINEAR_MIPMAP_LINEAR, GL_LINEAR_MIPMAP_LINEAR, GL_CLAMP_TO_EDGE, GL_CLAMP_TO_EDGE };
- texture->setTexParameters(texParams);
- texture->generateMipmap();
-
- int glTexNo = texture->getName() ;
-
- live2DModel->setTexture( i , glTexNo ) ;// テクスチャとモデルを結びつける
- textures.push_back( texture ) ;
-
}
-
- // Live2Dモデルはローカル座標で左上を原点にして(CanvasWidth、CanvasWidth)
- // のサイズになるため、以下のようにして調整してください。
- float w = Director::getInstance()->getWinSize().width;
-
float h = Director::getInstance()->getWinSize().height;
- float scx = 2.0 / live2DModel->getCanvasWidth() ;
- float scy = -2.0 / live2DModel->getCanvasWidth() * (w/h);
- float x = -1 ;
- float y = 1 ;
-
float matrix []= {
- scx , 0 , 0 , 0 ,
- 0 , scy ,0 , 0 ,
- 0 , 0 , 1 , 0 ,
- x , y , 0 , 1
-
} ;
-
- live2DModel->setMatrix(matrix) ;// 位置を設定
-
- live2DModel->setPremultipliedAlpha( false );
-
}
-
- SampleLive2DSprite::~SampleLive2DSprite()
- {
- delete live2DModel;
-
// テクスチャを解放
- for (int i=0; i<textures.size(); i++)
- {
- textures[i]->release();
- }
-
}
-
-
- void SampleLive2DSprite::draw(Renderer *renderer, const kmMat4 &transform, bool transformUpdated)
- {
-
Sprite::draw(renderer, transform, transformUpdated);
-
-
- _customCommand.init(_globalZOrder);
- _customCommand.func = CC_CALLBACK_0(SampleLive2DSprite::onDraw, this, transform, transformUpdated);
-
renderer->addCommand(&_customCommand);
- }
-
- void SampleLive2DSprite::onDraw(const kmMat4 &transform, bool transformUpdated)
- {
-
kmGLPushMatrix();
- kmGLLoadMatrix(&transform);
-
-
- // モデルのパラメータを変更。動作確認用です。
-
double t = (UtSystem::getUserTimeMSec()/1000.0) * 2 * M_PI ;// 1秒ごとに2π(1周期)増える
- double cycle=3.0;// パラメータが一周する時間(秒)
- double value=sin( t/cycle );// -1から1の間を周期ごとに変化する
- live2DModel->setParamFloat( "PARAM_ANGLE_X" , (float) (30 * value) ) ;// PARAM_ANGLE_Xのパラメータが[cycle]秒ごとに-30から30まで変化する
-
-
- // Live2Dの描画前と描画後に以下の関数を呼んでください
- // live2d::DrawProfileCocos2D::preDraw() ;
- // live2d::DrawProfileCocos2D::postDraw() ;
- // これはOpenGLの状態をもとに戻すための処理です。
-
// これを行わない場合、Cocos2DかLive2Dどちらかで状態の不整合が起こります。
- live2d::DrawProfileCocos2D::preDraw();
-
- live2DModel->update() ;
- live2DModel->draw() ;
-
- live2d::DrawProfileCocos2D::postDraw() ;
-
- kmGLPopMatrix();
- }
-
|