キャラクターのコスチュームを背景を変えてみよう
前回学んだことを活かして、キリンのキャラクターをキーボードの「矢印キー」を使って動かせるようにしましょう。今回はキリンを動かすときに、コスチュームを変更させて実際に歩いているようなアニメーションになるように工夫します。また背景を使うことで、本当に森にいるかのように見せる工夫もしてみましょう。
キリンを動かすプログラムを作ってみよう
それではさっそく「キリンのスプライト」を追加して、キリンを上下左右に動かすプログラムを作りたいと思います。
【ネコのスプライト】の右上にある「ごみ箱アイコン」をクリックします。
![](https://maru-note.com/wp-content/uploads/2021/09/10.png)
右下にある「スプライトを選ぶ」アイコンをクリックします。
![](https://maru-note.com/wp-content/uploads/2021/09/11.png)
スプライトの一覧が表示されるので「Giraffe(キリン)」を選択します。
![](https://maru-note.com/wp-content/uploads/2021/09/12-1024x677.png)
キリンのスプライトが追加されました。
![](https://maru-note.com/wp-content/uploads/2021/09/13.png)
前回学んだ「キャラクターを動かすプログラム」を追加します。
![](https://maru-note.com/wp-content/uploads/2021/09/14.png)
これでキリンを動かすプログラムが完成しました。
背景を変えてみましょう
キリンの背景が白なので、公園の背景に変更してみましょう。
背景を追加します。
「背景を選ぶ」をクリックします。
![](https://maru-note.com/wp-content/uploads/2021/09/15.png)
「Gardenrock」を選択します。
![](https://maru-note.com/wp-content/uploads/2021/09/16-1024x680.png)
背景を変えることができました。
![](https://maru-note.com/wp-content/uploads/2021/09/17.png)
アニメーションを使ってみよう
キリンを「矢印キー」で動かしたとき、アニメーションを使って歩いているようにしてみましょう。
今回は「コスチューム」を使います。
キリンを動かすプログラムすべてに【次のコスチュームにする】を追加しましょう。
![](https://maru-note.com/wp-content/uploads/2021/09/18.png)
これでキリンを動かしたときに歩いているようになりました。
実際に動かしてみましょう。
![](https://maru-note.com/wp-content/uploads/2021/09/19.png)
「矢印キー」を押すと、キリンの足が歩いているように動きましたね。
キリンを歩く方向に向かせてみよう
今のプログラムでは、キリンを左に動かしてもキリンはずっと右を向いたままです。
プログラムを追加してキリンの歩く方向にキリンの顔が向くようにしましょう。
【右向き矢印キーが押されたとき】プログラムの最後に【90度に向ける】を追加します。
![](https://maru-note.com/wp-content/uploads/2021/09/20.png)
【左向き矢印キーが押されたとき】プログラムの最後に【-90度に向ける】を追加します。
![](https://maru-note.com/wp-content/uploads/2021/09/21.png)
これでプログラムの完成です。動かしてみましょう。
右に動かすのは問題なし・・
![](https://maru-note.com/wp-content/uploads/2021/09/17-1.png)
左に動かしてみると・・あれっ?キリンが上下反対になってしまいました。
![](https://maru-note.com/wp-content/uploads/2021/09/22.png)
左に動いたときにキリンが上下反対になってしまいます。
プログラムを追加して、キリンが左向きに歩いたとき上下反対にならないようにしましょう。
回転方向を指定してみよう
![](https://maru-note.com/wp-content/uploads/2021/09/22.png)
キリンが左向きに歩いたとき、上下反対にならないようにしましょう。
プログラムを追加します。
【左向き矢印キーが押されたとき】プログラムの最後に【回転方法を左右のみにする】を追加します。
![](https://maru-note.com/wp-content/uploads/2021/09/23.png)
これでプログラムの完成です。キリンを動かしてみましょう。
![](https://maru-note.com/wp-content/uploads/2021/09/24.png)
キリンを左に動かしても・・
![](https://maru-note.com/wp-content/uploads/2021/09/25.png)
上下反転しなくなりました。
今回はキリンのスプライトを使いました。チャレンジできる人は、キリン以外のキャラクターを動かすプログラムも作ってみましょう。
コメント