記事をまとめたページはこちら。
Scratchはプログラム処理の中にペンという項目があったので使ってみました。
動きの確認のために、このような処理をネコに書いて見ます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhap0DsaMCIOTq2Lej49nScZtixQPhB1ldlBPLSGb2hyphenhyphenVO8MFyIVhWzmr6owdqK35bTxgT-gQQzxTDUuhWqHoEruoxlKoMWz1fSUPfoEm-k1VqeiNo4NEy_VnzQeJUFSCZxvBtfnCk5yM/s1600/1340.JPG)
実行すると、ネコが移動したあとに線が引かれました。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqDIcEg8F2cRWvccYzgbUYPZvwV4X-XUEXMAU4dXUC14xrBG8JVTO47zMkZarleU2PmrzcuzgwDV2i_cp9oZy-Cc0O_-e5QfFfiwxEyPyUeckWpM5U-2Ku0vdbKaqw-U0sImK6OJiGoE0/s280/1341.JPG)
どうやら「ペンを下ろすを」使うと、スプライトの後ろに線が引かれました。
これを利用してペイントツールを作ってみようと思います。
ペイントツールなので、マウスクリック時に線が引ければOKということにします。
また、ネコが表示されなくなるため、イベントのスタートを「旗がクリックされたとき」に変更しました。
0.目次
- ペンの使い方を確認する。
- マウスの動きに合わせて線を引く
- マウスが押されているときに線を引く
- 改良するには?
1.ペンの使い方を確認する。
動きの確認のために、このような処理をネコに書いて見ます。
実行すると、ネコが移動したあとに線が引かれました。
どうやら「ペンを下ろすを」使うと、スプライトの後ろに線が引かれました。
これを利用してペイントツールを作ってみようと思います。
ペイントツールなので、マウスクリック時に線が引ければOKということにします。
2.マウスの動きに合わせて線を引く
ネコのスプライトが表示されていると邪魔なので見た目の「隠す」でスプライトを非表示にします。また、ネコが表示されなくなるため、イベントのスタートを「旗がクリックされたとき」に変更しました。
最初のプログラムを改良して、スプライトをマウスポインタの位置へ移動させました。![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTUSCoCjy91zgOBDZ4mg6Fth5Ad5U3Gyw3HzvgB-v51UGuxYPMY2pLCCndR_95MEkwZKOYyJMGx5pOIpHorn9tmM1GuTi5Bo5jtJH3VHRHFdI-FRzfc9G1GdA8oDjpQLcAArs7zTEFj0/s1600/1343.JPG)
これで、マウスに追従して、線が引かれるようになりました。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoag5Fu-I3GiyQdcHPKWV3ODLgsQPRHicbYJmG1kkUaR3dVq96eBupnhY3LKWO47_vKrvUL3rueoTiaJJw6_2iEKdcG2WKNfh_glQbcXxQ1uNWP9CUt4vkIM5oZ0yqgWrSkCkh0gZ6Yms/s280/1344.JPG)
マウスの動きに合わせて線が引かれるようになりましたが、
いまの状態では、常に線が引かれっぱなしです。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilvGzP8pSDfwuiz0NZuNyQFvo8aE4_C4wTLmZTzAMyLlsrECBOLWG9Qq3lX901qLYHzzIUtpvC8caUyz5RiSmmrP9ecpbkDB3t9-ssrAJI6ZtacNzdIhtrEBUhusajSFw9AVQd2N9kR9M/s1600/1342.JPG)
これで動作しますが、旗をクリックしたときに書いた線が消えるように、処理の最初にペンの「消す」を追加します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjCKbJUwm0RNap3mA5MZOiiOdmQ8BZbE7U02G_p5E69b0oy3eyRHKthVU0BmGa2ccAlV182KQukPhKNjPffBcFobn88JVwy4dJ51p6-YyxzZdH7Cg5cCc-iVAJfQHMtRikD0KwhTEdPPY/s1600/1345.JPG)
これでペインタの完成です。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitwLCOQXmSIesa-Q_R-kJvsaYLv3NMeh_iN9Wxuu4oru9elGn3fIzh0WwPKUwDWmVattSsaTu-X_zZWVuTw-Qbw7ZW8iyjlN90_MR8e-j_6XVL3id76EVm4sitw5VoDV1-W9SeaHN7cgs/s280/WS000186.JPG)
少し難しいのは、消しゴムを作ることかな?どうやったら良いでしょうか??
(背景があると大変かも!!)
今回のサンプルも公開しました。
色の変更なども追加してあります。
サンプル008 ペイント
https://scratch.mit.edu/projects/208860277/
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigP9A13o7CFek53mSQjENgz5l-AViK_m9ESDbJgOuHNuz1RITA15Qs1eGu1zM_NSq_QDtEEEeznObapO8VhK8DoC-7W2K5fQcDsFkfREPt2xm1BwsMStYMOqdvhnogF9tBLWKp910hB2Q/s280/1355.JPG)
これで、マウスに追従して、線が引かれるようになりました。
マウスの動きに合わせて線が引かれるようになりましたが、
いまの状態では、常に線が引かれっぱなしです。
3.マウスが押されているときに線を引く
次に、お絵かき用のペイントのイメージに近づけるためにマウスが押されている間だけ線を引くように変更します。
制御の「もし~なら○○、でなければ~」を使って、条件として調べるの「マウスが押された」を設定します。
そして、中にペンの「ペンを下ろす」と「ペンを上げる」を追加しました。
これで動作しますが、旗をクリックしたときに書いた線が消えるように、処理の最初にペンの「消す」を追加します。
これでペインタの完成です。
4.改良するには?
解説はこれで終わりですがペイントツールとするなら、線を太くしたり、ペンの色を変更したりできたほうが良いですね。これらの機能はペンに含まれているので、簡単にプログラムを追加できるかと思います。少し難しいのは、消しゴムを作ることかな?どうやったら良いでしょうか??
(背景があると大変かも!!)
今回のサンプルも公開しました。
色の変更なども追加してあります。
サンプル008 ペイント
https://scratch.mit.edu/projects/208860277/