9月30日（土）に開催されたSpringin’ワークショップ（主催：NPO法人CANVAS、共催：しくみデザイン、協力：日本工学院専門学校）のレポートです。

NPO法人CANVAS主催「プログラミング講座2017」は昨年夏休みの開催に続き今回は２回目。

いつものSpringin’ワークショップは90分での実施が多いのですが、今回のワークショップは150分と長めの設定。

会場の日本工学院専門学校 蒲田キャンパスで学ぶ学生さんや、CANVASのスタッフさんたちが子どもたちを優しく、かつ楽しくサポート。

2時間を超えるワークショップは大人でも集中力を持続させるのが難しいですが、ほとんどの子どもたちはワークショップ終了まで休憩なく作品作りに没頭し、作品を完成させていました。

そんな今回のワークショップも力作だらけ。
そんな力作の中から、ワーク作りの参考になるギミックを紹介したいと思います。

ページをランダムに表示させる

こちらの作品は「りんごころころ占い」という作品。

まずはじめに、下に４つ並べられたりんごをタッチして、青い棒に触れないようにりんごを上方向に進めます。りんごが画面から出るとページが遷移するのですが、その遷移先は３種類。

「あたり」のルートをたどるりんご、「もう1ど」と再チャンスをあたえられるりんご、そして「はずれ」のりんご。そのうち３つのどれかはランダムに決定するようになっています。

画面A、画面B、画面Cをランダムに表示させるためにどのような設定をしているのでしょうか。
１ページ目にある隠しアイテム（白いアイテム）に注目です。

①りんごが画面から消える
②りんごの動向をチェックしているアイテム1の【フラグ】が作動
③アイテム1自身の【フラグ】により【連鎖（どれか）】が作動
④アイテム1の【連鎖（どれか）】により、対象アイテムであるアイテムA、アイテムB、アイテムCのいずれかの【シーンチェンジ】が作動
＝画面A、画面B、画面Cいずれかが表示される

まとめると、それぞれのページを表示させるアイテムをつくり、そのうちどれを作動させるかを【連鎖（どれか）】でランダムに選択しているんですね。

もうこれは立派な占いアプリ。
今日の運勢を占ってみます。

さて、次のギミックの紹介です。

アイテムの「中心」について

「野球」ゲームです。

ゲームの始まりとともにオレンジ色のボールが右斜め上に投げられ、黒いボタンを押してバットを降りオレンジ色のボールを打ち返して、高得点を狙うゲーム。

このワークの作成途中に「バットみたいにうまく回らない」という質問がありました。
バットをつくり、回転させても、棒の中心で回ってしまうためバットのように見えない。（下図の上のバットの動き）
バットは、中心ではなくグリップの部分を中心に回転しますよね。（下図の下のバットの動き）

見た目は同じアイテムですが、回転の中心の位置が違います。
Springin’では、このキャンバスに描かれたものの範囲を自動的に計算してアイテムの中心の位置を決めているんです。

つまりグリップ部分がアイテム画像の中心とするためには、下図の範囲がアイテムだ、とアプリ側に判断させる必要があります。

バットとして見せたい絵は変わらないので見た目は変わらないように絵を描かねばなりません。どのようにするかというと、場所はバットの先端と対称の位置。そこにペンを一番細くして目立たない様に、もしくは背景と同じ色で点を描きます。

これでグリップ部分を中心に回転するようになります。
バットは完成！

効力を「ゼロ」にするタイミング

次に、投げられたボールに当ててみよう、といいタイミングでバットを振りボールに当ててみます。
が、ボールの勢いが強すぎて打ち返せない。

なぜだ…？

どうしたらいいのか考えていると、その様子を見ていた俊介からアドバイス。
「バットに当たった瞬間、ボールを動かしている力をゼロにすればいんじゃない？」

…なるほど！

まずはどのようにボールが動いているのか見てみることに。
説明に必要なアイテムを抜粋したワークを用意します。

オレンジのボールをゲーム開始とともに動かしている正体は上図にある緑のアイテムAとアイテムBです。アイテムAに重なっているアイテムBの【接触】により、アイテムAの【動力（右）】【動力（上）】が常に作動しているんですね。

つまり、アイテムBがアイテムAに接触している限り右上方向に進み続けるということなんです。

アイテムAの【動力】をゼロにするためには、アイテムBが接触している状態をなくさないといけません。
アイテムBの接触をなくす方法は、アイテムBを動かして接触しないようにする、などいくつかありますが、今回はバットに当たった瞬間にアイテムBを消すことにしました。

どのように設定したかというと
オレンジ色のボールに【接触】を設定し、対象アイテムにバットを選択します。
バットには【連鎖（全て）】を設定、対象アイテムにアイテムBを選択します。
そしてアイテムBに【消滅】を設定しました。

ボールがバットにぶつかった時、どのような流れでアイテムBが消えるのかを見てみましょう。

①ボールがバットにぶつかり【接触】が作動
②ボールの【接触】により、対象アイテムであるバットの【連鎖（全て）】が作動
③バットの【連鎖（全て）】により対象アイテムであるアイテムBの【消滅】が作動→アイテムBが消える
＝アイテムAを作動させる力がなくなり、ボールの右上方向にかかる力がなくなる

これで、バットに当たった瞬間、右斜め上に進む力がなくなり、ボールが打ち返せるようになりました。

設定した動きの効力がいつまで続いているのかを確認すること、またあるタイミングで「アイテムにかかる効力をゼロにする」という考え方は他でも応用できそうですね。

まとめ

今回も子どもたちの「こうしたい」「こうやりたい」からたくさん学ぶことがありました。

これまでご紹介してきたギミックを考えて、それを実際に動かすところまで作り込めるところがワークショップの醍醐味です。が、講師をつとめたシュンスケがワークショップの終わりにも言っていたんですが、参加いただいた子どもたちが「つくるの楽しかった！」と感じることが一番大切だと考えています。

またワークショップを開催するときはこのブログやクリエイティブ教育ラボのTwitterやFacebookでお知らせします。フォローをお忘れなく！

＜開催概要＞

• 日程：2017年9月30日（土）
• 会場：日本工学院専門学校蒲田キャンパス
• 時間：①10:00〜12:30 ②14:00〜16:30
• 定員：各回25名
• 参加費：5,000円
• 主催：NPO法人CANVAS（公式募集ページ）