見出し画像

しめじ作りたい人向け作成マニュアルshimeji-ee版(補足あり)

8bitcanvas

少し久しぶりに記事を書きます。

ありがたいことにこんな時代になっても
うちのしめじで遊んでくださる方は少しだけ居るみたいです。
コメントなど励みになってます！ありがとうございます。
やっぱりデスクトップに推しが動き回ってたら嬉しいよね。

しめじで遊ぶのは楽しいですが、
お絵描きができる方は自分で推しを動かしたりしてみたくありませんか？
自分は、自分で作るのも楽しいのですが周りの人にしめじを作ってもらいたくて仕方がなかったので、今回はしめじを作ってみたいという方の助けになるようなマニュアルを書いてみようと思います。

xmlファイルの仕組み

まず、しめじの仕組みについて解説します。
しめじは画像ファイルと、行動内容のプログラムが書かれた2つのxmlファイル(テキストファイルのようなもの)が合わさって動いています。
画像はお絵かきができる方なら自分で用意できると思いますが、xmlはわからないと思うので、簡単に説明していきましょう。(プログラムはHTMLのようなものなので、HPを作ったことがある方なら馴染みやすいかもしれません)

Action.xmlとBehavior.xml

先程しめじには２つのxmlファイルで構成させていると書きましたが、その実態はconfフォルダにあるAction.xmlとBehavior.xmlです。(shimeji-eeの場合。通常のしめじは動作.xmlと行動.xmlになります)
これをテキストファイルで開くと、プログラムがずらっと出てきます。このファイルにしめじの行動を記述していくわけです。

Action.xmlにはしめじが実際に取る動作を書き、Behavior.xmlにはその行動をしめじがどんなときに取るかを記述する脳のようなファイルだとイメージしてください。印象としては難しいかもしれませんが、HTMLができればできると思います。やったことが無くても頑張れば覚えられるはずなので頑張りましょう。簡単にいえば、中身は行動1つ1つのプログラムを何個も箇条書きにしてあるようなファイルですよ。

Action.xmlの書き方

うちのしめじのAction.xmlの中身を例として挙げてみます。

		<Action Name="Walk" Type="Move" 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>

こちらはうちの颯しめじのAction.xmlの一部で、
颯が歩く時の動き方の部分になります。
プログラムはActionsタグ(<Action></Action>)で囲み、Nameで名前をつけ、その中に命令を書いていきます。(これを属性と言います)
Typeは動作内容のタイプで、Moveはしめじが動くときの命令です。
BorderTypeはしめじがどこに居るか。この場合(Floor)は地面がある場所になります。これ以外にも状況によって使用するタグや属性は異なりますが、基本的にタグに属性をつけ、それを何層も囲んでいくという形になっています。<Action></Action>で囲まれたところが一つの動作になります。

上の動作はもうお察しかもしれませんが、颯が歩く時の命令です。
歩く時のアニメを再生するためAnimationタグで囲み、その中にPoseタグを順番に記述して、アニメーションを再生している仕組みになります。

ここがややこしいのですが、この動作はしめじが動いた時のアニメーションというだけなので、このままだと一つの行動になりません。
このアニメーションを使用してどんなことをするかを実際に書かなくてはなりません。
以下がこのアニメーションを使用したしめじの実際の動作の命令になります。

		<Action Name="WalkAlongWorkAreaFloor" Type="Sequence" Loop="false">
			<ActionReference Name="Walk" TargetX="${mascot.environment.workArea.left+64+Math.random()*(mascot.environment.workArea.width-128)}" />
		</Action>

しめじが地面を歩くときの命令です。
ちょっとむずかしいですが動作の仕組みと意味を説明すると、
まずActionタグのName属性を使用して名前をつけます。TypeはSequenceです。しめじの実際の動作をいくつも指定するときに良く使います。
その中のActionReferenceで先程の歩くアニメーションを指定しています。このアニメーションを使用し、TargetXでしめじの移動先を指定します。Xはその名の通り画面上で左右の座標を指定するもので、例えばしめじがタスクバーの上に居れば端っこに移動したり、真ん中に移動したりといったことができるわけです。
上のTagetXの意味としては、しめじを画面左端の位置+64pxから画面右端の位置-128pxまでのランダムな位置に移動するという意味。
なにそれよくわからん…って思われたかもしれませんが、ぶっちゃけよく分からなくても良いのです。とりあえずこう書くとこう動く、ってのを覚えておけばそのうち分かるようになります。

ちなみに、もっと知りたいという人向けに説明すると、mascot.environment.workArea.leftはPCのディスプレイ一つにおける画面左端の位置で、mascot.environment.workArea.widthは画面右端の位置。上の例では画面左端の位置から画面右端までの位置までの範囲でMath.random()で乱数を作っています。(*は掛け算です)
それで出来上がった数字の位置にアニメーションを再生しながらしめじが移動する、というわけです。

このような動作をBehavior.xmlで実際に行動を取るときに呼び出し、しめじが動くようになっています。

※補足
いくつかの名前の属性はしめじがデフォルトで使う命令なので、最初からあるものは慣れるまでNameの部分は変えないほうが良いです。

Behavior.xmlの書き方

さて、ちょっと気が早いかもしれませんが次はBehaior.xmlの仕組みだけちょっと解説します。さっきのAction.xmlの仕組みを読んでピンときた方はすぐにでもAction.xmlを書きたい気持ちが出ているかもしれませんが、全体の流れの仕組みだけは理解しておきましょう。大体わかった方は読み飛ばして後で読んでも大丈夫だと思います。

Behavior.xmlは先程のAction.xmlで書いた動作を、しめじがどんなときに行うかを判定して呼び出す脳のようなファイルです。プログラムのifの部分と言ってもいいですね。

では、またうちの颯しめじのBehavior.xmlの中身を見ていきます。

		<!-- On the Floor -->
		<Condition
			Condition="#{mascot.environment.floor.isOn(mascot.anchor) || mascot.environment.activeIE.topBorder.isOn(mascot.anchor)}">
			<Behavior Name="StandUp" Frequency="100">
				<NextBehavior Add="true">
				<BehaviorReference Name="StandUp" Frequency="100" />
				<BehaviorReference Name="SitDown" Frequency="100" />
				</NextBehavior>
			</Behavior>
			<Behavior Name="SitDown" Frequency="150">
				<NextBehavior Add="true">
				<BehaviorReference Name="StandUp" Frequency="100" />
				<BehaviorReference Name="Sit2" Frequency="100" />
				</NextBehavior>
			</Behavior>
			<Behavior Name="Sit2" Frequency="0" />
			<Behavior Name="FaceDown2" Frequency="0">
				<NextBehavior Add="false">
				<BehaviorReference Name="FaceDown2" Frequency="50" />
					<BehaviorReference Name="StandUp2" Frequency="50" />
				</NextBehavior>
			</Behavior>

~ (※ここから先も別のプログラムの文字列が続きます)

これはxmlを開いてちょっと下の方にスクロールしたらある部分です。(<!-- On the Floor -->の記述があるあたり)
ちょっとコードが長いですが、順番に説明していきます。

まずConditionタグですが、これはどんなときに行動を取るかの条件式をCondition属性(タグと属性が同じ名前なのでややこしいですね)で指定します。上の例ではCondition="#{mascot.environment.floor.isOn(mascot.anchor) || mascot.environment.activeIE.topBorder.isOn(mascot.anchor)}"みたいになんだか長くてよくわからなさそうな式になっていますが、ここは慣れるまで気にしなくて大丈夫です。上に書いてある説明(<!-- On the Floor -->)だけ読んで、どんなときに使われるのかを把握し、読み飛ばしましょう。ちなみにこの場合しめじが地面に居るときに取る行動になります。

その次のBehaviorタグで囲まれている部分はAction.xmlのときと同じようにしめじの1つの行動です。Action.xmlで作った行動の名前をNameで指定して入れると、しめじが行動を取るようになります。
Behaviorタグは囲まずに単体のタグとして指定すると条件なしの行動になります。
最初は単体のBehaviorタグをいくつも追加して様子を見てみるのも良いでしょう。
Behaviorタグを囲んで使用する場合、その中にNextBehaviorタグとBehaviorReferenceタグを入れると次の行動を指定することが出来ます。複数の行動を繋げたい場合はBehaviorタグでNextBehaviorを囲み、その中にさらにBehaviorReferenceタグを囲んで次の行動を指定するようにしましょう。
ここで使用している属性については後述します。

タグや属性の一覧

ここまで分かったら、後は動作と行動の内容が読めるようになればプログラムの意味がわかります。というわけで、昔自分が調べたタグや属性の意味を書いたものを今のshimeji-ee用に直してガイドみたいなものを作ってみようと思います。

Action.xml

動作が書かれたxmlファイル。

  • Aciton

    • Name
      Behavior.xmlやActionReferenceなどでその動作を呼び出すのに使う

      • Look
        しめじを振り向かせる。
        LookRightではtrueにすると右を向き、falseにすると左を向く。
        条件式使うこともでき、その場合条件が揃った時にtrueになる。

      • Offset
        しめじの位置をずらす。
        XでX座標を
        YでY座標を

    • Type
      動作のタイプ

      • Stay
        その場で動くアニメーション

      • Move
        移動系アニメーション
        PoseタグのVelocityが0以外になっている時はTypeをMoveにしていなくても動くが、
        Moveにすることで動作を呼び出す際に目的地を設定することが出来る
        呼び出す時、TargetXでどこに移動するか指定できる

      • Animate
        ？

      • Embedded
        しめじ側で用意された特殊な動作を設定する時に使う。
        タイプがEmbeddedになっている際はClassでActionの内容を指定する。

      • Sequence
        ActionReferenceで他の動作を呼び出してつなげて一つの動作に出来る
        Behavior.xmlで呼び出して使う動作を作るのに使うことが多い

      • Select
        このタイプで囲んだ動作に条件式を書くと、条件がそろった場合はその動作に、揃わなかった場合は次の動作に、といった分岐（◯◯でなければもしも◯◯だったら）が出来る。

    • BorderType
      どの場所で使うアニメーションか。
      デュアルディスプレイの場合はディスプレイごとに判断する。

      • Floor
        デスクトップの下辺でするアニメーション。

      • Wall
        デスクトップの一番端や、IEの左右端でするアニメーション。

      • Ceiling
        デスクトップの一番上や、IEの下端でするアニメーション。

    • Class
      TypeのタイプがEmbeddedになっている際に指定するとActionの内容が変わる。

      • com.group_finity.mascot.action.Jump
        ジャンプ系クラスその1。目的地を指定してその場所まで移動するタイプ。
        このクラスの時はVelocityParamを指定することで移動時の速度が変わる。
        呼び出す時、TargetX、TargetYでどこに移動するか指定できる
        なお、TargetX、TargetYは条件式が使用可能。

      • com.group_finity.mascot.action.Fall
        ジャンプ系クラスその2。こちらはパラメータの値によって動きが変わる。目的地は設定できないので正確な位置を指定して動かすことは出来ない。
        RegistanceXで左右に移動した際に移動速度が落ちる値を設定出来る。
        RegistanceYで上下にしたした際の以下略。
        Gravityはどれくらいの速度で下に落ちるかの基本値。
        呼び出す時、InitialVX、InitialVYで最初の移動位置を指定できる。以降の場所はRegistanceX(Y)、Gravityによって決定される。
        なお、InitialVX、InitialVYは条件式が使用可能。

      • com.group_finity.mascot.action.Dragged
        ドラッグされた時の動作を指定する。

      • com.group_finity.mascot.action.Regist
        その場でドラッグし続けた後の動作を指定する。
        このクラスで指定した動作がすべて終了した時しめじは自動的にカーソルから離れる。

      • com.group_finity.mascot.action.Breed
        分裂系クラス。
        BornXで生まれるX座標を指定する。
        BornYで生まれるY座標を指定する。
        生まれた時の動作は動作の名前を入れることで生まれたしめじが直後に取る動作を指定できる。
        このクラスの動作はアニメーションを指定するのが一般的で、
        アニメーションを指定すると分裂が起こる前に分裂元のしめじが取る行動を指定できる。
        （しめじが分裂するのはこのAction内での行動がすべて終了した後）

      • com.group_finity.mascot.action.Look
        しめじを振り向かせるクラス。デフォルトではLookが使っているのでNameのLookの欄を参照

      • com.group_finity.mascot.action.Offset
        しめじの位置をずらすクラス。デフォルトではOffsetが使っているのでNameのOffsetの欄を参照

  • Animation
    囲んだ場所がアニメーションの動作指定になる

  • Pose
    アニメの画像がどんな動きをするか指定する
    Imageで画像のパスを指定
    ImageAnchorはしめじの基準となる画像の座標をX,Yで指定する
    Velocityは動くときの速さX,Yで指定する
    Durationはその画像をどれくらいの時間表示するか。体感だが多分1/30ミリ秒（つまり3にすると0.1秒になる）

  • ActionReference
    他の動作を呼び出すことが出来る。

Behavior.xml

行動が書かれたxmlファイル。

  • Behavior

    • Name
      Action.xmlに書いたアクションを取れるようになる。重複してはいけない。

      • Frequency
        どれくらいその行動を取りやすいか
        0で通常は取らない

  • BehaviorReference

    • 他の行動を呼び出すことができる。行動として設定されていないアクションは呼び出せないので注意。Frequencyが0でもいいので設定すること。

  • NextBehavior
    囲んだところが次に取るアクションになる。

    • Add
      trueで一定の確率で取る。
      falseで必ず取る。（複数指定されている場合はFrequencyの高いものが取りやすくなる）

条件式

各所で登場する条件式で使える。

  • mascot.anchor.x
    しめじのX座標

  • mascot.anchor.y
    しめじのY座標

  • mascot.environment.cursor.x
    カーソルのX座標

  • mascot.environment.cursor.y
    カーソルのY座標

  • mascot.lookRight
    しめじの向き

  • mascot.environment.workArea.left
    画面の左端の位置

  • mascot.environment.workArea.width
    画面の横幅

  • mascot.environment.workArea.bottom
    画面の下端の位置

  • mascot.environment.workArea.height
    画面の高さ

  • +
    足す

  • -
    引く

  • *
    かける

  • /
    割る

  • %
    割った余り

  • &lt;
    ◯◯未満だったら

  • >=
    ◯◯以上だったら

  • ?
    ◯◯以外だったら

  • Math.random
    0~1の乱数を作る。（小数点）

テクニック

  • 条件式を書く際に()で囲むとその中は小数点以下切り捨てになります。

  • 0~5までの乱数を作りたい時は、Math.random()*5と書くとよい。

  • 頻度0の行動を設定し、どれかの行動から次の行動リストで行動参照を頻度1以上で書いて呼び出すと、その行動からのみ発生するアクションが作れる。

  • 画像ファイル名末尾に「-r」をつけると反対向きの画像として作用します。左右非対称のキャラを作るときに有用。
    ↑コメントで情報を頂いて調べたところ、どうやらshimeji-eeには無いかもしれません。

補足

以上のタグ・属性解説はshimeji-ee版になっておりますが、
以下のURLでオリジナル版についてもわかるようになります。

上のURLはオリジナル版をshimeji-eeに変換する際の置換用プログラムなので、照らし合わせて読むことでオリジナル版の内容についてもわかります。

こちらは私が過去に書いた記事の残骸。オリジナル版に対して書いてあります。
よかったら併せて読んでくださいね。

終わりに

色々と抜けてるところがありそうですが、流れとしてはこんな感じになります。
自分もプログラミングが得意なわけではなく噛み砕いて理解している感じなので、間違っている部分があるかもしれません…間違っているところがあったらコメントで教えていただけると助かります。

しめじはややこしいですが分かれば誰でも作れるので是非挑戦してみてください。
ただ、この記事だけだと分かりづらいと思うので今度自分のしめじの固有アクションを個別に解説した記事でも書いてみようと思います。
もし何か質問があればそれもコメントして頂ければお答えできるかもしれません。

以上、しめじの作成マニュアルでした。

いいなと思ったら応援しよう！