Shimeji-ee Affordances Tutorial
Download Now Source Code DeviantArt Group Video Affordances TutorialThis 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
Broadcast
s 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:Broadcast
BroadcastStay
BroadcastMove
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 Broadcast
ing 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 theBroadcast
action. These values must match!Behavior
: When the shimeji reaches theBroadcast
ing shimeji, this is theBehavior
(notAction
) to change to.TargetBehavior
: The same, but for theBroadcast
ing shimeji, not theScanMove
-ing one.
Behavior
names, which typically refer to sequences, not Action
s 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
Interact
ion. 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 Interact
ion 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 Interact
ions will not work.
<Behavior Name="IHugYou" Frequency="0" Hidden="true" /> <Behavior Name="IAmHugged" Frequency="0" Hidden="true" />