見出し画像

Shimeji-ee テクニック「アフォーダンス」を実装しよう

8bitcanvas

Shimejiライフ楽しんでますか？
今日はいつものShimeji-eeのテクニックを書いてみようと思います。
今回はなんと、しめじ同士を触れ合わせるというCP推しなら誰もがやりたいアレです。


アフォーダンスとは？

オリジナル版Shimejiにはなかった機能で、Simeji-eeに実装されています。
しめじとしめじをリンクさせて、アクションを取らせる機能なのですが、
なんと、別々の見た目のしめじでもできてしまいますので、セットで使ってもらいたいしめじにぴったりですね。

早速やってみよう！

というわけで、やり方を書いていきたいと思います。
実際のやり方はShimeji-eeの公式サイトに書かれていますが、
例によって英語です。わかりにくいと思いますので、日本語で説明していきます。
一応公式サイトも照らし合わせながらお読みください。

Broadcastクラスを使って別のしめじに呼びかける

まず最初に、Broadcastというクラスを使って、別のしめじに呼びかけるアクションを作ります。私の作成した「颯しめじ」と「凪しめじ」を例にして説明していきます。
実際のファイルはこちら(デレマスしめじ公開所)からDLできますので、中身を見ながら進めていきましょう。
別々のしめじに実装する場合、アクションはそれぞれのしめじのAction.xmlとBehavior.xmlに書く必要があります。
まずAction.xmlから実装していきます。
凪しめじのこちらのコードをご覧ください。


		<Action Name="会話待ちはーちゃん" Type="Sequence">
			<ActionReference Name="凪はーちゃんと会話待ち" />
		</Action>

		<Action Name="凪はーちゃんと会話待ち" Type="Embedded" Class="com.group_finity.mascot.action.Broadcast" Affordance="はーちゃん凪と会話" BorderType="Floor">
			<Animation>
				<Pose Image="/nagi0_0000.png" ImageAnchor="80,160" Velocity="0,0" Duration="250" />
			</Animation>
		</Action>

これがBroadcastクラスで作ったアクションです。
（アクション名がややこしいですが、凪しめじが颯しめじを待っているときのアクションです）
このアクションをBehavior.xmlから呼び出すことで、
他のしめじに呼びかけることができます。このBroadcastアクションが実行されたしめじが居たときに、他のしめじがScanMoveクラスのアクションを実行したとき、実行したしめじがBroadcastしめじの元に移動することができます。
さて、もう一つ注目してほしいのがAffordance属性です。ここにははーちゃん凪と会話と書かれていますが、ここに書かれた内容と同じしめじのアフォーダンス系アクションがリンクされるようになっています。
つまり、リンクさせたいしめじはここに書く内容を同じにすればいいということです。

ScanMoveでしめじをBroadcastしめじの元に移動させる

さて、Broadcastのアクションが作れたら、次はScanMoveで呼び寄せられたしめじをBroadcastを発したしめじの元に移動させてみましょう。
颯しめじのこちらのコードをご覧ください。

		<Action Name="はーちゃん凪に向かって歩く" Type="Embedded" Class="com.group_finity.mascot.action.ScanMove" Affordance="はーちゃん凪と会話" Behavior="はーちゃん一歩下がる" TargetBehavior="会話するために座る" BorderType="Floor">
			<Animation>
				<Pose Image="/hayate1_0000.png" ImageAnchor="80,160" Velocity="-2,0" Duration="3" />
				<Pose Image="/hayate1_0001.png" ImageAnchor="80,160" Velocity="-2,0" Duration="3" />
				<Pose Image="/hayate1_0002.png" ImageAnchor="80,160" Velocity="-2,0" Duration="3" />
				<Pose Image="/hayate1_0003.png" ImageAnchor="80,160" Velocity="-2,0" Duration="3" />
				<Pose Image="/hayate1_0004.png" ImageAnchor="80,160" Velocity="-2,0" Duration="3" />
				<Pose Image="/hayate1_0005.png" ImageAnchor="80,160" Velocity="-2,0" Duration="3" />
				<Pose Image="/hayate1_0006.png" ImageAnchor="80,160" Velocity="-2,0" Duration="3" />
				<Pose Image="/hayate1_0007.png" ImageAnchor="80,160" Velocity="-2,0" Duration="3" />
			</Animation>
		</Action>

これは凪しめじのBroadcastにScanMoveクラスを実行した颯しめじが気づいて、凪しめじの元に歩いていくときのコードです。
まず中のAnimationタグ内の説明からしていきます。
これは公式サイトにも書いてあるとおり、颯しめじの「歩く」アクションをコピーしたものです。みなさんもご自分のしめじの「歩く」系のアクションを使えばOKです。走るでもダッシュでも構いません。しめじの元に移動できればOK。
仕組みはよくわかりませんが、Broadcastしめじの元に移動が完了した時点で、次のアクションに移るようになっているのですが、その後に実行されるのがActionタグの属性にあるBehaviorとTargetBehaviorです。
BehaviorはScanMoveを実行したしめじ、TargetBehaviorはBroadcastを実行したしめじが、それぞれこのアクションの後に実行します。

BehaviorとTargetBehaviorに設定したアクション名でしめじが触れ合うアクションを作成する

おわかりかと思いますが、BehaviorとTargetBehaviorに、しめじが移動した後に取るアクションを設定し、そのアクション名で触れ合うときのアクションを作れば、しめじ同士の交流アクションが作れます。
私の颯しめじと凪しめじの場合だと、こんな感じになっています。

		<Action Name="はーちゃん一歩下がる" Type="Sequence">
			<ActionReference Name="Look" LookRight="false"/>
			<ActionReference Name="Walk" Duration="20" />
			<ActionReference Name="Look" LookRight="true"/>
			<ActionReference Name="Stand" Duration="10" />
			<ActionReference Name="相手と話す" Duration="500" />
		</Action>
		
		<Action Name="相手と話す" Type="Stay" BorderType="Floor">
			<Animation>
				<Pose Image="/hayate3_0002.png" ImageAnchor="80,160" Velocity="0,0" Duration="250" />
			</Animation>
		</Action>
		<Action Name="会話するために座る" Type="Sequence">
			<ActionReference Name="Look" LookRight="true"/>
			<ActionReference Name="Walk" Duration="20" />
			<ActionReference Name="Look" LookRight="false"/>
			<ActionReference Name="Stand" Duration="10" />
			<ActionReference Name="相手と話す" Duration="500" />
		</Action>
		
		<Action Name="相手と話す" Type="Stay" BorderType="Floor">
			<Animation>
				<Pose Image="/nagi3_0002.png" ImageAnchor="80,160" Velocity="0,0" Duration="250" />
			</Animation>
		</Action>

上が颯しめじ、下が凪のアクション。
ScanMoveが実行された後にコードの上のアクションを呼び出し、その後は相手と話すアクションで座りこんで会話する、という感じです。

Behaviorにアクションを追加する

以上のアクションをBehavior.xmlに追加して呼び出し機関を作ります。
まず颯しめじのほう。


		<Behavior Name="はーちゃん一歩下がる" Frequency="0" Hidden="true">
				<NextBehavior Add="true">
				<BehaviorReference Name="StandUp" Frequency="100" />
				<BehaviorReference Name="SitDown" Frequency="50" />
				<BehaviorReference Name="FaceDown" Frequency="50" />
				</NextBehavior>
			</Behavior>

		<!-- On the Floor -->
		<Condition
			Condition="#{mascot.environment.floor.isOn(mascot.anchor) || mascot.environment.activeIE.topBorder.isOn(mascot.anchor)}">
			<Behavior Name="はーちゃん凪のところに行く" Frequency="1000" />
~

はーちゃん一歩下がる(ScanMoveのあとのアクション)を適当なところに追加。はーちゃん凪のところに行く(ScanMoveアクション)を<!-- On the Floor -->の下のConditionタグの下に追加します。
On the Floorというのは、デスクトップ上ということ。IEなどのウィンドウの上以外に居るときに実行されます。
ScanMoveアクションは、Broadcastしめじが居るとき高確率で見つけたいのでFrequencyを高めにしましょう。

で、次が凪のBehavior.xml。


		
		<Behavior Name="会話するために座る" Frequency="0" Hidden="true">
				<NextBehavior Add="true">
				<BehaviorReference Name="StandUp" Frequency="100" />
				<BehaviorReference Name="SitDown" Frequency="50" />
				<BehaviorReference Name="FaceDown" Frequency="50" />
				</NextBehavior>
			</Behavior>

		<!-- On the Floor -->
		<Condition
			Condition="#{mascot.environment.floor.isOn(mascot.anchor) || mascot.environment.activeIE.topBorder.isOn(mascot.anchor)}">
			<Behavior Name="会話待ちはーちゃん" Frequency="600" />

会話するために座る(ScanMoveのあとのアクション)を適当なところに追加しました。これは颯しめじと同じ。会話待ちはーちゃん(Broadcastアクション)を<!-- On the Floor -->の下のConditionタグの下に追加します。こちらもFrequencyは高めの数字に。

※しめじの会話はBroadcastを発しているしめじを、発している間に別のしめじがScanMoveを発動して見つけないと成立しません。しかもScanMoveを発動したしめじがBroadcastしめじのもとに移動し終わる前にBroadcastが終わってしまってもダメなので、基本的にBroadcastとScanMoveのFrequencyは高めにするといいでしょう。

以上でBehavior.xmlの用意はおしまいです。

どんな風に動くか見てみる

上記で作ったアクションがどんなふうに動くのか見てみましょう。
shimeji-eeを起動してみます。颯しめじと凪しめじで説明します。
まず、凪しめじを右クリックして、行為の設定→メニューから会話まちはーちゃんを選択。
そして急いで颯を右クリックして、行為の設定→はーちゃん凪のところへ行くを選択。操作が遅かったり、颯しめじが凪しめじに辿り着く前にBroadcastが終わってしまうこともありますが、うまくいくと以下のようになります。


Interactクラスでしめじをリンクさせる

しめじが交流してる間、ドラッグされたりしたなどで途中で引き裂かれた場合に行動を止めたいときもありますよね。
Shimeji-eeの公式ドキュメントで解説されているハグなどもそんな感じです。
その場合はInteractクラスで実行されている間だけリンクさせることができます。
こちらは今うちのしめじで実装されていないため、公式ドキュメントを見ていただくほうがいいかと思います。
注意点としては、Interactクラスの中で完結したアクションじゃないと途中で切れてしまうみたいです。
私も色々試してみたのですが振り向きなどの別クラスを間に挟むとうまくアクションが実行されずよくわかりませんでした…
今度また試してみようと思います。

おしまい

以上がアフォーダンスの実装方法でした。
しめじ同士の交流は見ててぐっとくるものがありますね。
みなさんもアフォーダンスを使って推しと推しを交流させてみましょう！




この記事が気に入ったらサポートをしてみませんか？