クリエイティブ教育ラボ

アイテム同士の属性と関係性を考える Springin’ではじめるプログラミング #2

しくみデザインの大場健史です。会社ではタケポンと呼ばれています。今回はビジュアルプログラミングアプリ「Springin’」ではじめるプログラミングの第2回。前回はSpringin’を使ったプログラミングに取り組む前に知っておいてほしいSpringin’の設計思想をお話しましたが、今回からは数回に分けて、実際にSpringin’で学べるプログラミングの基本的な考え方を解説します。

Springin’ スプリンギン – 自分だけのアプリをつくってみよう!
http://www.springin.org/jp/

iOS端末をお持ちの方はSpringin’をAppStoreでダウンロードして、実際に操作しながら読んでいただけると理解が深まるはずです。クリエイティブ教育ラボの発足を記念して、現在プレミアム機能を2ヶ月無料で使えるキャンペーンも実施中です!

Springin’ – Create, Share, and Play -を App Store で
https://itunes.apple.com/jp/app/springin-create-share-and-play/id1184243692?mt=8

では早速……といいたいところですが、最近しくみデザインのスタッフになったKKが僕の席にやってきました。彼もSpringin’でのプログラミングを現在学んでいるところなので、読者のみなさんと一緒に考えてもらおうと思います。

KK
タケポンさん。今僕もSpringin’を使ってみてるんですけど、ちょっとわからないところがあって。

タケポン
はいはい。

KK
Springin’のウェブサイトにすっごくたくさんワークが上がっているじゃないですか。ああいうの、僕も作ってみたいなーと思って。このブログにもシューティングゲームとか、いろいろ面白そうなものの作り方が載っていて、手順に沿って作れば作れるんですけど、「じゃあここにあるゲームを自分でイチから考えられるか?」と言われると……。

タケポン
なるほど。ちゃんとSpringin’を理解したいってことね。いいですよ。

KK
Springin’を使えばいろいろなことができるってのは分かっているんですが、まずは基本的な機能を使って、概念を押さえられたらと思ってて。

タケポン
じゃあやっぱりSpringin’の属性についてちゃんと押さえておいたほうがいいね。

属性 = アイテムの性格や役割を決めるもの

KK
そもそもSpringin’における属性ってどんなものってとらえたらいいんでしょう?

タケポン
KKはポケモンやったことある?

KK
その話を始めると長いですよ。今はポケモンGo!でレアポケモンをゲットするために夜な夜な天神の街を歩いてて……

タケポン
やったことがあるかどうかしか聞いてないからw ポケモンにもそれぞれのモンスターに属性ってあるでしょ。炎属性とか水属性とか。

KK
で、炎属性のポケモンは水属性のポケモンが苦手なんですよ! 炎は水に弱いから!

タケポン
あとポケモンはそれぞれのモンスターが技を持っているよね。Springin’における属性もまぁ似たようなものだよ。そのアイテムの役割や性格を表すのが属性だと思ってもらえたらいいかな。それぞれ別々の性格や役割を持ったアイテムを組み合わせるのがSpringin’でのプログラミングの基本的なところだね。

KK
そういえばSpringin’のアイテムメニューで表示される属性は4つに区分されているように見えますね。

タケポン
その通り。それを理解してもらうとSpringin’でのプログラミングがより理解できるようになるので、じゃあそこを今日は見ていこう。

KK
アイテムメニューに出てくる属性たちはこれですね。四角と丸、あとは背景が白いものと枠だけのもの、これらを組み合わせた4種類があります。


タケポン
そう。属性のかたちと背景色によって区別されているんだ。じゃあどんなふうに区別されているのか、箇条書きにしてみるね。

属性アイコンの例

属性アイコンの形での区別

  • 四角:常に効果が起きるもの
  • 丸:イベントが起きたときに効果が起きるもの

属性アイコンの色での区別

  • 背景が白いもの:アイテム単独で効果が起きるもの
  • 枠線だけのもの:効果が起きるにはアイテム同士の関係性を定義する必要があるもの

KK
なんか講義っぽくなってきた……

タケポン
まぁまぁそう言わず。今回は全部の属性を理解するのが目的じゃないから。多分具体的に見ていけば分かるよ。言葉で解説するより、動いてるところをみてもらったほうが早いと思うので、まずはこの棒アイテムを触ってみて。


KK
おお、風車だ!

タケポン
これは「ピン」と「回転」って2つの属性を設定している。

KK
「ピン」はそのアイテムが動かないようにする属性で、「回転」はそのアイテムを回転させる属性なんですね。

タケポン
そうそう。「ピン」だけだと固定されてしまうんだけど、それに「回転」って属性を組み合わせることで、アイテムの中心を軸に固定させながら回転させられるようになる。こうやって属性を組み合わせていくことで、そのアイテムがどんなふるまいをするかを設定することができる。これがSpringin’でのプログラミングの大きな特徴だね。

KK
さっきの4分類でいくと、「ピン」も「回転」も背景の白い四角で示されている属性なんですね。つまり……。

タケポン
アイテム単独で、常に効果が起きるもの、ということだね。

KK
常に効果が起きるもの、というのは分かります。Springin’で作ったアプリはプレイボタンを押すとスタートするんですよね。なのでプレイボタンを押した後はずっとその効果が効き続けている、つまりさっきの風車に触れるとぐるぐる回るってことですよね。

タケポン
対してアイテム単独で、ってところがイメージしづらいかな。じゃあこれを見てみて。

アイテムとアイテムの間には関係性がある


KK
これはシューティングゲームの操作ボタンみたいですね。

タケポン
そうね。黄色いスイッチボタンを押すと、それがきっかけになって、赤丸が左に動く。これをさっきの風車の例と比較すると分かるんじゃないかな。今回は黄色いスイッチボタンをタッチすると、赤丸が動くんだよね。今回は枠線だけの丸アイコンで示されている「動力 – 左」を使ってるんだけど。

KK
なるほど。赤丸とスイッチの関係性が定義されているのか。スイッチがタッチされたら、赤丸が左に動くように、って関係が設定されている。

タケポン
かつ丸いアイコンの属性だから……。

KK
「イベントが起きたときに効果が起きるもの」。なるほど。スイッチをタッチしているときだけ赤丸が動くのか。

タケポン
そう。これも属性の組み合わせでアイテムのふるまいを変えられる。さっきはスイッチに「動力 – 左」だけを設定したんだけど、これに「動力 – 上」も同時にセットしてみると……


KK
おー!なるほど。「左」と「上」を組み合わせると、左斜め上に動くようになるのか。数学っぽく言うとベクトルの足し算みたいなものか。

タケポン
その通り。

KK
分かってきた気がしました。きっかけが必要かどうか、そして相手が必要かどうかで区別してるんですね。

タケポン
まぁ……とりあえず今日はそれでいいかな。ただ実はその「きっかけ」というのも、Springin’、そしてプログラミングを考える上で重要な概念なんだよね。それを次回やろうか。

いかがだったでしょうか? 今回はSpringin’でのプログラミングをする上で押さえておきたい属性の分類をご紹介しました。Springin’には37の属性がありますが、それぞれを別々に覚えるというのは大変だし、本質的ではありません。そうではなく、4つの分類を押さえておけば、あとはアイコンを見ればその属性がどんなものかは想像できるはず。重要なので4つの分類を再掲します。

属性アイコンの形での区別

  • 四角:常に効果が起きるもの
  • 丸:イベントが起きたときに効果が起きるもの

属性アイコンの色での区別

  • 背景が白いもの:アイテム単独で効果が起きるもの
  • 枠線だけのもの:効果が起きるにはアイテム同士の関係性を定義する必要があるもの

ではさっきの応用編を最後に少し。下のアプリを見てみてください。

宝箱を杖で叩くとコインがザクザク出てくるというアプリです。このアプリを設計する上では、やりたいことを実現するために、それぞれのアイテムの属性と関係性に落とし込む必要があります。具体的には下記のような属性と関係性の設定が必要になります。

杖と宝箱の間に【接触】を設定する

宝箱とコインの間に【コピー】を設定する

これはあくまでも一例で、他にも実現方法はあります。ただその実現方法を考える上で意識する必要があるのが「誰が、誰に、何を」を考えるということ。これはプログラミングをする上で非常に重要な概念です。次回はこれをとりあげます。それでは!