初めて参加される方は初めて参加される方へをご覧ください。
・ノートパソコン・電源アダプター・マウス
・CoderDojo 所有無料PC4台あり（なるべくお持ち下さると助かります）
・チケットが売り切れた場合はご相談してみてください。
小学2年生から中学3年生まで（原則、小学生以下は保護者の同伴が必要）
2015年9月26日 （土） 13:30～15:00（居残り可）
無料
コワーキングスペース八王子8Beat http://8beat.tokyo/
＊フリードリンクを利用することができます（コーヒー、日本茶、紅茶、リンゴジュース）
＊無料のお菓子もあります
ご質問などはお問い合わせフォームからお願いいたします。
CoderDojo 八王子のロゴをメンターのKeiちゃんに作ってもらいました。
Kei ちゃんありがとうございます！
ブタの貯金箱を発見し過去の自分の気づかいに感謝している CoderDojo 八王子代表の荒井です。8/22（土）に第9回 CoderDojo 八王子を開催しました。
前回打ち合わせの時にミニゲームを作って、簡単に作れるものを用意して子供たちに作ってもらおう話をしておりました。決まったテーマがあれば参加人数にも対応しやすくなります。
今回はミニゲーム作成と進行役を兎本さんが担当してくれました。ミニゲームはなつかしのアレです。人間とは不思議なものです。イライラから解放される為にイライラするのです。
画像をクリックするとゲームを遊べます
解説ページも用意しました。今回参加できなかった方もぜひ親子でやってみてください。
Scratchで「ベルを鳴らせ」ゲームを作ろう！
実際にニンジャに作ってもったのはこのゲームを簡略化して１ステージにしたものです。
ニンジャにはまず長方形を組み合わせて障害物を描いてもらいました。
ベクターで絵を描くのはちょっと難しかったかな？概念よりも細かい操作をするというのが最初の障害になります。しかしこれもいつか役に立ちます。未来の社会ではスクラッチでインタラクティブなプレゼンテーション資料を作るかもしれません。それは冗談としても、ビジネスアプリケーションのマクロがスクラッチのようなビジュアル言語になっている可能性はあると思います。
しかし図形のハンドルはもう少し大きい方がちびっこニンジャには掴みやすいですね。それとは別に貸し出し用PCの解像度の関係で絵を描くウィンドウが非常に小さくなってしまったのですが、[編集]-[小さいステージ]にチェックを入れると良さそうです。
スクラッチはキーボードをあまり使いませんが、それでも小さい子にはマウスやタッチパッドで細かい操作をするのは難しいものです。興味を持ってもらいつつマウスに慣れるという点ではゲームは良いと思います。少し慣れたら今回のゲームをマウス対応にしてみるのも良いと思います。加速度や慣性を付けると難易度も上がると思います。
ニンジャによっては満足する図が描けるまで描きたいようです。気持ちはわかりますが、大人の事情で次へ進んでもらいました。
ニンジャ達がまず気づくのは、反対方向に動いてしまう事です。と、ここで座標の説明。これは説明する為の布石でした。
僕が子供の頃、言語といえば BASIC か C かアセンブラでした。当時流行っていたテトリスというゲームをBASICとインラインアセンブルで作りました。最近はスクラッチを含め作ったものがクラウドに保存されるので、大人になった時に見る事ができますね。さすがにその時スクラッチが今のままとは思えませんが、BASICも一部で復活しているのを見ると、その時になっても見る方法はありそうです。
何が言いたいかと言えば、アカウント（パスワード）は大切に！
ひとまず完成。ニンジャの作品を一か所で見れるようにしました。家に帰ってからも遊んでみてね。
メンターさんは今回とても忙しかったと思います。メンターさん達の一生懸命な姿が印象的でした。次回、第10回は 9/26（土）開催です。メンターの河村さんが何か作ってきてくれる予定です。どんな内容になるか楽しみですね。
第10回 CoderDojo 八王子を9月26日(土) 13:30～15:00 に開催いたします。
今後毎月第3土曜日（または第4土曜日）を開催日とする予定でおります。
お申込み受付ページは2週間前までに用意します。
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八王子で教材として使ったり、参加した忍者のみんなが作った作品を置いてあるスタジオです。自由に中身を見たり、遊んだり、リミックスして自分のスクラッチを作ったりすることができます。
今回の「ベルを鳴らせ」、は
これですので、中身を見たかったり動きを確認したかったりしたらみてみてくださいね。リミックスも大歓迎です！
