Shimeji-ee Affordances Tutorial
Download Now
New Characters
Video
FAQ Video
Affordances Tutorial
Source Code
This tutorial will walk you through the various steps required to make an interaction animation between two different shimeji. It expects you to have a working understanding of how to edit the xml files to add frames and the like.
You can also download a working example for free from my Patreon. Note that this version is not guaranteed to be using the latest version of Shimeji-ee, so if you plan to use this particular example for your own shimeji you should update it to the latest version.
Interactive actions have the following components:
- A shimeji
Broadcasts an affordance - Other shimeji detect this affordance and move towards it (
ScanMove) - Once the shimeji meet, they
Interact. If the interaction finishes successfully, they change to the given newBehavior. Otherwise, they continue as normal in their respective sequences.
Broadcast
Let's start with broadcast. There are three versions:BroadcastBroadcastStayBroadcastMove
Animate, Stay and Move respectively, and work in the same way.For this example, let's make a
Broadcast action. Take the sit action of the shimeji you want and make a copy of it.
<Action Name="Sit" Type="Stay" BorderType="Floor">
<Animation>
<Pose Image="/shime11.png" ImageAnchor="64,128" Velocity="0,0" Duration="250" />
</Animation>
</Action>
Then, modify it so it becomes a Broadcast action instead of a Stay as shown in the code snippet below.
Note the new parameter,
Affordance. Any shimeji searching for an affordance will need to use this same value.
<Action Name="SitAffordance" Type="Embedded" Class="com.group_finity.mascot.action.Broadcast" Affordance="Cuddle" BorderType="Floor">
<Animation>
<Pose Image="/shime11.png" ImageAnchor="64,128" Velocity="0,0" Duration="250" />
</Animation>
</Action>
Create a new sequence for the action as normal.
<Action Name="BroadcastAffordance" Type="Sequence">
<ActionReference Name="SitAffordance" />
</Action>
Add the new action into behaviors.xml as appropriate. I recommend a high frequency as it relies on another shimeji noticing it.
For this example, place it in the "On the Floor" condition block.
<Behavior Name="BroadcastAffordance" Frequency="1200" />
ScanMove
ScanMove refers to moving towards a target shimeji that is Broadcasting the affordance of interest.
Start by making a copy of the run action in the shimeji that will be looking to
Interact with the first shimeji, as seen here.
<Action Name="Run" Type="Move" BorderType="Floor">
<Animation>
<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-4,0" Duration="2" />
<Pose Image="/shime2.png" ImageAnchor="64,128" Velocity="-4,0" Duration="2" />
<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-4,0" Duration="2" />
<Pose Image="/shime3.png" ImageAnchor="64,128" Velocity="-4,0" Duration="2" />
</Animation>
</Action>
Modify the action to the new ScanMove type. Take note of the new attributes:
Affordance: The same name as you used before, in theBroadcastaction. These values must match!Behavior: When the shimeji reaches theBroadcasting shimeji, this is theBehavior(notAction) to change to.TargetBehavior: The same, but for theBroadcasting shimeji, not theScanMove-ing one.
Behavior names, which typically refer to sequences, not Actions with image frames.
<Action Name="RunAffordance" Type="Embedded" Class="com.group_finity.mascot.action.ScanMove" Affordance="Cuddle" Behavior="IHugYou" TargetBehavior="IAmHugged" BorderType="Floor">
<Animation>
<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-4,0" Duration="2" />
<Pose Image="/shime2.png" ImageAnchor="64,128" Velocity="-4,0" Duration="2" />
<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-4,0" Duration="2" />
<Pose Image="/shime3.png" ImageAnchor="64,128" Velocity="-4,0" Duration="2" />
</Animation>
</Action>
Create a new sequence for the action.
Note the small Stand before the
ScanMove—this is important! Without it the ScanMove will not work.
<Action Name="Hunt" Type="Sequence">
<ActionReference Name="Stand" Duration="${20+Math.random()*20}" /> <!-- a small delay is needed to prevent an infinite loop -->
<ActionReference Name="RunAffordance" />
</Action>
Add into behaviors.xml as normal. It should be a high frequency.
For this example, place it in the "On the Floor" condition block.
<Behavior Name="Hunt" Frequency="1000" />
Interact
Now that we have the two shimeji meeting, they need toInteract with each other. You can either have art showing each of them separately in their own frames, or one of them using frames with no images set and the other having the art of both. Either way you should use the Interact action so they know to stop if they are torn apart by the cursor or environmental changes.
You can also use the optional
Behavior attribute to force one or both of them to execute a behaviour should the interaction complete successfully. Other behaviours in the sequence/NextBehaviourList would follow on from an interrupted interaction.
For this example, one of the shimeji will become invisible for the duration of the
Interaction. The other will display art for the both of them. The first shimeji, with the art shown, would use an action like this:
<Action Name="HugAction" Type="Embedded" Class="com.group_finity.mascot.action.Interact" BorderType="Floor">
<Animation>
<Pose Image="/hug1.png" ImageAnchor="64,128" Velocity="0,0" Duration="8" />
<Pose Image="/hug2.png" ImageAnchor="64,128" Velocity="0,0" Duration="8" />
<Pose Image="/hug3.png" ImageAnchor="64,128" Velocity="0,0" Duration="8" />
<Pose Image="/hug4.png" ImageAnchor="64,128" Velocity="0,0" Duration="50" />
<Pose Image="/hug3.png" ImageAnchor="64,128" Velocity="0,0" Duration="8" />
<Pose Image="/hug2.png" ImageAnchor="64,128" Velocity="0,0" Duration="8" />
<Pose Image="/hug1.png" ImageAnchor="64,128" Velocity="0,0" Duration="8" />
</Animation>
</Action>
And the associated sequence:
<Action Name="IHugYou" Type="Sequence">
<ActionReference Name="HugAction" />
</Action>
The second shimeji uses a pose with no image, measured to be as long as the other action. It uses the Behavior attribute to force a behaviour change should the Interaction complete.
<Action Name="HuggedAction" Type="Embedded" Class="com.group_finity.mascot.action.Interact" BorderType="Floor" Behavior="SitAndSpinHead">
<Animation>
<Pose Velocity="0,0" Duration="98" />
</Animation>
</Action>
And the associated sequence:
<Action Name="IAmHugged" Type="Sequence">
<ActionReference Name="HuggedAction" />
</Action>
In behaviors.xml, these should appear in the list with their frequency set to 0 and be hidden from view. If they are not listed, the Shimeji Interactions will not work.
<Behavior Name="IHugYou" Frequency="0" Hidden="true" /> <Behavior Name="IAmHugged" Frequency="0" Hidden="true" />

