見出し画像

デスクトップマスコットしめじ(shimeji-ee)初心者向けテクニック集+サンプルコード

8bitcanvas

あけましておめでとうございます。
新年早々noteを書いている8bitです。

今回はしめじの作者がもっと増えてほしいという気持ちから、前回の作成マニュアルよりだいぶ易しめのテクニック集を書いてみようと思います。
それこそ、「プログラムは全くわからない！でも、テキストファイルの編集くらいだったらできるかも…」くらいの初心者向け。
ついでに簡単サンプルコードもつけちゃうぞ！
慣れてる人にはあまり役に立たないかもしれませんが…


事前準備

はじめに、shimeji-eeで改造をするにあたってしなくてはいけないことがあります。
shimeji-eeでは、画像だけ改造しているしめじを使う場合、画像フォルダをimgフォルダに突っ込めばOK、という話を、shimeji-eeの覚書の記事でしたと思います。
つまり、imgにフォルダだけ突っ込んでいる状態では、編集するためのプログラムファイルが無い状態なのです。

しかし安心してください。そのプログラムファイルは簡単に用意できます。
shimejiの画像を入れたimgフォルダと同じフォルダの中に、「conf」フォルダがあります。自分の作ったimgフォルダに入れたしめじのフォルダと同じ名前のフォルダをそのconfフォルダの中に作ってください。
そして、confフォルダの中にあるactions.xmlとbehaviors.xmlをコピーして、さっき新しく作ったしめじのフォルダにペーストしましょう。(移動では無く、コピーして複製してくださいね)
そうすればもう準備は完了です。フォルダの中に複製したactions.xmlとbehaviors.xmlが、あなたのしめじのプログラムファイルになります。
もちろん複製したファイルなので、プログラムは最初から書いてあります。自分がすることは、これを改造するだけです。準備ができたら、actions.xmlをテキストエディタで開いてください。これからプログラムの中を見ていきますが、「検索」や「置換」、「指定行へのジャンプ」などを使えると効率が格段にアップするので、できれば自分の使っているテキストエディタでその辺のやり方を調べてみてください。いってみよー。

改造例

①アニメーションの枚数を増やしたい！

まず、「プログラムはわからないけど、しめじを改造したい人」が一番やりたいと思われるアニメーション枚数の改造から。
今回は歩くアニメの枚数を増やしてみましょう。
actions.xmlを開いて、<Action~から始まる行の、Name="Walk"となっているところを探してください。私の環境では17行付近にありました。

		<Action Name="Walk" Type="Move" BorderType="Floor">
			<Animation>
				<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-2,0" Duration="6" />
				<Pose Image="/shime2.png" ImageAnchor="64,128" Velocity="-2,0" Duration="6" />
				<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-2,0" Duration="6" />
				<Pose Image="/shime3.png" ImageAnchor="64,128" Velocity="-2,0" Duration="6" />
			</Animation>
		</Action>

これの、<Pose~から始まる部分がアニメーション1枚です。
つまり、これをコピーして増やせばアニメーションが増えるということ。
試しに、歩きアニメを6枚アニメにしてみましょう。

		<Action Name="Walk" Type="Move" BorderType="Floor">
			<Animation>
				<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-2,0" Duration="6" />
				<Pose Image="/shime2.png" ImageAnchor="64,128" Velocity="-2,0" Duration="6" />
				<Pose Image="/shime3.png" ImageAnchor="64,128" Velocity="-2,0" Duration="6" />
				<Pose Image="/shime3_2.png" ImageAnchor="64,128" Velocity="-2,0" Duration="6" />
				<Pose Image="/shime3_3.png" ImageAnchor="64,128" Velocity="-2,0" Duration="6" />
				<Pose Image="/shime3_4.png" ImageAnchor="64,128" Velocity="-2,0" Duration="6" />
			</Animation>
		</Action>

こんな感じになります。
<Pose~4つの後ろに新しく2行コピーして増やし、Image="~"の部分を変えました。このアニメは元々、1→2→1→3という順番のアニメになっていましたが、6枚にするために、画像の順番を変え、さらに増やした感じです。実際は自分でやりやすい順番やファイル名にすればOKです。例えば、順番を1→2→3→4→3→2にしてもいいですし、完全に自由です。画像はちゃんとImage="~"に書いたファイル名の画像を自分で描くなりして用意する必要がありますのであしからず。
とにかく、以上のコードだけで6枚アニメにすることができます。

②走る速度を変えたい！

さて、上記が理解できたら、今度は走るときの速度を変えてみましょう。
26行目付近にある、<Action~から始まるName="Run"を探します。

		<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>

これが走っているときのコードなのですが、
今度はこれのVelocity="~"とDuration="~"に注目です。

		<Action Name="Run" Type="Move" BorderType="Floor">
			<Animation>
				<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-5,0" Duration="1" />
				<Pose Image="/shime2.png" ImageAnchor="64,128" Velocity="-5,0" Duration="1" />
				<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-5,0" Duration="1" />
				<Pose Image="/shime3.png" ImageAnchor="64,128" Velocity="-5,0" Duration="1" />
			</Animation>
		</Action>

Velocity="~"の-4.0をすべて-5.0に、Duration="~"の2を1にしました。
これはどういうことかというと、Velocityは1回のアニメで移動する距離です。-4.0を-5.0にしたことにより、大きく移動するようになっています。そしてDuration="~"の2を1にしたのは、アニメーションの再生時間。おそらくですが、30fps(?)なので、0.06秒→0.03秒になった…ということ…かな？(計算ができない)つまり早く走るようになったということです。どのくらいになったかというと…


…このくらい。(このGIFは10FPSなので実際の動きはもっとｶｻｶｻアニメしてます)デフォルトのしめじだとなんかちょっと早すぎて気持ち悪い気がしますが、設定と画像次第ではきっと素敵な走りアニメになることでしょう。

③応用編・猛ダッシュを作ろう！

今度は、元の行動を改造して複製し、新しく行動を追加してみようと思います。さっきの2つより少し難易度が上がりますが、サンプルコードをそのまま貼り付ればちゃんと動くはず。

		<Action Name="HighDash" Type="Move" BorderType="Floor">
			<Animation>
				<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-10,0" Duration="1" />
				<Pose Image="/shime2.png" ImageAnchor="64,128" Velocity="-10,0" Duration="1" />
				<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-10,0" Duration="1" />
				<Pose Image="/shime3.png" ImageAnchor="64,128" Velocity="-10,0" Duration="1" />
			</Animation>
		</Action>

↑のコードをactions.xml43行目付近(<!-- Sitting -->の上辺り)にコピーして貼り付けてみてください。

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

そして、↑のコードを一番下あたり725行目付近、</ActionList>の上に行を作って貼り付けてみてください。できたら保存して、今度はbehaviors.xmlを開きます。

<Behavior Name="HighDashAlongWorkAreaFloor" Frequency="100" />

そして、↑のコードを<Behavior Name="HighDashAlongWorkAreaFloor"~の下(80行目付近)に新しく行を作って貼り付けます。


actions.xml
actions.xml
behaviors.xml

画面は使用しているテキストエディタによりますが、こんな感じになったかと思います。そうすれば完成です。しめじが場合により、猛ダッシュをしてデスクトップの床を走るようになります。(IEなどの上は猛ダッシュしません)


実際の様子

さて、それでは解説の時間です。理解したくない人は読まなくて大丈夫です。まずひとつ目のコード。これは②のときの応用で、actions.xml35行目付近のこちらを改造したもの。

		<Action Name="Dash" Type="Move" BorderType="Floor">
			<Animation>
				<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-8,0" Duration="2" />
				<Pose Image="/shime2.png" ImageAnchor="64,128" Velocity="-8,0" Duration="2" />
				<Pose Image="/shime1.png" ImageAnchor="64,128" Velocity="-8,0" Duration="2" />
				<Pose Image="/shime3.png" ImageAnchor="64,128" Velocity="-8,0" Duration="2" />
			</Animation>
		</Action>

これはダッシュ(走るよりさらに速い)時の行動なのですが、
こちらのVelotcityとDurationの値を変更して速度を上げ、Name="~"をHighDashに変えて新しい行動名をつけました。(1つ目のコードと照らし合わせて確認してください)

そして、2つ目のコード。
これはactions.xml384行目付近のこちらを改造したもの。

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

これは元々、Runという名前の行動を呼び出し、Windowsの床を走って移動させるという物です。
それをコピーし、<Action~のName="~"をHighDashAlongWorkAreaFloorに変え、
<ActionReference~のName="~"をHighDashに変え、1つ目のコードで作ったHighDashという行動を呼び出しています。(2つ目のコードと照らし合わせて確認してください)

次は3つ目のコード。今回はbehaviors.xml80行目付近のこちらを改造したもの。

<Behavior Name="RunAlongWorkAreaFloor" Frequency="100" />

これに関しては、RunAlongWorkAreaFloorをHighDashAlongWorkAreaFloorに変えただけです。
(Hidden="true"が消されているのは、テスト時にshimeji-eeのGUIで直接行動を再生できるようにするためなので、別に消しても消さなくても良い。実際のしめじで動かしてテストしたい人は、消しちゃってください)
2つ目のコードで<Action Name="HighDashAlongWorkAreaFloor"~と書きましたが、その時作った命令「HighDashAlongWorkAreaFloor」を呼び出しています。

しめじが動く流れとしては…
①Windowsの床に居るとき、一定の確率でbehaviors.xmlのHighDashAlongWorkAreaFloorが呼び出される
②actions.xmlのHighDashAlongWorkAreaFloorが、HighDashを呼び出し、ダッシュアニメを再生し移動させる

…みたいな感じです。こんな感じで、既存の行動をコピー・複製して、新しい行動を増やしていくことができます。

まとめ

そんな感じで、しめじの改造に関するテクニックとサンプルを書いてみました。
言いたいこととしては…
①<Pose~の数を増やせば、アニメーションの枚数が増やせる。もちろん、減らしたらアニメーション枚数を減らせる
②<Pose~の中身のImage=""で使う画像ファイル名を変えられる
③VelocityやDurationで移動距離、再生時間を変えられる。つまり、動きの速さを変えられる
④actions.xmlの中の<Action~の中身をコピーして増やして、その増やした行動をbehaviors.xmlで呼び出し先を書けば、行動が増やせる

ということです。
特に①～③は簡単なので、多分誰でもできるはず！
わからないことがあれば、コメントした頂いたらお答えできるかもしれません。
xmlの中身を理解して、皆さんも自分だけのしめじを作っちゃいましょう！


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