第３回 画像でアプリをグレードアップ「３．ジャンケンぴょん？」
|
第３回 画像でアプリをグレードアップ「３．ジャンケンぴょん？」
|
|
３−３ ジャンケンぴょん？
さて、次はジャンケンゲームを作ってみたいと思います。 目的が「ゲームで遊ぶこと」であれば物足りないかもしれませんが、ま、ここは学習の一環ということで、気を取りなおしてください。 ジャンケンの一般的なルールは、次のようになっていますね。 「ぐー、ちょき、ぱー、の３種類の手があり、「じゃんけんぽん」の掛け声でどれか１つを出します。 自分と相手の手を比較して ぐーとちょきなら、ぐーの勝ち ちょきとぱーなら、ちょきの勝ち ぱーとぐーなら、ぱーの勝ち という結果になります。また、両者が同じ手を出した場合は、引き分けで「あいこ」といいます。 あいこが出たら、その次の掛け声は「あいこでしょ」になります」 掛け声や手の呼び方に地域差があるかもしれませんが、概ね、このルールでしょう。 画面は、こんな感じでどうでしょうか？ ぐー、ちょき、ぱー、ボタンを下に配置して、どれかをタップすると、Palmの手も表示され、勝敗を表示します。 勝ち、負け、引き分けがそれぞれ「Win!」「Lose」「Even」です。あと、勝率なんかも表示してみましょう。  まず最初に「ぐーちょきぱーボタン」を配置してみましょう。 先ほど、DrawBitmapコマンドを使って画面上にビットマップを描画しましたが、今回は「ボタン」として役割が必要になりますので、「ビットマップオブジェクト」を配置した方が作りやすくなります。 ビットマップオブジェクトは、Toolboxのこのアイコンで、画面上に画像を表示させるコントロールです。  DrawBitmapコマンドを使う方法と異なるのは、ビットマップオブジェクトが「コントロール」である点です。 NS Basicでは、大抵のコントロールをタップすると、イベントを発生しますが、このビットマップオブジェクトも、ボタンやラベルなどのコントロールと同様にイベントを発生させます。そして、このイベントを使えば、ぐー、ちょき、ぱーの表示がタップされたとき、どれがタップされたのか、簡単に知ることができますね。 では、画面を作ってみましょう。 まず、ぐー、ちょき、ぱー画像を用意します。モノクロですから、センスが重要ですね。 ■ボタン用画像(32x32)    ■自分とPalmの「手」表示用(64x64)       先ほどのサイコロで使った方法と同じく、ぐー、ちょきー、ぱーに連続した認識番号(ID)がつけられるように、順番に読み込みます。 自分のぐー、ちょき、ぱーが、1005、1006、1007になりました。 その他、自分の手の表示用として1008、1009、1010、Palmの手の表示用として1011、1012、1013の合計９つの画像を読み込みました。 すべて、ぐー、ちょき、ぱー、の順になるように読みこんでいます。  ここで、ちょっとしたコツですが、私は画像のファイル名を「my_gu_32_32.bmp」のようにしています。 現バージョンのNS Basicでは、読みこんだ画像ファイルを直接確認する方法がなく、ファイル名などで区別しなければなりません。 しかし、画像ファイルの中身はおおよそファイル名でわかるとしても、画像のサイズがわからないと面倒なことがありますので、そこでファイル名に画像ファイルの縦と横のサイズを含めるようにしています。そうすると、画像の大きさが一目でわかって便利です。(これはオススメです) さてさて、戻りましょう。 あとは、自分の手ボタン用に３つのビットマップオブジェクトを貼りつけます。これは1014、1015、1016ですね。 その他、勝率表示用と勝敗表示用のそれぞれのラベル(1017、1018）で、上の図の通りです。 ここまで準備ができたら、とりあえず画像を表示させたくなるのが人情ですね(?) では、ビットマップオブジェクトに画像を「セットする」方法です。 ビットマップオブジェクトは、ボタンやラベル同様、コントロールですので、プロパティを持っています。 （プロパティの見方は、大丈夫ですね？コントロールを右クリックして「Properties」でしたね。） ビットマップオブジェクトは「Resouce ID#」というプロパティを持っています。このResouce ID#に、読みこんだ画像ファイルのID番号を指定すれば、画像のセットは完了です。 例えば、Bmp1014コントロールに、1005の画像をセットすれば、自分の「ぐーボタン」になりますね。  また、今回使用する画像サイズは32x32ですね。ビットマップコントロールの幅：Width、高さ：Heightというプロパティにサイズを指定しておきましょう。 IDEの画面上には、画像ファイルは一切表示されませんので、マウスを使って大きさを変更するより、直接数字を入れたほうが簡単で確実です。 （そのため、画像ファイルにサイズ情報を入れておくと便利なのですね。） ちょきとぱーをそれぞれ指定したら、一度コンパイルしてみてください。 そして、Palm上で確認してみると、やっと「ぐーちょきぱーボタン」が表示されます。 このようにして、ビットマップオブジェクトは、Resouce ID#プロパティで画像を指定して表示します。 IDEの画面上に画像が表示されませんから、注意して下さいね。 |
|
第３回 画像でアプリをグレードアップ「３．ジャンケンぴょん？」
|