アニメはAfter Effectsを勉強中の私でも直感的に触れず、とにかく公式サイトでもコードがたくさんあってヤバい…というのが第一印象。
それは今も払拭できずにいます。プログラムができる人はきっと頭でパッとイメージが付くのでしょう。

そんなこんなで「Suika2のアニメファイルについて」私はチンプンカンプン。

なので少し前まで公式サイトでもダウンロードできていた、「いそぎんちくさんのエフェクトプロジェクト」を元に一部インプット＆アウトプットしていこうと思います。

【！】今は理由はよくわかりませんが、公式サイトでは削除されているため、ダウンロードはできません。

いそぎんちくさんのご紹介

回転ループのアニメコードの作者さまである、いそぎんちくさんのご紹介です。
🏡ホームページ
ノベルゲームとっても面白いので、遊んで！（ダイマ）

【注意】エンバグについて

以下のアニメ作成を行うとエンバグしちゃう可能性があるので、気をつけてください。
新しいバージョンでは直っている可能性があります。

この記事の内容はバージョン16.90で止めている方やそれ以前の方だけ、お気をつけください。

◆発生条件
ループanime再生中に以下のメッセージボックスを揺らすanime再生をすると発生します。

@anime msgbox-shake.txt sync,showmsgbox

バグ回避方法

@anime msgbox-shake.txt sync,showmsgbox

の前に

# エフェクトをすべて停止
@gosub stop-Effects

という、形でmacroを呼びます。

macroの中身はこちら。

# エフェクト終了
# - 呼び出すには、@gosub stop-Effectsとする
:stop-Effects
@anime stop-all
@anime unregister reg00
@layer effect1 none
@layer effect2 none
@layer effect3 none
@layer effect4 none
@layer effect5 none
@layer effect6 none
@layer effect7 none
@layer effect8 none
@return

上記などのmacroをあらかじめ作成しておき、init.txtなどのシナリオに呼んでおけば、事前にメッセージボックスを揺らす前に、ゲームのフリーズを回避できます。

実際にわかってくると楽しいですね。
アニメのコード自体の理解は乏しいのですが、ゲーム制作はいつだって楽しいです。

Suika2でのアニメ4枚絵ループ

エンバグの方でも動画で上げてしまっていましたが、こちらはちょっと長めに録画しました。
Suika2でのアニメ4枚絵ループ実装後の動画はこちら。

After Effectsで作成した、画面ノイズ表現画像をループ化させています。不透明度があるpngファイルをループしています。

ノイズ、という特性上、動画が劣化してしまうと潰れてしまい見えなくなります。できれば画質を上げてご覧いただけたら嬉しいです！

まだ研究段階なので実際の色味などは調整するかも知れませんし、このままで行くかも知れません…！

4枚絵ループアニメファイルの説明

• 8フレームで1秒という計算にさせてアニメを作る設計を立てる

• AIで各フレームの計算をさせる（geminiへの指示出し▶プロンプト）

• 1フレームあたりの処理時間が0.125秒

• 0.125という計算を元にアニメファイルを作る

というベースをツクりました。…が、動かなかった。
結論：書き方が悪かった。

次はコードを見直してみます。
そう。…実は何度も上手く行かず、挫折しかけたのです。…笑ってやってください。

改めてSuika2のアニメを動かすための手順を考える

• 開始前のアニメ

• 実行されるタイミング

• 実行を終えたアニメ

この3点に絞って重点的にコードを見直しました。すると…動きました！

◆anime.txtのコードはこちら

# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
# 5
# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Noise1 {
    layer: effect5;
    clear: all;
    start: 0.0;
    end: 0.1250;
    from-x: 0;
    from-y: 0;
    from-a: 255;
    to-x: 0;
    to-y: 0;
    to-a: 255;
}

Noise1 {
    layer: effect5;
    start: 0.1250;
    end: 0.500000;
    from-x: 0;
    from-y: 0;
    from-a: 0;
    to-x: 0;
    to-y: 0;
    to-a: 0;
    loop: 0.0;
}
# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
# 6
# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Noise2 {
    layer: effect6;
    clear: all;
    start: 0.0;
    end: 0.1250;
    from-x: 0;
    from-y: 0;
    from-a: 0;
    to-x: 0;
    to-y: 0;
    to-a: 0;
}

Noise2 {
    layer: effect6;
    start: 0.1250;
    end: 0.2500;
    from-x: 0;
    from-y: 0;
    from-a: 255;
    to-x: 0;
    to-y: 0;
    to-a: 255;
}

Noise2 {
    layer: effect6;
    start: 0.2500;
    end: 0.500000;
    from-x: 0;
    from-y: 0;
    from-a: 0;
    to-x: 0;
    to-y: 0;
    to-a: 0;
    loop: 0.0;
}
# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
# 7
# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Noise3 {
    layer: effect7;
    clear: all;
    start: 0.0;
    end: 0.2500;
    from-x: 0;
    from-y: 0;
    from-a: 0;
    to-x: 0;
    to-y: 0;
    to-a: 0;
}

Noise3 {
    layer: effect7;
    start: 0.2500;
    end: 0.3750;
    from-x: 0;
    from-y: 0;
    from-a: 255;
    to-x: 0;
    to-y: 0;
    to-a: 255;
}

Noise3 {
    layer: effect7;
    start: 0.3750;
    end: 0.500000;
    from-x: 0;
    from-y: 0;
    from-a: 0;
    to-x: 0;
    to-y: 0;
    to-a: 0;
    loop: 0.0;
}

# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
# 8
# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Noise4 {
    layer: effect8;
    clear: all;
    start: 0.0;
    end: 0.3750;
    from-x: 0;
    from-y: 0;
    from-a: 0;
    to-x: 0;
    to-y: 0;
    to-a: 0;
}

Noise4 {
    layer: effect8;
    start: 0.3750;
    end: 0.5000;
    from-x: 0;
    from-y: 0;
    from-a: 255;
    to-x: 0;
    to-y: 0;
    to-a: 255;
}

Noise4 {
    layer: effect8;
    start: 0.5000;
    end: 0.50000000;
    from-x: 0;
    from-y: 0;
    from-a: 0;
    to-x: 0;
    to-y: 0;
    to-a: 0;
    loop: 0.0;
}

◆本文（init.txt）スクリプト呼び出し

#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
# アニメを開始
#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
@gosub Noise-Effects
ノイズです。

◆macroの中身

#
# Noise
#
:Noise-Effects
@layer effect5 Noise8/Noise8_00004.png x=0 y=0 a=0
@layer effect6 Noise8/Noise8_00005.png x=0 y=0 a=0
@layer effect7 Noise8/Noise8_00006.png x=0 y=0 a=0
@layer effect8 Noise8/Noise8_00007.png x=0 y=0 a=0
@anime Noise.txt async,reg00
@return

◆アニメを止める場合｜本文（init.txt）スクリプト呼び出し

@gosub stop-Effects

◆macroの中身

# エフェクト終了
# - 呼び出すには、@gosub stop-Effectsとする
:stop-Effects
@anime stop-all
@anime unregister reg00
@layer effect1 none
@layer effect2 none
@layer effect3 none
@layer effect4 none
@layer effect5 none
@layer effect6 none
@layer effect7 none
@layer effect8 none
@return

↑は一掃するコードになっているので、作る作品によって仕様を変えてください。

コードに関しては、自由に使って構いません。
クレジット表記も無論自由です。
してくださったら嬉しいですが、無くても構いません。

ノベルゲームエンジンを楽しく触ったのはSuika2が初なので、この記事を宣伝してくれたら、それだけで嬉しいです。

◆コードの説明（effect5～）

以降は4枚目まで同じです。
一回、紙に書いて言語化してみたのですが、あまり怖い存在ではなかったということでした。

しか～し、新しく追加された拡大機能などは、私はまだ脳が追いついていっていません…。

エフェクト系の中でもノイズ関連は、拡大するとブレンドできない場合汚くなってしまいますが、他のエフェクトに代用するときに便利なので勉強してみます。

Suika2のアニメの回転ループ

Suika2では回転機能が搭載されています。
これにより、多彩な演出ができます。

おすすめな演出

• 手裏剣などの武器の演出

• 時計の演出

• トランジション

• アイテムゲット！などのポップなエフェクト演出

おすすめできない演出方法

• リアルな材質の演出

• 3D素材

上記のような特に写実的なものやリアルめな3D作品を混ぜる場合注意です。特にリアルな質感のオブジェクトは、目が疲れるレベルでチカチカしてしまいます。表示させるだけでなく、ひっきりなしに動くものは導線上、必ず目につくため場面をよく考えて使うべきでしょう。
※下記、「歯車や揺れの表現」の動画を参照ください。

ただし、アニメ・カートゥーン系などのフラットな絵柄で統一されたゲームでは猛威を振るうこと間違いなしです！

それではアニメファイルをご紹介していきます。

歯車や揺れの表現

いそぎんちくさんの歯車表現を応用させていただいています。
中の人は目が回ってしまい、久々に酔いました💦

1. 弧を描くように美しく回転させたい場合、正方形で作ること

2. 中心点をずらして回転させる場合、座標をチェックすること

3. 揺らすときは３つのアニメに分けて作成すること

試してみて３つも発見がありました♪
正方形で作らないと座標を掴みにくいので、1番目は特に意識されると良いかもです。

「はよ真似したいよ」という方は後述するコードからどうぞ！

◆anime.txtコードはこちら

歯車や揺れの表現 anime.txt

#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
# 画面左上の花みたいなやつ（PhotoshopDefaultShape）
# 画像サイズ：212x214
#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
move-flower {
    layer: text8;
    start: 0.0;
    end: 4.0;

    from-x: 36.06;
    from-y: 53;
    from-a: 255;

    to-x: 36.06;
    to-y: 53;
    to-a: 255;

    center-x: 106;
    center-y: 106;

    from-rotate: 0.0;
    to-rotate: -360;
    
    loop: 0.0;
}
#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
# 画面左下の花みたいなやつ（shapes4free）
# 画像サイズ：241x236
#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
move-flowerB {
    layer: text7;
    start: 0.0;
    end: 2.7;

    from-x: 21;
    from-y: 455;
    from-a: 255;

    to-x: 21;
    to-y: 455;
    to-a: 255;

    center-x: 318;
    center-y: 329;

    from-rotate: 0.0;
    to-rotate: 360;
    
    loop: 0.0;
}
#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
# 画面真ん中右のgear（shapes4free）
# 画像サイズ：301x300
#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
move-gear {
    layer: text6;
    start: 0.0;
    end: 0.2;

    from-x: 845;
    from-y: 193;
    from-a: 255;

    to-x: 845;
    to-y: 193;
    to-a: 255;

    center-x: 150;
    center-y: 150;

    from-rotate: 0.0;
    to-rotate: 360;
    
    loop: 0.0;
}
#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
# 画面右下のロゴ（shapes4free）
# 画像サイズ：127x162
#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
move-Logo {
    layer: text5;
    clear: all;
    start: 0.0;
    end: 3.0;

    from-x: 1111.53;
    from-y: 528.63;
    from-a: 255;

    to-x: 1111.53;
    to-y: 528.63;
    to-a: 255;

    center-x: 63;
    center-y: 81;

    from-rotate: 0.0;
    to-rotate: 30;
}
move-Logo {
    layer: text5;
    start: 3.0;
    end: 8.0;

    from-x: 1111.53;
    from-y: 528.63;
    from-a: 255;

    to-x: 1111.53;
    to-y: 528.63;
    to-a: 255;

    center-x: 63;
    center-y: 81;

    from-rotate: 30;
    to-rotate: -30;
}
move-Logo {
    layer: text5;
    start: 8.0;
    end: 11.0;

    from-x: 1111.53;
    from-y: 528.63;
    from-a: 255;

    to-x: 1111.53;
    to-y: 528.63;
    to-a: 255;

    center-x: 63;
    center-y: 81;

    from-rotate: -30;
    to-rotate: 0;
    
    loop: 0.0;
}
#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
# 画面右上の渦（PhotoshopDefaultShape）
# 画像サイズ：243.81x243.84
#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
move-uzu {
    layer: text4;
    clear: all;
    start: 0.0;
    end: 3.0;

    from-x: 994.66;
    from-y: 37.97;
    from-a: 255;

    to-x: 994.66;
    to-y: 37.97;
    to-a: 255;

    center-x: 122;
    center-y: 122;

    # 拡大率
    from-scale-x: 1.0;
    from-scale-y: 1.0;
    to-scale-x: 2.0;
    to-scale-y: 2.0;

    from-rotate: 0.0;
    to-rotate: -360;
}
move-uzu {
    layer: text4;
    start: 3.0;
    end: 8.0;

    from-x: 994.66;
    from-y: 37.97;
    from-a: 255;

    to-x: 994.66;
    to-y: 37.97;
    to-a: 255;

    center-x: 122;
    center-y: 122;

    # 拡大率
    from-scale-x: 2.0;
    from-scale-y: 2.0;
    to-scale-x: 1.0;
    to-scale-y: 1.0;

    from-rotate: 0.0;
    to-rotate: -360;
    loop: 0.0;
}

◆本文（init.txt）スクリプト呼び出し

#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
# 回転Effectsを開始
#＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
@gosub 回転Effects

◆macroの中身

#
# 回転Effects
#
:回転Effects
@layer text8 omake/ShapeDefault-hana.png x=0 y=0 a=0
@layer text7 omake/Flower24-wwwShapes4FREE.png x=0 y=0 a=0
@layer text6 omake/Gear79wwwShapes4FREEcom1.png x=0 y=0 a=0
@layer text5 omake/Shapes4FREE1.png x=0 y=0 a=0
@layer text4 omake/ShapeDefault-uzu.png x=0 y=0 a=0
@anime effect-gear.txt async,reg00
@return

◆アニメを止める場合｜本文（init.txt）スクリプト呼び出し

@gosub STOP回転Effects

◆macroの中身

#
# 回転Effects終了
#
:STOP回転Effects
@anime stop-all
@anime unregister reg00
@layer text8 none
@layer text7 none
@layer text6 none
@layer text5 none
@layer text4 none
@return

さいごに・・・

こんな素晴らしい発想力があるのは、創作者の賜物と言えます。
私はコードを見ても全く思いつきもしなかったので、ツールを使い倒している、いそぎんちくさんには頭が上がりません。

ここまでお読みくださってありがとうございます！

制作：Suika2
サンプルで使用したプロジェクト類
・もちものチェック！アナザーストーリー
・UI Design material ：Krachware
・shapes4free（Photoshopシェイプ）
・SeaArtとTensor.art、画像生成AI
ロボ：blue_pencil-XL-v3.1.0（Developer：blue.pen5805）
時計、歯車：FenrisXL（Developer：freek22）