CoderDojo八王子スタジオで公開している「ベルを鳴らせ！Ring the bell」を元素材に、初心者でも簡単にゲームが作れるようにはじめの一歩を解説します。
ベルを鳴らせゲームとは？
ベルを鳴らせ！
赤やピンクの色で作られた枠に触らないように上下左右の矢印キー、↑↓→← を押してボールを進めていきます。枠に触っちゃうとやり直しです。無事ベルまでたどり着けた場合はベルが左右に動いてベルが鳴るような感じになります。合計3ステージあります。
この「ベルを鳴らせ」を元に、CoderDojo八王子8月22日イベント向けに作った「ベルを鳴らせ初心者バージョン」の作り方をご紹介します。
ベルを鳴らせ初心者バージョンを作る—絵を描く
初心者バージョンとしてこんな感じのものを作ろうと思います。
実際にscratchで作ってみましょう。
まずはscratchページに行き、ログインします。
１.枠の絵を描く
作る をクリックします
上にある名前を入れるところに好きな名前を入れます。
左下の方にあるスプライトという枠の新しいスプライトを描くボタン(ペンのマーク)をクリック
画面右に絵を描くスペースが表示されます。
右下にある ベクターに変換 ボタンをクリック。赤い枠を描いていきます。
右側にある図形の、四角形 をクリックします
塗りの四角形にしたいので、左下にあるこのマークをクリックします
色を変えたいのでここから、
赤色を選択します。別の好きな色でもかまいません！
こういう感じになります
マウスでドラッグして、四角を枠線を描いていきます
全部描けたら
スプライトの欄にある、猫を右クリックして 削除 をクリック
枠の位置を調整しようと思います
右上にある 矢印マーク をクリックして、
図形を全部囲って、
左の画面を見ながら良さそうな位置に移動します
２.ボールを描く
新しいスプライトの スプライトをライブラリーから選択 ボタンをクリック
こんな感じの画面になります。
もの をクリック
ball をクリック
右下の OK をクリック
こんな感じになります。
コスチューム タブをクリックして
ボールをクリックし、
左画面を見ながらボールをスタート地点まで移動します
枠に入る大きさまでボールを縮めます。
四つある角のどこかをクリックして内側にドラッグすると小さくなります。
枠の中に入りました
３.ベルを描く
bellと同じようにベルを選びます
左上の画面にこのように表示されます。ここでクリックしてドラッグしても位置が変えられるのでクリックして良さそうな位置に
移動します。
ベルを鳴らせ初心者バージョンを作る—動きを書く
絵が描けたので、これらを使って動きを書いていきたいと思います。
ボールを最初の位置に戻す
ボールの i という所をクリック
赤枠部分に位置をしめす x と y の数字が書かれています。これが最初の位置の座標です。この数字は後でも使うので何かにメモしておくといいかと思います。
スクリプトタブをクリックして イベント をクリック。(旗)がクリックしたとき を選んで
右側の画面に置きます
スクリプトタブの 動き をクリックして、このボタンを見てみます。先ほどボールの最初の位置の座標を確認しましたが、それと同じ数字が入っています。もしおなじ数字が入っていなければ先ほど確認した最初の位置の座標を入力してください。
これを選んで
右側の画面、先ほど置いた (旗)がクリックしたとき の下にくっつけます
さて、この動きはどんなことをしてくれるんでしょうか？試してみたいと思います。
左の画面でボールを下の方に移動しておきます。
緑色の旗 をクリックします。
すると
↓
とボールが1秒かけて最初の位置に戻りました。この2つのブロックで 緑色の旗をクリックしたら、1秒間で最初の位置(座標x:2、y:-31)に移動する というプログラムができました。
数字によってどんな動きになるか確認したかったらこのブロックの変更できる数字の部分を大きくしたり小さくしたりして動きを確認してみてください。
右向き矢印 → をクリックしたら右に動く
このままだとまだボールは動かせません。右向き矢印 → をクリックしたら右に動くというプログラムを書いてみましょう。
スクリプトタブの イベント をクリックします。
スペース▼ キーが押されたとき というブロックの ▼ をクリックして
右向き矢印 をクリック
このブロックを右のスペースに持って行きます
右向き矢印 がクリックされたら右に動かしたいので、その動きのブロックを作ります
ここでちょっとXY座標について説明します
この図のように縦方向をY軸、横方向をX軸と呼びます。今回は右に動かしたいので X座標を増やしていく ことになります。
ということで右に動かすブロックは
スクリプトタブの 動き をクリックして
x座標を10ずつ変える を
先ほどの 右方向矢印キーが押されたときの下にくっつけます
この状態で 右方向矢印キー を押すと、
少しずつ右に動くようになります。
赤い枠に当たったら音を鳴らして元の位置に戻す
今は
赤い枠に当たっても突き抜けて動いてしまいます。ここに 赤い枠に当たったら音を鳴らして元の位置に戻す という動きを追加したいと思います。
スクリプトタブの 制御 をクリック
もし、赤い枠に当たったら音を鳴らして元の位置に戻して そうでなければ 右に動かす という処理を書きたいので
これを選びます。右側に持って行きます。
まだくっつけずにおきます。さっき作った 右に動かす ブロックを
でなければ の中に移動します。次に赤い枠に当たったら、という部分を作ります。
赤い枠に当たったら、は
スクリプトタブ 調べる をクリック
▼ に触れた の ▼ をクリックして
Sprite2 を選びます。これは、
スプライト画面で赤い枠がSprite2となっているからですので、もし違う名前になっていたらその名前を選んでください。
選んだらこのブロックを
ここに移動します。
次に赤い枠に当たったら 音を鳴らす を追加したいと思います。
スクリプトタブで 音 をクリック
popの音を鳴らす ブロックを
もしSprite2に触れたらの下に持って行きます。
赤い枠に触れたときは失敗なので、元の位置に戻したいと思います。
スクリプトタブ 動き をクリックして
このブロックを使います。先ほど緑の旗をクリックしたとき と同じブロックなのですが、ボールが動いているためか数字が変わってしまっていました。数字を
先ほどと同じ 座標x:2、y:-31 にします。
そしてこのブロックを
popの音を鳴らす ブロックの下に移動します。
あとは、先ほどの 右向き矢印キーが押されたとき とくっつけます。
これで右向き矢印をクリックしたときの動きは完成です。試してみます。
緑の旗をクリックすると
ボールが元の位置に戻ります
右向き矢印キー をクリックして右に動かします
右に動かしていき、赤い枠に当たったら
popの音が鳴って、元の位置に戻りました！
続きは自分でやってみましょう(^^)/
ここまでで「絵を描く」「動きを書く」という基本的な動作については分かったと思います。
残っているのは
・下向き矢印キーをクリックしたら下に動く
・ベルに当たったら 音を鳴らして元の位置にもどる
という動きです。右向き矢印キーと同じような考え方で作ればきっとできると思いますのでぜひ続きは自分でやってみてください！
と思いましたがちょっと難しいかもなので、できない人はこちらをみてみてください
…と思ったんですが、自分でもやってみてちょっと迷ったところとかがあるので、分からない方はこちらを見てみてください。
自分で出来そうな方は、ここからは自分でやってみてください。そして、自分でできた人も自分のやり方と違うところもあるかもしれないので作り終わってからの参考のために見てみてください。
下向き矢印キーをクリックしたら下に動く
下向き矢印キーをクリックしたら下に動く、というのは右向き矢印の時とほとんど同じように、
こんな感じに作ってください。違うのは下向き矢印キーを押したときの動きで Y軸(縦方向) に 下に移動したいので -10 と入っています。
ベルに当たったら 音を鳴らして元の位置にもどる
今の状態だと、
下向き矢印キーをクリックしていくとベルに当たってもどんどん進んで突き抜けてしまいます。
ということで、ベルに当たったら音を鳴らして元の位置にもどる のブロックを追加します。
今作ったブロックの 下に移動するブロックをいったん外側にはずしておいておきます。
スクリプトタブ の 制御 をクリック
もし なら でなければ ブロックを
この位置にもってきます。さっきはここで下に進めてましたが、もしベルに当たったら音を鳴らして元の位置にもどり、そうでなければ下にすすむ ということにしたいと思います。
ということで下に外してあった
下に進むブロックを でなければ のところに移動します。
ベルに触れたら、の部分を作りたいので
スクリプトタブの 調べる をクリックして、▼ に触れたら、の▼をクリックして Bell を選びます。
そしてそのブロックを
このように移動します。
ベルを鳴らしたいと思います。
スクリプトタブの 音 をクリック
▼ の音を鳴らす、で選択しようとしても pop と録音しかありません。bellの音を追加するには、
音 タブをクリックして、
スピーカーのマーク 音をライブラリから選択 をクリック。
このようにたくさんの音の中から bell toll をクリックします。
* 再生ボタンをクリックすればその音がどんな音か分かるので好きな音を選んでもいいかと思います
右下にある OK をクリックします。
これで音が追加されたので スクリプトタブの 音 をクリックして
bell tollの音を鳴らす というブロックにして、
もしBellに触れたら のところに移動します。
ボールを元に戻したいので、スクリプトタブの 動き から
このブロックを
音を鳴らすの下に入れて、
x軸とy軸の数字を元の位置の数字 2と-31にします。
これで完成です(^^)/
ここで作る ベルを鳴らせ はここで見ることができます！
ここで作る ベルを鳴らせ はここで見ることができます！
CoderDojo八王子スタジオ
これは私たちCoderDojo八王子で教材として使ったり、参加した忍者のみんなが作った作品を置いてあるスタジオです。自由に中身を見たり、遊んだり、リミックスして自分のスクラッチを作ったりすることができます。
今回の「ベルを鳴らせ」、は
これですので、中身を見たかったり動きを確認したかったりしたらみてみてくださいね。リミックスも大歓迎です！
