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) ボタンをダブルクリックしてコードを追加します
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 の画面に優しいものを考えることにしましょう。
|