Pixel x Pixel


≫スーパーロボット大戦風の背景の作り方


要するにこういうのをFlashを用いて作ります。

▲地面がトーンをかけただけなので、今一つ動いているようには見えませんが



まず背景の素材を用意しましょう。

 
 ▲画像の左端と右端が繋がるように。


そしてその画像を横に2枚並べたものを1枚にしてください。

 
 ▲こんな感じに。


レイヤが複数の場合は分けて出力しましょう。
EDGEでなら「エクスポート」「PNG形式で保存」「レイヤ毎に連続した番号をつけて保存」が便利。

 
 
 ▲今回は前景(地面)と背景(空・山)の2つに分けました。


これで下準備は終了。
Flash作成ソフトを起動して動かしていきましょう。



まずFlashのサイズ、フレームレートを決めておきましょう。
以前12fpsで作成したものは、カクカクするのが気になりました。
とりあえず30fpsくらいあれば、滑らかには見えるみたいです。

 


先ほどの素材をライブラリに読み込みます。

 
 ▲画像ファイルを読み込んで…


読み込んだ素材はそれぞれシンボル(ムービークリップ)に変換します。

 
 ▲シンボルに変換

 
 ▲変換完了。ライブラリはこんな感じ。
  素材である「sora.png」「zimen.png」がそれぞれ「空」「地面」シンボルとなっています。



素材とは別に、新規シンボル(ムービークリップ)を作ります。
このシンボルがスクロールの元となります。
 
 ▲新たにシンボルを作成


新規シンボル内にレイヤを作ります。
素材画像の枚数分に分けてください。
 
 ▲今回はレイヤを2つにします。


分けたレイヤ上にシンボル化した素材を配置していきます。
 
 ▲各レイヤに1つずつ素材(空シンボル・地面シンボル)をセット。


そしてレイヤに配置したシンボルに直接、以下のアクションスクリプトを書き込みます。

onClipEvent(EnterFrame){

    this._x += 8 * _global.speed;

    if(_global.speed > 0){
        if(this._x >= _width/2){
            this._x = this._x - _width/2;
        }
    }
    if(_global.speed < 0){
        if(this._x <= 0){
            this._x = this._x + _width/2;
        }
    }
}

 注目すべきは2行目
 「this._x += 8 * _global.speed;」
 ここの数値(この例では8)を変えることにより、レイヤごとの流れるスピードが変わります。
 数値が大きいほど早く、遅いとゆっくり流れます。
 奥から手前にかけて速度が速くなるとそれっぽいです。
 ここはいろいろと調整してください。

 
 ▲レイヤー上のシンボルにアクションスクリプトを配置
  空の速度を2、地面の速度を5としてみました。


素材の各シンボルにそれぞれアクションスクリプトを貼り付けたら、ほぼ完成です。
シーンの編集画面に戻りましょう。



シーン上に先ほど作成した新規シンボルを貼り付けます。

そしてそれとは別に速度調整用のレイヤを作りましょう。
シーン上に新たにレイヤを作り、そのフレーム上にアクションスクリプトを記述してください。

_global.speed = 1;


 


ここの数値はとりあえず1のままでよいです。
キャラの動きに合わせて背景の速度を変更させたい時に、このスクリプト内の数値を変更してください。

背景を高速移動させたい時は、数値を大きくすればよいですし、
左右の流れる向きを変えたいのであれば、負の数を入れてください。
0を入力すれば背景の動きが止まります。


▲数値が1の時(通常)


▲数値が2の時


▲数値が-1の時(左右反転)


背景の動きは以上で完成です。(ね、簡単でしょう?)

地面を数枚に分けて動かしたり、空と山の部分も別々に動かすとそれっぽくなります。
あとはキャラやエフェクト等の素材と組み合わせてスパロボ風動画にしてみましょう。




▲レイヤーを増やすとこんな感じに。
 速度の違いによる遠近感をなかなかうまく出せない…


もどる