Tweet

マウスだけでもプログラミングできる！（終）
- GUIベースの環境でプログラミングを始めよう -

ITちゃんのゲームをScratchで作り
Web上で共有しよう

「枕投げ」ゲームを作りJavaアプレットとして書き出してコミュニティサイトで共有させよう。フィジカルコンピューティングへの広がりも

「ITちゃん」の「枕投げゲーム」を動かしてみよう

　第1回の「非プログラマのためのプログラミング講座」と　前回の「Scratchプログラミングの二歩目、自由な動きを付ける」で、GUI（グラフィカル・ユーザーインターフェイス）とマウスだけでプログラミングができるソフトウェア「Scratch」の基礎と、さまざまな構文や変数の使い方、さらにはマウスやキーボードを用いたユーザーとの対話の手法などを扱いました。

　最終回の今回は、これまでの内容を基に、簡単なゲームを実際に作り、Web上に共有してみましょう。以下では、ランダムで飛んでくる枕をキーボードの［↓］キーでかわす、シンプルな「枕投げゲーム」を実際にプレイできます（右上の赤丸●ボタンで停止し、緑色の旗■ボタンでスタートします）。

オリジナル画像を取り込んでみよう

　いままでは、スプライトの見た目はScratchのツールに付属するネコの画像でした。Scratchで使う画像は、ほかの画像に自由に取り換えることができるので、オリジナルの画像を取り込んで使用してみます。今回の出演も、「ねとらぼ」のアイコンでもおなじみの「ITちゃん」です。

□ Scratchの「コスチューム」って？

　Scratchでは、スプライトの「見た目」を「コスチューム」と呼びます。スプライトは、複数のコスチュームを持ち、どのコスチュームを表示するかを切り替えることができます。例えば、1人のキャラクターの表情を喜怒哀楽で切り替えたり、上下左右を向いた画像をそれぞれ用意して歩かせることができます。

　まずは、スプラッシュ一覧から「スプラッシュ1」をクリックし、選択された状態にします。

　真ん中のカラムの［コスチューム］タブを選ぶことで、コスチュームを編集できます。

□ コスチュームの画像を編集するには

　コスチュームの画像を編集する方法は、以下の3通りがあります。

1. ［ペイント］
   簡単なペイントソフトが起動し、その場で絵を描いてコスチュームとして使用
2. ［読み込み］
   ハードディスクに保存されている画像ファイルを取り込んで、コスチュームとして使用
3. ［カメラ］
   デジタルカメラやWebカメラで撮影した画像を、コスチュームとして使用

　［読み込み］をクリックして、ITちゃんが踊っている画像3種類（左、中央、右）をそれぞれ取り込みます（例に使用した画像は、本記事の最後でまとめてダウンロードできます）。

　保存したフォルダを開き、画像を選んでください。

　すると、コスチュームが3種類取り込まれます。

□ コスチュームを取り扱うブロック

　このコスチュームを「左→中央→右→中央→左→中央→右→中央……」と切り替え続けることによって、ITちゃんを踊らせてみます。コスチュームの切り替えは、［見た目］カテゴリにあるブロック群で行うことができます。

　コスチュームを取り扱うブロックは、下記の3つです。

1. ［コスチュームを___にする］
   指定したコスチュームに変更
2. ［次のコスチュームにする］
   上から順番に、次のコスチュームに変更
3. ［コスチュームの番号］
   ［演算］［調べる］に属するブロックに、現在のコスチュームの番号を渡す

　コスチュームの「番号」というのは、上から順に番号が振られていく数字のことです。

1-2-3-4

INDEX
マウスだけでもプログラミングできる！（終） ITちゃんのゲームをScratchで作りWeb上で共有しよう
	Page1 「ITちゃん」の「枕投げゲーム」を動かしてみよう オリジナル画像を取り込んでみよう
	Page2 アニメーションを付けてみよう キーボード操作で“アニメ”を“ゲーム”にする
	Page3 背景と音を付けて、さらにゲームっぽくする 枕が“当たる”と「ぽよん」と音が鳴る
	Page4 ScratchをJavaアプレットにしてWebで共有 Scratchで始める「フィジカルコンピューティング」 非プログラマでもプログラミングが必要なときに備えて 【おまけ】ITちゃん画像ダウンロード

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード