スクロールについて

背景が永遠にスクロールしているように見せます。

1.ループしている画像を用意します。
2.画像をFlashに配置します。
3.画像を分解します。(Ctrl+B)
4.整列パネルで画像をFlashの左上にぴったり着くように配置します。
5.画像をグループ化しておきます。
6.短形ツールで、四角形を描きます。線は不要なので消して、情報パネルで下のようなサイズになるように補正します。

四角形の幅 = 画像の幅 * ((Flashの幅 / 画像の幅)←小数切り上げ + 1);
四角形の高さ = 画像の高さ * ((Flashの高さ / 画像の高さ)←小数切り上げ + 1);

7.整列パネルで四角形をFlashの左上にぴったり着くように配置します。
8.画像のグループ化を解除します。(Ctrl+B)
9.スポイトツールで画像を抜き取ります。
10.バケツツールで画像を四角形に貼り付けます。
11.四角形をMCインスタンスにして以下のASを記述します。

onClipEvent (load) {

	w = 32;	// 画像の横幅
	h = 32;	// 画像の縦幅
	
}
onClipEvent (enterFrame) {

	// 補正
	if (_x < -w) {
		_x = _x % w;
	}
	
	if (_y < -h) {
		_y = _y % h;
	}
	
	if (_x > 0) {
		_x = -w - _x % w;
	}
	
	if (_y > 0) {
		_y = -h - _y % h;
	}
	
}

後は _x と _y を好きなように動かすと自動的に補正されるので、背景が無限スクロールしているように見えます。

onClipEvent (load) {

	w = 32;	// 画像の横幅
	h = 32;	// 画像の縦幅
	
}
onClipEvent (enterFrame) {

	_x ++;
	_y ++;

	// 補正
	if (_x < -w)	_x = _x % w;	
	if (_y < -h)	_y = _y % h;	
	if (_x > 0)	_x = -w - _x % w;	
	if (_y > 0)	_y = -h - _y % h;
	
}

マウスの位置によってマップをスクロールします。

1.マップの幅をMapWidthとします。
2.マップの高さをMapHeightとします。

3.Flashの幅をFlashWidthとします。
4.Flashの高さをFlashHeightとします。

5.マウスの位置が -1 から +1 までの値になるように計算します。

x移動量 = (FlashWidth - マウスの座標) / FlashWidth * 2 - 1;
y移動量 = (FlashHeight - マウスの座標) / FlashHeight * 2 - 1;

6.スクロールする速さをMapSpeedとします。
7.それぞれの移動量に掛けます。

x移動量 *= MapSpeed;
y移動量 *= MapSpeed;

8.それぞれの移動量をマップのムービークリップ座標に加算します。

_x += x移動量;
_y += y移動量;

9.マップが移動し過ぎないように座標制限を設けます。

if(_x > 0) _x = 0;
if(_y > 0) _x = 0;
if(_x < MapWidth - FlashWidth ) _x = MapWidth - FlashWidth ;
if(_y < MapHeight - FlashHeight) _y = MapHeight - FlashHeight;

onClipEvent (load) {

	MapWidth = 800;	// マップの横幅
	MapHeight = 400;	// マップの縦幅
	MapSpeed = 5;	// マップの移動速度

	FlashWidth = 400;	// Flashの縦幅
	FlashHeight = 300;	// Flashの横幅

}
onClipEvent (enterFrame) {
	
	// x方向成分
	var posx = ((FlashWidth-_root._xmouse) / FlashWidth*2-1);
	// y方向成分
	var posy = ((FlashHeight-_root._ymouse) / FlashHeight*2-1);

	// 移動量計算
	posx *= MapSpeed;
	posy *= MapSpeed;
	
	// 座標に加算
	_x += posx;
	_y += posy;
	
	// リミッタ
	if( _x > 0)	 _x = 0;
	if( _y > 0)	 _y = 0;
	if( _x < -(MapWidth  - FlashWidth )){
	  _x = -(MapWidth  - FlashWidth);
	}
	if( _y < -(MapHeight - FlashHeight )){
	 _y = -(MapHeight - FlashHeight);
	}

}

スクロールの概念

スクロールのないゲームは、座標を指定するプロパティ _x と _y を 利用して座標の数値を管理したり、座標の表示位置を更新していたと思います。 スクロールするゲームでは、ゲーム上の座標データとFlashに表示する座標データを別にする必要があります。

というのは、プレイヤーがゲーム上でx座標 0 からはじまり 500 まで進んでいくゲームがあるとして これを実際Flashの画面 200*150 の座標にそのまま反映して表示してしまっては画面からすぐに消えていってしまいます。

　

ゲーム上で扱っている座標をFlashの画面内に写る位置に変換して常に画面に表示されるように 補正する必要があるのです。このFlash画面内の座標をスクリーン座標と言います。



そういう訳で、スクロールするゲームでは、別の変数 posx と posy を作ってその変数で 座標を管理してプログラムを組んでいきます。座標位置や座標当たり判定などはすべてこの変数で処理をします。

_x と _y には Flashが描画されるタイミング（毎ループの最後）で、 posx と posy から画面内に写るように変換した座標値を格納します。

　

　

スクリーン座標を求める

ゲーム上の座標は _x と _y から 新しい変数 posx と posy に単に置き換えて今まで通り組んでいくとして、 どのようにしてFlash上の画面に置き直すのでしょうか。

まず画面に写したいキャラクタ（この場合プレイヤー）のゲーム上の座標と、Flashの画面上に持ってきたい座標との差を求めます。



ゲーム上の座標とこの差を減算して _x と _y に格納するとちょうど画面に写る位置に 反映されます。これを背景と背景に載っているすべてのムービークリップに対して同じような処理をすると画面にスクロールしているように反映されます。

　

Flashでお勧めのスクロール方法

　

サンプルをダウンロード

scroll_02_01_fla05_as1.fla

　

さて、これまでのスクロール方法は、さまざまなプラットフォームで使用できる方法でしたが、 Flashだとさらに簡単にスクロールを実現する方法があります。しかもこの方法を使うと、 拡大縮小までも簡単にできてしまい非常にお勧めです。

ではどうやって作るのかと言うと、まず、board というムービークリップを１つ用意してこの中で、 ゲームで使用するムービークリップを配置します。後は、board の座標を移動するだけでスクロールができます。 こうすれば一括して全ムービークリップを移動するわけですね。座標をposx と posy の変数に置き換える必要もありません。 また、このboardの大きさを変えるだけで、ゲーム画面を一括して拡大縮小する事ができます。