ページトップへ

子どものScratchでコスチュームを替えると位置がずれるときは?絵の基準点をそろえる直し方

コラム

子どもが描いたキャラクターをまばたきさせると、顔まで横に動いてしまう。歩くポーズに替えただけなのに、足が地面から浮いて見えることはありませんか。

コスチュームを切り替える瞬間だけ位置がずれるなら、各コスチュームの「中心の目印に対する絵の位置」を比べてみましょう。座標を補正する前に、顔や体の同じ場所を基準にして絵をそろえる方法があります。Scratch公式も、コスチュームの中心が位置合わせや回転の基準になることを説明しています。Scratch公式のコスチューム解説

この記事では、自分で描いたキャラクターの表情・ポーズを切り替えたときの位置ずれに絞って、確認と修正を進めます。

座標が同じでも、見える絵の位置はずれる

たとえば、「目を開けた顔」と「目を閉じた顔」を別々に描いたとします。開いた顔は編集画面の中心付近、閉じた顔は少し右側に描いてあったらどうでしょう。

スプライトの位置を動かしていなくても、切り替えた瞬間に顔が横へ跳ねたように見えます。確認したいのは、絵が上手かどうかではなく、中心の目印から見て、同じ体の部分が同じ位置にあるかです。

Scratchの「次のコスチュームにする」は、選んでいるスプライトのコスチュームを次のものに切り替えるブロックです。切り替えの仕組みと、絵の位置合わせを分けて考えると、直す場所を絞れます。Scratch公式「Next Costume」

なお、絵の外側を囲む四角形の中央と、そろえたい体の場所が一致するとは限りません。片手を大きく伸ばした絵と、両手を下ろした絵では、外形の中央が変わるためです。「枠の真ん中」だけを合わせず、何を動かさずに見せたいのかを決めます。

まず停止して、コスチュームだけを切り替える

最初から移動のプログラムを書き換えるのではなく、作品を停止した状態で比較することをおすすめします。以下は、位置ずれを見分けるための確認手順です。

  1. 修正前の作品を別名で保存するなど、戻せる状態を用意する。
  2. 赤い停止ボタンを押し、調べたいスプライトを選ぶ。
  3. スプライトの情報欄で、現在のx座標・y座標をメモする。
  4. 「コスチューム」タブで、ずれを比べたい絵を交互に選ぶ。
  5. ステージ上の顔・胴体・足元を見て、どこが動いたように見えるかを確かめる。

この比較では、ステージ上のキャラクターをドラッグしないようにします。絵を替える操作と、スプライトを移動する操作が混ざると、違いを追いにくくなるからです。

止めた状態でも同じずれが出るなら、まずコスチューム側を調整する候補になります。一方、止めた状態ではそろっていて、実行中だけずれる場合は、絵を動かす修正をいったん見送ります。今回の方法で直す対象かどうかを、ここで分けましょう。

コスチュームの選択や編集の基本操作は、Scratchチームの公式解説でも確認できます。

まばたきは顔、歩行は接地位置を基準にする

絵を動かす前に、そろえる場所を一つ選びます。次の表は、本記事で提案する位置合わせの考え方です。

作りたい動き そろえる基準の例 比較するときに見ること
まばたき・口の開閉 頭の輪郭や鼻の位置 目や口以外まで横に動いていないか
手を振る 胴体の同じ場所 腕と一緒に体全体が揺れていないか
その場で足踏みする 体の左右の基準と、地面に接する高さ 意図せず浮いたり沈んだりしないか

たとえば、まばたきなら「鼻の位置は固定して、まぶただけ変える」と決められます。頭の輪郭が同じなら、その輪郭を重ねるつもりで比べてもよいでしょう。

歩く動きでは、上げた足まで地面にそろえる必要はありません。見るのは、地面についている足の高さや、体を置きたい位置です。しゃがむ絵なら、頭が下がるのは意図した変化かもしれません。

大切なのは、すべてを動かさなくすることではなく、「動かしたい部分」と「その場に残したい部分」を分けること。コスチュームの中心を基準に位置を考える仕組みは、Scratch公式の中心点の説明が参考になります。

絵全体を選び、中心の目印との関係をそろえる

ここからは、Scratch 3のベクターモードで描いた絵を例にします。選択範囲の操作はモードによって異なるため、ビットマップの絵で操作が分からない場合は、無理に変換せず、元の絵を残して確認してください。

基準にするコスチュームを決める

まず、立ち姿など、位置を決めやすい絵を基準にします。編集画面の中心の目印に対して、鼻や胴体などの基準がどこにあるかを見ます。

必ず鼻を中心の目印に重ねなければならない、という意味ではありません。中心から少し上に鼻がある配置でも、ほかのコスチュームで同じ関係になれば比較できます。編集画面の見えている範囲の中央ではなく、中心を示す目印を頼りにしてください。

記事の途中で1分・5問

お子さまに合う学び方診断

正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。

ずれる絵を、部品ごとではなくまとめて動かす

矢印の選択ツールで、顔・体・持ち物など、移動させたい絵全体を囲んで選びます。そのうえで絵の内側をドラッグし、基準にしたコスチュームと位置関係をそろえます。選択枠の角を引っ張って大きさを変える操作とは分けましょう。

顔だけを動かして帽子を残すと、別のずれを作ってしまいます。選択に入れ忘れた部分がないかも確認します。矩形で囲んだ図形やグループを選ぶ動作は、Scratch公式のペイントエディター実装でも確認できます。

ステージで切り替え、見え方を確かめる

調整したら、元のコスチュームと交互に選びます。編集画面だけで判断せず、ステージ上で「顔が跳ねなくなったか」「足元が浮かなくなったか」を見ましょう。

一度に位置・大きさ・形を全部変える必要はありません。まず位置だけを調整し、違いを確認します。位置がそろった後にも体の大きさが違って見えるなら、それは次に検討する別の変更として残します。

追加する表情は、そろえた絵を複製して作る

これから表情を増やすなら、位置がそろったコスチュームを複製し、必要な部分だけ描き替える方法を試してみてください。

まばたきなら目、話す動きなら口を変更します。毎回キャラクター全体を描き直すよりも、「どこを変えたか」を追いやすい作り方です。Scratchチームも、コスチュームを複製して動かしたい部分を編集する手順を紹介しています。公式解説のコスチューム複製手順

すでに描いた絵を捨てる必要はありません。まず、よく使う表情の組み合わせだけをそろえる選択肢もあります。

確認結果は、次の短いメモにすると作業を再開しやすくなります。

  • 比べる絵:目を開けた顔/目を閉じた顔
  • 動かさない基準:鼻の位置
  • 見つけた違い:閉じた顔のほうが右に寄っている
  • 今回の変更:閉じた顔の絵全体を左へ移動
  • 確認結果:顔の横ずれはなくなった/まだ少し残る

これは記入例です。実際の作品では、「胴体」「接地している足」など、自分で選んだ基準に置き換えて使ってください。

よくある質問(FAQ)

x座標とy座標が同じなら、絵も同じ位置になるのでは?

コスチュームの中心に対して絵がどこに描かれているかも関係します。座標だけでなく、各コスチュームの中心の目印と、顔や体の位置関係を比べてください。Scratch公式の位置合わせの説明

すべての絵を、外枠の真ん中に合わせればよいですか?

本記事の方法では、外枠よりも体の同じ場所を優先します。片手を伸ばす動きなどは、外形が変わっても胴体をその場に残したい場合があるためです。作品で固定したい場所を選びましょう。

コスチュームごとに座標を変えて直してもよいですか?

演出として位置を変えたいなら、その設計も選択肢です。ただ、同じ場所でまばたきさせたいだけなら、まず絵の位置合わせから試すことをおすすめします。表情を増やすたびに座標の補正も追加する作り方を避けられます。

跳ねる動きが好きなら、ずれを残してもよいですか?

もちろんです。「顔が跳ねるのが面白い」という意図があれば、表現として残せます。今回そろえるのは、本人が意図していない移動です。正しさだけでなく、どんな動きに見せたいかで判断してください。

CotoMiraiで、作りたい動きを相談する

CotoMiraiでは、年齢・興味・理解度に合わせたプログラミングの個別指導を行っています。教室で学ぶことを検討する際は、「表情だけ替えたいのに顔が動く」など、実現したい動きを具体的に伝えてみてください。CotoMiraiの個別指導について

年中以上のお子さまは、公式案内から無料体験を申し込めます。家庭の作品を使った相談の可否や、希望する体験内容は、申し込み時にご確認ください。

CotoMiraiの無料体験・入会方法を見る

参考にした情報

関連する記事

読後に1分・5問

お子さまに合う学び方診断

正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。

お知らせ一覧へ

アクセス

A C C E S S