Scratchでアニメーション付[つ]きアクションを作ろう

• 解説[かいせつ]動画
• 素材[そざい]を用意しよう
• 定義[ていぎ]ブロックでアニメーションを作ろう
• 当たり判定[はんてい]を作ろう
• さいごに

解説[かいせつ]動画

解説[かいせつ]動画を用意しました。
読むより見る方がわかりやすいかも？

素材[そざい]を用意しよう

素材[そざい]を作るのはめんどうな人は

素材[そざい]用意しました
ゲンシのジン-リミックス用-

CC0で使えるフリー素材[そざい]

絵が描[えが]けなくても大丈夫[だいじょうぶ]！CC0の誰[だれ]でもどこでも使える素材[そざい]があります。
CC0とはカンタンにいうと著作権[ちょさくけん]がないという意味です
superpowers-asset-packs



このGitHubのページから
「download（ダウンロード）」とかかれたボタンを押[お]すと素材[そざい]をダウンロードできます



ZIPを開くと色んな素材[そざい]の入ったフォルダが入っています。
今回は「prehistoric-platformer」を使いたいので
その名前のフォルダを開きます。

素材[そざい]をScratchで使える形にしよう

「Charactor」→「Playable」のフォルダの中に、色んなキャラの絵が入っています。



ただ、1枚[まい]に色んな絵が入っているので
このままではScratchで使えませんね。
この画像[がぞう]を分割[ぶんかつ]しましょう。

画像[がぞう]を分割[ぶんかつ]する方法[ほうほう]は、この記事でも説明[せつめい]しましたが
RPGのキャラをプロジェクトに追加[ついか]しよう

今回はフリーソフトを使った分割[ぶんかつ]の方法[ほうほう]を紹介[しょうかい]します。
インストールの手間はありますが
こちらのほうが操作[そうさ]としてはカンタンで高機能[こうきのう]です。

PL_ImageConstructor

というソフトで

１：分割[ぶんかつ]のタブを選[えら]ぶ
２：ファイルをドラッグ&ドロップ
３：分割[ぶんかつ]数をえらぶ（今回はヨコ６・タテ７）
４：分割[ぶんかつ]開始ボタン


これだけで画像[がぞう]を分割[ぶんかつ]することができます。

背景[はいけい]を作るには？

背景[はいけい]は「background-elements」フォルダに入っています。
ステージ用のマップチップもここに入っています。

背景[はいけい]は800*600なのでそのまま取[と]り込[こ]んでも同じ比率[ひりつ]になりますが
マップチップはこのままではつかえません。

自分でマップを作りたい時は
「Tiled Map Editor」などを使ってマップチップを並[なら]べましょう。

Tiledの使い方はこのサイトがさんこうになります。
タイルセット画像[がぞう]などを簡単[かんたん]に並[なら]び替[か]える方法[ほうほう]





このマップチップは16*16ですので
480*360に対応[たいおう]しようと思うと
ヨコ30マスタテ23マスになります。

マップを作ったあと
「ファイル」→「画像[がぞう]でエクスポート」すればOK！

あとは「MediBang Paint Pr」とか
無料[むりょう]のお絵描[えか]きソフトを使って、背景[はいけい]と組み合わせ
480×360のサイズで保存[ほぞん]すれば、scratchの背景[はいけい]として使うことができます。

めんどうな人は
ゲンシのジン-リミックス用-

をお使いください。

めんどうだと感じる人も、慣[な]れてくるとスイスイできるようになるので
がんばってみて下さい><

定義[ていぎ]ブロックでアニメーションを作ろう

アニメーションを作ろう

Scratchの定義[ていぎ]ブロックは、あまり使ったことがないかもしれませんが
なれるととっても便利[べんり]で面白[おもしろ]いです。

「その他[ほか]」カテゴリの中にある
「ブロックを作る」ボタンを押[お]してみましょう。



あたらしいブロックを作るウィンドウが開きます。
ここに、登録[とうろく]しておきたいプログラムの名前を入れましょう。

たとえば、攻撃[こうげき]アニメーションのプログラムなら
「こうげき」のような名前にします。
（テキトーにつけると分からなくなるのでちゅうい）

タイピングができない人は
キーボードで入力できるアプリがあります
ひらがな・カタカナにゅうりょくマシーン


待ちのアニメーションを作ってみましょう。


コスチュームの中に、アニメーションに使う絵を入れておきます。




たとえば「待ち」のアニメーションをさせる時は
こんなかんじで「待ち」の定義[ていぎ]ブロックを作っておき
アニメーションさせたいタイミングで
その定義[ていぎ]ブロックを呼[よ]び出[だ]します。


「待ち」は何もキーを押[お]されていない時にするアニメーションなので
「もし<<どれかのキーが押[お]された>ではない>なら」となります。

歩かせてみよう

今までは「右を向いて○歩」「左に向いて○歩」というプログラムでOKでしたが
これにアニメーションを追加[ついか]してみましょう。

アニメーションの中に「○秒待つ」のようなブロックが入っていると
動きのプログラムを動かす時に動きが止まってしまうので
「アニメーション」と「動き」は別々[べつべつ]のプログラムにします。




「コントロール」のほうは
「Dキーが押[お]されたらキャラを○歩動かす」

「アニメーション」のほうは
「Dキーが押[お]されたら歩くアニメーション」

というように、同じキーにちがう仕事を割[わ]り当[あ]てます。

それぞれのプログラムがゲーム中に同時に動くようになりますが
「コントロールは待ち時間なし」
「アニメーションのほうは〇秒待つ」のように
バラバラのタイミングで動くことができます。

色んなアニメーションをついかしよう

「動き」と「アニメーション」を分けたので
どんなアニメーションでも追加[ついか]していけますね


くるくるさせたり・・・


パンチさせたり



（見づらい時はクリックして拡大[かくだい]してね）


移動[いどう]に関係[かんけい]あるアニメーションのときは
「コントロール」のほうにも忘[わす]れずプログラムしましょう。

つぎに作るジャンプのプログラムの準備[じゅんび]も一緒[いっしょ]にしましょう。
（ｗキー（ジャンプキー）が押[お]されたときは、はなされるまでまつ）

当たり判定[はんてい]を作ろう

当たり判定[はんてい]用のコスチュームを作ろう

以前[いぜん]のアクションでは「クツ」をはかせて
「クツの色」と「地面の色」で当たり判定[はんてい]をしていましたが
今回のように色で当たり判定[はんてい]をできないキャラのときにこまります。

そこで、こんなコスチュームをひとつ作りましょう。


とりあえず、地面にあたる青色だけがあればOKです

そして、当たり判定[はんてい]の定義[ていぎ]ブロックを作ります。

このときかならず、オプションの
「再描画[さいびょうが]せずに実行する」にチェックを入れましょう。


（見づらい時はクリックして拡大[かくだい]してね）
定義[ていぎ]の「当たり判定[はんてい]」の中で、「当たり判定[はんてい]用のコスチューム」を使って
色の当たり判定[はんてい]をしています。



「再描画[さいびょうが]しない」にチェックを入れているので
当たり判定[はんてい]用のコスチュームはステージに表示[ひょうじ]されません。

また、当たり判定[はんてい]用のコスチュームは１つだけなので
アニメーションをさせて足の位置[いち]が違[ちが]っても
立っている場所を固定[こてい]することができます。

定義[ていぎ]ブロックに定義[ていぎ]ブロックを入れられる

さいごに「ダメージ」をうけたときのプログラム

このように「定義[ていぎ]ダメージ」のなかに「当たり判定[はんてい]」のブロックが入っています。


これはダメージを受けてとびあがったあと
地面に落ちるプログラムです。

定義[ていぎ]の中でも定義[ていぎ]を呼[よ]び出[だ]せるので
このような組み方ができるのです。

さいごに

他[ほか]のキャラにもアニメーションさせよう

主人公と同じ方法[ほうほう]で、他[ほか]のキャラも動かすことができます。
自分で動きをプログラムできるので
主人公よりもカンタンに作ることができると思います。

サンプルを見て、どんなキャラがどんなプログラムになっているか
見てみると参考[さんこう]になると思います。

アクションは、いろんな敵[てき]やステージ・ギミックがあるので
プログラムも大変[たいへん]だと思いますが
やっぱり人気のジャンルなので、皆[みんな]に楽しんでもらえると思いますよ

動画では作りながら解説[かいせつ]しているので
分からない部分があれば、見てみて下さいね。

アニメーションする本格[ほんかく]アクションを作ろう