「四角を二つ描きたいのに、間に一本の線がつながってしまう」。子どもがScratchのペンで模様や絵を作っているとき、図形そのものは描けているのに、移動の跡まで残って困ることがあります。
図形を描き終えたら「ペンを上げる」、次の描き始めへ移動してから「ペンを下ろす」という順番にします。ペンを下ろしたまま場所を変えると、その移動も線になります。この記事では、離れた図形の間に線を残さないための組み方に絞って紹介します。ペンの基本動作は、Scratch公式公開コードのペン機能でも確認できます。
余計な線は「場所を変える移動」で出ていないか
たとえば、左の四角を描いたあと、右の四角の描き始めまでスプライトを移す場面を考えます。作品を作る人にとっては「次の四角の準備」でも、ペンを下ろした状態なら、そこにも線が引かれます。
分けたいのは、移動の目的です。
- 描くための移動：四角の辺など、作品に線を残したい区間。
- 場所を変えるための移動：次の図形の描き始めへ向かう、線を残したくない区間。
「ペンを下ろす」は、その直後の移動一回だけに働く命令ではありません。「ペンを上げる」が実行されるまで、描く状態が続きます。まずは、不要な線の両端が「前の図形の終点」と「次の図形の始点」になっていないか見てみましょう。
もし一致していれば、その二点の間を移動するブロックの前が、ペンを上げる候補です。この動作の根拠は、公式公開コードのpenDown・penUpの説明と処理に示されています。
準備は「ペンを使うスプライト」を一つ決めることから
以下はScratchの「ペン」拡張機能を使う練習です。ScratchJrの操作説明ではありません。すでにペンのブロックが表示されている場合は、そのまま次へ進んでください。
ペンが見つからない場合は、作品の編集画面の左下にある拡張機能の追加から「ペン」を選びます。Scratch Foundationの公式の図形描画レッスン資料（英語PDF）でも、この追加方法が案内されています。
練習用には、線を描く役のスプライトを一つ選びましょう。最初から複数のスプライトで描く構成にせず、「このスプライトの移動と線」を対応させて確かめるためです。
元の作品を大きく組み替えたくない場合は、別の練習用プロジェクトで次の四角を作り、切り替える位置が分かってから元の作品に戻る方法もあります。
二つの四角を、間につながる線なしで描く手順
ここでは練習用の例として、左と右に離れた四角を描きます。以下の座標はこの記事の作例用に設定した値で、作品づくりの決まりではありません。
座標の数字にまだ慣れていない子は、まず数字をそのまま使い、ペンを切り替える位置だけに注目してください。読み上げるときは「左の四角を描く」「ペンを持ち上げて右へ行く」と、動きのまとまりで区切れます。
最初の四角を描く
選んだスプライトに、次の順でブロックをつなぎます。下の表示は、ブロックの並びを文字で表したものです。
緑の旗が押されたとき ペンを上げる 全部消す ペンの色を［見やすい色］にする ペンの太さを（3）にする x座標を（-120）、y座標を（0）にする ペンを下ろす x座標を（-60）、y座標を（0）にする x座標を（-60）、y座標を（60）にする x座標を（-120）、y座標を（60）にする x座標を（-120）、y座標を（0）にする ペンを上げる
この並びでは、最初に描き始めの場所へ移り、そのあとでペンを下ろしています。四角が閉じたら、最後の「ペンを上げる」までを一まとまりにしてください。
ペンを上げたまま右へ移り、次の四角を描く
続けて、次のブロックを下につなぎます。
x座標を（60）、y座標を（0）にする ペンを下ろす x座標を（120）、y座標を（0）にする x座標を（120）、y座標を（60）にする x座標を（60）、y座標を（60）にする x座標を（60）、y座標を（0）にする ペンを上げる
注目するのは、右の四角の始点へ移る最初のブロックです。その時点では、直前の「ペンを上げる」が効いている並びになっています。
見比べたい場合は、左の四角の直後にある「ペンを上げる」を一時的に外して実行し、元に戻して再実行してみてください。比較する場所は、四角の形ではなく二つの四角の間です。ほかの数字まで同時に変えず、切り替えの有無だけを比べる作例です。
自分の作品には「ペン切り替え表」を当てはめる
四角の例が分かったら、子どもが作っている窓、星、文字などに置き換えます。プログラムを書き直す前に、完成させたい絵を見ながら、線を残す区間と残さない区間を表にしてみましょう。
| 移動する区間 | 線を残す？ | 移動する前のペン |
|---|---|---|
| 最初の図形の描き始めへ行く | 残さない | 上げる |
| 図形の輪郭を描く | 残す | 下ろす |
| 次の図形の描き始めへ行く | 残さない | 上げる |
| 次の図形の輪郭を描く | 残す | 下ろす |
この表は、そのまま写すだけでなく、左の欄を「左の窓から右の窓へ」「名前の一文字目から二文字目へ」のように書き換えて使えます。
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。
一方、星を一筆書きしたいなら、途中の斜め線も必要な線です。図形の見た目だけで「ここは上げる」と決めず、その区間に線を残したいかで判断してください。
紙に指で道筋をなぞり、線を残したくない場所だけ指を浮かせてみるのも、この表を埋めるための試し方です。座標の説明を増やすより先に、どこでペンを持ち上げたいかを決めます。
直したのに線が残るときは、消す操作と描かない操作を分ける
「ペンを上げる」を追加しても、すでに描かれている線が消えるわけではありません。これから線を増やさないことと、画面にある線を消すことは別の操作です。
練習例では、実行の初めに「全部消す」を置き、前の描画を消してから描き直します。このブロックはペンの線とスタンプをまとめて消すもので、背景画像を消す操作ではありません。Scratch公式ヘルプの消去ブロックの説明でも、この違いが示されています。
確認するときは、まず前の線を消して、修正したプログラムを最初から実行してください。古い線を見て「まだ直っていない」と判断しないためです。
また、二つ目の図形が描き始められなくなったら、移動のあとに「ペンを下ろす」を戻したかを見ます。上げる位置だけでなく、下ろし直す位置も一組として確認しましょう。
図形を追加するたびに線が消えてしまう場合は、「全部消す」を各図形の手前にも置いていないか見直します。今回の練習では、消去は最初だけ。図形の間では、消すのではなくペンを上げて移動します。
よくある質問（FAQ）
一瞬で次の座標へ移動すれば、線は出ませんか？
移動を速くすることではなく、その移動の前にペンを上げることが必要です。公式公開コードでは、ペンを下ろしているスプライトの移動に合わせて線を描く処理になっています。速さを調整する前に、ペンの状態を確認してください。
「ペンを上げる」は、移動の前と後のどちらに置きますか？
線を残したくない移動の前です。移動したあとで上げても、その移動中に描いた線を取り消すことはできません。「上げる→場所を変える→下ろす→描く」という並びで見直しましょう。
余計な線だけを「全部消す」で消せますか？
「全部消す」は、不要な一本を選んで消すブロックではありません。必要なペンの線やスタンプも消えます。今回のような接続線は、描いたあとに消そうとするより、図形間の移動で描かないように組み直します。
三つ目以降の図形を追加するときも同じですか？
離れた図形を描くなら、同じ区切りを追加できます。先ほどの表に新しい図形までの移動を一行加え、線を残すかどうかを決めてください。前の図形とつなげたいデザインなら、その区間では下ろしたままにします。
図形を描く楽しさを、次の作品づくりへ
二つの四角が分かれて描けたら、家の窓や、離れた花など、子どもが描きたいものに置き換えてみてください。次の課題は図形を難しくすることではなく、「どこをつなぎ、どこを離すか」を自分の絵で選ぶことです。
CotoMiraiでは、年齢・興味・理解度に合わせた個別指導で、プログラミングやロボットなどのものづくりに取り組めます。教室の方針はCotoMirai公式サイトで紹介しています。
「ペンで模様を描いてみたい」といった希望も、体験の申し込み時に伝えてみてください。この作例を体験で扱えるかは事前にご確認ください。無料体験は年中以上を対象として案内しており、年中未満はイベントの案内を確認できます。
参考にした情報
- Scratch Foundation公式公開コード：scratch-vm ペン拡張機能
- Scratch Foundation公式教材：Paper Planes, Turtle Graphics, and Computational Concepts
- Scratch公式ヘルプ：ペンの線とスタンプの消去
関連する記事
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。