ゲームではキャラが移動すると背景マップがスクロールするものがありますがこの背景マップの移動の仕方について自分がやってることを書いてみます(‘ω’)ノ
私はpixi.js＋Typescriptで作ってますがマップの扱い方が同じなら他の環境でもたぶん同じようにできるんじゃないかと思います。
あ、ちなみに２Dサイドビューアクションゲーム用です。
真ん中固定で移動するやつ
マップスクロールで一番簡単な方法がキャラが真ん中に固定でマップが動くやり方です。
ファミコンの横スクロールゲームはだいたい真ん中になってます。マリオもロックマンも真ん中でマップが移動しています。
プログラムはこんな感じ(右に進む場合)。
const fixPos = Config.Screen.Width * 0.5;
if(player.x + map.x > fixPos){
map.x -= player.x + map.x - fixPos;
}
前提としてplayerの座標はmap上の座標になっていてmap.xはキャラが右に移動するとマイナスになっていきます。
player.x が500、map.xがー662、画面サイズが320でその半分が160だとplayer.x + map.xが162になって差分の２をmap.xに足して(上の式だと-の-でプラスになってる)プレイヤーの位置を真ん中に固定しています。
基本的にはこれで良いとは思いますけど、なんとなく進行方向がもう少し見えた方がいいような気がしないですか？
進行方向を少し広くスクロールさせる
進行方向を広くしたいのでプレイヤーキャラが画面の4割くらいの位置(右移動)に来たらスクロールします。反対向き(左移動)の場合は6割の位置でスクロールさせるとします。
進行方向が片方だけだとこれだけでOKなんですが、左右両方に移動できる場合におかしくなります。
const fixPos = Config.Screen.Width * 0.4;
if(player.x + map.x > fixPos){
map.x -= player.x + map.x - fixPos;
}
こんなかんじで真ん中に固定する方法と同じに書いたら
こんな感じで画面がすごいことになってしまいます。
徐々に合わせるようにする
差分をそのまま引いてしまうと一瞬で画面が動いてしまうのでちょっとずつ引いてやるようにします。
const speed = player.vx * 1.5;
const fixPos = Config.Screen.Width * 0.4;
if(player.x + map.x > fixPos){
const vx = player.x + map.x - fixPos;
if(vx < speed){
map.x -= vx;
}else{
map.x -= speed;
}
}
player.vxはプレイヤーキャラの移動値です。このプレイヤーの移動量よりちょっと早くマップを移動してやるとプレイヤーが画面の指定の位置までズレていってくれるようになるって寸法です。
以上でございます
こんな感じで私はマップをスクロールさせています。
「いや、別に真ん中で良いじゃん」
っていう方もいると思いますが、まぁその辺は開発者の好みですよね。
あ、ちなみに上のgifになってるゲームはこちらです(^^;)
