TAKOYAKING’s blog

たこ焼き系

UnityでClash of Clansのようなフィールドを作るには

Clash Of Clans(以下クラクラ)のような村を育てるゲームでは通常以下のようなフィールドの見た目になります。

*1

f:id:TAKOYAKING:20160109043902j:plain

 

こういうゲームのフィールドの特徴は4角形を45度回転させたような見た目で、奥行きはあるのに、遠近法がなく、どこから見ても同じ形に見えます。

こういうゲームをIsometric Game (正式名かどうかはわかりません)と言うらしいです。

 

Isometric GameをUnityで作る方法は2通りあるらしいです。

1 Unity3Dでカメラをorthographicにしていい感じにカメラを回転させる

2 Unity2Dでフィールドを作るときにisometricになっている画像を並べていく

 

クラクラは1なのか2で作られているのかはわかりませんが、フィールドは1で作って大量に生成されるキャラクターはisometricな画像(2D)で作っているのではないかと思っています。こういった種類を特に2.5D gameというらしいです。

 

なのでもし、クラクラのようなフィールドを作成したい場合はisometricで検索してもらえばかなりの情報にたどり着けるはずです。(最初はこの用語が知らず、たどり着くのに苦労しました・・・)

 

僕が作ったゲーム (Digital Puppet - デジタル パペット)では2の2Dで作っていく方法を採用しました。

画面は以下のような感じです。

f:id:TAKOYAKING:20160106232945p:plain

プレイしていると奥行きがあって、3Dのように思ってしまうのですが、実は全て2DのSprite画像です。

 

先に2を選択して、後にわかったメリットとデメリットを言います。

メリット

Photoshopで完結すること(ステージ、キャラなど全てBlenderを使用すること無くPhotoshopさえあれば作成できてしまうこと)

 

デメリット

・衝突判定の物理演算がかなり、面倒 (3Dに見えるけど3Dに見える画像をうまく並べただけなので、3Dのように見せるために移動と衝突判定の計算を自前で行わなければならない)

 

・横、奥行きに加えて高さが考慮される場合には画像の重なり順がかなり大変(言っている意味がわからないかもしれませんw)

 

 

デメリットはありつつもPhotoshopだけで作れてしまうのはかなりお手軽なので2を採用して良かったと思います。

 

 

Isometric Gameの作り方

 1 Isometric画像の作成 (Photoshop)

作り方はこの動画を参考にしてください。

www.youtube.com

 

動画では

1 基準となる線を作成

2 その線に沿って、画像を描く

 

以下のようにできるはずです。

1 基準線

f:id:TAKOYAKING:20160109052856p:plain

 

2 画像作成 (Digital Puppet - デジタル パペットのステージのタイル)

f:id:TAKOYAKING:20160109053131p:plain

 

 

これで準備は完了です。

後はこのタイルをうまくUnity2Dでペタペタ貼っていくだけです。

 

一枚だけだとこんな感じ

f:id:TAKOYAKING:20160109054119p:plain

 

高さのあるタイルを作成してみると(6枚使用) 

f:id:TAKOYAKING:20160109054522p:plain

 

一点だけ注意点が描画するSpriteは常に一番手前の方から描画していかなければなりません。(Unityの都合?) 

f:id:TAKOYAKING:20160109055009p:plain

 

もしこの順番で描画しないとこうなります。

f:id:TAKOYAKING:20160109055113p:plain

 さっきと画像の位置は全く同じですが描画順を間違えるとこうなります。

 

もう一つ気をつける点があります。

z軸は利用しなくても3Dのように見えますがz軸を利用したほうが今後キャラクターが移動して行くときにキャラとタイルがどちらが前面に描かれるべきかを実装する際にz軸が必要になってくると思います。

 

z軸を考慮した最終系をお見せします。

このステージを・・・

f:id:TAKOYAKING:20160109055824p:plain

 

 横から見ると・・・

f:id:TAKOYAKING:20160109060029p:plain

こんな感じに見えます。

 

z軸は手前から奥にかけて増減させ、水平方向で同じタイルは同じz軸の値にすればいいと思っています。

このような感じです。

f:id:TAKOYAKING:20160109060652p:plain

水平方向で同じz値を持っていることがわかると思います。

 

これで以上になります。

なかなかわかるまでが大変でした。

ココまでできれば後はキャラクターの移動のクラスを作成して、ごにょごにょコードを書いていく段階に移れると思います。

 

 

以上。

Good Bye Baseball

 

 

*1

「このコンテンツはSupercellに関係がなく、またSupercellによって保証され、後援され、特別に承認されたものではなく、Supercellには一切責任がありません。ファンコンテンツにおけるSupercell知的財産権Supercellファンコンテンツ利用規 www.supercell.com/fan-content-policy.に従うものとします。」