グラフィックやシナリオ, イベント等もそうですが, 各画面のUIもスマホでの操作性や遊び易さ,
ゲームの世界観にも合うような画面構成を考え抜いて作りました.
各画面の中でメインメンバーの王子様を見られる画面があるのですが,
それがとってもいい感じになっています.
王子様が円形上に並んでいて, スワイプすると回転して手前に来ます. 回転テーブルのように.
こんな感じ.
今回はその回転テーブルの作り方を紹介しようと思います.
cocos2d-x 的には, 普通の Sprite に適切な Position, Scale, Color を指定しているだけなのですが,
それらの計算には 3DCG の知見を多少取り入れています.
位置の計算
3DCG の描画とは, 3D 空間上の点を 2D のスクリーンに写すことです.
ここでは Perspective Projection という投影法を使っています.
近くのものは大きく, 遠くのものは小さく写すことができます.
Perspective Projection (透視投影)
視点から 3D 空間上の点を見て, 視線とスクリーンが交わる点がスクリーン上の位置になります.
このスクリーン上の位置を計算して描画してあげれば, 3D っぽく見えるというわけです.
円卓に戻ってこれを上から見ると
となるので, スクリーン上の x 座標 Sx は次のように求められます.
単純な比例計算ですね.
同じように, y 座標 Sy はこうです.
少し見下ろす視点にしているので,
奥に居る王子は少し上に描画されることになります.
これでスクリーン上の x,y 座標が求められたので,
適当な倍率をかけて Sprite に指定してあげれば OK です.
スケールの計算
大きさってのは位置の差なので, 位置の計算と同じです.
スクリーン位置での基準スケールを Bs とすれば
と計算することができます.
明るさの計算
遠くのものは暗くしたいということで,
適当に距離の逆二乗で明るさを減少させるモデルにしてみました.
点光源によるライティングに近いと思います.
点光源
ただし, Sprite の Color で明るさを表現しようとした場合,
0 ~ 255 の値を入れてやる必要があるので,
一番手前のキャラの明るさを 255 として適当に正規化しています.
まとめ
3D ライブラリ使わなくても, このくらいの単純な動きであれば
割とそれっぽく動かせたかなー という話でした.
ガチの 3D をやると座標変換とかライティングとかテクスチャマッピングとか,
もっと面白くなりそうですね.