【オンライン講座＋作り方解説】スクラッチ（Scratch）でUFOビームゲームを作ろう！拡張機能「ペンブロック」とカスタムブロック（再描画せずに実行）の使い方！

1. Webブラウザーを立ち上げる。
2. スクラッチコミュニティサイトhttps://scratch.mit.edu/を開く。
3. スクラッチのアカウントを持っている人は、「ユーザ名」と「パスワード」を入力してサインインする。
   ※アカウントがなくてもスクラッチはできますが、スクラッチコミュニティサイトの右上にある「Scrachに参加しよう」ボタンをクリックしてアカウントをつくりましょう。

UFOビームゲーム用のテンプレート（scratch.mit.edu/projects/917195074/）を開く。
※本テンプレートには、UFOビームゲームで必要となるコスチューム、音などが用意されていますが、コードはありません。

「player」、「beam」、「ufo」、「platform」の4つのスプライトが、UFOビームゲーム用のテンプレートのテンプレートに用意されている。

スプライト名を「player」に変えたが、コスチュームはスクラッチキャットと同じ。

beamのコスチュームは幽霊の効果を100にしてプレイヤーからは見えなくするが、26 x 26ピクセルサイズの四角形のコスチュームを用意している。

ステージの背景は、スクラッチライブラリーから「Starts」を選んだ。

1. 旗をクリックしたら、playerの大きさを50%、回転方法を左右のみ、x座標を-190、y座標を-120にする初期設定を行う。
   ※player（ネコ）は、旗をクリックすると上図のように左下に瞬間移動する。
2. ずっと繰り返し、コスチュームを変えながら、マウスポインターの方向に向きを変え、player（ネコ）のx座標がマウスのx座標と同じになる。
   ※player（ネコ）のx座標とマウスのx座標がずっと同じになるので、マウス操作でplayer（ネコ）を左右に操作出来るようになる。

旗をクリックしたあとは、マウス操作でplayer（ネコ）を左右に動かせるようになる。

beamのスクリプトでは、拡張機能である「ペンブロック」を使うため、以下のSTEP.13 – STEP.16の手続きで「ペンブロック」を追加します。

画面左下の「拡張機能を追加する」ボタンをクリックして、「ペンブロック」を追加する。

ブロックパレットにペンブロックが追加される。

「ペンを下ろす」を実行すると、スプライトが動いた軌跡に沿って、ペンブロックで指定した色とのペンの太さで描画することができる。

「全部消す」を実行すると、ステージに描かれた描画が全部消える。

※スクラッチでペンブロックによるアニメーションを作る際には、「画面を再描画せずに実行する」のチェックボックスをオンにしたカスタムブロックと一緒に「全部消す」ブロックを使って、ステージの描画をリセットすることが多いです。

ペンの色、太さ、透明度なども変更できる。

1. 旗をクリックしたら、beamのx座標を-190、y座標を-120にして、向きを下向き（180度）にする。
2. 最背面に移動して、幽霊の効果を100にしてbeam自体のコスチュームはプレイヤーから見えなくする。
   ※幽霊の効果を100にしてbeamを見えなくするのではなく、「隠す」ブロックで見えなくするとbeam自体がステージに存在しないことになり、ペンによる描画が正しく実行されないので注意して下さい。
3. 「ペンを上げる」ブロックを実行してから、「全部消す」を実行してステージにある描画をすべて消す。
   ※「全部消す」ブロックを実行する前に「ペンを上げる」ブロックを実行しないと、旗をクリックする直前にいた場所から旗をクリックした後の場所まで直線の描画が残ってしまう場合があるので注意して下さい。
4. ペンの色を黄色にして、透明度を95%にして、ペンによる描画をビームのような見た目にする。

1. ufoスプライトに瞬間移動した後、ステージ上の描画を全て消す。
2. ペンの太さを「1」にしてから、ペンを下ろす。
3. platformスプライトまたは端に触れるまで、ペンの太さを「0.3」ずつ大きくしながら1ピクセルずつ下方向に移動する。
   ※STEP.19の初期設定でbeamスプライトは下方向（180度）を向いているので、「（）歩動かす」ブロックを実行するとbeamスプライトは下方向に移動します。また、beamスプライトは幽霊の効果を100にして見えなくなっているので、beamスプライトの動いた軌跡に沿ってペンによる描画だけが実行されます。ペンの太さが少しずつ大きくなるので、放射状にビームが出るようになります。
4. 処理3が終了したら、ペンを上げて描画をやめる。
   ※処理3が終わったときは、beamスプライトがplatformスプライトまたは端に触れている状態です。つまり、処理3によるビームはplatfromまたはステージの端まで照射されるようになります。

プログラミングエリアにあるカスタムブロックを右クリックする。

※カスタムブロックを作るときに、「画面を再描画せずに実行する」をオンする事もできますが、カスタムブロックを作った後でもオンに変更できます。

カスタムブロックエディターが開いたら、「画面を再描画せずに実行する」のチェックボックスにチェックを入れる。

「画面を再描画せずに実行する」がオフときは（STEP.22）、ビームがゆっくり下方向に照射されたが、「画面を再描画せずに実行する」をオンにすると上図のようにビームが一瞬で照射される。

1. STEP.9 – STEP.11で作ったplayerを左右に操作するスクリプトに、処理2の当たり判定スクリプトを追加する。
2. 当たり判定スクリプトでは、もしもbeamスプライトのペンによる描画の黄色に触れたら、メッセージ「capture」を送信し、このスクリプトを止める。
   ※もしも、player（ネコ）がbeamスプライトのペンによる描画（黄色）に触れたら、メッセージ「capture」を送信した後にこのスクリプトが止まるので、player（ネコ）はマウスを動かしても左右に動かなくなります。

1. メッセージ「capture」を受け取ったら、回転方法を自由に回転するように変更し、「Whoop」の音を鳴らす。
2. ずっと繰り返し、player（ネコ）のx座標をufoのx座標と同じして、player（ネコ）のy座標とufoのy座標の差を少しずつ変える。
   ※player（ネコ）がビームに触れる前のy座標は-120、ufoのy座標は常に100なので、（ufoのy座標 – playerのy座標）は220、「50」で割った値は「4.4」となり、player（ネコ）のy座標の変化値は「4.4」となります。次にブロックが実行される場合、player（ネコ）のy座標は-115.6となっているので、（ufoのy座標 – playerのy座標）は215.6、「50]で割った値は「4.3」となります。つまり、徐々に移動するスピードを緩やかにしながらplayer（ネコ）はufoに吸い込まれます。

※当たり判定の真偽条件は、＜beamに触れた＞真偽ブロックに変更することもできますが、当たり判定のトリガー位置が上図のように変わります。

1. 旗をクリックしたら、幽霊の効果を20、回転方法を左右のみ、向きを右向き（90度）にして、ufoのx座標を0、y座標を100にする。
2. ずっと2歩動き、もしもステージの端についたら跳ね返る。
   ※「（）歩動かす」ブロックはスプライトの向いている方向に動くので、処理1で右（90度）を向いているufoは右方向に移動し、ステージにぶつかったら「もし端に着いたら、跳ね返る」ブロックにより今度は左方向に動くようになります。

【完成版】UFOビームゲーム