"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

Scratch(スクラッチ)(9)/ゲームなんかでよく見る「ふらふらした動き」をやってみる

f:id:arakan_no_boku:20200824233948p:plain

ゲームなんかでよくある「ふらふら動く」をやってみます。

Scratchの用語でわからないときは、以下を参照ください。

arakan-pgm-ai.hatenablog.com

目次

ふらふら動く・・は、三角関数を使う

 ゲームなんかでよくある上に行ったり、下に行ったりして、ふらふらとした動き。

これは、三角関数のSinとかCosとかを使って実現できます。

Scratch(スクラッチ)でも簡単にできます。

まず、例によってスプライトをGaboくんに変更します。

f:id:arakan_no_boku:20200827163912p:plain

初期状態にするスクリプト

それで、いつでも止められるように、グリーンフラッグを押したら初期状態に戻るようにしておきます。

f:id:arakan_no_boku:20200829003705p:plain

今回は左から右方向に動かすので、X座標の初期値は左端(-200)にしています。

あと、角度を表す変数を変数ブロックの「変数をつくる」で「角度」という名前で作っておいて、初期値「1」に戻すようにしています。

スプライト(画像)を動かすスクリプト

スプライト(画像)を動かすスクリプトは以下です。

f:id:arakan_no_boku:20200829004055p:plain

ここで三角関数(sin)を使います。

スプライト(画像)をクリックされたら、右方向に「1」ずつ進みながら、縦方向には「100×Sin(角度)」で計算したY座標に移動するようにします。

これを360回繰り返します。

f:id:arakan_no_boku:20200829004349p:plain

の部分の作り方だけ補足しておきます。

これは。

動きブロックのf:id:arakan_no_boku:20200829004448p:plain

演算ブロックのf:id:arakan_no_boku:20200829004545p:plainf:id:arakan_no_boku:20200829004627p:plain

の3つを使います。

f:id:arakan_no_boku:20200829004545p:plain

上記の左側に「100」を入力します。

f:id:arakan_no_boku:20200829004627p:plain

上記の左側には変数「角度」をドロップし、右側のプルダウンで選択肢から「Sin」を選びます。

あとは、100を入力した右側にSinを選んだブロックをドロップし、それをさらに。

f:id:arakan_no_boku:20200829004448p:plain

の「0」の部分にドロップしてやればできます。

ふらふら動くか確認してみる

動きを確認します。

下にプロジェクトを張り付けておきました。

クリックすると動かせるようになるので、Gaboくんをクリックします。

すると、Gaboくんがゆっくり右に移動しながら、上下します。

 繰り返すときは、グリーフラッグを押すと、初期状態にもどります。

 ペンを追加して軌道に線をひくスクリプト

上記にペンを付け加えて軌道を描いてみます。

拡張機能でペンを追加して。

f:id:arakan_no_boku:20200827233157p:plain

初期状態に戻すときに、描いたものを消すようにします。

f:id:arakan_no_boku:20200829105003p:plain

で。

スプライト(画像)を押したときにペンで軌跡を描くように変更です。

ちょっと、カーブがわかりやすいように、X座標の変更を「0.5」ずつにしてます。

f:id:arakan_no_boku:20200829105205p:plain

こうすると、動き終わりに以下のような軌跡が残ります。

f:id:arakan_no_boku:20200829105405p:plain

三角関数の種類を「cos(コサイン)」に変えてみる

ちなみに、Sinのところを「cos」(コサイン)に変えると、こんな感じ。

Sinカーブが左にちょっとずれてるだけで、波自体は同じです。

f:id:arakan_no_boku:20200829105551p:plain

三角関数の種類を「tan(タンジェント)」に変えてみる

ちなみに、tan(タンジェント)に変えると、こんな感じで全然違うカーブです

f:id:arakan_no_boku:20200829105742p:plain

動きの中にランダムな要素を加えてみる

ゲームとかだと、ふわふわ動いてるけど、たまにピュッとランダムに動いて弾を当てにくくしたりします。

せっかくなので、これも簡単にとりいれてみます。

ソースはこんな感じ。

f:id:arakan_no_boku:20200829112232p:plain

 ランダムとう変数を作って、それに「1~360」の間で乱数を発生させます。

f:id:arakan_no_boku:20200829112355p:plain

それが300より大きかったら、cos(コサイン)、以外ならsin(サイン)にします。

上でみたようにSinカーブとcosカーブは同じ角度の時の結果がずれているので、切り替わった瞬間、上下に動いて、ランダムさを生むという仕掛けです。

実行した軌跡を見ると、その感覚がよくわかります。

f:id:arakan_no_boku:20200829112716p:plain

これも実行できるようプロジェクトを貼り付けておきます。

最後にプロジェクトを公開しているURLをはっておきます。

https://scratch.mit.edu/projects/421083965

今回はこんなところで。

ではでは。