メインコンテンツへスキップ

アニメーション効果

Mahiru約1分

アニメーション効果

背景画像または立ち絵にアニメーションを設定する

ステートメントの形式は次のとおりです。

setAnimation:アニメーション -target=オブジェクト;

例:

; // 真ん中の立ち絵に下から入るアニメーションを設定し、次のステートメントに進む
setAnimation:enter-from-bottom -target=fig-center -next;

事前に作成されたアニメーション

アニメーションファイル継続時間 (ミリ秒)
フェードインenter.json300
フェードアウトexit.json300
左右に振るshake.json1000
下から入るenter-from-bottom.json500
左から入るenter-from-right.json500
右から入るenter-from-left.json500
1回前後に動かすmove-front-and-back.json1000

現在、アニメーション化できるオブジェクトは次のとおりです。

オブジェクト実際のオブジェクト
fig-left左の立ち絵
fig-center真ん中の立ち絵
fig-right右の立ち絵
bg-main背景
ID 付き立ち絵

カスタムアニメーション

アニメーションファイルは game/animation にあります。独自のカスタムアニメーションを作成することができます。

アニメーションファイルは JSON を使用して記述します。JSON 構文を知りたい方は こちらopen in new window

各アニメーションファイルは、JSON 配列を使用して記述された アニメーションシーケンス を表します。サンプルとして、「左から入る」のアニメーションを次に示します。

例: enter-from-left.json

[
  {
    "alpha": 0, 
    "scale": {
      "x": 1,
      "y": 1
    },
    "pivot": {
      "x": 0.5,
      "y": 0.5
    },
    "position": {
      "x": -50,
      "y": 0
    },
    "rotation": 0,
    "blur": 5,
    "duration": 0
  },
  {
    "alpha": 1,
    "scale": {
      "x": 1,  
      "y": 1
    },
    "pivot": {
      "x": 0.5,
      "y": 0.5
    },
    "position": {
      "x": 0,
      "y": 0
    },
    "rotation": 0,
    "blur": 0,
    "duration": 500
  } 
]

各アトリビュートの意味は次のとおりです。

アトリビュート意味
alpha透明度、範囲 0 ~ 1
scaleズーム
pivotアンカーポイント
position位置オフセット
rotation回転角度
blurガススぼかし
duration継続時間 (ミリ秒 (ms) 単位)

次に、カスタムアニメーションのファイル名(拡張子なし)を animationTable に追加する必要があります。

ファイル animationTable.json で:

["enter-from-left","enter-from-bottom","enter-from-right"]

次に、スクリプトでそれを呼び出すことができます。

setAnimation:enter-from-left -target=fig-left -next;

一部の属性を省略する

アニメーションで一部のアトリビュートのみを操作する必要がある場合は、ほかのアトリビュートを空のままにして、デフォルトのままにすることができます。

例:enter.json

[
  {
    "alpha": 0,
    "duration": 0
  },
  {
    "alpha": 1,
    "duration": 300
  }
]

変換の使用

継続時間が 0 ミリ秒で、タイムスライスが 1 つだけのアニメーションは変換です。

例:

[
  {
    "alpha": 0, 
    "duration": 0
  }
]