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

1. Cocos2d-x - Tips
株式会社シュハリ!
代表取締役 松浦 晃洋

2. 自己紹介
• 松浦 晃洋!
• 株式会社シュハリ 代表取締役!
• Cocos2d-x 開発のレシピ執筆!
• 専門学校 Cocos2d-x 講師
• @syuhari!
• facebook.com/syuhari

3. • お絵描き Physics
• Soft Physics
• 法線マップ
Tips

4. お絵描き Physics

5. https://github.com/syuhari/Freehand

6. 指で描いている最中
(CCTouchMoved)
指で描くのが終了
(CCTouchEnded)
物理オブジェクトの塊に
テクスチャを貼り付ける
処理概要

8. Soft Physics

9. https://github.com/syuhari/SoftPhysics

10. http://www.uchidacoonga.com/2012/03/soft-body-physics-with-box2d-and-cocos2d-part-14/
• 中心となるオブジェクトを一つ作成
• その周りにオブジェクトをジョイントする
• 一塊のオブジェクトにテクスチャをマッピングする
物理オブジェクトの構造

11. // テクスチャを作成
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();
テクスチャのマッピング

13. 法線マップ

14. https://github.com/syuhari/Freehand

15. 法線ベクトル
3次元ではある面に垂直なベクトル

16. 法線マップ
• 通常の画像は各ドットが RGB
• 法線マップは RGB の部分が XYZ に相当
• 各ドットがどの方向を向いているか分かる

17. #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)

18. 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();
フラグメントシェーダーをリンクする

19. // ファイル名に「_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);
法線マップを読み込む

20. 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);
法線マップを読み込む

22. エンジニア募集中！
• @syuhari!
• facebook.com/syuhari