連載インデックスへ
マウスだけでもプログラミングできる!マウスだけでもプログラミングできる!(終)
- GUIベースの環境でプログラミングを始めよう -

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

鳥人間 郷田まり子
2009/11/5

背景と音を付けて、さらにゲームっぽくする

 真っ白な背景では物足りないので、壁紙を入れます。「スプラッシュ」の見た目が「コスチューム」であるのに対し、「ステージ」の見た目は「背景」です。

 背景の画像を設定したり、特定のスプラッシュだけでなくアプリケーション全体に関する処理をする場合には、右下のスプラッシュ一覧の隣の「ステージ」のサムネイルをクリックします。中央が「ステージ編集モード」です。

 以下の図がステージ編集モードです。ここにも、スクリプト編集タブや、スプラッシュのコスチューム編集に似た背景の編集タブがあります。

 ここで[背景]タブを選択します(スプラッシュの編集をする場合は、画面右下のスプライト一覧でいつでも切り替えられます)。

 コスチュームの画像を挿入したときと同様に、壁紙となる画像を取り込みます。

 [背景]タブの右隣の[音]タブでは、背景と同じように音声を入れることができます。BGMを鳴らす場合は、ここで背景と同様に音声ファイルを挿入します。

 ステージに背景が張られると、以下のようになります。

枕が“当たる”と「ぽよん」と音が鳴る

 これまでは、スプライトを1つ動かしていただけでしたが、2つ以上のスプライトが互いに影響を及ぼし合うようなプログラムへと改変していきます。

 新しいスプライト「枕」を追加して、「枕投げ」をする簡単なゲームを作ってみます。たまに枕が飛んでくるので、先ほど作成した「キーボードの↓キーでしゃがむ」を使って回避し、当たると「ぽよん」と音が鳴るといったものです。

スプライトの追加

 まずは、「枕」のスプライトを作成します。「新しいスプライト」の右の3つのボタンの中央のフォルダのアイコンを押すと、画像ファイルを取り込んで直接スプライトを作成できます。

枕が“ときどき”やってくると“ドキドキ”

 次に、「時々、枕が画面を横切る」という処理を作成します。「枕」のスプラッシュを選択した状態で、下のように座標操作のブロックを入れながら処理を組み立てます。

 毎回同じタイミングで枕が飛んでくるのではつまらないので、少しランダム要素が入っています。「演算」の「...から...までの乱数」というブロックを活用します。乱数というのは、サイコロやルーレットのように、ランダムな値を出すものです。

 「[0.2から3までの乱数]秒待つ」という処理を加えることで、一度枕が飛び去ってから次に枕が飛んでくるまでの待ち時間がランダムになりました。0.2秒後にすぐ飛んでくることもあれば、2秒後に飛んでくることもあり、予測がつかなくなります。

枕が回転

 Scratchでは、いくつものブロック群を並列に実行できます。先ほどのブロック群に加え、下のように「0.05秒置きに、回転する」という処理を加えると、枕は回転しながら飛ぶようになります。

枕が“当たった”がどうか判定する

 衝突(当たり)判定の処理を作ります。再び、画面右下のスプラッシュ一覧から、スプラッシュ1のITちゃんをクリックし、スクリプトを編集します。「踊る/しゃがむ」を記述したブロック群とは別に、右の図のように組み立てます。

 「ずっと」ブロックで繰り返し処理をし、その中に「もし枕に触れたら」という条件分岐を加えます。これで、衝突判定を行い、衝突したときに特有のイベントを発生できます。

 Scratchは、透過画像の場合その輪郭を使って衝突判定を行ってくれるので、自力で座標計算をして衝突判定の処理を実装する必要はありません。

「ぽよん」という音を鳴らすには

 衝突したときには、効果音を鳴らし、吹き出しを出すことにします。「見た目」から「...と...秒いう」ブロックを入れて、「うわっ」という吹き出しを表示する処理を選びます。

 さらに「ぽよん」という音を鳴らしてみます。音は、Scratchのインストール時に付属している効果音群から「WaterDrop」という効果音を選びます。こうして登録した音は、「音」から「...の音を鳴らす」ブロックを選ぶことで、鳴らすことができるようになります。

ゲーム完成! そして、もっと面白くしてみよう

 これで、「枕投げ」ゲームができました。

 ここまで作れば、さらに「枕の飛ぶスピードがだんだん速くなる」「枕が右からも飛んでくる」「点数を計算する」といった新たな要素を加えることもいままでの応用で実現できるでしょう。

1-2-3-4

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

[an error occurred while processing this directive]
「デザインハック」コーナーへ



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間