My First NSBasic


3. 「もぐら」を叩くつもりで、グラフィック遊びを始めたのはいいけれど

Palm でグラフィックを使うって、どういうことでしょうか。Palm の画面に余計なものを表示すると、ただでさえ狭い四畳半なのに寝られなくなります。Palm でグラフィックは必要なんだろうか・・・。
でもグラフィックの方が分かりやすいのも確かです。
このあたりの議論っていうのは見たことがないのですが、Macintosh を開発した連中が作ったからこうなったのか、ペン インターフェースから必然的に導き出されたからこうなったのでしょうか。デザイン先行で開発した結果としてのグラフィックカル ユーザインターフェースになっているような気もしますね。タッチパネルを利用している PDA でもキーボードを持ったものがありますが、これはメニューは画面はタップして、文字はキーボードで打つという、もしかして変則的 ? なインターフェースかもしれません。
本来は膨大な辞書を持たせておいて、テキストはプルダウンで選択するだけにして、グラフィティで文字をかかずにすむアプリケーションなんていうのが、ぺン インターフェースの理想なんだろうか。それはまた考えることにして、今回はグラフィックに手を染めてみます。

HELP を見ると以下のものが用意されています(HANDBOOK にも同じものが記載されています)。

・DrawBitmap ビットマップ グラフィックを描画する
・DrawChars テキストを描画する
・DrawLine ラインを描画する
・DrawRectangle レクタングル(四角形)を描画する

さらにスクリーン グラフィック関連のコマンドとして、以下のものがあります。すぐには使わないとしても、何に使うのかは見ておいた方が寝覚めがいいでしょう。

・CreateWindow
・DestroyWindow
・EraseWindow
・FillRectangle
・SetCurrentWindow

NSBasic でグラフィックを表示するには、上記以外にも Bitmap オブジェクトを使う方法があります。Draw なんたらは、グラフィックス ウィンドウに描画しますが、Bitmap オブジェクトを使うと、Bitmap オブジェクトに関連づけられた Bitmap リソースを表示してくれるようです。

さてグラフィックを表示してみたいと思います。Palm のスクリーンは標準で 160 pixel × 160 pixel ですから、とりあえずこのサイズの 2 値(白黒)の画像を用意します。Windows 標準の「ペイント」でもいいですが「PhotoShop LE」を使いました。用意した Bitmap ファイルは、NSBasic のインストールと同時に生成される、C:\NSBasic\Bitmaps に置くと管理が楽です。


うちの娘です。

NSBasic IDE を立ち上げます。プロジェクト エクスプローラにある Bitmaps を選択し、プロジェクトメニューか、マウスの右クリックで「ビットマップを追加」を選び、先に保存しておいた Bitmap(ここでは「olivia_grass.bmp」です)を選択します。するとプロジェクト エクスプローラの Bitmaps の下に Bitmap が追加され、自動的に ID が割り振られます。最初は「1004」になるみたいですね。要するにアプリケーション リソースです。

とりあえず読み込んだ Bitmap を表示してみましょう。
1) ボタンを配置します
2) ボタンをダブルクリックしてコードを追加します

DrawBitmap 1004, 0, 0

3) コンパイルして実行

コンパイルすると、左上に読みこまれた Bitmap が表示されます。POSE が立ち上がるので、ボタンをタップします。あれ、ボタンが消えてしまいました。

ボタンの上にグラフィックが描画されたようですね。DrawBitmap ってグラフィックス ウィンドウに直接描画するはずだから、ボタンの方が上にこなきゃいけないんじゃないの?ボタンもグラフィックス ウィンドウに表示してあるってことか。

さて、HandBook を見てみるとありました。これを使えばいいんじゃないかな「Redraw」。そこでコードをこのようにしました。

DrawBitmap DrawBitmap 1004, 0, 0
Redraw

ボタンは表示されました。後に描画したから、先に表示したボタンも消えてしまったということでしょうか。けれど今度はフォームのタイトルまで表示されてしまっています。

グラフィックが画面一杯のサイズだったからですね。このタイトルを消すには、多分これじゃないかな。
フォームのプロパティを見ると「Show Titleber」のプロパティが「True」になっています。これを「False」にすればいいような気が。「False」にしてみると IDE のスクリーンのタイトルが消えました。よしよし。

Bitmap が表示されて、ボタンも表示されています。とりあえず出来上がりですが、表示のされ方は予想していませんでした。「DrawBitmap」をボタンのコードとして使うと一番手前に描画されるとはね。ということは、続けて「DrawBitmap」を使うと、どんどん上に画像が表示されるようになるはずです。やってみよう。このサイトの「スタッフ」のイラストを使ってみます。

サイトで使われているのは「ill_waki.gif」と「ill_nogu.gif」ですので、それぞれ 2 値の「ill_waki.bmp」と「ill_nogu.bmp」にして、先ほどと同じディレクトリに保存します。運良くこのふたつの Bitmap は 80 pixel × 80 pixel でしたので、ちょうど Palm の画面の 1/4 サイズということになります。
ここで一気に表示してもつまらないので、またまた HandBook から「Delay」というのを見つけました。間を取るんですね。

DrawBitmap 1004, 0, 0
Delay 0.5 ' 0.5 秒間を空ける
DrawBitmap 1006, 0, 0
Delay 0.5 ' 0.5 秒間を空ける
DrawBitmap 1007, 80, 80
Redraw

表示したはいいけれど、Bitmap を消すにはどうしたらいいんだろう。
「Delete Bitmap」とか「Clear Bitmap」とかはないし、「Erase Window」は Bitmap ではなくて「グラフィックス ウィンドウを消す」となっています。グラフィックス ウィンドウに表示した Bitmap だけを消すことはできないみたいですけれど、同じサイズの「真っ白い」Bitmap を同じ位置に表示すれば、消えたように見えるでしょう。実際には「白い」Bitmap を表示したことになりますが。

でも、Bitmap を表示しておいてまた消す、っていうのは直接グラフィックス ウィンドウに描画するよりは、「Bitmap オブジェクト」を使った方がいいのではないかという気がしてきました。「DrawBitmap」はちょっとおいといて、今度は「Bitmap オブジェクト」で遊んでみます。

画像をタップすると消えて、今度はその場所をタップすると現れます。
1) 簡単な Bitmap を用意します。40 × 40 pixcel のボールの Bitmap です
2) これらを C:\NSBasic\Bitmaps に保存します
3) IDE を立ち上げて、画面に「Bitmap」オブジェクトを配置します。サイズは 40 × 40 pixcl です(ID は 1014 です)
4) 次に「Gadget」を配置します。これも 40 × 40 です(ID は 1013 です)
5) 「Bitmap」オブジェクトと「Gadget」をダブルクリックしてコードを追加します

・Bitmap オブジェクト
Sub object1004()
  Bitmap1004.Hide
  Gadget1013.Show
  Redraw
End Sub

・Gadget オブジェクト
Sub object1013()
  Gadget1013.Hide
  Bitmap1004.Show
End Sub

両方とも「0, 0」の位置に配置します。フォームのタイトルは False にしておき、表示しません。

6) フォームを右クリックして「Before Code を表示」させて、次のコードを書きます。

・Before Code
Sub Form1003_Before()
  Gadget1013.Hide
End Sub

コンパイルして実行します。

左上に表示されたボールの画像をタップすると消えます。消えた場所をもう一度タップすると、今度は表示されます。プログラムの動きは簡単です。

・Before Code で、フォーム表示の前に「Gadget」を隠しておく
・ボールの「Bitmap」がタップされると、自分を隠して代わりに「Gadget」を表示する
・表示された「Gadget」は見えないけれど、タップされると今度は自分を隠して代わりに「Bitmap」を表示する

実はこの続きで「もぐらたたき」を作ろうと思ったのです。「もぐら」の画像をランダムに、一定時間表示させて、タップされたら隠して他の「もぐら」を表示させる。そして点数を加算して・・・などと考えていて気づきました。そんなにたくさんタップしたら Palm が可愛そうだってね。というわけで、もう少し Palm の画面に優しいものを考えることにしましょう。



copyright(C)2002 Hacker Dude-san all rights reserved.