GO BACK

Squeak教室 その4

「よりプログラムっぽくしてみる」



■「テスト」パネルを使う

 さて、前回で簡単なスクリプトは作れるようになってきました。だけど、複雑なものになるとまだ難しいです。なにより「ただ命令を決まった通りに実行するだけ」なので、その状態に応じて臨機応変に何かを動かすことなどは難しいわけです。そこで今回は「状態をチェックする」ということをやってみましょう。

 それは「テスト」というパネルを使う方法です。これは、スクリプトのパネルの一番右端にあるアイコンから作ります。このアイコンをマウスでドラッグすると、テストのパネルが現れるのです。そのままスクリプトのパネルの中にドロップすれば、テストパネルが組み込めます。


 この「テスト」パネルは、「テスト」というところに調べたい状態などをセットし、「はい」にその状態になったときに実行する命令を、「いいえ」にそうでないときの命令をはめ込んでいきます。プログラミングをやったことのある人なら、「IF文」とか「条件分岐」といったものに相当すると考えればいいでしょう。

 このテストでは、部品の位置などの値をチェックする他、「この部品と触れているか」とか「この色と触れているか」なんてことまでチェックできます。これらは、ビューワの「テスト」カテゴリの中にチェック用のパネルが用意されています。

 では、実際にテストを使って簡単な「おもちゃ」を作ってみましょう。作ってみるのは、「自分で道に沿って動く自動車」というものです。・・え〜、既にSqueak関係のホームページをいろいろ回った人には「なんだよ、またかよ」と思うでしょうが(笑)、まぁ、一番簡単に面白さがわかるサンプルなんで・・。

 まず、ペイントツールで走るコースの絵を描きます。要するに車のコースですね。とりあえず、ここでは八の字型のものにしてみました。ポイントは、少し太めの道路にするということと、全て1色で描くということ、そして、あんまりヘアピンカーブは作らない(笑)ということです。



 次に、自動車の絵を描きます。これは、道路とは別の部品として新たに作って下さいね。こちらのポイントは、描いた後、車の右上あたりに赤い点、左上あたりに緑の点を描いておく、ということです。なんでかというと、この2つの色を使って、「今、この色の部分が道路の上にいるか」ということをチェックさせるためです。



 さて、2つの部品ができたら、車のビューワを出してスクリプトを作ります。ここでは2つの「テスト」パネルを用意し、それぞれで「テスト」カテゴリにある「その色に触れているか」パネルで状態をチェックします。これは、ある色が別のある色に触れているかどうかをチェックするもので、色の部分をマウスでクリックすれば調べる色を変更できます。



 ざっと、上の図のようにスクリプトを作って下さい。ポイントは、やっぱり色の指定です。赤と緑の色は車の点の色、チェックするグレーの色は、デスクトップの色にします。パネルの色の部分をクリックしてから、車の赤い点の部分をクリックすると、その地点の色が自動的に設定されますので、これを使って色を正確に設定しましょう。

 出来上がったら、車をコースの上に移動させ、スクリプトを「チクタク」させて動かしてみましょう。車は道路の端に来ると自動的に向きを修正し、ちゃんと道なりに走っていきます。まぁ、あんまり急カーブだったりするとうまく曲がりきれなかったりしますが、ちゃんと「自分で判断して動く」ことがわかりますよ。




■コリントゲームを作ってみる

 さて、基本がわかったら、もうちょっと複雑なことをさせてみましょう。「色に触れているかを調べて動きを変える」ということを組み合わせていけば、例えばパチンコみたいなものも作れそうな気がしますね。——というわけで、簡単なコリントゲーム(釘が並んでるだけで仕掛けのないパチンコみたいなやつね)を作ってみます。

 まず、盤面の絵を描きます。これは、右端の壁面を青、中央から左端の壁面と内部の釘(?)を緑、一番下の土台部分を赤で色分けして描きます。下の図を参考にして頑張って描いて下さい。周りの輪郭部分は直線ツールをうまく使うと描きやすいですよ。



 続いて、玉を「楕円」の部品で作ります。大きさは、適当で。盤面の中をごろごろ転がっていくのだから、それに見合った大きさにしておきましょう。——そして、楕円のスクリプトを作成します。今回はちょっとややこしくなるので、下の図をみながらよく考えて作りましょう。



 ざっと捕足しておきます。まず、最初のテストのチェックに使っている「楕円の向き」パネルは、「幾何」カテゴリにあります。これを「テスト」部分に配置すると、自動的に「>」「5」といった比較の記号と値がパネル内に現れるので、これを変更して調整して下さい。また、ここでは「向きから以下を引く」ってパネルが使ってありますが、これは、普通の値変更用のパネルです。パネルを配置した後、「向き」の左側にある三角マークをクリックすると、「以下を足す」「以下を引く」・・というように表示が変わります。

 それから、ここでは「乱数」というパネルも使っていますね。これは、実はビューワの中にはありません。「部品」タブの中にあるのです。これは文字どおり乱数を得るためのもので、ゲームなんかでは重宝します。ここからパネルを取り出し、「向きから以下を引く」の右の値部分にドロップすれば、そこに乱数パネルが組み込まれるのです。こんな具合に、パネルの中の必要な部分に更に別のパネルを組み込んだりすることもできるんです。

 また、「ポーズする」「音を鳴らす」といった新しいパネルが登場しますが、これらはそれぞれ「スクリプティング」「基本」カテゴリの中にあります。

 さて、一通りできたら、今度はスタートボタンを作りましょう。——「部品」タブから、「ボタン」という部品をデスクトップにドラッグ&ドロップして下さい。そしてビューワを開き、以下のようにスクリプトを作成します。



 これのポイントは1つ。1つ目は「楕円のパネルが入っている」ということ。つまり、楕円のビューワから「スタートする」パネルを取り出してきて、それをボタンのスクリプトパネルの中に組み込む、ということです。こんな具合に、他の部品のビューワにあるパネルを持ってきて使うこともできるんです。

 もう1点は、「マウスアップ」でスクリプトを実行するようにすることです。これで、ボタンをクリックするとスクリプトが実行されるようになります。

 以上が出来上がったら、実際に遊んでみましょう。——まず、玉(楕円)を、玉を打ち出すところにドラッグしておき、ボタンをクリックして下さい。玉がズズッと打ち上がっていき、それからあちこちの釘にぶつかって跳ねながら落ちていきます。下の赤い土台部分に得点なんかを描いておけば、よりゲームっぽくなりますね。



 こんな具合に、「自分で周りの状況を確認しながら動く」というスクリプトが、Squeakでは簡単に作れます。これが「デジタルおもちゃ」たる由縁ですね。

 「テスト」の使い方と、「パネルに別のパネルを組み込んで使う」ということ、そして「他の部品のパネルを持ってきて使う」というのができるようになると、かなり複雑なこともできるようになってきます。それぞれで応用を考えて、自分なりのおもちゃを作ってみましょう。ぜっっったい、楽しいですよ!


※サンプルの配布
今回作成した自動車とコリントゲームのプロジェクトを配付します。
Zip圧縮してありますので、解凍後、「Squeaklets」フォルダに置き、
Squeakから「作品をファイルから読込み」メニューで読み込んで下さい。
(なお、動作は保証しません)

ファイルのダウンロード



GO NEXT


GO HOME