今回は、スクラッチのペンを利用して、お絵描きアプリを作っていきます。このアプリでは、マウスのドラッグで線を自由に描くことができます。また色のボールのクリックで、線の色をその色に変えることができます。
ステップ1
必要な機能拡張やスプライトを準備します。
- スクラッチの画面で新しいプロジェクトを作成し、プロジェクト名を「お絵描きアプリ」にします。
- 画面左下の[機能拡張を追加]ボタンをクリックし、ペン機能拡張をプロジェクトに読み込みます。
- [スプライトリスト]にあるネコのスプライトを削除し、Pencilスプライトを読み込みます。
ステップ2
スプライトには、そのスプライトの位置を決める基準点があり、通常はセンターに設定されています。このアプリではPencilスプライトの先から線が描かれるようにしたいので、基準点をペンの先に移す必要があります。
- [スプライトリスト]のPencilスプライトをクリックし、コードエリアを表示します。
- [コスチューム]タブをクリックします。
- コスチューム全体を囲むようにドラッグします。するとセンター付近に基準点(+マーク)があるのが分かります。
- コスチューム全体を選択したまま全体を右上にドラッグし、基準点に鉛筆の先端を合わせます。これで鉛筆の先端がPencilスプライトの座標になります。
ステップ3
次は実際に線を描いていきましょう。お絵かきアプリは、次の３つの動作の組み合わせで成り立っています。
- マウスについていく：スプライトがマウスカーソルについていくようにするには、[ずっと]ブロックの中に[(マウスのポインター)へ行く]を入れます。[動き]-[(どこかの場所)へ行く]をドラッグ&ドロップし、下向き矢印をクリックして[マウスのポインター]を選びます。
- ドラッグ中、線を描く：[もし( )なら]ブロックで、マウスが押されている間はペンを下ろします。
- 放されたら止める：[でなければ]ブロックで、マウスが押されていなければペンを上げるようにします。
Pencilスプライトには下図のスクリプトを設定します。
プログラムを実行します。青い線で絵が描けます。
[ずっと]ブロックの中では、まず[(マウスのポインター)へ行く]ブロックを実行しています。これにより、このスプライトの位置がマウスのカーソルの先に移動し、スプライトはマウスに追従するようになります。
その状態の中で、マウスが押されたら、ペンを下ろします。これにより今のその位置に点が描かれます。マウスが押されたまま動かされる(つまりドラッグされる)と、描かれる点も移動し、連続した点、つまり線になります。
マウスが放されると、ペンを上げます。すると、マウス自体は動いていても線は描かれなくなります。
ステップ4
線を消す機能を追加しましょう。これは、スペースキーの押し下げで行うようにします。下図のスクリプトをステージに追加します(右下の[ステージ]をクリックして、左上の[コード]タブを開きます。)
ステップ5
最後に線の色を変える機能を追加します。
Ballスプライトをプロジェクトに3個追加し、コスチュームを変更して下図のステージのように配置します。
ボールがクリックされたら、線の色をそのボールの色にするにはメッセージが利用できます。
赤いボール(Ball2スプライト)がクリックされたら、redメッセージをすべてのスプライトにブロードキャストします。メッセージはPencilスプライトで受け取ります。redメッセージが届いたら、線の色を赤に変えます。
Pencilスプライトでは、[ずっと]ブロックの中でマウスが押されている間線の描画を行っているので、色の変更はリアルタイムで更新されます。
プログラム全体のスクリプトは下図のようになります。[( に変更)と(2)秒言う]は、その色のスプライトがクリックされたことを確認するための一時的なブロックです。
プログラムを実行してみましょう。ただし、通常の小さなステージの状態ではボールをクリックしたときボールが動くときがあるので、ステージ右上端の[全画面表示]ボタン
をクリックして、スクラッチの[発表モード]で実行します。[発表モード]ではスプライトが動かないので、問題なく動作します。
このプログラムのファイルはこのリンクからダウンロードできます。
