まなゲーblog

こんにちは、まなゲー池田です。
「マウス操作で迷路ゲーム」の続きをやっていきます。

前回までの４回で、ひとまず迷路ゲームとしての形は整いました。今日はもうちょっと機能を加えて「おじゃまキャラ」を追加したいと思います。

「おじゃまキャラ」用のスプライトを作成する

Scratchにあらかじめ用意されている様々なスプライト用イメージの中から、今回はこの青いイヌ(Dog2)を選びました。

こいつに、下図のように、初期化と移動用のスクリプトを組み込んでいきます。

これで、初期位置から画面内を左右に行ったり来たりしてくれるはず、なんですが・・・左に移動するときに上下が逆さまになってしまいます・・・。これはちょっと気持ち悪い。

これは、向きを変える（回転）のルールが、そうなって欲しいものとズレているせいです。上下はそのままで左右だけ、向きを変えて欲しいのに、上下もさかさまになってしまうためにこんなおかしな感じになってしまいます。

「回転の種類」を設定してやる

「じゃまイヌ」スプライト(Dog2)の情報を開いて、「回転の種類」を変更してやりましょう。

デフォルト（初期状態）では回転になっているので、矢印のアイコンをクリックして左右反転に変更してあげます。

うまくいきました。これで逆さまのイヌが走ってくる不気味なゲームにならずに済みますね。

歩行アニメーションを作ってみる

ところで、今回選んだdog2は、最初から３つのコスチュームを含んでいて、これをプログラムで切り替えてやると、トコトコ歩く感じにアニメーションさせることができます。

１「dog2-a」と、2「dog2-b」を0.5秒ごとに切り替えるスクリプトを追加してやりましょう。具体的にはこんな感じになります。

dog2-cも面白い絵ですが、歩行アニメーション向きではなさそうなので今回は使わないことにします。

これで「じゃまイヌ」は完成です。中身のプログラムをまとめて載せておきますので参考にしてください。

「ネコさん」が「じゃまイヌ」にふれたらスタート位置へ戻る

おじゃまキャラの準備ができましたので、ネコさんの方のスクリプトにいくつかブロックを追加して「Dog2に触れたら、スタート位置に戻る」ようにします。

これで完成です。旗ボタンでゲームをスタート。じゃまイヌが邪魔すぎで、僕は結局クリアできませんでした；；初期設定（向きや場所）の他、移動速度なども調整して、難度調整をしてみてください。

追記：書きながら今気がつきましたが、このプログラムだとネコさんを移動させずにじっとしていたら、イヌにふれても平気ということにになっちゃいますね。うーん、赤で囲った部分を丸ごとちょっとだけ移動させればOKなんですが・・・、それは自分で試してみてください！

５回にわたってやってきました「マウス操作で迷路ゲーム」、今回でおしまいです。次は何にしようかな。シューティングかアクションか、その辺ですかねぇ。

ではまた！！

こんにちは、まなゲー池田です。
「マウス操作で迷路ゲーム」の続きをやっていきます。

第２回目では「荒ぶるネコさんを落ち着かせる」ところまでを、
第３回目では「迷路を作って自由に通れなくする」ところまでをやりました。

まずまず迷路ゲームっぽくなってきましたので、第４回目の今日は、ゴールまでの時間を図る機能を追加したいと思います。

ゴールを作る

ネコさんがそれにふれたら迷路をクリアしたことになる「ゴール」を作ります。
前回の迷路づくりと同じように、新しくスプライトを描きます。モードも前回同様「ベクターモード」で描いていきましょう。

画面右側のメニューから「文字」ツールを選択します。文字を書きたい場所をクリックすると、そこにテキストボックスが現れて文字を書けるようになります。（ただし、残念ながら使える文字は英数字だけです。かな文字や漢字は使えません・・・。）

ゴール(GOAL)の頭文字をとってGとしました。
名前も変更して「ゴール」としておきましょう。

「ゴール」スプライトには特にプログラムを書き込みませんので、これで完成です。
ステージ上でドラッグして、ゴールにしたい位置まで移動させましょう。

タイマーをセットする

以前に作った「タイム」変数を使って、ゴールするまでの所要時間を図る仕組みを作っていきます。以下のプログラムをネコさんスプライトに追加していきます。流れとしては、

旗ボタンがクリックされたら、タイムを０にする（初期化）
その後、１秒待ってタイムを１増やす、をくりかえす

こんな感じですね。

で、このままだと初期化直後に時間をはかり始めてしまいますが、ネコさんをクリックして操作をスタートするまでは、所用時間をカウントするのを待っておいて欲しいので、そのように設定を加えます。

これでいい感じに、タイムがカウントアップされていくようになりました。が、そうです。このままではゴールしてもカウントアップが止まりません。

ゴールについたら、タイマーをとめる

ですので、もう一つスクリプトを追加して、ネコさんが「ゴール」にふれたら、カウントアップを止めるように設定します。

特定のスクリプトだけを狙って止めることはできないのですが、この「ネコさん」スプライト上の他のスクリプトを止めることになり、タイムのカウントアップを止めるのと同時に、ネコさんの移動も止まるので、今回に関しては、ちょうどいい具合になります。

「全てを止める」という乱暴な選択肢もあって、これはこれで手っ取り早くて楽なのですが、何もかもがブツッと切れてしまってゲームの終わりとしてはさみしいです。最初はともかく、慣れたらなるべく使わないように工夫していくことをおすすめします。

シンプルな迷路探索ゲームとしては、ひとまずこれで完成したと言っていいと思いますが、せっかくなので、次回は「おじゃま虫」キャラクターを出して、迷路探索を妨害させてみたいと思います。次回で最終回の予定です。

＜おまけ＞

「〜まで待つ」というブロック、便利なのでよく使いますが、実はコンピュータは「待つ」ということはできません。「〜まで待つ」は実は「〜まで、何もしないことをひたすら繰り返す」という意味で、下の画像のような処理になっているのです。「〜かどうか調べる」「何もしない」「〜かどうか調べる」「何もしない」・・・を高速でくり返しているわけです。

こんにちは、まなゲー池田です。
「マウス操作で迷路ゲーム（１）」の続きをやっていきます。

前回は「荒ぶるネコさんを落ち着かせる」ところまでやりました。

迷路を作っていきましょう

連載３回目にしてようやく、迷路を作りますよ。

迷路は「背景」に書き込むこともできますが、今回は「スプライト」として作ってみようと思います。ステージ右下の「新しいスプライト」のところから、ペン型のアイコンを選んでクリックします。

すると、タブが「コスチューム」タブに切り替わりますので、ここに迷路の「壁」を描いていきます。スプライトを自分で描くときには２つのモードがあって、デフォルト（初期設定）では「ビットマップ」モードになっているのですが、僕は「ベクター」モードをおすすめします。なので右下の「ベクターに変換」ボタンでモードを切り替えます。

そのあと、右側の直線ツールを選んで、壁をえがいていきます。左下のスライドバーでえがく線の太さを調整できますので、好みの太さに調整しましょう。

描き終わったら、作ったスプライトに名前をつけます。デフォルトでは「スプライト２」とかになっていると思います。このままでも使えるのですが、使うスプライトが増えるとどれが何だかわからなくなりますので、今のうちから名前をつける習慣をつけておくのをおすすめします。

スプライトエリアのアイコン左上に「i」ボタンがあるので、それをクリックします。

すると、スプライトの情報が表示されます。今回は「めいろ」と名付けることにします。ここでは名前の変更のほかにも、色々と設定することができます。

壁を通り抜けられないようにする

せっかく描いた壁も、このままでは自由に通り抜けられるただの背景状態です。なので、ネコさん側のスクリプトにプログラムを追加して、壁を通り抜けられないようにしましょう。

「情報」パレットから「〜色に触れた」ブロックを取り出します。ブロック上の色付きの四角１回クリックしてやると、マウスポインタの形が変わります。その状態でステージ上のどこかをクリックすると、その場所の色が対象に選ばれます。

他にもいくつかのブロックを取り出して、下図のように組み上げます。

「進んだ分だけ戻す」ことで「通れない」を実現する

「通れない」というブロックがあれば簡単なんですが、残念ながらそうは行きません。
なので、１回分移動したら、すぐその後に「壁の色」にふれていないかどうかを調べます。で、もしもふれてしまっていたら、こっそり「今きたのと反対方向に１回分戻す」ことで、直前の移動を「なかったことに」してしまいます。

「反対向きに同じだけ」動かすために「-(マイナス)スピード歩動かす」という書き方をします。ちょっと難しいですが、よく使う方法なので、おいおいなれていってください。

今組み立てたパーツを、画像のように前回までに作ったプログラムに追加してやると、ネコさんは壁を越えられなくなります。これで迷路内を探索できるようになりましたね。

＜おまけ＞

デフォルトの大きさのネコさんでは、大きすぎて通路を通れません・・・。なので少し小さくなってもらいましょう。画像のアイコンをクリックするとマウスポインタが変形します。その状態でステージ上のネコさんをクリックしてあげましょう。クリックするごとに小さくなります。逆に大きくしたい場合は、左側のアイコンをクリックして同じように操作します。

次回は、ゴールを作って、ゴールするまでのタイムを測れるようにしたいと思います。

こんにちは、まなゲー池田です。
「マウス操作で迷路ゲーム（１）」の続きをやっていきます。

マウスポインタの後を追って移動するキャラクターをゴールまで導く時間を競うゲームを作っていきますが、前回まずポインタを追いかけるスプライトを作るところまでやりました。

ネコさんはなぜ「荒ぶる」のか？

ポインタを追いかけている間はいいのですが、追いついた後も立ち止まらず、ポインタの周りを激しく動き回るネコさん。これは、１回あたり１０歩ずつ（１０ピクセルずつ）移動するネコさんが、いつも最後の１回の移動でマウスポインタを通り越してしまうことが原因で起こります。

通り過ぎてしまうので、反対を向いて戻ろうとする。するとまた通り過ぎてしまうので、また振り向いて戻ろうとする。これを延々とくりかえしてしまうために「荒ぶっている」感じになってしまうのです。

通り過ぎてしまう前に立ち止まるようにしたい

ということで、マウスポインタまでの距離をしらべて、「次の移動で通り過ぎてしまう」とわかったら、そこで移動をやめるようにします。そのままのプログラムが組めればいいのですが、ちょっと工夫が必要で、「マウスポインタまでの距離が、１回に移動する距離よりも小さいときだけ移動する」というように指定してあげなければいけません。

変数「スピード」と「タイム」を準備

これまで１回の移動距離を10としてきました。そのままでいきますが、同じ数をあちこちで使うことになりますし、後で変えたくなるかもしれないので、移動速度を入れておく用に変数を作っておきます。（ついでに後から使うことになる「タイム」変数も作っておきます）

一定以上離れているときだけ移動するようにする

変数の準備が整ったので、これを使って、ネコさんの移動に制限をつけていきます。

• 初期化の部分で「スピードを１０にする」
• 「ずっと」の内側に「もし、マウスのポインターまでの距離　> スピードなら」を追加

下の画像のように組み上げます。

これでもう、ネコさんが荒ぶってしまうことはありません。

クリックするまで動き出さないようにする

落ちつきのでてきたネコさんですが、旗ボタンクリックと同時にマウスポインタへ向けて突進してくるのもちょっと困ります。クリックされるまで待ってもらいましょう。

「〜まで待つ」ブロックを使って、下図のように追加します。
いくつかの条件を同時にチェックしたい場合には、今回のように「〜かつ・・・」ブロックを使います。

これで、迷路探索の準備がととのいました。
次回は、迷路を作ってその中を移動できるようにしていきます。

こんにちは、まなゲー池田です。
まなゲーらんどの運営と並行して、僕が直接指導できる範囲に限って、小さなプログラミング教室「まなゲーらぼ」をやっています。

今回からは、マウス操作で迷路を進むゲームを作っていきたいと思います。

マウスポインタの後を追って移動するキャラクターをゴールまで導く時間を競うゲームになります。

マウスポインタを追尾するキャラクターを作る

まずはマウスポインタを追いかけるように移動するスプライトを作ります。
キャラクターを自由に動かせるタイプのゲームを作ろうとするとき、色々なやり方がありますが、一番簡単に作ってみることができるのがこれかなと思います。

「追いかける」は「向き」と「移動」の組み合わせ

ひとまず「初期化」として、最初の向きと座標を決めておきます。
そうしないと、２回目以降のプレイのときに、毎回違う場所からのスタートになってしまいます。他にも理由はありますが、面倒でも「初期化」を行うようにしておくと後々スムーズです。

で、「マウスポインタ」を追いかける、という動作は、ポインタの方を向く、近く、ポインタの方を向く、近く、・・・のくりかえしですから、初期化の後に、その二つをずっとくりかえすプログラムが続くようにブロックを並べていきます。

これで動かしてみると、ちゃんとネコさんがマウスポインタを追いかけてきてくれるのがわかります。

ネコから逃げるようにマウスを動かすと、これだけでも結構楽しいです。
今回は、これでプレイヤーキャラを動かすわけですが、追いかけてくるキャラクターから逃げ回るようなゲームを作ることもできそうですね。

「荒ぶるネコさん」をなんとかしたい・・・

ただ、このままだと、マウスポインタに追いついた後も止まらずに、ブルブルと震えるように行ったり来たりをくりかえしてしまいます。面白い動きではあるのですが、これでは迷路の中を進むのに困ってしまいます。

次回は、これをなんとかして自然な動きにするところから始めたいと思います。

第２回へ進む

こんにちは、まなゲー池田です。
前回「４ブロックモグラたたき」を改造して、制限時間や得点表示をつけました。
今回はさらに、BGMと効果音を加えて完成させたいと思います。

Scratchではサウンドを鳴らすのもとても簡単

まずは効果音からやっていきます。
ネコさんスプライトの、「音」タブを開いてみると、すでに１つ音声が登録されています。
「ニャー」というやつですね。これはすぐにならしてみることができます。

「スクリプト」タブを開き、「音」パレットを開きます。

「〜の音を鳴らす」というブロックがあるので、これを既に組んであるブロック群に追加します。

ネコさんがクリックされたら、時間がまだ残っているかどうか確認して、残っていたら「ニャー」を鳴らす。という具合ですね。

これだけで、もう効果音については完成です。ゲームをスタートしてネコさんスプライトをクリックしてみましょう。音がつくとぐっと楽しさが増しますね。

たくさんある組み込みサウンドを使ってBGMをつけてみる

効果音がなるようになったので、次はBGMです。自前で用意したサウンドやネット上で公開されている音源をもらってきて使うこともできますが、今回はより手軽にScratchにあらかじめ用意されているBGM向けの音声ファイルを使ってみることにします。

「音」タブの中、「新しい音」という表示の下に、３つのアイコンが見つかるはずです。１番左のスピーカー型のアイコンを選択します。

すると、用意されているサウンドが一覧表示されます。順番に全部聞くのは大変なのでカテゴリで絞り込みます。今回はBGMに使いたいので「音楽のループ」カテゴリを選びます。

BGM向けのループサウンド（繰り返し再生した時に、終わりと最初がスムーズにつながるように作られたサウンド）がリストアップされました。いろいろ聴いてみて気にいる物を選んでください。

今回は「dance magic」を選択

スピーカー型アイコンをクリックすると表示が変わるので、それを確認してから、

画面右下の「OK」ボタンをクリック！！

「ニャー」の下に、「dance magic」が追加されましたね。

BGMの再生には「終わるまで〜の音を鳴らす」ブロック

BGMの再生専用に、新しく「旗がクリックされとき」を出して、新たなスクリプトを作ります。
「じかんが0まで繰り返す」を組み立てて、その中に「終わるまでdance magicの音を鳴らす」を入れてやります。

「終わるまで」が重要で、これを間違えて「dance magicの音を鳴らす」だけにしてしまうと、前の音がまだなり始めたばかりなのに、新たな再生を次々と始めてしまっておかしなことになってしまいます。

あとは、残り時間を減らしていくループの終わりに「すべての音を止める」ブロックを追加してやります。これで時間切れと同時にBGMの再生がストップします。

ということで、効果音とBGMもついて、モグラ叩き（ネコ叩き？）の完成です！！

キャラクターや背景を変えたり自作したりして、オリジナル作品に仕上げてもいいでしょう。

こんにちは、まなゲー池田です。
前回作成した「４ブロックモグラたたき」を改造して、もうちょっとゲームらしくしていきます。
今回追加したい要素は、この二つ。

• 得点が表示されるようにしたい
• 制限時間を設けたい

難しくなりそうですが、追加するブロックは全部で11個だけ。
しかも、その中にプログラミング学習上、超重要な要素が色々入っています。
早速やってみましょう。

「変数」を使って見る

得点や制限時間など、プレイ中に変化していくデータを扱うには「変数」というデータの入れ物が必要です。

「スクリプト」タブの「データ」パレットにある「変数を作る」ボタンをクリックします。

すると、変数作成用のウィンドウが開くので「てんすう」と入力して「OK」をクリック。

これで、変数「てんすう」が作成され、使用可能になります。
中に、数値や文字を入れたり、入れた数値を増やしたり減らしたりできます。

同じようにして、もう一つの変数「じかん」を作りましょう。

変数ができたら、早速使ってみましょう。次のことをします。

• 得点を初期化する（ゲームスタート時に毎回0になるようにする）
• ネコさんクリックで１点ずつ加算

これを実現するために２つのブロックを追加します。

同じようにして、「じかん」も初期化設定しましょう。
ゲームスタート時に10になるようにします。

これで、旗ボタンをクリックしてスタートすると、ネコさんをクリックするごとに、１点ずつ得点が入るようになったはずです。

「くり返し処理」に挑戦

制限時間が１秒ごとに減って、ゼロになるようにしていきましょう。
「制御」パレットを開いて、中から「〜まで繰り返す」ブロックを取り出します。
（画像にそのブロックが写っていませんね。すいません。もう少し下の方にあります。）

その他必要なブロックを「変数」パレットと「演算」パレットから取り出して、画像のように並べます。

これでスタートしてやると、ちゃんと残り時間が減っていきます。
しかし、「じかん」がゼロになっても、ネコさんをクリックして得点できてしまいます。
これではいけませんね・・・。

「分岐（もし〜なら）」を試してみる

ネコさんがクリックされた時に行う処理の方を改造して、
「じかん」がまだ残っていた時だけ、「てんすう」を増やすように変更します。

「制御」パレットから「もし〜なら」ブロックを取りだして、画像のように組み立てます。

はい！これで、制限時間付き、得点表示ありの「モグラ叩きゲーム」ができました！

あとは、BGMとクリック時の効果音ぐらい、つけてみましょうか。

続きの記事「４ブロックモグラ叩きの改造（２）」を読む