Scratch(スクラッチ):ミニゲーム「ネコどーこだ」を作ろう!

伊東 けいこ

今回作るのは「変数」と「乱数」を使ってネコを探すミニゲームです。何もない画面のどこかにネコが潜んでいて、クリックすると姿を現します。

Scratch(スクラッチ):ネコどーこだ
隠れたネコを探そう

目次

【1】背景を用意しよう

まずは背景を用意しましょう。今回は一面同じ色、模様なしの背景が必要です。「描く」ボタンを押すと背景を自分で作成できますので、好きな色の四角形を置いて簡単な背景を作ります。

背景の描きかたについて詳しくはスプライトを描く方法を参考にしてください。

背景を描く

【2】ネコのスプライトを用意しよう

まずはネコのスプライトを用意しましょう。ネコは画面に最初からいるネコを使います。名前を「スプライト1」から「ネコ」に変えておきましょう。ネコには最初コスチュームが2つありますが、「コスチューム2」は使わないので削除します。残っている「コスチューム1」の名前を「普通のネコ」に変えます。

ネコのスプライトを用意する

このスプライトはネコでなくても何でもよいです。忍者などに変えるのも面白いですね。スプライトを描く方法について、詳しくはこちらをご参照ください。

Scratch(スクラッチ)でオリジナルのスプライトを作りたい:ペイントエディタの使い方

【3】隠れたネコのコスチュームを用意しよう

隠れている状態のネコのコスチュームを用意します。ネコを背景と同じ色にすることによって、ネコがどこにいるのかわからないようにします。背景に紛れたネコをクリックするとコスチュームが変わって、ネコが姿を現す仕組みです。

まずは「普通のネコ」をコピーして、見た目が同じ新しいコスチュームを作ります。
コスチュームを右クリックすると「複製」メニューが現れるのでクリックしてコピーすることができます。新しいコスチュームの名前を「隠れたネコ」に変えます。

コスチューム「隠れたネコ」を編集します。編集画面にいるネコ全体を選択ツールで選択します。この時にネコを動かさないように気をつけましょう。「普通のネコ」と「隠れたネコ」のコスチュームの位置や大きさがずれると背景から現れた時にネコが動いてしまいます。

コスチュームを編集

複数の色の要素がまとめて選択されているのですが、この状態で色を変更すると選択されている全ての要素が同じ色に変わります。

コスチュームの色を変更

ネコ全体を背景と同じ色にしたいので、色の詳細を調べるために、一度背景の編集画面を開きましょう。色、鮮やかさ、明るさの数値を合わせることで同じ色を設定することができます。

背景の色をチェック

隠れたネコのスプライトに戻って塗りつぶしのカラーを背景と同じ色に設定します。

ネコを青くぬりつぶす

ネコの大部分は背景と同じ色になりましたが、黒い枠線が残ってしまっています。この枠線も背景と同じ色に変えましょう。再びネコ全体を選択し、枠線の色を背景と同じ色に変更します。変えたい色が編集画面内にある時は、色を選択できるスポイトが便利です。

スポイトで色を選択

これでネコが隠れた状態のコスチューム「隠れたネコ」ができました。

【4】変数「ネコの場所 x」と「ネコの場所 y」を用意しよう

「ネコ」の位置を指定するために、x座標(横方向の位置)とy座標(縦方向の位置)を示す2点の変数を用意します。
変数ブロックの[変数を作る]をクリックして「ネコの場所 x」という名前の変数を作ります。

新しい変数を用意する

作成した「ネコの場所 x」の変数がブロックパレットに表示されて使えるようになります。
それから同様に「ネコの場所 y」という変数を作成します。

【5】「ネコ」のプログラム

ネコのスプライトと変数ができたのでネコのプログラムを作ります。
まずは初期設定です。[緑の旗が押されたとき] ブロックに[大きさ]を指定するブロックをつなげます。最初隠れた状態にするためコスチュームを「隠れたネコ」にします。

初期設定のブロックをおく

予測できない場所にネコを置きたいため、先程作った2つの変数「ネコの場所 x」「ネコの場所 y」がランダムな値になるように「乱数」ブロックを使って設定します。

[ネコの場所xを(−230から230までの乱数)にする] [ネコの場所 yを(−170から170までの乱数)にする]

ブロックを追加します。

位置を示す変数に乱数を入れる

ネコの位置を先程設定した「ネコの場所x」「ネコの場所y」に設定するブロックをつなげます。

位置を示す変数を使って位置を指定する

ネコの初期設定ができました。今度は背景にまぎれているネコをクリックすると姿が現れるプログラムを作ります。

スプライトを押した時のプログラム
[このスプライトが押された時] ブロックに

[コスチュームを普通のネコにする] [見つかっちゃった!と言う]

ブロックを追加します。これで隠れたネコをクリックすると姿を現すプログラムができました。

【6】タイトルを作って表示させよう

このままでは緑の旗を押しても変化がないので、遊び方がわかるようにタイトルを追加しましょう。タイトルのスプライトを作成します。
スプライトを「描く」ボタンを押して、新しいスプライトを作ります。

タイトル用のスプライトを作る

編集画面の中に文字ツールでタイトルを描きます。文字の大きさを変更したい時は一度文字を書いてから、選択ツールで文字を選択して拡大縮小します。

文字を編集

完成したタイトルのスプライトを選択してプログラムを作ります。

タイトルのプログラム
[緑の旗が押された時] ブロックに、[最前面へ移動する] ブロックをつなげます。ネコよりも前面に表示させるためです。大きさ、位置を指定するブロックの後に、1秒たってからタイトルをふわっと消すためのプログラムを続けます。

これで全体のプログラムができました。

全体のプログラム

できあがった作品はこちらです。

【7】おまけの応用編:森のネコどーこだ

今回は背景と同じ色にすることでネコを隠す方法を使いましたが、他の物でネコを隠してしまうという方法もあります。「隠れたネコ」のコスチュームを木にして、沢山の木がある森に紛れ込ませたサンプルを作ってみました。他の森の木はクローンを使って配置しています。ぜひ参考にしてみてください。

【8】今回のまとめ

今回の作品はプログラム部分も短くスプライト数も少ないため、ぜひ挑戦してみてください。シンプルですが「何がどこに出てくるかわからない」様々なシチュエーションに応用できるので、工夫して楽しい作品を作ってみてください。

Scratchの使い方や作品アイディアを集めた特集ページです!

伊東 けいこ
Web制作者&ライター。2017年よりオランダ在住。 サイト構築の傍らオランダにおける教育&テクノロジー、社会&テクノロジー周辺を追っています。 https://chari-kamo.com

コメント

コメントを書く