0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

GOKI2で広げる演出力【ModImage入門】高度なレイヤ移動とasdxによるアニメーション制御

0
Last updated at Posted at 2026-02-14

ModImage

ModImageは画像に関するタグを処理するモジュールです。
まずは、モジュールを読み込みます。

/src/goki2/system/construct.gs
; 画像関連機能
@load_module name=ModImage

これで画像を扱う各種タグが使えるようになりました。

レイヤの枚数

まずは、利用するレイヤの数を指定します。

/src/goki2/system/config.gs
; 前景レイヤの数
@cv_layers count=3

; CGレイヤの数
@cg_layers count=1

立ち絵表示用のいわゆる前景レイヤを3枚。
CG表示用のレイヤを1枚使用します。

画像読み込み

早速、画像をよみこんでみましょう。

; 出力先をModMessageにする
; これをしないとメッセージが表示されません
@using_mod_message

; メッセージレイヤを表示します
@show_message layer=message0

*label|
; レイヤ0にImageSampleを裏ページに読み込む
@load_image layer=0 center_x=400 center_y=300 page=back storage=ImageSample visible
; トランジション実行
@transition time=1000
; トランジションの終了を待つ
@wait_transition

子レイヤの読み込みに成功しました。[p][cm]

色々やってますが今までの道のりで理解できないものはないと思います。
順番に見ていきましょう。

画像の読み込みはload_imageタグが行います。
layer=0でレイヤ0を指定しています。
画像はこのレイヤ0に読み込まれます。

center_x=400 center_y=300でレイヤの表示位置を指定しています。
画像の中心が(400, 300)の位置に画像を表示します。

page=backで読み込み先を裏ページにしています。
まず裏ページに読み込んでトランジション等で表示するのが一般的です。

storage=ImageSampleで読み込む画像のファイル名を指定しています。

最後に、visibleでレイヤを表示します。

レイヤの移動

読み込んだ画像を移動させる事でアニメーションを実行する事ができます。

*label|
; 始点設定
@layer_move layer=0 position=0.0 x=left y=top scale=1.0 clear children transform !rendering_target_released
; 終点設定
@layer_move layer=0 position=1.0 x=200 y=200 scale=2.0
; 移動実行
@layer_move layer=0 time=2000 start

子レイヤの移動を行います。[p][cm]

@wait_move layer=0

layer_moveは始点から終点に向かって移動すべき座標などを指定する事ができます。
任意のタイミングでlayer_move startで移動を実行する事ができます。

まずposition属性で設定する値のタイミングを指定します。
position=0.0が始点の状態を指定しています。
position=1.0が終点の状態を指定しています。
つまり、position=0.5ならちょうど中間の状態を指定する事になります。

x=left y=top scale=1.0はposition=0.0の時点での位置とスケールを指定しています。
xとyはlayer=0の位置を指定しています。
leftとtopはそれぞれlayer=0の現在の位置で置き換えられます。

clearは移動の状態をクリアします。
この属性は重要で、移動パスはlayer_move startを実行後も残り続けます。
なので同じ移動を行いたい場合は単にlayer_move startとするだけで移動開始できますが、
まったく別の移動パスに変更したい場合はclear属性を使って以前の移動パスをクリアする必要があります。

childrenはtransform属性がtrueの場合に、子も巻き込んで移動します。
transformは拡大縮小回転を行う場合にtrueを指定します。

!rendering_target_releasedは最終状態で描画した結果を残します(リリースしない)
(属性名に!がついてるのでfalseを指定しています)
描画結果を破棄する場合はrelease_rendering_target layer=0で実施できます。

背景の表示とコピー

背景を表示したい場合はload_imageタグを使ってlayer属性に何もしていしなければよいです。

*label|
@image storage=sampleB page=back

@transition time=2000
@wait_transition

トランジションのテストに成功しました。[p][cm]

*label|
; 背景レイヤの裏ページにsampleAを読み込む
@image storage=sampleA page=back
; ミラーレイヤ(裏レイヤ→表レイヤ)にアサインする
@assign_to_mirror

背景コピーのテストに成功しました。[p][cm]

背景レイヤは、layer属性を指定しないだけで他は前景レイヤと同じです。
assign_to_mirrorタグはlayer属性で指定したレイヤ(何も指定しなければ背景レイヤ)の裏ページから表ページにコピーします。
逆方向のコピーはassign_imageタグで実行できます。

アニメーションスクリプト(asd/asdx)

KAG3で言うところのasdファイルはasd/asdxファイルとして実装されました。
asd/asdxの書式はKAG3とは非互換です。
先ほどのImageSampleに簡単なasd/asdxファイルを読み込ませます。

ImageSample.asdx
@macro name=cell
@option center_x=0 center_y=0 clip_left=%x clip_top=0 clip_width=100 clip_height=100 visible
@wait time=%time|1000
@endmacro
@s

*target
@looping
@load_cell storage=A_pose1

@cell x=0
@cell x=100
@cell x=200
@home
@end_looping

asd/asdxファイルは読み込み時にファイル先頭から実行されます。
ここでマクロなどを定義して@sで停止しておきGOKI2スクリプトから呼び出されるのを待ちます。
セルレイヤが必要ない、単独でのアニメーションを行う場合は@sで止まる必要はないです。

optionタグはレイヤの状態を変更します。
位置やサイズなど色々設定できます。
ここで操作するレイヤは現在実行中のコンテキストにしたがってセルレイヤが生成されます。

load_cell storage=A_pose1はセルレイヤにA_pose1ファイルを読み込みます。

レイヤの構造は以下のようになっています。

+--+前景レイヤ
  +---セルレイヤ0
  +---セルレイヤ1
  +---セルレイヤ2
  +---……
  +---セルレイヤN

GOKI2スクリプトでアニメーションは以下タグで実行できます。

*label|
@start_animation layer=0 index=0 target=*target
@wait_animation layer=0 index=0

子レイヤのアニメーションテストに成功しました。[p][cm]

この時の、index=0がコンテキストになります。
index=0はlayer=0の子レイヤとなる、インデックス0のセルレイヤが割り当てられます。
asd/asdxファイルでoptionタグなどで操作するレイヤはこの割り当てられたセルレイヤになります。

ModImageの他のタグ

他にもModImageには他にも便利な機能があります。
詳しくはマニュアルを参照してください。

関連する記事の一覧

GOKI2の関連する記事一覧

ダウンロード

気になった方は以下サイトのリリースタグ(Avalanches release version 2.x.y.yという表記)からAssetsにあるAvalanches-Release2.x.y.y.zipのリンクから最新の環境をダウンロードできます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?