ゾンビとUnity

ゾンビネタとUnityでのゲーム制作について綴るブログです。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Unity ゲーム製作 15 遠景のデザイン

横スクロールゲームで多重スクロールさせる遠景。
この遠景のざっくりとした作り方を決めます。

「テラリア」を参考にするのも良いですが、別の記事で既に扱いましたので、別のタイトルを取り上げたいと思います。
少し毛色を変えたいですね。

今回は2003年に日本でサービスが始まったMMO2D横スクロールアクションRPG「メイプルストーリー」を参考にします。
開発したのは Wizet という Nexon の子会社で、Nexon 本社と同じく韓国にあります。

コミカルな絵と絵によくマッチしたBGM、表情豊かなキャラクター、豊富なクエストに最初は楽しさを感じるものの、操作・戦略・育成がシンプルなため飽きやすい(完全にテンプレ化していてテンプレ通りにやるだけの作業をひたすら繰り返す)、一般人の理解を超越した言動を繰り返す中の人たち、経済も強さもインフレなど、MMOが抱える問題と向き合う必要に迫られるゲームです。

何年か前の大型アップデートのときに少しプレイして、それ以来です。
昔使っていたアカウントを忘れてしまったので、新規でプレイしました。



日替わりでゲームのBGMを聞くことができるブログパーツです。
BGMの参考に。



めいぽ日記が始まるの?

始まりませんw

「かえで」にキャラを作りました。
キャラ名は「Jadwiga」で、好きな蜂蜜酒の銘柄(ポーランドのもの)から取りました。

ヤドウィガ、ヤドヴィガ、やどうぃが、ヤドヴィガ は使えませんでした。
既に誰かが使っているようです。
ポーランド関連の名前をつける人なんていないだろうと思ったのですが、そうでもないようです。

ほとんどログインしないと思いますが、友達登録、ギルドへの勧誘などはご自由にどうぞw


ネタ
Maple Story 04
マジで!?
料理人になろうかな!



遠景をはよう

Maple Story 01
この場所は、雲が描かれた空、奥の雲、手前の雲、海と陸地、合計4枚の遠景が使われています。
雲は1つの塊で1枚の絵になっていて、表示が必要な分だけ並べているのかも知れませんが、同じ奥行きに配置されているものは1枚として数えています。

Maple Story 02
この場所は、木が沢山あってパっと見分かりにくいですが、これもいくつかの遠景を重ね合わせて作られています。
一番手前にある地形に張り付いている木はオブジェクトとして見ます。
そうすると、手前の木、画面左上から右下に差し込む光、奥の木、もっと奥にある木のシルエット、明るい灰色の背景、合計5枚の遠景が使われています。

Maple Story 03
これは乗り物で大陸間を移動中の場面です。
遠景が何枚使われているのか?を確認するとき、キャラクターを上下左右に動かすと、それにあわせて遠景が少しスクロールします。そのスクロールするスピードを見て、この遠景とこの遠景はスピードが違うから、別のものだ…という判断をしています。
この場面では、キャラはほとんど動けないのと、乗り物は高速に移動していますから、背景は勝手にスクロールしています。
キャラクターを2段ジャンプさせるなどして、上下に移動しないとなかなか判別できないこともあるので、この場面で遠景を何枚重ねているのか?正確には分かりませんでした。
たぶん、一番手前の雲、手前の山、山にかかる薄い霧、奥の山、山のシルエットと雲と空(一枚に全て描かれている)、合計5枚だと思われます。

メイプルストーリーは、4~5枚の遠景を重ね合わせ、異なるスピードでスクロールさせているようです。
そうやって奥行きを表現しています。



遠景の表現で重要なこと

・遠くにある景色ほど強くボカす。
・遠くにある景色ほどゆっくりスクロールさせる。


上から2番目のスクリーンショットが分かりやすいですが、遠くにある木ほどボヤけた絵になっている。
一番奥にある遠景は、ほとんどシルエットに近い。
ボカし処理はゲーム側でやる必要はなく、そういう絵を描けばOK

遠景にもライティングの影響を与えたいので、Sprite ではなく、Plane で作る。
天気(晴れ、曇り、雨、嵐、雪、吹雪など)や、時間によって変化する陽光の強さを表現することを想定。
1~3画面分くらいの大きさのPlaneを作って、そこに絵を貼り付けることになる。
ただ、どの解像度でプレイするか?を決めていないため、1画面分がどれくらいのスケールなのか?が分からない。
そうなると、全ての解像度で正しく表示されるように作る必要がある。



何枚重ねればしっくりくるか?

とりあえず、プロトタイプを作った。

最初に使った遠景は、山、雲、青空の3枚。
これらを異なるスピードでスクロールさせてみたが、3枚だとちょっと物足りない。
なので、山の遠景を1枚追加した。

手前の山、奥の山、雲、青空の4枚。

この辺は素直にメイプルストーリーを参考にすればいいようだ。
遠景は4枚以上を重ねるのが良いと見た。


静止画だと分かりにくいので、簡単な動画を作った。


遠景をスクロールさせる方法
 
遠景のスクロールはUVスクロールを使うのが良いという話をどこかで聞いた気がするが、このプロジェクトではちょっと使えそうにない。
理由は以下の2つ。

・横方向のスクロールでしか使えない。
・カメラ移動に合わせてPlaneも移動させなきゃいけないので、Planeの移動量を調節すればそれで済む。


・横方向のスクロールでしか使えない。

テクスチャの Import SettingsWrap Mode という設定項目がある。
これを Repeat にすることで、UVスクロールしたときにテクスチャの絵をループさせることができる。

Distant View 04

遠景をループさせたいときは便利そう。
ただ問題が1つあり、縦方向と横方向で別々に設定できない。
遠景の場合、横方向をループさせることはあるけど、横スクロールゲームで縦方向をループさせることはまずない。
宇宙空間を縦横無尽に動き回るならともかく。

Distant View 05
プロトタイプでは横方向のスクロールにしか対応させていないが、縦方向のスクロールもする予定なので、UVスクロールを使うならループしない設定にしなきゃいけない。
ループさせると、縦方向にスクロールさせた場合、縦方向もループすることになるので、上の絵のように表示されてしまう。

「だったら、横方向だけUVスクロールさせて、縦方向はテクスチャを貼り付ける Plane の位置を調節してスクロールしてるように見せればいいんじゃね?」

というのは、ただの二度手間。
何故なら↓


・カメラ移動に合わせてPlaneも移動させなきゃいけないので、Planeの移動量を調節すればそれで済む。

どっち道、Planeの表示位置はカメラの位置に合わせて調節しないといけない。
それなら、UVスクロールを使わずに、単にPlaneの表示位置を調整してスクロールしているように見せれば良い。



このプロジェクトは、キャラを移動させると、それに合わせてカメラが移動する仕組みで動いている。
遠景はSpriteではなく、Planeを使い、ワールド空間に配置する。
そうなると、遠景もカメラ(あるいはキャラ)に合わせて移動してやらないと、カメラの視界の外に出て行ってしまう。

遠景をカメラと同じスピードで移動させると止って見えてしまうので、カメラよりもちょっとだけ遅いスピードで移動させる。
そうすることで、ゆっくりスクロールしているように見せることができる。
using UnityEngine;

public class DistantView : MonoBehaviour {

public float speed = 0.9f;
public GameObject view_camera = null;

Vector3 old_pos;

void Start() {
Vector3 p = this.transform.position;
this.old_pos = this.view_camera.transform.position;
this.SetPosition();
}

void Update() {
if (Mathf.Abs(Vector3.Distance(this.view_camera.transform.position, this.old_pos)) > 0) {
this.SetPosition();
}
}

void SetPosition() {
Vector3 p = this.transform.position;
Vector3 v = this.view_camera.transform.position;
this.transform.position = new Vector3(p.x + (v.x - this.old_pos.x) * this.speed, p.y + (v.y - this.old_pos.y) * this.speed, p.z);
this.old_pos = v;
}
}
このスクリプトを遠景として使う Plane に追加し、InspectorSpeed を設定、View_camera に使用するカメラを設定すればOK
Speed は、カメラの移動スピードに対して、何倍のスピードで遠景を移動させるか?を指定する。
ゆっくりスクロールさせたい場合は、1未満の値を指定。

このスクリプトは遠景をループさせることは想定していないので、ループする必要が出たときはその処理を追加しなきゃいけない。
ループしなくても済むように、遠景を十分な大きさで作るか、Planeのスケールを大きくするのが楽だと思う。


UVスクロールはエフェクトで使うのがいいようだ。
テクスチャの UV スクロール - 凛(kagring)のUnity(とQt)勉強中ブログ
http://kagring.blog.fc2.com/blog-entry-61.html

スポンサーサイト

- 0 Comments

Add your comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。