Cocos2d-x-コンセプト

まえがき

少し背景から始めましょう。 少し前、友人と私は卒業プロジェクトのために2次元のゲームを開発することにしました。 ジャンルを決定し、ゲームプレイのおおよそのアイデアを得た後、エンジンを選択するという問題に直面しました。 UnrealまたはUnityをすぐに削除しました。2Dゲームには「重い」ツールであるように思えたからです。 Cocos2d-xは、1つの詳細ではないにしても、理想的なオプションです-入門レッスンがほぼ完全に欠けています。 私たちが見つけた記事は不完全であるか、詳細が不十分でした。 それから、私は英語の知識がほとんどない状態で公式文書を翻訳することを決めましたが、同時に翻訳を他の人（私でない場合は誰でも）と共有しました。



この記事は、Cocos2d-xの公式ドキュメントのほぼ逐語的な翻訳です。 エンジンデバイスのすべての複雑さを理解したくないが、すぐにゲームの作成を開始したい場合は、この記事Cocos2d-x-シンプルなゲームの開発をお勧めします。



Cocos2d-xをまだインストールしていない場合、またはプロジェクトを作成できない場合、ここに詳細な手順があります： Cocos2d-xバージョン3.0以降を使用したマルチプラットフォームゲームの作成 。



元の記事： Cocos2d-xプログラマーガイド



PS：gitHubでcocos2d-xのクローンを作成することはお勧めしません。 クローンを作成した後、いくつかの重要なファイルを取得できませんでした。 しかし、たぶん運が悪かったのかもしれません。



さあ始めましょう！

Cocos2d-xの概念

この章では、Cocos2d-xを使い始めたばかりで、夢のゲームを始める準備ができていることを前提としています。 心配しないでください、楽しいです！



Cocos2d-xクロスプラットフォームゲームエンジン。 ゲームエンジンは、すべてのゲームに必要な基本機能を提供するソフトウェアです。 これはAPIまたはフレームワークと呼ばれることを聞いたことがあるかもしれませんが、このガイドでは「ゲームエンジン」と呼びます。



ゲームエンジンには多くのコンポーネントが含まれており、これらを組み合わせて使用​​すると、開発速度が向上し、多くの場合、間に合わせのライブラリよりもうまく機能します。 通常、ゲームエンジンには、ビジュアライザー、2D / 3Dグラフィックス、コリジョンハンドラー、物理エンジン、サウンド、アニメーションなどのコンポーネントの一部またはすべてが含まれています。 通常、ゲームエンジンは複数のプラットフォームをサポートしているため、ゲームをさまざまなデバイスに簡単に移植できます。



Cocos2d-xはゲームエンジンであるため、クロスプラットフォームゲームを開発するためのAPIを提供します。 使いやすいAPI内のパワーカプセル化のおかげで、ゲームの開発に専念でき、技術的な基礎について心配する必要がなくなります。 Cocos2d-xは大変な仕事を引き受けます。



Cocos2d-xは、次のオブジェクトを提供します： Scene 、 Transition 、 Sprite 、 Menu 、 Sprite3D 、 オーディオ、その他多数。 ゲームの作成に必要なものはすべて含まれています。

主なコンポーネント

これは非常に複雑に思えるかもしれませんが、Cocos2d-xを使い始めるのは簡単です。 ダイビングする前に、Cocos2d-xで使用されているいくつかの概念を理解する必要があります。 Cocos2d-xの中心にあるオブジェクトは、 Scene 、 Node 、 Sprite 、 Menu、およびActionです。 任意のゲームを見ると、これらのすべてのコンポーネントが何らかの形で表示されます！



こちらをご覧ください。 1つの非常に人気のあるゲームとの類似点があります。







もう一度見てみましょうが、スクリーンショットを作成に使用するコンポーネントに分割します。







メニュー、いくつかのスプライト、ラベルを見ることができますが、それらはすべてCocos2d-xに対応しています。 あなた自身のゲームのコンセプトを見て、あなたが持っているコンポーネントを見てください。おそらくあなたはマッチを見つけるでしょう。

監督

Cocos2d-xは、映画のように監督（ Director ）の概念を使用しています！ Directorオブジェクトはワークフローを制御し、全員に何をすべきかを伝えます。 ディレクターの主なタスクは、トランジションとシーンの置換を制御することです。 Directorは、コード内のどこからでも呼び出すことができる基本シングルトンです（実際、このクラスのインスタンスは一度に1つしか存在できません）。



典型的なゲームストリームの例を次に示します。 ゲームの基準に従って、 Directorが実行を管理します。







あなたはあなたのゲームのディレクターです。 何が、いつ、どのように起こるかを決めるのです。

シーン

ゲームでは、おそらくメインメニュー、いくつかのレベル、および最終シーンを表示する必要があります。 これをどのように整理しますか？ ご想像のとおり、シーンの助けを借りて（ Scene ）。 好きな映画を思い出してください。 シーンまたはストーリーの個々の部分に明確に分割されていることに気付くかもしれません。 同じアプローチをゲームに適用する場合、ゲームがどれほど単純であっても、少なくともいくつかのシーンを考え出す必要があります。



すでにわかっている画像を見てみましょう。







これはメインメニューであり、別のシーンです。 このシーンはいくつかの部分で構成されており、それらが一緒になって最終的な結果をもたらします。 シーンはレンダリング時に描画されます 。 レンダーは、シーンにスプライトやその他のオブジェクトを表示する役割を果たします 。 これをよりよく理解するには、 シーングラフについて少し話す必要があります 。

シーングラフ

シーングラフは、グラフィックシーンを整理するデータ構造です。 シーングラフには、 ノードオブジェクトがツリー（はい、これはグラフと呼ばれますが、実際にはツリー）構造に含まれています。







Cocos2d-xがあなたのために大変な仕事をするのなら、なぜこれらの技術的な詳細について考える必要があるのか​​疑問に思っていると思いますか？ これは、レンダリング中にシーンがどのようにレンダリングされるかを理解するために非常に重要です。



ノード、スプライト、およびアニメーションをゲームに追加し始めたらすぐに、画面に期待どおりのものが表示されるようにする必要があります。 しかし、これが起こらなかった場合はどうなりますか？ スプライトが背景の後ろに隠れていて、それらを前面に表示したい場合はどうなりますか？ 大丈夫です。一歩下がって、紙の上のシーングラフに目を通すだけで、間違いを簡単に見つけることができます。



Scene Graphはツリーであるため、 あなたはそれを回避することができます。 Cocos2d-xは、 インオーダーバイパスアルゴリズムを使用します。 上記の順序付きアルゴリズムは、ツリーの左側でトラバーサルを開始し、ルートを通過してツリーの右側で終了します。 ツリーの右側は最後にレンダリングされるため、画面の最初に表示されます。







シーングラフのデモンストレーションは簡単です。ゲームシーンを見てみましょう。







以下のツリーに従って画面に表示されます。







議論する必要がある別のポイントは、負の順序Z（ z-order ）を持つ要素がツリーの左側にあり、正の順序Zを持つ要素が右側にあるということです。 アイテムを整理するときは、このことに留意してください！ もちろん、任意の順序で項目を追加でき、それらはカスタムz-orderパラメーターに基づいて自動的にソートされます。



この概念に基づいて、シーンをノードのコレクション（ Node ）と考えることができます。 シーンを上から下に分割して、 シーングラフがzオーダーを使用してシーンを構成する方法を確認します。







実際、シーンは多くのノードで構成されており、さまざまなzオーダーパラメーターが互いに積み重ねられています。



Cocos2d-xでは、 addChild（）呼び出しを使用してシーングラフを作成します。

//     z-order  -2,   //       (  z-order ) scene->addChild(title_node, -2); //     z-order,   0 scene->addChild(label_node); //     z-order  -2,   //       (  z-order ) scene->addChild(sprite_node, 1);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スプライト

すべてのゲームにはスプライトが含まれており、おそらくあなたはすでにそれらについてのアイデアを持っています。 スプライトは、画面上を移動するグラフィックオブジェクトです。 ゲームの主人公は、おそらくスプライトでもあります。 質問するかもしれませんが、すべてのグラフィックオブジェクトがスプライトではありませんか？ いや！ なんで？ スプライトは、移動した場合にのみスプライトになります。 移動しない場合、これは通常のノード（ノード）です。



もう一度、おなじみの画像を見て、スプライトがどこにあり、ノードがどこにあるかに注意してください：







スプライトはすべてのゲームで重要です。 プラットフォーマーを作成するときは、おそらく何らかのイメージを使用して作成されたメインキャラクターがいます。 これがスプライトです。



スプライトは簡単に作成でき、 位置 、 回転 、 スケール 、 不透明度 、 色などのカスタマイズ可能なパラメーターがあります。

 //     auto mySprite = Sprite::create("mysprite.png"); //      mySprite->setPosition(Vec2(500, 0)); mySprite->setRotation(40); mySprite->setScale(2.0); //      X  Y mySprite->setAnchorPoint(Vec2(0, 0));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードの各プロパティをデモしてみましょう。次のスクリーンショットを検討してください。







mySprite-> setPositon（Vec2（500、0））を使用して位置を設定した場合; ：







スプライトノードは、元の位置から私たちが設定した位置に変更されました。



mySprite-> setRotation（40）を使用して回転を設定すると、 ：







...示された量だけスプライトが回転したことがわかります。



mySprite-> setScale（2 .0）;を使用して新しいスケールを設定した場合::







繰り返しますが、コードに従ってスプライトが変更されていることがわかります。



最後に、すべてのノード（SpriteはNodeのサブクラスであるため）にはアンカーポイントがあります。 これについてはまだ話していないので、今がその時です。 アンカーポイントは、位置を設定するときにスプライトのどの部分をベース座標として使用するかを決定する方法と考えることができます。



次の呼び出しを使用して、ゲームのキャラクターの基準点を設定します。

 mySprite->setAnchorPoint(Vec2(0, 0));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、スプライトの左下隅がsetPosition（）の各呼び出しのベースとして使用されます。 実際のいくつかの例を見てみましょう。







各画像の赤い点に注意してください。 この赤いマークは、アンカーポイントの場所を示しています。



お気づきかもしれませんが、アンカーポイントはノードを配置するときに非常に便利です。 アンカーポイントを動的に調整して、ゲームの効果をシミュレートすることもできます。

アクション

シーンを作成してスプライトを画面に追加することは、私たちがする必要のあることの一部にすぎません。 ゲームを作成するには、物事を動かす必要があります！ アクションオブジェクトは、すべてのゲームの主要部分です。 アクションを使用すると、Nodeオブジェクトを時間内に変換できます。 スプライトをあるポイントから別のポイントに移動したいですか？ 問題ありません！ ノードで実行される一連のアクションを作成することもできます。 位置 、 回転 、 スケールなどのノードパラメータを変更できます。 アクションの例： MoveBy 、 Rotate 、 Scale 。



次に、アクションの動作を示します。







...そして5秒後にスプライトは新しい位置に移動します：







アクションオブジェクトは簡単に作成できます。

 auto mySprite = Sprite::create("Blue_Front1.png"); //    50    10    2  auto moveBy = MoveBy::create(2, Vec2(50,10)); mySprite->runAction(moveBy); //         . auto moveTo = MoveTo::create(2, Vec2(50,10)); mySprite->runAction(moveTo);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

シーケンスとスポーン

画面上をスプライトが移動することで、ゲームを作成するために必要なものがすべて揃いましたよね？ そうでもない。 いくつかのアクションを開始する方法は？ Cocos2d-xはこれをいくつかの方法で実装しています。



シーケンスは、特定の順序で実行される一連のアクションです。 シーケンスを逆順に実行する必要がありますか？ 問題ありません。Cocos2d-xは追加の作業なしでこれを実装します。



スプライトの漸進的な動きの次のシーケンス例を見てください。







このシーケンスは簡単に作成できます。

 auto mySprite = Node::create(); //    50, 10  2  auto moveTo1 = MoveTo::create(2, Vec2(50,10)); //      100, 10  2  auto moveBy1 = MoveBy::create(2, Vec2(100,10)); //    150, 10  2  auto moveTo2 = MoveTo::create(2, Vec2(150,10)); //   auto delay = DelayTime::create(1); mySprite->runAction(Sequence::create(moveTo1, delay, moveBy1, delay.clone(), moveTo2, nullptr));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、シーケンスを順番に開始しますが、指定したすべてのアクションを同時に開始する方法は？ この機能はCocos2d-xでも使用でき、Spawnと呼ばれます。 Spawnはこれらのアクションをすべて実行し、同時に起動します。 他のものよりも長いものもありますが、その場合、すべてが同時に終了するわけではありません。

 auto myNode = Node::create(); auto moveTo1 = MoveTo::create(2, Vec2(50,10)); auto moveBy1 = MoveBy::create(2, Vec2(100,10)); auto moveTo2 = MoveTo::create(2, Vec2(150,10)); myNode->runAction(Spawn::create(moveTo1, moveBy1, moveTo2, nullptr));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

両親、子供とその関係

Cocos2d-xは、親と子のプロパティを継承するという原則を使用しています。 これは、親ノードへの変更が子要素にも適用されることを意味します。 相続人がいる1つのスプライトについて考えます。







親の回転を変更すると、すべての子の回転も変更されます。

 auto myNode = Node::create(); //   myNode->setRotation(50);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

回転と同様に、親のスケールを変更すると、相続人にも新しいスケールが与えられます：

 auto myNode = Node::create(); //  myNode->setScale(2.0); //   2 
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべての親の変更が子に影響するわけではありません。 親アンカーポイントへの変更は、変換操作（スケール、位置、回転、傾斜など）にのみ影響し、相続人の位置には影響しません。 実際、子は常に親の左下（0,0）コーナーに追加されます。

メッセージを表示する方法としてのログイン

アプリケーションの実行中に、情報やデバッグの目的でコンソールにメッセージを表示したい場合があります。 これは、log（）を使用してエンジンによって実装されます。

 //   log("This would be outputted to the console"); //  string string s = "My variable"; log("string is %s", s); // double double dd = 42; log("double is %f", dd); // integer int i = 6; log("integer is %d", i); // float float f = 2.0f; log("float is %f", f); // bool bool b = true; if (b == true) log("bool is true"); else log("bool is false");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

std :: coutを好む場合は、 log（）の代わりにそれを使用できますが、 log（）は複雑な出力のフォーマットを簡素化できます。

おわりに

Cocos2d-xの多くの概念を取り上げました。 深呼吸することができます。 心配しないで。 自分のアイデアに没頭し、一歩一歩実行してください。 Cocos2d-xとプログラミングは、一晩で習得されるスキルではありません。 彼らは練習と理解が必要です。 フォーラムは質問への回答にも役立ちます。

翻訳者から

おそらく、あなたはすでにこの記事から多くを知っていたでしょう。 しかし、これはcocos2d-xチュートリアルシリーズの紹介にすぎません。 将来的には、新しい記事を翻訳し続け、誰かに興味があればここに投稿します。



続き： Cocos2d-x-スプライトの使用