[ITG] Lua講座(第4回) ライフゲージに応じて画像を伸縮させる – Papasito (ライフの取得)

やりたいこと

プレイヤーの現在のライフ残量に応じてリアルタイムにBGの画像を伸縮させたい

動画

ダウンロード

Lua

Lua(OpenITG向け)

▼ クリックで展開

<ActorFrame><children>

<Layer
	Type="Quad"
	InitCommand="%function(self)

		self:hidden(1);
		self:sleep(9999);

	end"
/>

<Layer
	Type="Quad"
	InitCommand="%function(self)

		head_pic_x = 480; --頭部分の画像サイズ
		head_pic_y = 600;

		body_pic_x = 480; --胴体、腕の画像サイズ
		body_pic_y = 400;


		default_body_y = SCREEN_HEIGHT - (body_pic_y * 0.5); --胴体・腕のデフォルト位置(中心)
		default_head_y = default_body_y - (body_pic_y * 0.5) + (head_pic_y * 0.5); --頭のデフォルト位置(中心)

		max_head_dif_y = SCREEN_HEIGHT * 0.4; --頭画像の最大変動幅
		max_hand_dif_x = SCREEN_WIDTH * 0.2; --手画像の最大変動幅

		fixed_by_playerside_x = 0; --プレイヤーサイドの反対側へ位置を補正、2Playersの場合は差し引きゼロ
		if (GAMESTATE:IsPlayerEnabled(0)) then
			fixed_by_playerside_x = fixed_by_playerside_x + SCREEN_CENTER_X * 0.3;
		end
		if (GAMESTATE:IsPlayerEnabled(1)) then
			fixed_by_playerside_x = fixed_by_playerside_x - SCREEN_CENTER_X * 0.3;
		end

		fixed_by_life_difference_x = 0;
		head_dif_y = 0;
		uphand_dif_x = 0;
		downhand_dif_x = 0;
		downhand_dif_y = 0;

	end"

	OnCommand="%function(self)
		self:queuecommand('Update');
	end"

	UpdateCommand="%function(self)

		--各プレイヤーのライフ取得(0.0～1.0)
		if (GAMESTATE:IsPlayerEnabled(0)) then
			if (GAMESTATE:IsPlayerEnabled(1)) then
				life1P = STATSMAN:GetCurStageStats():GetPlayerStageStats(0):GetCurrentLife();
				life2P = STATSMAN:GetCurStageStats():GetPlayerStageStats(1):GetCurrentLife();
			else
				life1P = STATSMAN:GetCurStageStats():GetPlayerStageStats(0):GetCurrentLife();
				life2P = life1P;
			end
		else
				life2P = STATSMAN:GetCurStageStats():GetPlayerStageStats(1):GetCurrentLife();
				life1P = life2P;
		end

		if (GAMESTATE:IsPlayerEnabled(0) and GAMESTATE:IsPlayerEnabled(1)) then
			if (life1P - life2P > 0.3) then
				fixed_by_life_difference_x = - SCREEN_CENTER_X * 0.5 * (life1P - life2P - 0.3);
			elseif (life2P - life1P > 0.3) then
				fixed_by_life_difference_x = SCREEN_CENTER_X * 0.5 * (life2P - life1P - 0.3);
			else
				fixed_by_life_difference_x = 0;
			end
		else
				fixed_by_life_difference_x = 0;
		end

		--1Pのライフに応じて頭を上下(0.5が中心)
			head_dif_y = max_head_dif_y * (life1P - 0.5);

		--2Pのライフに応じて上げている腕を左右(0.5が中心)
			uphand_dif_x = max_hand_dif_x * (life2P - 0.5);

		--2Pのライフに応じて下げている腕を左下斜め方向に移動(0.5が中心)
			downhand_dif_x = -max_hand_dif_x * 0.6 * (life2P - 0.5);
			downhand_dif_y = max_hand_dif_x * 0.5 * (life2P - 0.5);


		self:sleep(0.02);
		self:queuecommand('Update');

	end"
/>

<Layer
	File="bg.png"
	OnCommand="x,SCREEN_CENTER_X;y,SCREEN_CENTER_Y;stretchto,SCREEN_LEFT,SCREEN_TOP,SCREEN_RIGHT,SCREEN_BOTTOM"
/>

<Layer
	File="head.png"
	OnCommand="%function(self)
		self:queuecommand('Update');
	end"

	UpdateCommand="%function(self)


		self:x(SCREEN_CENTER_X + fixed_by_playerside_x + fixed_by_life_difference_x);
		self:y(default_head_y - head_dif_y);

		--両者ともゲージがMAX近い場合に頭を振動
		if (life1P > 0.9 and life2P > 0.9) then
			self:vibrate();
			self:effectmagnitude((life1P + life2P - 1.8) * 10,(life1P + life2P - 1.8) * 10,0);
		else
			self:effectmagnitude(0,0,0);
		end

		self:sleep(0.02);
		self:queuecommand('Update');

	end"

/>

<Layer
	File="uphand.png"
	OnCommand="%function(self)
		self:queuecommand('Update');
	end"

	UpdateCommand="%function(self)

		self:x(SCREEN_CENTER_X + fixed_by_playerside_x + fixed_by_life_difference_x + uphand_dif_x);
		self:y(default_body_y);

		--両者ともゲージがMAX近い場合に腕を振動
		if (life1P > 0.9 and life2P > 0.9) then
			self:vibrate();
			self:effectmagnitude((life1P + life2P - 1.8) * 10,(life1P + life2P - 1.8) * 10,0);
		else
			self:effectmagnitude(0,0,0);
		end

		self:sleep(0.02);
		self:queuecommand('Update');

	end"
/>

<Layer
	File="downhand.png"
	OnCommand="%function(self)
		self:queuecommand('Update');
	end"

	UpdateCommand="%function(self)

		self:x(SCREEN_CENTER_X + fixed_by_playerside_x + fixed_by_life_difference_x + downhand_dif_x);
		self:y(default_body_y + downhand_dif_y);

		--両者ともゲージがMAX近い場合に腕を振動
		if (life1P > 0.9 and life2P > 0.9) then
			self:vibrate();
			self:effectmagnitude((life1P + life2P - 1.8) * 10,(life1P + life2P - 1.8) * 10,0);
		else
			self:effectmagnitude(0,0,0);
		end

		self:sleep(0.02);
		self:queuecommand('Update');

	end"

/>

<Layer
	File="body.png"
	OnCommand="%function(self)
		self:queuecommand('Update');
	end"

	UpdateCommand="%function(self)

		self:x(SCREEN_CENTER_X + fixed_by_playerside_x + fixed_by_life_difference_x);
		self:y(default_body_y);

		--両者ともゲージがMAX近い場合に体を振動
		if (life1P > 0.9 and life2P > 0.9) then
			self:vibrate();
			self:effectmagnitude((life1P + life2P - 1.8) * 10,(life1P + life2P - 1.8) * 10,0);
		else
			self:effectmagnitude(0,0,0);
		end

		self:sleep(0.02);
		self:queuecommand('Update');

	end"

/>

</children></ActorFrame>

Lua(SM5向け)

▼ クリックで展開

return Def.ActorFrame{
  Name= "xtl_actor_o",
  Def.Quad{
    Name= "xtl_actor_p",
    InitCommand= function(self)

		self:visible(false);
		self:sleep(9999);

	end,
  },
  Def.Quad{
    Name= "xtl_actor_q",
    InitCommand= function(self)

		head_pic_x = 480; --頭部分の画像サイズ
		head_pic_y = 600;

		body_pic_x = 480; --胴体、腕の画像サイズ
		body_pic_y = 400;


		default_body_y = SCREEN_HEIGHT - (body_pic_y * 0.5); --胴体・腕のデフォルト位置(中心)
		default_head_y = default_body_y - (body_pic_y * 0.5) + (head_pic_y * 0.5); --頭のデフォルト位置(中心)

		max_head_dif_y = SCREEN_HEIGHT * 0.4; --頭画像の最大変動幅
		max_hand_dif_x = SCREEN_WIDTH * 0.2; --手画像の最大変動幅

		fixed_by_playerside_x = 0; --プレイヤーサイドの反対側へ位置を補正、2Playersの場合は差し引きゼロ
		if (GAMESTATE:IsPlayerEnabled(PLAYER_1)) then
			fixed_by_playerside_x = fixed_by_playerside_x + SCREEN_CENTER_X * 0.3;
		end
		if (GAMESTATE:IsPlayerEnabled(PLAYER_2)) then
			fixed_by_playerside_x = fixed_by_playerside_x - SCREEN_CENTER_X * 0.3;
		end

		fixed_by_life_difference_x = 0;
		head_dif_y = 0;
		uphand_dif_x = 0;
		downhand_dif_x = 0;
		downhand_dif_y = 0;

	end,
    OnCommand= function(self)
		self:queuecommand('Update');
	end,
    UpdateCommand= function(self)

		--各プレイヤーのライフ取得(0.0～1.0)
		if (GAMESTATE:IsPlayerEnabled(PLAYER_1)) then
			if (GAMESTATE:IsPlayerEnabled(PLAYER_2)) then
				life1P = STATSMAN:GetCurStageStats():GetPlayerStageStats(0):GetCurrentLife();
				life2P = STATSMAN:GetCurStageStats():GetPlayerStageStats(1):GetCurrentLife();
			else
				life1P = STATSMAN:GetCurStageStats():GetPlayerStageStats(0):GetCurrentLife();
				life2P = life1P;
			end
		else
				life2P = STATSMAN:GetCurStageStats():GetPlayerStageStats(1):GetCurrentLife();
				life1P = life2P;
		end

		if (GAMESTATE:IsPlayerEnabled(PLAYER_1) and GAMESTATE:IsPlayerEnabled(PLAYER_2)) then
			if (life1P - life2P > 0.3) then
				fixed_by_life_difference_x = - SCREEN_CENTER_X * 0.5 * (life1P - life2P - 0.3);
			elseif (life2P - life1P > 0.3) then
				fixed_by_life_difference_x = SCREEN_CENTER_X * 0.5 * (life2P - life1P - 0.3);
			else
				fixed_by_life_difference_x = 0;
			end
		else
				fixed_by_life_difference_x = 0;
		end

		--1Pのライフに応じて頭を上下(0.5が中心)
			head_dif_y = max_head_dif_y * (life1P - 0.5);

		--2Pのライフに応じて上げている腕を左右(0.5が中心)
			uphand_dif_x = max_hand_dif_x * (life2P - 0.5);

		--2Pのライフに応じて下げている腕を左下斜め方向に移動(0.5が中心)
			downhand_dif_x = -max_hand_dif_x * 0.6 * (life2P - 0.5);
			downhand_dif_y = max_hand_dif_x * 0.5 * (life2P - 0.5);


		self:sleep(0.02);
		self:queuecommand('Update');

	end,
  },
  Def.Sprite{
    Name= "xtl_actor_r",
    OnCommand= cmd(x,SCREEN_CENTER_X;y,SCREEN_CENTER_Y;stretchto,SCREEN_LEFT,SCREEN_TOP,SCREEN_RIGHT,SCREEN_BOTTOM),
    Texture= "bg.png",
  },
  Def.Sprite{
    Name= "xtl_actor_s",
    OnCommand= function(self)
		self:queuecommand('Update');
	end,
    Texture= "head.png",
    UpdateCommand= function(self)


		self:x(SCREEN_CENTER_X + fixed_by_playerside_x + fixed_by_life_difference_x);
		self:y(default_head_y - head_dif_y);

		--両者ともゲージがMAX近い場合に頭を振動
		if (life1P > 0.9 and life2P > 0.9) then
			self:vibrate();
			self:effectmagnitude((life1P + life2P - 1.8) * 10,(life1P + life2P - 1.8) * 10,0);
		else
			self:effectmagnitude(0,0,0);
		end

		self:sleep(0.02);
		self:queuecommand('Update');

	end,
  },
  Def.Sprite{
    Name= "xtl_actor_t",
    OnCommand= function(self)
		self:queuecommand('Update');
	end,
    Texture= "uphand.png",
    UpdateCommand= function(self)

		self:x(SCREEN_CENTER_X + fixed_by_playerside_x + fixed_by_life_difference_x + uphand_dif_x);
		self:y(default_body_y);

		--両者ともゲージがMAX近い場合に腕を振動
		if (life1P > 0.9 and life2P > 0.9) then
			self:vibrate();
			self:effectmagnitude((life1P + life2P - 1.8) * 10,(life1P + life2P - 1.8) * 10,0);
		else
			self:effectmagnitude(0,0,0);
		end

		self:sleep(0.02);
		self:queuecommand('Update');

	end,
  },
  Def.Sprite{
    Name= "xtl_actor_u",
    OnCommand= function(self)
		self:queuecommand('Update');
	end,
    Texture= "downhand.png",
    UpdateCommand= function(self)

		self:x(SCREEN_CENTER_X + fixed_by_playerside_x + fixed_by_life_difference_x + downhand_dif_x);
		self:y(default_body_y + downhand_dif_y);

		--両者ともゲージがMAX近い場合に腕を振動
		if (life1P > 0.9 and life2P > 0.9) then
			self:vibrate();
			self:effectmagnitude((life1P + life2P - 1.8) * 10,(life1P + life2P - 1.8) * 10,0);
		else
			self:effectmagnitude(0,0,0);
		end

		self:sleep(0.02);
		self:queuecommand('Update');

	end,
  },
  Def.Sprite{
    Name= "xtl_actor_v",
    OnCommand= function(self)
		self:queuecommand('Update');
	end,
    Texture= "body.png",
    UpdateCommand= function(self)

		self:x(SCREEN_CENTER_X + fixed_by_playerside_x + fixed_by_life_difference_x);
		self:y(default_body_y);

		--両者ともゲージがMAX近い場合に体を振動
		if (life1P > 0.9 and life2P > 0.9) then
			self:vibrate();
			self:effectmagnitude((life1P + life2P - 1.8) * 10,(life1P + life2P - 1.8) * 10,0);
		else
			self:effectmagnitude(0,0,0);
		end

		self:sleep(0.02);
		self:queuecommand('Update');

	end,
  },
}

説明

ITGをプレイしていると、ゲージ残量に応じてキャラクターの首を伸ばしたくなることがあると思います。
今回はそういったアイデアを実現するluaの実装方法を解説したいと思います。

この書き出しを成立させるために上記の記事を書きました。前半を読んでいただければ、
ゲージ残量に応じてキャラクターの首を伸ばすというアイデアが
決して突飛なものではないということがご理解いただけると思います。
顔の周りで手が回るのは突飛だと思います。

今回の記事の対象は顔の周りで手が回るPapasitoではありませんが、
そちらを目的に記事を見に来られた方も居ると思いますので
ロストワンのPapasitoを貼っておきます。

ロストワンのPapasito

解説

このluaは大きく分けて3つの要素によって成り立っています。
①プレイヤーのライフを取得するGetCurrentLife()
②レイヤ(画像)の位置を指定するx()、y()
③状態取得の命令①、およびレイヤを操作する命令②を短時間で実行し続けることで
リアルタイムな処理を実現するUpdateCommand及びqueuecommand('Update')

①プレイヤーのライフを取得する

STATSMAN:GetCurStageStats():GetPlayerStageStats(PLAYER):GetCurrentLife()で取得できます。
今回のluaでは1Pのみ、2Pのみ、バーサスのパターンを考慮してGAMESTATE:IsPlayerEnabled(PLAYER)で分岐させて取得しています。
バーサスの際に1Pと２Pのライフ状況によって動きにバリエーションを持たせたかったので、Life1PとLife2Pの変数にそれぞれ格納しています。

②レイヤ(画像)の位置を操作する

x(ピクセル)、y(ピクセル)で画像の表示位置を変更できます。
増分を指定するaddx、addyという命令もあります。
x,yで指定するのは画像の左上ではなく、中心点のx,y座標なので注意が必要です。

③状態取得の命令①、およびレイヤを操作する命令②を短時間で実行し続けることでリアルタイムな処理を実現する

今回解説のメイン部分となります。
第3回までの記事では1回だけ命令を実行するものでしたが、今回実装したいリアルタイムな処理では、短時間で何度もパラメータを変えて同じ命令を実行する必要があります。
これを実現するためによく使われる手法が、UpdateCommand及びqueuecommand('Update')による「無限ループ」です。

最も単純な構造としては以下です。

<Layer
	Type="Quad"
	OnCommand="%function(self)
		self:queuecommand('Update');
	end"
	UpdateCommand="%function(self)

              <<命令の記述>>

		self:sleep(0.02);
		self:queuecommand('Update');
	end"
/>

Luaでは最初に実行されるInitCommand、通常のタイミングで実行されるOnCommandのほかに、○○Commandとユーザ自身が名前を付け、そのコマンドをqueuecommand(○○)で呼び出すことができる機能があります。
上記ではUpdateCommandとしていますが、この名称である必要はなく、Command名とqueuecommandで呼び出す名称が合っていればなんでもよいです。
UpdateCommand内でqueuecommand('Update')を行うことで「無限ループ」を発生させ、<<命令の記述>>の部分を繰り返し実行することができます。

今回のLuaの全体構造としては下記のようになっています。
グローバル変数はLua全体で参照可能であることを利用して、ライフ取得及び変数を計算するレイヤを1つにまとめています。

◆変数用Quad
<Layer
	Type="Quad"
	InitCommand="%function(self)

		<<変数の初期化>>

	end"
	OnCommand="%function(self)
		self:queuecommand('Update');
	end"
	UpdateCommand="%function(self)

		<<①ライフの取得>>
		<<ライフに基づいた位置変数の計算>>

		self:sleep(0.02);
		self:queuecommand('Update');
	end"
/>
◆画像レイヤ(複数)
<Layer
	File="画像名"
	OnCommand="%function(self)
		self:queuecommand('Update');
	end"
	UpdateCommand="%function(self)

		<<②画像位置の変更>>

		self:sleep(0.02);
		self:queuecommand('Update');
	end"
/>

今回のLuaだと、1Pのライフに応じて首を伸縮させ、2Pのライフに応じて手を伸縮させています。
また、両者のライフが9割以上の場合は振動するようにし、ライフ差が大きい場合はライフの高い方に体全体が移動するような効果を入れています。

Papasito仮面

応用

今回の記事で解説した内容は非常に応用範囲が広く、プレイヤーのプレイ内容に応じた
インタラクティブな処理を実現する際に特に役立ちます。
例えば、
・コンボを繋いでいくと譜面が見えにくくなっていく
・地雷ノーツを踏むと画像レイヤが七色に光り回転しながら爆音が流れる
・パネルを踏むと自機が移動する(どのパネルを踏んでいるかはSM5限定の命令)
・ライフがデンジャーに突入するとドカベンが応援してくれる
などです。
端的に言えば〇〇(条件)すると△△(結果)する、で表せる表現は
単純化すればこの手法で実現できます。
「フレン・シーフォ or notフレン・シーフォクイズを間違えるとCROSS†OVERに分岐するShiny World」などです。
(フレンシーフォクイズは他の様々なテクニックの応用の結果なので、これだけ身に着ければ実装できるというものでもないですが)
https://twitter.com/paraphrohn/status/1140211559039324160

また、①のライフ取得をコンボ取得に変更し、位置変数の計算を弾幕の軌道となるようにし、画像レイヤをたくさん用意したものがフメンタイン2020で提出した怒首領Papasito大往生デスレーベルとなります。

余談ですが、怒首領Papasito大往生デスレーベルのように画像レイヤが非常に多い場合は、それぞれの画像レイヤでUpdateCommmadを回し続ける必要があるためLuaが長大になりがちですが、SM5限定の記法にはなりますがparaphさんのブログでより簡潔に記述する方法が紹介されています。

終わりに

Lua講座も第4回まで来ました。構想としては全5回を予定しており、次回(最終回)は右腕が2重振り子状に運動する火花散らしてについて解説したいと考えています。

参考URL

Lua API for OpenITG / NotITG(英語)
https://sm.heysora.net/doc/
ITGのLuaを書くのにまず参照するページです。OpenITGで使用できる各種命令が記載されています。

Lua for StepMania 5
https://quietly-turning.github.io/Lua-For-SM5/
StepMania5版のlua解説サイト（英語）です。使用できる関数や3.9系との違いなど、SM5系のluaを作成するのに必要な情報が詰まっています。

paraphrohn’s diary
https://paraphrohn.hateblo.jp/
日本語でLuaの解説が書かれた貴重なページです。Luaの基本から譜面のワープ、ハイスピ変更ギミックなど様々な実装についての解説があります。