ビスケットのあれこれ

ビジュアル言語ビスケット(Viscuit)に関するあれこれを書いてゆきます.

ロボット大戦

2011-12-29 23:46:21 | 1

ロボット大戦というビスケットの遊びを紹介しよう.ビスケットでロボットを作り,ビスケットランド上で対戦させる遊びだ.

ビスケットでの重要なテクニックがいろいろと使われているので,プログラミングの参考にもなるだろう.

まずは,どういった結果になるのかを見てほしい.

ここ(別画面を開きます)

以下は,このランドの動きと一緒に読むとわかりやすい.

まずは基本形.

上の2つのメガネはバネ虫が伸び縮みしながら進んでゆくもの.下の大きなメガネは,「?」がバネ虫の前に来たら,それを弾き飛ばすというものである.ロボット大戦で重要な記号がこの「?」である.これは絵を描くときに「ワイルドカード」という属性にチェックを入れて作られた部品で(ワイルドカード属性が付くと*マークが絵に付けられる),任意の部品にマッチするというものである.したがって,この下のメガネは,任意の部品がバネ虫の前に来た時に,それをすべて弾き飛ばすという意味になる.
ビスケットランドでは,他人の絵が一緒になって一つの世界を作るものであるから,他人の絵と衝突するといった動きの関係を持つことはできなかったが,このワイルドカードを使うと,他人の絵といっしょに動きを作ることができるのである.これが,ロボット大戦のミソである.
さて,単純なロボットから紹介してゆこう.
扇風機
ハンドパワー
両方とも,メガネを一つしか使わないロボットである.扇風機は,自分の目の前に何かが来たら,それを吹き飛ばす.ハンドパワーは,何かを念力によってジワーっと動かす.いままで元気に動いていたものが,ハンドパワーに捕まると,そこで動きがゆっくりになりジワーっと動かされる.これらは,自分自身は動かないが,誰かが自分の前に来た時に作用する仕掛けである.
風おじさん
右上のメガネは,風おじさんがゆっくりと回転する.下のメガネは,目の前に何かが来たら風を吹いて吹き飛ばす.扇風機と違うのは,風を吹いた絵に変わるアニメーションになっている点である.左上のメガネは誰もいなくなると,普通の表情に戻る.扇風機は一つの絵しか使っていないが,このように2つの絵をつかったアニメーションにするだけで,動きの表情が豊かになる.
ロケットの噴射口
これは,普段は火の出ていない噴射口が,何かの絵にくっついた瞬間に火が噴射し(上のメガネ),相手と一緒に進み(中央のメガネ),誰もいなくなると火が消える(下のメガネ)である.
パラシュート
普段閉じているパラシュートが,何かにくっつくと開き(左上のメガネ),そこからゆらゆらと落下し(右の上,下のメガネ),何もいなくなると閉じる(左下).
以上の二つは,相手とくっついて面白い動きを作り出すものである.ここでも,絵が変化するアニメーションを使うことで面白さが増す.
ナルト
これは,絵を一つしか使わずに,しかも小さく目立たない(つまり弱そうに見える)だけに,動いたときの効果が大きいロボットである.ナルトは普段は回転している(右上).下の3つのメガネは,ナルトの近くに何かが来れば,それを自分に引き寄せている.3つあるのは,3つの方向から引き寄せようとしているからである.また,ナルト自身は回転しているので,近づくだけでかなり引き寄せられやすくなっている.最後に,右上のメガネは,何かと重なると一緒に動く,というものである.うっかり,ナルトに近づいてしまうと,自分は何もできないまま,ナルトがくっついて動かされてしまう.
吹き飛ばすタイプのロボットは一回動いて相手を吹き飛ばしてしまうとそれでおしまいであるが,いっしょに動くタイプのロボットは,動いた後も相手と同じ位置関係を保っているから,かなりの期間相手を拘束しやすい.なかなか強いロボットになる.ナルトのように相手と当たる位置を多くするようにするとさらに強くなる.
空手家
相手が右に来たら,右に吹き飛ばす.左に来たら,左に吹き飛ばす.吹き飛ばした後は,最初の構えに戻る.これは,絵がダイナミックであるため非常にロボットらしいロボットである.あたりが2か所あるため,強い.実にいいタイミングで技を出す.この空手家にやられたら悔しいけれど,空手家がナルトに捕まる様子も楽しい.
UFO
相手を捕まえて運ぶUFOである.捕まえているときは目の色が変わるので,捕まえている感が高い.メガネの数が多ければそれだけ表現力の豊かなロボットになる.
いかがだったろうか.簡単にロボットを作って戦わせることができる楽しい遊びである.
これらのロボットに挑戦したければ,
でロボットを作って戦わせてみてほしい.

情報学教育推進コンファレンスに参加して

2011-12-27 00:27:26 | 1

第1回情報学教育推進コンファレンスに参加してきた.あんまり明るい話は無かった.10年前に感じたことから世の中はまったく変わっていない.むしろ悪くなっている感じがする.教育現場には未だに根強い抵抗があるのだそうだ.

こういうぐちゃぐちゃした状況を打開するには,もう一度原点に返って考えてみるのが一番だ.固定概念を捨てなければ.

たとえば「なぜ数学を勉強するのか」という疑問にもっとちゃんと答えなければならない.数学は大人になって役に立たないと考えている人が非常に多い.数学を勉強する理由は国民的なコンセンサスは得られているとは言えない.ただ,昔からそうしているからそうしているだけだ.だとすると,コンピュータなどという新しいものが出てきたときに,それが入り込む余地など最初からないではないか.昔から必要なかったから,今も必要ないのだ.なぜ音楽は勉強する.なぜ,国語をやる.どうして,英語は入り込むことができたんだ.

まず,なぜ教育するのか.これを考えよう.教育には2つの側面があると思う.一つは,実利のためにやる.それを知らなければ,生きていけない,損をする,競争に勝てない,人に迷惑をかける,だから教育する.こういう教育が非常に重要なことは言うまでもない.しかし,この理由だけだと,たとえばなぜ音楽を勉強するのか,説明がつかない.

実は,もう一つの側面に,人生を豊かに生きるため,というのがある.知らなくても死ぬことはない.しかし,知っていると生活が豊かになる.生活を豊かにするのは,お金だけではない.豊かに生きるためにいろいろなことを知っているかどうかだ.文化的なレベルの高さは,この側面の教育が多いかどうかで決まる.

音楽を勉強する理由は,人生を豊かに生きるためだ.音楽を生活の糧にしている人はたくさんいるが,その人達だって,音楽によって他の人たちの人生を豊かにしているのだ.なぜリコーダをやるのか.音楽の楽しさを知るためには,楽器が演奏できるということが重要だからだ.

じゃあ,数学はなぜ勉強するのか.数学が勘違いされやすいのは,それが実利のために勉強すると思われていることだ.しかし,一部の専門家を除き,実際の生活で難しい数学が実利に結びつくような場合はほとんどない.だから,数学は大人になって役に立たないという考えに支配されるのである.本当は,数学は人生を豊かに生きるために勉強するのである.音楽と同じように,数学を楽しむことができる教養があれば,人生のいろんな局面で豊かにものを考えることができるのである.数学は実利のためという勘違いが教える側にも教えられる側にもあるために,世の中に相当数の数学コンプレックスを生んでしまう.人生を楽しむためだったら,コンプレックスなど生じるはずがない.

理科はどうだろうか.理科離れが進んでいると言われているが,どうして,この国民は本当に豊かに理科を感じることができるようだ.月食がニュースになり,大勢が寒い夜空を見上げていた.ハヤブサが無事に帰ってきたニュースはみんなが知っている.これが豊かさ以外のなんであろうか.

今の教育界は,人生を豊かに生きるための教育に冷淡であるように思う.生きる力などというキーワードが流行したが,こういう切羽詰まった言い方ではなくて,豊かに生きる力,くらいに余裕をもって言えないのだろうか.受験やテストといった単なるツールに過ぎないものに,教育の本質まで引きずられてしまっている.

さて,話をコンピュータに戻すが,こちらも切羽詰まっているのは確かだけれど,もともとそんなんじゃなかったはずだ.コンピュータは面白いものだった.なんの役にもたたないプログラムを何時間もかけて作り,それが動いた時の感動は忘れられない.

こんな楽しいコンピュータが敵視されるということが僕には信じられない.すべて誤解である.誤解は辛抱強く説明すればいつか解ける.この10年状況が変わっていないということは,「コンピュータが楽しい」ということを世の中にきちんと説明してこなかったからではないのか.

すべての人にプログラミングを教えたいというのは,実利のためではまったくない.楽しいということを知って欲しいからである.そして今や,ビスケットを使えば,難しい背景知識などなしに,コンピュータの楽しさを本当に誰でも触れることができるようになったのだ.


情報学教育推進コンファレンスに参加した人たちに,最低限共通項があるのだとしたら「コンピュータは楽しい」を知っているということだろう.そして周りのコンピュータを敵視している人たちに,誤解を解く説明を,辛抱強く続けてゆけばよいのだと思う.


スクリプト言語拡張

2011-12-18 19:38:50 | 1

ビスケットを教えた後,どうやってテキスト系の言語につなげるのか.そういう質問をよくいただく.僕自身は,ビスケットは英才教育の逆向き,つまり万人に広く伝えたいと思ってやっているので,ビスケットの次はあんまり興味がないのだけど.第一,僕の時代は初心者向けなんてのは無くて,アセンブラからBASICとかPascalなんかを直接やって,それで問題は無かったのだから.英才教育として特別なツールを使う必要はないように思っている.

ではあるけれど,そういう質問をよくいただくので,僕なりの解を考えて実装してみた.

ビスケットにスクリプト言語を導入する.すでに,その拡張を施したビスケットがWebにあるので,ビスケットのホームページの「全部入りのやってみる」を開いてほしい.

ビスケットの全部入りには,本当にごちゃごちゃといろんなものが拡張されているが,ここで拡張されているほぼすべては,右上の「text」を使って拡張してある.試しに,どれか一つ(たとえば上矢印アイコン)をシフトキーを押しながらクリックして見る.テキスト編集のダイアログが出て「#key up」という文字列が見えるだろう.このように#から始まる特別な文字列で,様々な機能が実現されている.

機能は大きく4種類.一つは,それ自身がボタンとなって,それを押すことで何かの動作をするもの.たとえば #command は特殊なコマンドをビスケットインタプリタに送っている.ダイアログが開く場合もある.内部状態もこれで表現されていて,たとえば「はいけいのいろ」で #backgroud の後に2つの数字があるが,これはグラデーションの色を10進数で表したものである.「はいけいのいろ」ボタンをクリックすると背景色を指定するダイアログが出るが,テキスト編集を使って直接指定してもよい(ただし,残念ながら16進表記はないので直接指定するのは難しいと思う).2つの種類は,メガネに入れて使う.メガネの左に入れるのは条件となって,そのメガネを調べるときに毎回条件が成立するかを調べる.右に入れるのはアクションとなって,メガネを実行する際にそのアクションを実行する.最後の1種類は,ステージにおいてつかう.

さて,スクリプト拡張はこれら4種類全部で有効な拡張である.あらかじめ用意されていないので,自分でスクリプト拡張を呼び出す.まずは「text」を持ってきて,シフト+クリックでテキスト編集を開く.ここに#scriptと入力して閉じる.そこにテキストを入力する枠が現れたら成功である.もし「script」の文字が表示される場合は,ビスケットのバージョンが古い可能性がある.ブラウザのキャッシュを削除するとよいかもしれない.

スクリプトには今のところ代入,四則演算,比較しか書くことができない.将来的にはJavascriptを直接呼び出すなどブラウザでできることは全部できるような拡張をするかもしれない.

もっとも簡単な例を示す.スクリプトオブジェクトを作り,a=0を入れる.これをステージに置く.これで初期値が0のaという変数が宣言された.次に,a=a+1というスクリプトオブジェクトを作り,これをどれかのメガネの右側(アクション側)に入れてみる.そのメガネが実行されるたびに,aの値が増加するのがわかるだろう.もう一つ,a<4 のようなスクリプトオブジェクトを作り,メガネの左側(条件側)に入れる.これにより,aの値が4より小さいときというだけ有効なメガネが作れる.このままだと,aが0から4まで増えて終わりなので,別のメガネにa=0とリセットするスクリプトを入れてみてもよいかもしれない.

例として
これ
これは,①のボタン(左下のパッド)を押すとa=0になる.a<4の間aが1増え,音を鳴らし,ミサイルを発射する.ミサイルは飛んでゆく.というプログラムである.ためしに①を押してみると,ミサイルが4発だけ発射され,音が4回なる.

少し考察してみよう.この拡張で今までやれなかったことが,やれるようになったのは事実である.たとえば,シューティングゲームを作ったとき,弾が当たって,敵を倒すまでは簡単にできるが,得点をつけようとするとビスケットでは難しくなる.「score=0」で得点が簡単に計算できる.ゲームの再スタートまできちんと作ることができるならば,ハイスコアも作れるだろう.

ただし,これが今までできなかったのは,ビスケットのマッチングの貧弱さにあった.ビスケットのマッチングは局所的な位置関係で行われるが,得点の計算のように,当たった位置と,得点の位置の配置を気にしたくない場合のパターンの書き方ない.逆にこれを導入すれば,得点の計算はスクリプトを使わなくてもできる.別の言い方をすると,aという名前を使ってリソースの共有が行われている.これはポインタと言ってもよいのだが,ビスケットにポインタを導入すれば(具体的には2点で作られた直線図形)配置によらないで,離れたものに因果関係を伝えられる.

幾つかの関数を呼び出せるようにして,Math.random() < 0.2 のような乱数による振る舞いの変化も簡単に作れるようになるだろう(今はこのrandom機能はない).こういう乱数は好き嫌いがあるが,キー部品と同様に組み込みの部品にしてしまってもよいかもしれない(つまりscriptを使わなくてもできる).

ビスケットの部品(絵)の属性にアクセスするのはどうだろうか.たとえば,スクリプトを置いたメガネに入っている部品を$1, $2という変数で表すことにして,$1.x < 50 のようにして,部品が置かれている位置によって振る舞いを変えることができるだろう.同じようにして,$1.x = 100のように,部品を直接移動させることも可能だろう.また,メガネに部品が2つ以上入っているとき,どの部品が$1,$2に対応するのかを見せる方法が必要である.これは,確かに,ビスケットが用意していない不思議な動きを作り出すためには必須の機能だろう.

ビスケットの絵のマッチングには,sin, cosの計算がどっさり使われているが,同じようにして,全部スクリプトで定義することもできるだろう.もし,完全にビスケットから離れてスクリプト言語だけでこのような当たり判定を作りたければ,こういった計算は避けて通れない関門である.

こうやって,普通の言語でやれるいろんなことは大体できそうだ,ということはわかるのだけど.ビスケットを拡張すればスクリプトなど使わなくてもできそうな部分もある.しかし,スクリプトを使えば使うほどビスケットの面白さがどんどん失われていくような気がしないでもない.非常に危険な拡張である.