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(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();

テクスチャのマッピング

法線マップ

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_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)

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();

フラグメントシェーダーをリンクする

// ファイル名に「_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);

法線マップを読み込む

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);

法線マップを読み込む

エンジニア募集中！

• @syuhari!

• facebook.com/syuhari