きゃらポッドF

簡単スクリプトでデスクトップマスコット作成

チュートリアル

  1. ホーム
  2. チュートリアル
  3. 画像をドラッグする

画像をドラッグする

ここでは画像をマウスでドラッグして移動できるようにスクリプトを変更しています。また、マウスカーソルの画像の設定方法なども解説しています。

マウスでドラッグした時のモーションを追加する

マウスでドラッグした場合、移動するモーション関数をそのまま使うとマウスカーソルから画像がどんどん離れていってしまうので、ドラッグしたときにマウスカーソルの位置で停止しているモーション関数を追加します。モーション関数のMO_Move_Up_LとMO_Move_Up_Rをコピーして貼り付けてください。下記の関数を追加します。

Sample_Script.func

## ============================================
## モーション関数設定
## ============================================
## 左を向いて停止
<FUNC_MOTION_REG>
    <SET_CONFIG>
        FuncName = MO_Stop_L
        ImageName = sample_02.png
        Width = 130
        Height = 280
    </SET_CONFIG>
    <SET_PARAM>
        0, 0, 0, 0, 8
        0, 0, 0, 0, 8, sample_03.png
        0, 0, 0, 0, 8
        0, 0, 0, 0, 8, sample_04.png
    </SET_PARAM>
</FUNC_MOTION_REG>

## 右を向いて停止
<FUNC_MOTION_REG>
    <SET_CONFIG>
        FuncName = MO_Stop_R
        ImageName = sample_02.png
        Width = -130
        Height = 280
    </SET_CONFIG>
    <SET_PARAM>
        0, 0, 0, 0, 8
        0, 0, 0, 0, 8, sample_03.png
        0, 0, 0, 0, 8
        0, 0, 0, 0, 8, sample_04.png
    </SET_PARAM>
</FUNC_MOTION_REG>


FuncNameはわかりやすい名前に変更しているだけです。また<SET_PARAM>も移動しないように、移動速度を全て0にしています。これは「アニメーションさせる」で作成したスクリプトとほぼ同じです。

オーダー関数にドラッグ時の関数を追加する

先ほど作成したモーション関数を設定するためにオーダー関数も追加します。OR_Move_Up_LとOR_Move_Up_Rをコピーして貼り付けてください。スクリプトの変更点はハイライト表示しています。

Sample_Script.func

## ============================================
## オーダー関数設定
## ============================================
## マウスでドラッグ 左向き
<FUNC_ORDER_REG>
    <SET_CONFIG>
        FuncName = OR_Drag_L
        FuncType = L_BUTTON_EVENT
        FuncNameMotion = MO_Stop_L
        FuncNameImageLayer = IL_Eye
        PosX = X
        PosY = Y
        FuncListEvent = OR_Move_Up_L, OR_Move_Down_L
    </SET_CONFIG>
</FUNC_ORDER_REG>

## マウスでドラッグ 右向き
<FUNC_ORDER_REG>
    <SET_CONFIG>
        FuncName = OR_Drag_R
        FuncType = L_BUTTON_EVENT
        FuncNameMotion = MO_Stop_R
        FuncNameImageLayer = IL_Eye
        PosX = X
        PosY = Y
        FuncListEvent = OR_Move_Up_R, OR_Move_Down_R
    </SET_CONFIG>
</FUNC_ORDER_REG>

## 左上に移動
<FUNC_ORDER_REG>
    <SET_CONFIG>
        FuncName = OR_Move_Up_L
        FuncType = LEFT_EVENT
        FuncNameMotion = MO_Move_Up_L
        FuncNameImageLayer = IL_Eye
        PosX = X
        PosY = Y
        FuncListEvent = OR_Move_Up_R, OR_Move_Down_R
        FuncListTurn = OR_Move_Down_L
        FuncListLButton = OR_Drag_L
    </SET_CONFIG>
</FUNC_ORDER_REG>

## 右上に移動
<FUNC_ORDER_REG>
    <SET_CONFIG>
        FuncName = OR_Move_Up_R
        FuncType = RIGHT_EVENT
        FuncNameMotion = MO_Move_Up_R
        FuncNameImageLayer = IL_Eye
        PosX = X
        PosY = Y
        FuncListEvent = OR_Move_Up_L, OR_Move_Down_L
        FuncListTurn = OR_Move_Down_R
        FuncListLButton = OR_Drag_R
    </SET_CONFIG>
</FUNC_ORDER_REG>

## 左下に移動
<FUNC_ORDER_REG>
    <SET_CONFIG>
        FuncName = OR_Move_Down_L
        FuncType = LEFT_EVENT
        FuncNameMotion = MO_Move_Down_L
        FuncNameImageLayer = IL_Eye
        PosX = X
        PosY = Y
        FuncListEvent = OR_Move_Up_R, OR_Move_Down_R
        FuncListTurn = OR_Move_Up_L
        FuncListLButton = OR_Drag_L
    </SET_CONFIG>
</FUNC_ORDER_REG>

## 右下に移動
<FUNC_ORDER_REG>
    <SET_CONFIG>
        FuncName = OR_Move_Down_R
        FuncType = RIGHT_EVENT
        FuncNameMotion = MO_Move_Down_R
        FuncNameImageLayer = IL_Eye
        PosX = X
        PosY = Y
        FuncListEvent = OR_Move_Up_L, OR_Move_Down_L
        FuncListTurn = OR_Move_Up_R
        FuncListLButton = OR_Drag_R
    </SET_CONFIG>
</FUNC_ORDER_REG>

まず、ドラッグ時のオーダー関数から説明していきます。

FuncNameはわかりやすい名前に変更しています。FuncTypeはL_BUTTON_EVENTに変更されています。

通常、キャラクター上(画像の上)でマウスの左ボタンを押した時にイベントが発生していますが、それは無視されています。しかし、L_BUTTON_EVENTのイベントタイプを持つオーダー関数がある場合はイベントが拾われ、そのオーダー関数が選ばれます。複数有る場合は内部的にリストで保持されているので、その中からランダムで選ばれます(下図参照)。この内部的なリストは他のイベントタイプにも存在しています。リストの中から指定してオーダー関数を選択する方法は後述します。

内部的な関数リスト

FuncNameMotionは先ほど作成したモーション関数が設定されています。

次にFuncListEventですが、L_BUTTON_EVENTを持つオーダー関数はマウスでドラッグしてから、マウスボタンを離したときにイベントが発生します。その時にここで指定したオーダー関数が実行されます。ここではOR_Drag_Lは左向きなので、マウスを離すと左上(OR_Move_Up_L)か左下(OR_Move_Down_L)に移動を再開するようにしています。OR_Drag_Rも同じように右向きで設定されています。

最後に、移動設定されたオーダー関数でFuncListLButtonと言う項目が追加されています。これは先ほど上図で解説したリストで保持されているオーダー関数を直接指定して選択することができる設定項目です。例えばOR_Move_Up_Lの場合は左上を向いて移動しているのでマウスでドラッグしたときに左を向いて停止するようにOR_Drag_Lを指定しています。こうすることによって思い通りの関数を指定することができます。試しにFuncListLButtonを消してみてください。マウスでドラッグしたときに左右の向きがランダムに変ります。

イメージレイヤー関数を使ってマウスでドラッグした時の表情を変える

マウスでドラッグして画像を移動することができるようになったので、ついでにドラッグした時にキャラクターの表情を変えてみましょう。ここではImagesフォルダに下の画像を追加しています。画像サイズはWidth(幅):44px, Height(高さ):36pxです。イメージレイヤー関数のIL_Eyeをコピーして貼り付けてください。

sample_face_01.png

Sample_Script.func

## ============================================
## イメージレイヤー関数設定
## ============================================
<FUNC_IMAGE_LAYER_REG>
    <SET_CONFIG>
        FuncName = IL_Face_01
        ImageName = sample_face_01.png
        Width = 44
        Height = 36
        PosX = 38
        PosY = 45
    </SET_CONFIG>
    <SET_PARAM>
        0, 0, 0, 0, 1
    </SET_PARAM>
</FUNC_IMAGE_LAYER_REG>


FuncNameはわかりやすい名前にしています。ImageNameは変更する画像名を設定しています。Heightは高さを設定し直しています。またPosYも表示位置を調整しています。

今回は表情はアニメーションさせないので<SET_PARAM>はフレーム数を1フレームにして残りの項目は0にしています。

イメージレイヤー関数の追加は完了です。後はオーダー関数のOR_Drag_LとOR_Drag_RのFuncNameImageLayerをIL_Face_01に変更してください。

以上でマウスでドラッグした時の表情が変化するようになります。

ドラッグ時のマウスカーソルの画像を変える

キャラクターをマウスでドラッグする事ができるようになったので、そろそろマウスカーソルも変更していきたいと思います。変更するのは画像の上にカーソルが乗った時画像をドラッグした時、また、きゃらポッドFのメニューの「全体設定」から選択できる「マウス操作不可」でキャラクターを操作出来なくなった時のマウスカーソルです。ここでは下の3つのカーソルファイルを使用しました(カーソル名は自身がわかりやすい名前で構いません)。これらをCursorsフォルダに入れます。それではconfig.iniファイルを開いてください。。

normal.cur
drag.cur
disabled.cur

config.ini

CharaName = タンポポ
AppName = "きゃらポッドF  タンポポ"
Version = 1.00
Copyright = "Copyright (C) 2023 Qbell All Rights Reserved."
Url = https://www.qbell.jp
## DlgImageName =
## DlgImagePosX =
## DlgImagePosY =
## LineHeight =
## SoundNameLButton =
## SoundNameRButton =
NormalCursor = normal.cur
DragCursor = drag.cur
DisabledCursor = disabled.cur

ハイライト表示されている項目が変更部分です。上から通常時のカーソル、ドラッグ時のカーソル、操作不可時のカーソルです(詳細はドキュメントページの「基本情報設定(config.ini)」をご確認ください)。それぞれを設定してファイルを保存してください。

これでキャラクターの上にカーソルが乗った時、ドラッグした時、操作不可時、それぞれマウスカーソルが変化します。

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

以上で「画像をドラッグする」のチュートリアルを終了します。