ScratchJrでキャラクターを斜めに動かす／背景を動かす

ScratchJrでキャラクターを斜めに動かす方法

ScratchJrは動作ブロックを使って、キャラクターを動かします。
しかし、動作ブロックには斜めに動かすブロックがありません。

ここで困って右へ動くブロックと下へ動くブロックを交互に使って動かしたりする人がいます。
これではうまく動きません。

キャラクターを斜めに動かす方法は以下です。

横へ動くブロックというのは以下の２つです。

上下へ動くブロックは以下の２つです

実際にプログラミングをしてキャラクターを斜めに動かそう

では、実際にプログラミングをして、キャラクターを斜めに動かしてみましょう。

まず、プロジェクトを作ってください。
プロジェクトの作成は以下の記事を参考にしてください。

それでは、最初に好きなキャラクターを選んでください。
私はティックを使います。

その次に、キャラクターを右に進めるスクリプトと、
キャラクターを下に進めるスクリプトを作って、同時に流しましょう。

並べるブロックは以下の順番です。

右へ進むブロックと下へ進むブロックの数字は10ぐらいにしておきましょう。

実際この数字はなんでも良いですが、あまりに小さいと進む距離が短くなります。
分かりやすく10が良いでしょう。

この２つのスクリプトの違いは、2番目のブロックですね。
どちらのスクリプトも緑の旗でスタートブロックで開始するので、同時に動くことになります。

実際の画面は次のようになります。

ScratchJrで背景を動かす方法

ゲームを作る上で背景をスクロールさせるのは必須だと思います。
しかし、ScratchJrは子供が使うプログラミング環境であるため、そこまで高度なことはできません。

私の感覚では、ScratchJrで背景をスクロールさせることは想定されていないように思います。
とはいえ、できないわけではありません。

やり方は以下です。

ここで注意点があります。

つまり、主人公がいるので、背景として使えるのは３つまでということになります。
しかし、主人公1人と背景３つのゲームでは、ただ前に進むだけのゲームになってしまいます。

これではつまらないですね。
そう考えると、背景として使えるのは、１つか２つでしょう。

実際にプログラミングをして背景を動かそう

今回は、飛行機が空を飛ぶプログラムにしたいと思います。
作成するプログラムは次のように動きます。

上記の動きにより、飛行機が空を飛んでるように見えるはずです。

では、実際に作っていきます。
プログラミングの過程は次のようになります。

背景を作る

最初に背景を作ります。
背景は空なので、ただの水色だけの背景で良いでしょう。

背景の変更画面からペイントエディタを起動します。

ペイントエディタで水色を選択して、塗りつぶしを選択します。
そして、キャンバスをタップしてすべて水色で塗りつぶします。

これでチェックマークで確定すると背景は水色になります。

背景のキャラクター（雲）を作る

次は、背景となるキャラクター（雲）を作ります。

キャラクターエリアの＋マークをタップしてから、ペイントエディタを起動します。
ペイントエディタで雲を書きます。

適当に書けばよいですが、楕円を３つぐらい組み合わせるとそれらしくなります。
その次に、３つの楕円を白で塗りつぶしましょう。

主役のキャラクターを選ぶ

次に主役のキャラクターを選びましょう。
主役は飛行機です。

キャラクターエリアの＋マークから、
「ぱいろっと」という名前の飛行機のキャラクターを選びましょう。

背景のキャラクターのスクリプトを書く

次は背景のキャラクターのスクリプトを書くのですが、
その前に次の2つのことをやりましょう。

おそらく「ぱいろっと」（飛行機）のキャラクターは大きすぎると思います。
小さくしましょう。

雲に関しては、みなさんの書いた大きさに依存するので、
自分で良い感じだと思う大きさにしてください。

キャラクターの大きさの変更の仕方は以下の記事を参考にしてください。

キャラクターの最初に位置は、以下のような感じが良いでしょう。

雲
横：20
縦：12

飛行機
横：5
縦：8

これは数字はグリッド表示にして確認してください。
以下の図のようなイメージになります。。

では、雲のスクリプトを書きましょう。
動きは以下です。

次のようにブロックを並べましょう。

最初は緑の旗でスタートブロックで開始します。

そして、左へ動くブロックで左に動き続けます。
このとき、数字は20にします。

ScratchJrのキャンバスは20マスなので、20にすると端から端まで動きます。
最後にこれを繰り返すために、ずっと繰り返すブロックを配置します。

次の図のようになります。

これで背景がスクロースしてるように見えるはずです。
雲をもう１つぐらい増やすと、もっとリアルに見えるかもしれないですね。

まとめ

本記事で学んだことをまとめます。