画像を移動させる１

ここでは画像を画面上で移動させるスクリプトの記述方法を解説しています。

左と右に移動するためにモーション関数を2つ作る

ここでは画像（キャラクター）が画面上を左右に動くようにスクリプトを記述していきます。先ほどまではモーション関数は1つだけでしたが、左と右に動かすためにモーション関数が2つ必要になります。また、同時に画像の反転、移動速度なども設定していきます。

Sample_Script.func

## ============================================
## モーション関数設定
## ============================================
## 左に移動
<FUNC_MOTION_REG>
    <SET_CONFIG>
        FuncName = MO_Move_L
        ImageName = sample_02.png
        Width = 130
        Height = 280
    </SET_CONFIG>
    <SET_PARAM>
        0, 0, -1, 0, 8
        0, 0, -1, 0, 8, sample_03.png
        0, 0, -1, 0, 8
        0, 0, -1, 0, 8, sample_04.png
    </SET_PARAM>
</FUNC_MOTION_REG>

## 右に移動
<FUNC_MOTION_REG>
    <SET_CONFIG>
        FuncName = MO_Move_R
        ImageName = sample_02.png
        Width = -130
        Height = 280
    </SET_CONFIG>
    <SET_PARAM>
        0, 0, 1, 0, 8
        0, 0, 1, 0, 8, sample_03.png
        0, 0, 1, 0, 8
        0, 0, 1, 0, 8, sample_04.png
    </SET_PARAM>
</FUNC_MOTION_REG>

※スクリプト内容とは関係有りませんが「## 左に移動」のようにコメントアウトの「##」を付けて、コメントを残しておくとスクリプトが見やすくなりますので是非利用してみてください。

それではハイライトされた変更点を上から確認していきましょう。まず、FuncNameで関数名を変更しています。最後のLはLeft（左）のLです（自身がわかりやすい関数名を付けてください）。

次に<SET_PARAM>内で全てのフレーム設定で-1に設定されている項目があります。これはX座標の1フレームで進むピクセル単位です。下図を確認するとわかるようにデスクトップでは右下に行くほど座標が大きくなりますので、画像を左に動かしたい場合はマイナス値を設定しなければなりません。

ここでは左に移動するモーションを設定しているので-1を設定しています。こうすることで毎フレーム1px左に進む事になります。各フレーム数が8になっているので<SET_PARAM>内を1サイクルすると32px左に進んだことになります。

次に右に移動するモーション関数を見ていきましょう。FuncNameで関数名を変更しています。こちらのRはRight（右）のRです（こちらも自身がわかりやすい関数名を付けてください）。

Widthの値に-（マイナス記号）が付いています。これを付けることによって画像が水平方向に反転します。左右対称の画像を使う場合には非常に有効な機能です（これはHeightにも使用できます）。

<SET_PARAM>内では右方向に移動するので1と入力されています。毎フレーム1px右に移動します。

オーダー関数を2つ作ってイベントを設定する

モーション関数が出来たので後はオーダー関数に設定するだけです。ただし、動きが「左」と「右」、2つあるのでオーダー関数も2つ必要になります。また、ここではイベントを使用して関数の切り替えを行っております。イベントとは実行中の関数を別の関数に変更するための切っ掛けのような物と考えてください。

Sample_Script.func

## ============================================
## オーダー関数設定
## ============================================
## 左に移動
<FUNC_ORDER_REG>
    <SET_CONFIG>
        FuncName = OR_Move_L
        FuncType = LEFT_EVENT
        FuncNameMotion = MO_Move_L
        FuncNameImageLayer = IL_Eye
        PosX = X
        PosY = Y
        FuncListEvent = OR_Move_R
    </SET_CONFIG>
</FUNC_ORDER_REG>

## 右に移動
<FUNC_ORDER_REG>
    <SET_CONFIG>
        FuncName = OR_Move_R
        FuncType = RIGHT_EVENT
        FuncNameMotion = MO_Move_R
        FuncNameImageLayer = IL_Eye
        PosX = X
        PosY = Y
        FuncListEvent = OR_Move_L
    </SET_CONFIG>
</FUNC_ORDER_REG>

ここでの説明は2つのオーダー関数を同時に説明していきます。

まず、FuncNameはモーション関数と同じように関数名をわかりやすい名前に変更しています。

次にFuncTypeがそれぞれLEFT_EVENTとRIGHT_EVENTなっています。これは下図のように、画像が移動範囲に接触するとイベントが発生するようにする設定です。ただし、LEFT_EVENTが設定されているのに、移動範囲の右や上、下に接触してもイベントは発生しません。移動範囲左の接触はLEFT_EVENT、右はRIGHT_EVENT、上はTOP_EVENT、下はBOTTOM_EVENTとなっています。イベントタイプは上下左右の他にマウス操作などで発生する物もあります。ちなみに今まで設定されていたNONE_EVENTはイベントが一切発生しないイベントタイプです。詳しくはドキュメントページの「オーダー関数」をご確認ください。

FuncNameMotionは先ほど変更したモーション関数の関数名を左と右それぞれに設定します。

最後にFuncListEventはイベントが発生したときに移行するオーダー関数を設定する項目です。ここでは移動範囲左に接触したら右移動（OR_Move_R）に移行し、逆に右に接触したら左移動（OR_Move_L）に移行するように設定しています。これでキャラクターが画面を左右に動きます。もし、イベントタイプを設定しなければ関数は切り替わることなく最初に設定された移動方向に永遠に進むことになります（実際は移動範囲の境界線に接触した時点で止まります）。

イメージレイヤー関数の変更は有りません。オーダー関数で同じ物が使われていますが、モーション関数で反転設定されていれば、イメージレイヤー関数もそれに従って反転されます。これは下図のように画像の反転表示がモーション関数の画像とイメージレイヤー関数の画像が合成された後に行われるからです。

以上でスクリプトの変更は完了です。ファイルを保存して動作をご確認ください。

これで左右に動くようになりました。しかし、動きとしては単調すぎます。次のチュートリアルではもう少し動きに変化をつけていきます。

下記ファイルはここまで作成したサンプルのキャラクターデータです。

Move_Image_01.zip

以上で「画像を移動させる１」のチュートリアルを終了します。