目次
1.ブログ紹介
最近、いくつかの要望があります。2D効果で3Dの視点の関係を示したいと思います。時間をかけて実装のアイデアを検討しました。実装後の効果を見てみましょう。
2.コンテンツ
（1）原則
最初の例では、画像にほぼ大小の明らかな遠近効果があることがわかります。cocos2dxを使用したことがある人は、cocosのアクションにグリッドアニメーションと呼ばれるものがあることを知っておく必要があります。グリッドアニメーションを使用すると、次のことができます。ページめくりと画面の揺れの3Dアニメーション効果を実現します。ページめくり効果が実現できるようになったので、理論的には、画像を任意の構造に変更して表示できるはずです。最初の効果は、グリッドアニメーション。
（2）コード分析
最初にcocosに付属するソースコードのいくつかを研究し、一般的なソリューションのアイデアを知った後、必要な構造の変換を開始します
関連スクリプト：CCNodeGrid GridBase Grid3D CCActionPageTurn3D
以下は、単純なページめくりの効果です。
auto gridNode = NodeGrid::create();
auto sp = Sprite::create("Hello.png");
gridNode->addChild(sp);
sp->setPosition(Vec2(360, 640));
gridNode->runAction(PageTurn3D::create(5,Size(100,100)));
ヒント：ここのブロガーは、ソースコード内の効果的なコンテンツ、およびその他の添付されたメソッド属性のみを抽出します。自分でそれを調べることに興味がある場合は、理解しやすいように次のコンテンツをソースコードと組み合わせる必要があります。
NodeGrid：
NodeGridは、Nodeから継承されたクラスです。主な情報は、Nodeのvisitメソッドを書き換えることです。GridBaseタイプのプライベート変数もあります。
書き換えられた訪問関数では、_nodeGridが存在し、アクティブな場合、_nodeGridのメソッドset2DProjectionが呼び出され、レンダリング前にonGridBeginDrawメソッドが実行されます。begainDrawメソッドを呼び出した後、_nodeGridが存在し、アクティブな場合、ディレクターのsetProjectionメソッドを呼び出し、リセットします。ビューポートをクリックしてから、onGridEndDrawメソッドを呼び出します。
begainDrawメソッドとendDrawメソッドでそれぞれ_nodeGridのbeforeDrawメソッドとafterDrawメソッドを見てみましょう。したがって、NodeGridの機能は基本的にここにあります。Nodeのvisitメソッドを書き直して、画面に表示された最後のコンテンツを再レンダリングするために使用します。
GridBase：
GridBaseはinitメソッドでTexture2Dをインスタンス化し、このテクスチャをglバッファとして設定します。つまり、表示するすべてのコンテンツが最初にこのテクスチャに描画され、次にテクスチャを変更します。
beforeDrawとafterDrawでビューポートを描画してリセットします
Grid3D：
Grid3DはGridBaseから継承され、特定の側面でGridBaseを補完します。メソッドgetOriginalVertexは、対応するグリッドの元の座標を取得するために使用され、setVertexメソッドは、対応するグリッドの新しい座標を設定するために使用されます。
CCActionPageTurn3D：
PageTurn3Dのupdateメソッドでは、グリッド座標をリセットするためにメソッドsetVertexが呼び出されていることがわかります。
上記のように、3DActionアニメーションがどのように実装されているかはすでに大まかに知ることができます
1.最初にホスティングノードを構築します。このノードに追加されたオブジェクトは、画面に直接レンダリングされません。
2.画面にレンダリングする必要のある頂点情報を受け取るために、新しいテクスチャを作成します
3.カスタムサイズに従って、このテクスチャを列*行グリッドに分割します
4.各グリッドの座標頂点情報を再計算します
5.最後に、計算されたスタイルを画面にレンダリングします
（3）カスタマイズされたGrid3D
実はここで、上記の内容を理解できる限り、次に何をすべきでしょうか？
1.新しいGridBase3Dを作成する必要があります。このクラスは、GridBaseとGrid3Dを組み合わせ、最終的なビューポートを3Dビューポートで描画する必要があります。
2.新しいNodeGrid3Dクラスを作成します。これは基本的にNodeGridと同じですが、GridBaseはGridBase3Dに置き換えられます。
3.最後に、GridBase3DのsetVertexメソッドを手動で呼び出して、必要な結果を表示します。
（4）発生した問題
ブロガーはここで新しいクラスの詳細な紹介をしません、そして生産におけるいくつかの問題をリストします
1.通常の表示では、画面外のスプライトはレンダリングされません。グリッドのZ軸を変更すると、見えなかったスプライトが視野に表示されますが、以前はレンダリングされていなかったため、まだレンダリングできません。
解決策：スプライトクラスを書き直し、スプライトを継承し、Drawメソッドを書き直して、どのような状況でもスプライトがレンダリングされるようにします。
2. 3Dビューポートを設定すると、遠方断面と近方断面と呼ばれるものがあります。つまり、Zが大きすぎたり小さすぎたりすると、レンダリングされません。
解決策：farセクションの値を手動で設定します
（5）既製の白い売春
コードはもう投稿されていません。必要な場合は、ブロガーのgithubにジャンプして自分でダウンロードしてください。ダウンロード後、libcocos2dディレクトリに直接配置すると、再コンパイル後に使用できます。
（6）C ++固有の使用例
这里给个上述例子的写法演示
//创建NodeGrid3D
auto gridNode = NodeGrid3D::create();
scene->addChild(gridNode);
//创建GridBase3D 参数： Size（100,500）网格100*500 720*2048 texture的尺寸 5000远截面距离
auto grid3D = GridBase3D::create(Size(100, 500), 720, 2048, 5000);
gridNode->setGrid3D(grid3D);
//创建精灵添加在NodeGrid3D上
for (int i = 0; i < 5; i++)
{
auto sp = SpriteAll::create("Hello.png");
gridNode->addChild(sp);
sp->setPosition(Vec2(360,160+322*i));
sp->runAction(MoveBy::create(8, Vec2(0, -1000)));
}
//重新设置网格的顶点信息
for (int col = 0; col < 100; col++)
{
for (int row = 0; row < 500; row++)
{
auto vPos = grid3D->getOriginalVertex(Vec2(col, row));
//纵坐标大于150的网格Z值被修改
if (row > 150) {
auto zValue = -(row - 150) * 5;
grid3D->setVertex(Vec2(col, row), Vec3(vPos.x, vPos.y, zValue));
}
}
}
（7）lua用例
以为博主用的是 Cocos2dX+Lua 所有这里添加一段绑定Lua的用例
local gNode = cc.NodeGrid3D:create()
local grid3D = cc.GridBase3D:create(cc.size(100,500),720,2048,5000)
gNode:setGrid3D(grid3D)
for i=1,100 do
for j=1,500 do
local v3 = grid3D:getOriginalVertex(cc.p(i,j))
if j > 300 then
local zValue = (300 - j) * 15;
grid3D:setVertex(cc.p(i, j), cc.vec3(v3.x, v3.y, zValue));
end
end
end3.プッシュ
github：https：//github.com/KingSun5/Cocos2dx_3DGrid
4.結論
ブロガーの記事がよく書かれていると思われる場合は、ブロガーに注意を払い、ブログ投稿を気に入ってください。また、ブロガーの能力は限られています。記事に誤りがある場合は、コメントして批判してください。 。
QQ交換グループ：806091680（中国人）
このグループは、CSDNブロガーのChinarによって作成されました。お勧めします。私もグループにいます！
この記事はオリジナル記事ですので、有名作家の出典を転載してトップにこだわってください！！！！