Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Sprite3D Tips
@第5回cocos2d-x勉強会
株式会社アカツキ 河野 洋志
自己紹介
• 河野 洋志(こうの ひろし)
• 株式会社アカツキ エンジニア
• サウザンドメモリーズを担当
• 主にサーバサイド
• Ruby on Rails, MySQL, Redis, AWS, etc…
• cocos2d-x…? C...
残念ながら…
• サウザンドメモリーズはcocos2d-x製ではありま
せん
• 弊社ではcocos2d-xを利用した別のプロジェクト
が進行中です!
!?
• ということで…
• 本来開発・運用で得られた知見をお話できれば
ベストだったのですが知見ゼロ
• cocos2d-x界隈で最近おもしろそうなものないか
なーということで ver 3.1 で新しく追加された
Sprite3Dについて簡単にご紹...
目次
• cocos2d-x Ver 3.1で追加されたSprite3Dクラス
の紹介
• Sprite3Dの使い方
• シェーダー拡張
• Sprite3Dで(まだ?)できないこと
目次
• cocos2d-x Ver 3.1で追加されたSprite3Dクラス
の紹介
• Sprite3Dの使い方
• シェーダー拡張
• Sprite3Dで(まだ?)できないこと
Sprite3Dとは
• 3Dモデルをスプライトとして扱うことができる
クラス
• 対応フォーマットは .obj
• 呼び出し時にテクスチャ画像をsetする
auto model3d = Sprite3D::create("sample.obj...
API
• 3D APIはもちろん、これまでの2Dスプライトで
使えたAPIはほとんど使える
• Sprite3DクラスはSpriteクラス同様Nodeクラス
を継承しているため
• 移動、拡縮、その他アクションなど
Position3D
• z軸は手前が正、奥が負
• パースがかかっているので、設定したx, yより
も手前側は画面縁に、奥側は画面中央寄りに
配置される
auto model_a = Sprite3D::create("sample.obj"...
Rotation3D
• Vec3を渡して3次元的なrotationを設定できる
auto model_a = Sprite3D::create("sample.obj");!
model_a->setTexture("sample.png")...
移動・拡縮
• 移動
!
!
• 拡縮
void HelloWorld::onTouchesEnded(const std::vector<cocos2d::Touch *> &touches, cocos2d::Event *event)!
...
回転
• z軸方向にしか回転してくれない
!
!
• Vec3クラスを渡すと3次元的に回転できる
void HelloWorld::onTouchesEnded(const std::vector<cocos2d::Touch *> &touc...
回転(余談)
!
• 上記メソッドを使うとペラペラになって面白い
RotateBy::create(float duration, float deltaAngleZ_X, float deltaAngleZ_Y);
目次
• cocos2d-x Ver 3.1で追加されたSprite3Dクラス
の紹介
• Sprite3Dの使い方
• シェーダー拡張
• Sprite3Dで(まだ?)できないこと
シェーダー拡張
• シェーダーを拡張することでトゥーンレンダリン
グ(っぽいこと)などができるようになる
シェーダ拡張
• cpp-testの中に含まれるEffect3DOutlineクラスにつ
いて解説していきます
• cocos2d-x/tests/cpp-tests/Classes/Sprite3DTest
• 3Dプログラミングについては詳...
3DEffectクラス
• 3Dエフェクトに関する抽象クラス
class Effect3D : public Ref!
{!
public:!
virtual void drawWithSprite(EffectSprite3D* sprite...
3DEffectOutlineクラス
• シェーダーを読み込んで描画を実行するクラス
class Effect3DOutline: public Effect3D!
{!
public:!
static Effect3DOutline* cre...
シェーダ
• Resources/Shaders3D 以下に配置
• OutLine.frag
• OutLine.vert
uniform vec3 OutLineColor;!
uniform vec4 u_color;!
!
void m...
EffectSprite3Dクラス
• Sprite3Dクラスを継承して3DEffectを追加できる
ように拡張
class EffectSprite3D : public Sprite3D!
{!
public:!
static Effect...
EffectSprite3Dクラス
• 使い方
auto model = EffectSprite3D::createFromObjFileAndTexture("sample.obj", "sample.png");!
model->setS...
目次
• cocos2d-x Ver 3.1で追加されたSprite3Dクラス
の紹介
• Sprite3Dの使い方
• シェーダー拡張
• Sprite3Dで(まだ?)できないこと
できないこと
• タップイベントの取得
• getBoundBox()でRectが取得できない
• 物理演算
• アニメーション
• モデルの表示、アクション以上のことはできない
auto position = model3d->getPosi...
おや、cocos2d-xのようすが…
期待ag…と思ったらマージされてた
https://github.com/cocos2d/cocos2d-x/pull/7085
こいつ…動くぞ!
Animation3D
• Animate3DクラスはActionとして実装されている
• Animation3DからAction(Animate3D)をcreateする
• .c3t フォーマットに対応
auto animation = An...
まとめ
• Sprite3Dについて簡単に紹介しました
• Position, Rotate, Action, etc…
• つい先日アニメーションもマージされたので、
今後に期待
• でもここまでやるならUni(ry
参考
• cocos2d-x公式のサンプルプロジェクト
• https://github.com/cocos2d/cocos2d-x/tree/
v3/tests/cpp-tests/Classes/Sprite3DTest
• EarthWa...
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Cocos2d x-sprite3d

3,949 views

Published on

Published in: Travel, Technology
  • Be the first to comment

Cocos2d x-sprite3d

  1. 1. Sprite3D Tips @第5回cocos2d-x勉強会 株式会社アカツキ 河野 洋志
  2. 2. 自己紹介 • 河野 洋志(こうの ひろし) • 株式会社アカツキ エンジニア • サウザンドメモリーズを担当 • 主にサーバサイド • Ruby on Rails, MySQL, Redis, AWS, etc… • cocos2d-x…? C++…?
  3. 3. 残念ながら… • サウザンドメモリーズはcocos2d-x製ではありま せん • 弊社ではcocos2d-xを利用した別のプロジェクト が進行中です!
  4. 4. !?
  5. 5. • ということで… • 本来開発・運用で得られた知見をお話できれば ベストだったのですが知見ゼロ • cocos2d-x界隈で最近おもしろそうなものないか なーということで ver 3.1 で新しく追加された Sprite3Dについて簡単にご紹介したいと思います
  6. 6. 目次 • cocos2d-x Ver 3.1で追加されたSprite3Dクラス の紹介 • Sprite3Dの使い方 • シェーダー拡張 • Sprite3Dで(まだ?)できないこと
  7. 7. 目次 • cocos2d-x Ver 3.1で追加されたSprite3Dクラス の紹介 • Sprite3Dの使い方 • シェーダー拡張 • Sprite3Dで(まだ?)できないこと
  8. 8. Sprite3Dとは • 3Dモデルをスプライトとして扱うことができる クラス • 対応フォーマットは .obj • 呼び出し時にテクスチャ画像をsetする auto model3d = Sprite3D::create("sample.obj");! model3d->setTexture(“sample.png”);
  9. 9. API • 3D APIはもちろん、これまでの2Dスプライトで 使えたAPIはほとんど使える • Sprite3DクラスはSpriteクラス同様Nodeクラス を継承しているため • 移動、拡縮、その他アクションなど
  10. 10. Position3D • z軸は手前が正、奥が負 • パースがかかっているので、設定したx, yより も手前側は画面縁に、奥側は画面中央寄りに 配置される auto model_a = Sprite3D::create("sample.obj");! model_a->setTexture("sample.png");! model_a->setPosition3D(Vec3(visibleSize.width / 2, visibleSize.height * 2 / 3, 400));! this->addChild(model_a);! ! auto model_b = Sprite3D::create("samle.obj");! model3_b->setTexture("samle.png");! model3_b->setPosition3D(Vec3(visibleSize.width / 2, visibleSize.height / 2, 0));! this->addChild(model_b);! ! auto model_c = Sprite3D::create("samle.obj");! model3_c->setTexture("samle.png");! model3_c->setPosition3D(Vec3(visibleSize.width / 2, visibleSize.height * 1 / 3, -400));! this->addChild(model_c); model_a model_b model_c
  11. 11. Rotation3D • Vec3を渡して3次元的なrotationを設定できる auto model_a = Sprite3D::create("sample.obj");! model_a->setTexture("sample.png");! model_a->setRotation3D(Vec3(90.0f, 0.0f, 0.0f));! model_a->setPosition3D(Vec3(visibleSize.width / 2, visibleSize.height * 2 / 3, 0));! model_a->setScale(15);! this->addChild(model_a);! ! auto model_b = Sprite3D::create("sample.obj");! model_b->setTexture("sample.png");! model_b->setRotation3D(Vec3(0.0f, 90.0f, 0.0f));! model_b->setPosition3D(Vec3(visibleSize.width / 2, visibleSize.height / 2, 0));! model_b->setScale(15);! this->addChild(model_b);! ! auto model_c = Sprite3D::create("sample.obj");! model_c->setTexture("sample.png");! model_c->setRotation3D(Vec3(0.0f, 0.0f, 90.0f));! model_c->setPosition3D(Vec3(visibleSize.width / 2, visibleSize.height / 3, 0));! model_c->setScale(15);! this->addChild(model_c);
  12. 12. 移動・拡縮 • 移動 ! ! • 拡縮 void HelloWorld::onTouchesEnded(const std::vector<cocos2d::Touch *> &touches, cocos2d::Event *event)! {! for (auto touch: touches) {! auto location = touch->getLocation();! auto action = MoveTo::create(0.5f, location);! model3d->runAction(action);! }! } void HelloWorld::onTouchesEnded(const std::vector<cocos2d::Touch *> &touches, cocos2d::Event *event)! {! for (auto touch: touches) {! auto location = touch->getLocation();! auto seq = Sequence::create(ScaleTo::create(0.1f, 75.f),! ScaleTo::create(0.1f, 30.f),! ScaleTo::create(0.1f, 45.f), NULL);! model3d->runAction(seq);! }! }
  13. 13. 回転 • z軸方向にしか回転してくれない ! ! • Vec3クラスを渡すと3次元的に回転できる void HelloWorld::onTouchesEnded(const std::vector<cocos2d::Touch *> &touches, cocos2d::Event *event)! {! for (auto touch: touches) {! auto location = touch->getLocation();! auto action = RotateBy::create(0.5f, 360);! model3d->runAction(action);! }! } void HelloWorld::onTouchesEnded(const std::vector<cocos2d::Touch *> &touches, cocos2d::Event *event)! {! for (auto touch: touches) {! auto location = touch->getLocation();! auto action = RotateBy::create(0.5f, Vec3(location.x, location.y, 30));! model3d->runAction(action);! }! }
  14. 14. 回転(余談) ! • 上記メソッドを使うとペラペラになって面白い RotateBy::create(float duration, float deltaAngleZ_X, float deltaAngleZ_Y);
  15. 15. 目次 • cocos2d-x Ver 3.1で追加されたSprite3Dクラス の紹介 • Sprite3Dの使い方 • シェーダー拡張 • Sprite3Dで(まだ?)できないこと
  16. 16. シェーダー拡張 • シェーダーを拡張することでトゥーンレンダリン グ(っぽいこと)などができるようになる
  17. 17. シェーダ拡張 • cpp-testの中に含まれるEffect3DOutlineクラスにつ いて解説していきます • cocos2d-x/tests/cpp-tests/Classes/Sprite3DTest • 3Dプログラミングについては詳しくないので詳しい ところまでソースは追いません…(追えませんでした) • 間違いがあれば是非指摘してください
  18. 18. 3DEffectクラス • 3Dエフェクトに関する抽象クラス class Effect3D : public Ref! {! public:! virtual void drawWithSprite(EffectSprite3D* sprite, const Mat4 &transform) = 0;! protected:! Effect3D() : _glProgramState(nullptr) {}! virtual ~Effect3D()! {! CC_SAFE_RELEASE(_glProgramState);! }! protected:! GLProgramState* _glProgramState;! };! • OpenGLシェーダを格納する _glProgramState プロパティを持つ • シェーダを描画する drawWithSprite() メソッド
  19. 19. 3DEffectOutlineクラス • シェーダーを読み込んで描画を実行するクラス class Effect3DOutline: public Effect3D! {! public:! static Effect3DOutline* create();! ! void setOutlineColor(const Vec3& color);! ! void setOutlineWidth(float width);! ! void drawWithSprite(EffectSprite3D* sprite, const Mat4 &transform);! ! protected:! ! Effect3DOutline();! virtual ~Effect3DOutline();! ! bool init();! ! Vec3 _outlineColor;! float _outlineWidth;! public:! static const std::string _vertShaderFile;! static const std::string _fragShaderFile;! static const std::string _keyInGLProgramCache;! static GLProgram* getOrCreateProgram();! ! };! • 初期化時にシェーダーを 読み込む • drawWithSprite()の実装 もこのクラスにあります
  20. 20. シェーダ • Resources/Shaders3D 以下に配置 • OutLine.frag • OutLine.vert uniform vec3 OutLineColor;! uniform vec4 u_color;! ! void main(void)! {! gl_FragColor = vec4(OutLineColor,1.0) * u_color;! } attribute vec4 a_position;! attribute vec3 a_normal;! uniform float OutlineWidth;! ! void main(void)! {! vec4 pos = CC_MVPMatrix * a_position;! vec4 normalproj = CC_MVPMatrix * vec4(a_normal, 0);! normalproj = normalize(normalproj);! pos.xy += normalproj.xy * (OutlineWidth * (pos.z * 0.5 + 0.5));! ! gl_Position = pos;! }
  21. 21. EffectSprite3Dクラス • Sprite3Dクラスを継承して3DEffectを追加できる ように拡張 class EffectSprite3D : public Sprite3D! {! public:! static EffectSprite3D* createFromObjFileAndTexture(const std::string& objFilePath, const std::string& textureFilePath);! void setEffect3D(Effect3D* effect);! void addEffect(Effect3D* effect, ssize_t order);! void eraseEffect(Effect3D* effect);! ssize_t getEffectCount() const;! Effect3D* getEffect(ssize_t index) const;! virtual void draw(Renderer *renderer, const Mat4 &transform, bool transformUpdated) override;! protected:! EffectSprite3D();! virtual ~EffectSprite3D();! ! std::vector<std::tuple<ssize_t,Effect3D*,CustomCommand>> _effects;! Effect3D* _defaultEffect;! CustomCommand _command;! };!
  22. 22. EffectSprite3Dクラス • 使い方 auto model = EffectSprite3D::createFromObjFileAndTexture("sample.obj", "sample.png");! model->setScale(45);! model->setRotation3D(Vec3(265.0f, 265.0f, 265.0f));! model->setPosition3D(Vec3(visibleSize.width / 2, visibleSize.height / 2, 0));! ! auto effect = Effect3DOutline::create();! effect->setOutlineColor(Vec3(1,1,0));! effect->setOutlineWidth(0.03f);! model->addEffect(effect, 1);! ! this->addChild(model);
  23. 23. 目次 • cocos2d-x Ver 3.1で追加されたSprite3Dクラス の紹介 • Sprite3Dの使い方 • シェーダー拡張 • Sprite3Dで(まだ?)できないこと
  24. 24. できないこと • タップイベントの取得 • getBoundBox()でRectが取得できない • 物理演算 • アニメーション • モデルの表示、アクション以上のことはできない auto position = model3d->getPosition3D();! CCLOG("position: X:%f Y:%f Z:%f", position.x, position.y, position.z);! auto rect = model3d->getBoundingBox();! CCLOG("bounding box: MinX:%f MaxX:%f MinY:%f MaxY:%f", rect.getMinX(), rect.getMaxX(), rect.getMinY(), rect.getMaxY());! ! // cocos2d: position: X:320.000000 Y:480.000000 Z:0.000000! // cocos2d: bounding box: MinX:320.000000 MaxX:320.000000 MinY:480.000000 MaxY:480.000000
  25. 25. おや、cocos2d-xのようすが…
  26. 26. 期待ag…と思ったらマージされてた https://github.com/cocos2d/cocos2d-x/pull/7085
  27. 27. こいつ…動くぞ!
  28. 28. Animation3D • Animate3DクラスはActionとして実装されている • Animation3DからAction(Animate3D)をcreateする • .c3t フォーマットに対応 auto animation = Animation3D::getOrCreate("Sprite3DTest/girl.c3t");! if (animation)! {! auto animate = Animate3D::create(animation); ! auto spawn = Spawn::create(animate, RotateBy::create(animation->getDuration(), Vec3(0.0f, 90.0f, 0.0f)), NULL);! sprite->runAction(RepeatForever::create(spawn));! }
  29. 29. まとめ • Sprite3Dについて簡単に紹介しました • Position, Rotate, Action, etc… • つい先日アニメーションもマージされたので、 今後に期待 • でもここまでやるならUni(ry
  30. 30. 参考 • cocos2d-x公式のサンプルプロジェクト • https://github.com/cocos2d/cocos2d-x/tree/ v3/tests/cpp-tests/Classes/Sprite3DTest • EarthWarrior3D • https://github.com/chukong/EarthWarrior3D
  31. 31. ご清聴ありがとうございました

×