habrahabr.ruのすべての読者にこんにちは
最近、iOS用のゲームの開発を開始することにしました。その理由は、 サイトの記事を読んだためです。 このレッスンはあなたの時間を無駄にしないのに役立ちます。将来的には給料に良い追加をもたらすと思います。 最初にObjective-Cに関する本を読んで、純粋なOpenGLを使いたくなかったので、ゲームを書くための優れた無料のエンジンを探し始めました。 選択肢はcocos2dにあり、ここで友人が彼に関するサイトで多くの良いレビューをアドバイスし、見つけました。さらに、開発者がフォーラムで質問によく答えることを何度も聞きました。
私はこのゲームの方向性が大好きなので、ゲームは経済的な戦略になります。 これらのゲームはいずれも、プレイヤーが移動して別の建物などを構築できるマップを使用します。 そこで、このようなマップを作成してゲームを開始することにしました。 私は等尺性マップの作成に関する情報を検索し始めましたが、インターネット上にはそれほど多くはなく、ロシア語では複数の記事を見ていません。 したがって、私は自分で書くことにしました。 初心者の開発者の中には、この記事を読むのが面白いと便利だと思う人もいると思います。
おそらく十分なエントリ。 さあ始めましょう！
カードには2つのタイプがあり、これらは等尺性と直交です。 現時点では、ゲームに適しているため、「等尺性」マップを使用して作業を説明します。
アイソメトリックマップとは何ですか？
アイソメトリックマップを使用すると、2次元グラフィックスを使用して3次元表示を実現することができます。 等尺性ゲームが非常に広く普及しているのはこのためです。 比較的シンプルなグラフィックスで空間的な奥行きがあると考えられる、信じられないほどのゲームワールドを作成できます。 2Dグラフィックスが必要とするデバイスの電力が3Dゲームよりもはるかに少ないという事実は言うまでもありません。
等尺性マップの設計。
アイソメトリックマップは、軸測投影法を使用して、隅から景色を見ているような印象を与え、それによって視覚的な奥行きを作り出します。 軸測投影法は、2次元平面上の3次元オブジェクトの設計、回転を表す技術用語です。 画像は歪んでしまいますが、私たちの心はそれを三次元の物体として受け入れます。
タイルマップの観点から、「図1」を見ると、等角投影を作成するための具体的なアクションが表示されます。 最初の領域を45度回転し、Y軸に沿って縮小して、典型的な等尺性形状にします。
「図2」は、均一に色付けされたいくつかの等尺性タイルが互いに隣り合って配置されており、1階のパターンが作成されていることを示しています。 1階のタイルは印象的ではなく、非常に平らに見えます。 ただし、これらはゲームワールドの背景レイヤーとして重要です。
アイソメトリックマップに実際の視覚的な深さを追加するには、菱形の形状を超える「タイル」オブジェクトが必要です。 最も一般的に使用されるアプローチは、45度の角度で見られるように3次元オブジェクトを設計することです。 原則として、このようなオブジェクトは1タイル以上高くなりません。 視覚的な奥行き感を与えます。 同様に、2つのタイルの高さよりもはるかに高い等尺性タイルオブジェクトを作成する場合、オブジェクトが非常に高いように見える場合、プレーヤーにはタイルマップの一部しか表示されないため、説得力のある3Dビューを作成することは非常に困難です。
これは小さな紹介でしたが、次に最も重要なことであるマップの作成に移りましょう。 これを行うには、等尺性マップを操作できるエディターが必要です。 Tiled Map Editorを使用します。 それは無料であり、アップデートがしばしば出てきます。開発者のウェブサイトで見つけるのは難しくないと思います。さらに、WindowsとMac用のバージョンがあります。
マップ自体の作成を始めましょう。 cocos2dパーサー自体がマップ上で宣誓しないようにアプリケーションを開いていくつかの設定を行い、 「設定」メニュー項目を見つけ、 「 タイルレイヤーデータの保存」をBase64（gzip圧縮）に配置します。次の図を参照してください。
続けます。 [ ファイル]➤[新規]を選択します[新規 マップ ]という名前のダイアログが開きます。 向き、等尺性を設定する必要があり、マップサイズ（マップサイズ）は幅30プレート、高さ30プレートです。これで十分だと思います。 ここでは、タイルの幅と高さ（タイルサイズ）が奇妙に見えます。 タイルを配置するときに考慮しなければならないダイヤモンド形状のサイズは、 54x27ピクセルです。 それでも、タイルサイズは52x26に設定されます 。
このオフセットの目的は（-2、-1）であるため、後でタイルマップのエッジに沿って直線が表示され、下の黒いレイヤーが表示されなくなります。 互いに同じ距離にあり、重ならない理想的なフォームを作成することは不可能であるため、これが必要です。
ミスをして間違ったオフセットを選択し、多くの時間を費やしたタイルマップを再作成したくない場合、または他の理由があり、タイルマップまたはタイルセットのサイズを調整したい場合、これを行う簡単な方法があります。 XcodeでプロジェクトのTMXファイルを選択すると、 XMLテキストファイルであることがわかります 。 ファイルの先頭に、パーティションマップがあります。
<map version="1.0" orientation="isometric" width="30" height="30" tilewidth="54" tileheight="27">
タイルマップの正しいオフセットが見つかるまで、タイル幅とタイル高さのパラメーターを編集することもできます。 同様に、使用しているアイソメトリックタイルセットのサイズを判断するのに問題がある場合は、タイル幅やタイルの高さなど、タイルセットのパラメーターを変更できます。
<tileset firstgid="1" name="dg_iso32" tilewidth="54" tileheight="49"> <image source="dg_iso32.png"/> </tileset>
Tiledはファイルを自動的に更新しないため、手動で変更を行った後、TiledのTMXファイルが更新されることを確認する必要があります。
新しい等尺性タイルセットの作成
次に、等尺性タイルを含むタイルセットにロードする必要があります。 dg_iso32.png画像を使用します。 [ タイル]で 、[ マップ]➤[新しい タイル セット...]を選択し、 dg_iso32.pngファイルに移動します。
Tiledでは 、以前に設定した[ 新しいマップ ]ダイアログボックスの設定に従って、デフォルトのタイルの幅と高さを設定します。 アイソメトリックタイルマップの場合、デフォルトでは、アイソメトリックタイルが重なるため、常に修正する必要があります。 前述したように、タイルセットdg_iso32.pngは幅54ピクセル、高さ49ピクセルのタイルを使用します。 27ピクセルの菱形の高さではなく、等尺性タイルのキャンバスの高さ全体を使用する必要があることに注意してください。 上の図は、すべてを構成する方法を示しています。
忘れてはならないいくつかのルールについてお話したいと思います。
アイソメトリックマップを設計するための最も重要なルールは、ゲームキャラクターが特定のオブジェクト（タイル）を追い越せるように、少なくとも2つのレイヤーが必要であることです。 平らなオブジェクト、地球および地球のようなタイル用の1つのレイヤー、および他のタイルと重なるか完全に不透明ではない他のオブジェクト用の別のレイヤー。 最初のレイヤーは土地であり、1階に配置する必要があります。次に、このレイヤーに2番目のレイヤーを配置します。このレイヤーには山、木、家などがあります プレーヤーが通過できないオブジェクト。
cocos2dの過去のバージョンでは、部分的に透明なタイルの背後にあるゲームキャラクターやその他のスプライトの正しい表示に問題がありました。 ソリューションの一部は、 cc_vertexzという名前の特別なプロパティをレイヤーに追加することです。 これを行うには、グランドレイヤーを選択して「レイヤープロパティ」を追加する必要があります別のキーを押すか、MacでCtrlを使用します。 cc_vertexzという名前の新しいプロパティを追加し、その値を-1000に設定します。 次の図に示すように、「Objects」レイヤーでも同じ操作を行いますが、 「automatic」という行を入力します （引用符なし）。
マップ上にオブジェクトを配置して、マップを作成できます。 これは例であるため、数本の木と少数の山で構成される単純な地図をスケッチしました。
次に、行ったすべてのことを保存します。その名前はisometric.tmxになります。
Cocos2dで等尺性タイルマップをダウンロードする
次に、 Xcodeを開き、新しいプロジェクトを作成します。
好きなように呼びます。 NewTileMapという名前を付けました。
次に、作成したプロジェクトにマップをドラッグします。
オブジェクトをコピーするだけであることを忘れないでください。
HelloWorldLayer.mファイルに移動して、コーディングを開始してください。今日はそれほど多くありませんが、さらに多くのことがあります。
initメソッドでは、そこにあるすべてのものを消去し、コードを追加します。
self.map = [CCTMXTiledMap tiledMapWithTMXFile:@"isometric.tmx"]; self.background = [_map layerNamed:@"Background"]; [self addChild:_map z:-1]; _map.position = CGPointMake(-500, -500);
オブジェクトを右上隅に配置したため、すぐにそこに移動する必要があります。そのため、位置を変更しています。
まあ、おそらくあなたは私たちのゲームを実行できます。 そして、私たちは何を見ますか？
これは私たちが見たかったものではありません！ 理由はわかりませんが、 cocos2dは標準のプロジェクト作成テンプレートを使用して等角図を正しく表示しません。 まあ、何も、それを修正します。 賢い人は、 ccMacros.hで定義されているCC_DIRECTOR_INITを少し修正する価値があると言いました。 私はそれをやったが、それは私を助けなかった、私はプロジェクト「\ libs \ cocos2d」のフォルダを完全に置き換えなければならなかった、それから私はまだAppDelegate.mファイルを少し編集する必要がある
すべて修正し、小さなゲームを実行してみてください。
これですべてが正常になりました！ すべてが正しく表示されます。
今のところこれで十分だと思います。次の章では、引き続きマップを操作します。
Steffen Itterheim-iPhoneとiPadの学習Cocos2Dゲーム開発は、記事の執筆に役立ちました。
誰にソースコードが優しいだろう、と書いて、私は送ります。