Cocos2d-x - Tips
株式会社シュハリ!
代表取締役 松浦 晃洋
自己紹介
• 松浦 晃洋!
• 株式会社シュハリ 代表取締役!
• Cocos2d-x 開発のレシピ執筆!
• 専門学校 Cocos2d-x 講師
• @syuhari!
• facebook.com/syuhari
• お絵描き Physics
• Soft Physics
• 法線マップ
Tips
お絵描き Physics
https://github.com/syuhari/Freehand
指で描いている最中
(CCTouchMoved)
指で描くのが終了
(CCTouchEnded)
物理オブジェクトの塊に
テクスチャを貼り付ける
処理概要
Soft Physics
https://github.com/syuhari/SoftPhysics
http://www.uchidacoonga.com/2012/03/soft-body-physics-with-box2d-and-cocos2d-part-14/
• 中心となるオブジェクトを一つ作成
• その周りにオブジェクトをジョイ...
// テクスチャを作成
texture =
CCTextureCache::sharedTextureCache()->addImage("texture.png");
!
kmGLPushMatrix();
ccGLBindTexture2D...
法線マップ
https://github.com/syuhari/Freehand
法線ベクトル
3次元ではある面に垂直なベクトル
法線マップ
• 通常の画像は各ドットが RGB
• 法線マップは RGB の部分が XYZ に相当
• 各ドットがどの方向を向いているか分かる
#ifdef GL_ES
precision mediump float;
#endif
!
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform sampler2D u_n...
int len = 0;
const GLchar * fragmentSource =
(GLchar*)CCFileUtils::sharedFileUtils()
->getFileData("MapShader.fsh", "rb", ...
// ファイル名に「_n」を付けたリソースを法線マップとして読込む
std::string map = baseName + "_n.png";
colorRampTexture =
CCTextureCache::sharedTextureC...
float xx, yy, zz, length;
!
//シェーダー使用を宣言
this->shader->use();
// 光源までの距離
CCSize size = CCDirector::sharedDirector()->getWi...
エンジニア募集中!
• @syuhari!
• facebook.com/syuhari
Cocos2dx Tips - Box2d, Normal mapping
Cocos2dx Tips - Box2d, Normal mapping
Cocos2dx Tips - Box2d, Normal mapping
Upcoming SlideShare
Loading in …5
×

Cocos2dx Tips - Box2d, Normal mapping

1,992 views

Published on

Cocos2d-x Tips
- Freehand drawing with box2d
- Soft Physics, it has a soft body ( Box2d )
- Normal mapping

  • Be the first to comment

Cocos2dx Tips - Box2d, Normal mapping

  1. 1. Cocos2d-x - Tips 株式会社シュハリ! 代表取締役 松浦 晃洋
  2. 2. 自己紹介 • 松浦 晃洋! • 株式会社シュハリ 代表取締役! • Cocos2d-x 開発のレシピ執筆! • 専門学校 Cocos2d-x 講師 • @syuhari! • facebook.com/syuhari
  3. 3. • お絵描き Physics • Soft Physics • 法線マップ Tips
  4. 4. お絵描き Physics
  5. 5. https://github.com/syuhari/Freehand
  6. 6. 指で描いている最中 (CCTouchMoved) 指で描くのが終了 (CCTouchEnded) 物理オブジェクトの塊に テクスチャを貼り付ける 処理概要
  7. 7. Soft Physics
  8. 8. https://github.com/syuhari/SoftPhysics
  9. 9. http://www.uchidacoonga.com/2012/03/soft-body-physics-with-box2d-and-cocos2d-part-14/ • 中心となるオブジェクトを一つ作成 • その周りにオブジェクトをジョイントする • 一塊のオブジェクトにテクスチャをマッピングする 物理オブジェクトの構造
  10. 10. // テクスチャを作成 texture = CCTextureCache::sharedTextureCache()->addImage("texture.png"); ! kmGLPushMatrix(); ccGLBindTexture2D(texture->getName()); texture->getShaderProgram()->use(); texture->getShaderProgram()->setUniformsForBuiltins(); ccGLEnableVertexAttribs( kCCVertexAttribFlag_Position|kCCVertexAttribFlag_TexCoords); ! glVertexAttribPointer( 1, 2, GL_FLOAT, GL_FALSE, 0, triangleFanPos); glVertexAttribPointer( 2, 2, GL_FLOAT, GL_FALSE, 0, textCoords); glDrawArrays(GL_TRIANGLE_FAN, 0, NUM_SEGMENTS+2); ! kmGLPopMatrix(); テクスチャのマッピング
  11. 11. 法線マップ
  12. 12. https://github.com/syuhari/Freehand
  13. 13. 法線ベクトル 3次元ではある面に垂直なベクトル
  14. 14. 法線マップ • 通常の画像は各ドットが RGB • 法線マップは RGB の部分が XYZ に相当 • 各ドットがどの方向を向いているか分かる
  15. 15. #ifdef GL_ES precision mediump float; #endif ! varying vec2 v_texCoord; uniform sampler2D u_texture; uniform sampler2D u_normalMapTexture; uniform vec3 u_lightNormal; ! void main() { ! vec4 normalMap = texture2D( u_normalMapTexture, v_texCoord ); normalMap.xyz = normalMap.xyz - 0.5; gl_FragColor = texture2D( u_texture, v_texCoord ); vec3 ret = gl_FragColor.rgb * max( 0.1, dot( normalMap.rgb, u_lightNormal ) )*3.0; gl_FragColor.rgb = ret.rgb; } フラグメントシェーダー (GLSL)
  16. 16. int len = 0; const GLchar * fragmentSource = (GLchar*)CCFileUtils::sharedFileUtils() ->getFileData("MapShader.fsh", "rb", (unsigned long*)(&len)); ! shader = new CCGLProgram(); setShaderProgram(shader); shader->initWithVertexShaderByteArray( ccPositionTextureA8Color_vert, fragmentSource); ! shader->addAttribute( kCCAttributeNamePosition, kCCVertexAttrib_Position); shader->addAttribute( kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords); ! shader->link(); shader->updateUniforms(); フラグメントシェーダーをリンクする
  17. 17. // ファイル名に「_n」を付けたリソースを法線マップとして読込む std::string map = baseName + "_n.png"; colorRampTexture = CCTextureCache::sharedTextureCache()->addImage(map.c_str()); colorRampTexture->setAliasTexParameters(); this->shader->use(); glActiveTexture(GL_TEXTURE1+tex); glBindTexture(GL_TEXTURE_2D, colorRampTexture->getName()); glActiveTexture(GL_TEXTURE0); 法線マップを読み込む
  18. 18. float xx, yy, zz, length; ! //シェーダー使用を宣言 this->shader->use(); // 光源までの距離 CCSize size = CCDirector::sharedDirector()->getWinSize(); xx = (this->getLight().x - this->getPositionX()) / size.width; yy = (this->getLight().y - this->getPositionY()) / size.height; ! length = sqrtf( xx * xx + yy * yy ); zz = 1-length; length = sqrtf( zz * zz + xx * xx + yy * yy ); zz = zz / length; xx = xx / length; yy = yy / length; //シェーダープログラムに光源の位置をセット glUniform3f(lightNormalUniformLocation, xx, yy, zz); 法線マップを読み込む
  19. 19. エンジニア募集中! • @syuhari! • facebook.com/syuhari

×