fc2ブログ

疑似3Dの仕組み 内部処理編

前回、2Dグラフィックの背景を立体的に見せる方法について解説しました。
今回はその背景の動きに合わせてオブジェクトの位置を変える処理の解説となります。

立体的に見せた背景に合わせてオブジェクトを配置することで、まるで3Dのような見た目になります。

サインとコサイン

サイン・コサインと言えば中学や高校で習ったであろう三角関数です。

三角関数をざっくりと説明するなら、直角三角形の辺の長さから角の角度を求めたり、角の角度から辺の長さを求めるものです。

とはいっても、どれがどんな式か覚える必要はありません。
今回知っておくことは、サインとコサインが以下のような動きをするということです。
pseudo3D-05.gifpseudo3D-06.gif
どちらも角度によって-1~1の値を返します

二つの違いは、縦か横かです。

サインは90度で最大の1、270度で最小の-1です。
コサインは0度で最大の1、180度が最小の-1となります。

これで何ができるのかというと、角度と距離からX座標とY座標を求めることができます。
pseudo3D-11.jpg

例えば、上の図のように60度の方向に3タイル分進むという処理を行いたい場合。
XとYをそれぞれいくつ足せばいいのかは、以下のような計算式で求められます。
const distance = 3;
const angle = 60;
const px = -distance * Math.sin(angle / 180 * Math.PI); // 約-2.6
const py = distance * Math.cos(angle / 180 * Math.PI); // 約1.5

distance が移動距離、angle が角度です。

angle / 180 * Math.PI というのはラジアン係数の計算式になります。
ラジアン係数はサインやコサインといった関数を使う際に使用し、また角度を返す関数もラジアン係数で返ってきます。

ラジアン係数は単純に 360°= 2π なので、上記の計算式を覚えておけばよいです。

plusX をマイナスにしているのは、ツクールのマップでXは右方向にプラスになるからです。
結果、X方向に約-2.6タイル、Y方向に約1.5タイル60度の方向に3タイル分進んだ位置となります。

カメラを回転させる

疑似3Dと2Dの一番の違いは、画面が回転することです。

ここでいう回転とは以下のような動きを言います。
pseudo3D-07.gif

画面の中心を基準に、カメラが回り込むように左右に動いています。
この動きこそが疑似3Dです。

背景の動かし方は前回の記事で書きました。
あとは、この背景の動きに合わせてキャラクターの表示位置が変わる機能を作ります。

手順は以下の通り。
  1. 基準位置からの距離Yを求める
    pseudo3D-12.jpg
  2. カメラの回転角度と距離から新しい座標を求める
    pseudo3D-14.jpg

1. 基準位置からの距離Yを求める

単純にキャラクターのスプライトのY座標から基準位置のY座標を引くことで求めることができます。

X軸の計算をしないのは、地面の画像を傾ける際に skew.x しか使っていないからです。
なんで skew.x なのにY軸なの?と思うかもしれませんが、これはそういうもんだと思ってください。

2. カメラの回転角度と距離から新しい座標を求める

ここで先ほど説明したサインとコサインが出てきます。

カメラの回転角度の方向に、距離Y進んだ座標を求めます。
この座標が画面を回転させたときのキャラの表示位置です。

カメラの高さを変える

視点の高さが変わるのも疑似3Dならではの演出です。
pseudo3D-08.gif

よく見るとわかるのですが、これは地面の画像を縦に伸縮しているだけです。
なので特別難しい計算はしていません。

オブジェクトの座標も、先ほど求めた座標のY軸にこの伸び率を掛ければ同調します。

あとはこれらの組み合わせ

難しいのは回転くらいで、あとは似たようなものを組み合わせるだけです。

基準位置をずらすことで、カメラは上下左右に動きます。
全体の拡大率を変えれば、カメラが寄ったり離れたりします。

これらを同時に行うことで、立体感のある画面は作られています。

実は疑似3Dバトルは簡単

今回紹介した計算は[疑似3Dバトル]プラグインで使われている計算式です。

実はツクールVXAceの乗り物疑似3D化スクリプトはもっと複雑です。
なぜなら乗り物疑似3D化では視点を360°回転させることができるからです。

こっちはアークタンジェントという逆三角関数が出てきて説明もわけわからなくなるため解説なしです。

スポンサーサイト



tag : JavaScript疑似3DRPGツクールMZ

2022-06-19 : スクリプト日記 : コメント : 0 : トラックバック : 0 :
コメントの投稿
非公開コメント

« next  ホーム  prev »

プロフィール

木星ペンギン

Author:木星ペンギン
ほぼツクールのことばかり書いてます。
名前は↑から取りました。
木製ですが木星です。
トカゲは関係ありません。

ゲーム

  • 箱庭の勇者たち(体験版)
  • ぼくらの大革命!
  • 走ってぶつかるゲーム
  • ビート☆サムライ

メールフォーム

wood_penguin@yahoo.co.jp

名前:
メール:
件名:
本文:

月別アーカイブ

広告

寄付(Donate)