| この記事の要点 |
|
スプライトとは
Scratch では画面上で動くキャラクター・もの・図形のことをスプライト (Sprite) と呼びます。Scratch の作品は 1 つ以上のスプライトと背景でできています。
新しいスプライトを追加するボタンは、画面右下のネコのマーク (スプライトを選ぶ) です。マウスを乗せるとメニューが開きます。
5 つの追加方法
| アイコン | 方法 | こんなときに |
|---|---|---|
| 虫眼鏡 | スプライトを選ぶ (ライブラリ) | 既存の絵から選びたい |
| 絵筆 | 描く | オリジナルキャラを作りたい |
| サプライズマーク | サプライズ | ランダムに選びたい (お遊び) |
| アップロードマーク | スプライトをアップロード | 自分の画像ファイルを使いたい |
| カメラ | カメラ | (オフライン版) Webcam で撮影 |
方法1: ライブラリから選ぶ
- 右下のネコマークにマウスを合わせる
- 「スプライトを選ぶ」(虫眼鏡) をクリック
- カテゴリから絞り込む: 動物 / 人 / ファンタジー / 踊り / 街 / スポーツ / 食べ物 / 模様 / 文字
- 選びたいスプライトをクリック → 自動で追加
多くのライブラリスプライトにはコスチューム (見た目の種類) が複数入っており、アニメーションさせやすいです。
方法2: 自分で描く
- ネコマーク → 絵筆 「描く」をクリック
- ペイントエディタが開く
- ベクター (拡大しても綺麗) / ビットマップ (ピクセル) を選択
- 図形ツール / 筆 / 直線で描く
- 「コスチューム」タブで複数の絵を用意 → アニメーション
ベクターモードは拡大しても綺麗なので、初心者にはベクター推奨です。
方法3: アップロード
PC や iPad に保存した画像ファイル (PNG/SVG/JPG) を読み込みます。
- ネコマーク → アップロードマーク 「スプライトをアップロード」
- ファイル選択ダイアログから画像を選ぶ
- 追加された画像はコスチュームとして表示される
透過 PNG を使うと背景が透けて綺麗に見えます。JPG は背景が白で残ります。
| 形式 | 透過 | 拡大 | サイズ |
|---|---|---|---|
| SVG | ★ 可 | ★ 綺麗 | 小 |
| PNG | ★ 可 | ピクセルが目立つ | 中 |
| JPG | 不可 | ピクセルが目立つ | 小 |
| GIF | 可 | ピクセルが目立つ | 小 |
方法4: サプライズ
ネコマーク → サプライズマーク「サプライズ」を押すと、ライブラリからランダムに 1 つ追加されます。お試し感覚で使えます。
方法5: カメラ (オフライン版)
Scratch のオフライン版 (Scratch Desktop) では Webカメラから直接スプライトを撮影できます。子どもがじぶんの顔をスプライトにする、といった使い方ができます。
※ Web 版にこの機能はありません。
追加後の管理
| 操作 | 方法 |
|---|---|
| 名前を変える | スプライト一覧 → 名前欄をクリックして編集 |
| 大きさを変える | 「大きさ」欄に数値入力 (% 指定) |
| 位置を変える | x / y に数値入力、またはドラッグ |
| 削除 | スプライトを右クリック → 「削除」 |
| 複製 | 右クリック → 「複製」 |
| エクスポート | 右クリック → 「書き出し」(.sprite3 ファイル) |
| インポート | アップロードで .sprite3 を選択 |
使ってみる: ライブラリから動物を追加して動かす
1. ネコの隣に「Cat 2」を追加 (ライブラリから動物カテゴリ)
2. Cat 2 を選び、コードエリアに以下を組む:
旗が押されたとき
ずっと
10 歩動かす
もし 端 にふれたら、跳ね返る
3. 旗を押すと Cat 2 が左右に動き続ける
応用: コスチュームでアニメーション
追加したスプライトにコスチューム (見た目の差分) を複数登録すれば、切り替えるだけでパラパラ漫画のように動かせます。
[手順]
1. スプライト一覧から対象スプライトを選択
2. 上のタブから「コスチューム」をクリック
3. 既にあるコスチュームの右下に「+」ボタン
- 選ぶ / 描く / アップロード / カメラ (オフライン版) / サプライズ
4. 同じキャラの違う表情・違うポーズを 2〜4 枚作る
[アニメコード例]
旗が押されたとき
ずっと
次のコスチュームにする
0.2 秒待つ
スプライト名を日本語にしておくコツ
追加直後のスプライトは「Sprite1」「Cat 2」のような英語名です。コードが増えてくると名前が読みづらいとミスの原因になります。早めに日本語の役割名 (例: 「ねこ」「ボール」「ゴール」) に変えておくのがおすすめです。
| NG な名前 | OK な名前 |
|---|---|
| Sprite1 | 主人公 |
| Sprite2 | てき |
| Sprite3 | ゴール |
| Cat 2 | 白ねこ |
背景 (ステージ) との違い
スプライトはキャラクターですが、画面の下地となる背景はステージ側で追加します。右下のスプライト追加ボタンの隣にステージ用の追加ボタンがあり、こちらも同じ 5 方法で背景画像を増やせます。
| 追加先 | 用途 |
|---|---|
| スプライト | キャラ / 弾 / アイテムなど動くもの |
| 背景 (ステージ) | 場面の下地 (動かない) |
FAQ
Q: スプライトはいくつまで増やせる?
A: 公式の上限は明示されていませんが、ブラウザ性能が落ちるので数十個までが目安です。100 を超えると保存や読込が重くなります。
Q: アップロードしたら画像がぼやける
A: ビットマップ画像を拡大したときによく起きます。ベクター (SVG) を作って取り込むと改善します。Inkscape などの無料ソフトで PNG → SVG に変換する方法もあります。
Q: 他の作品で作ったスプライトを使いたい
A: スプライトを右クリック →「書き出し」で .sprite3 ファイルに保存し、別作品で「スプライトをアップロード」から選びます。コードもコスチュームも音も一緒に持ち運べます。
Q: 追加したスプライトが見えない
A: ステージ外に配置されている可能性。スプライト一覧で「表示」アイコン (目玉) が ON か、x / y 座標が画面内 (-240〜240, -180〜180) かを確認してください。
子ページはありません
- 追加方法(ついかほうほう)
- 削除方法(さくじょほうほう)
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript で base URL を取得する方法|window.location.origin
- 4 YouTube Data API v3 エラー一覧|403・400・404 の原因と対処
- 5 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 6 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 7 Spring Frameworkのアノテーション一覧
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- プロジェクトをTomcatプロジェクトとして認識させる方法 2026-10-07 22:32:50
- MySQLの1366 Incorrect string value|Laravelの文字コード・絵文字エラー 2026-10-07 21:54:03
- curlの証明書ホスト名不一致|旧エラー51・現行60の確認と対処 2026-10-07 21:54:03
- LaravelのMassAssignmentException|fillableの原因と安全な対処 2026-10-07 21:54:03
- Eclipse で Tomcat の起動ログがコンソールに出ない時の確認手順 2026-10-07 21:54:02
- MySQLにおける中央値(Median)の導き方(バージョン8未満) 2026-10-07 13:49:45
- getInputForward 2026-10-07 13:41:15
- JSONから配列に変換 2026-10-07 13:41:15
- ビューから値をモデルに格納しコントローラーで受け取る方法 2026-10-07 13:23:41
- Laravelのテーブル作成と定義変更|マイグレーション・up/down・注意点 2026-10-07 13:23:41
- NumPy 配列に要素を追加する方法 (append / concatenate) 2026-10-07 13:23:41
- MariaDB・MySQLで現在日時を取得する方法|NOW・タイムゾーン・保存型 2026-10-07 13:13:36
- 【django】テンプレートで定数を使用する方法 2026-10-07 13:10:15
- Spring BootにおけるApplication.propertiesの環境依存設定の分割方法 2026-10-07 12:09:35
- Not supported for DML operations【Springエラー】 2026-10-07 11:09:38