第6回　iアプリでミニゲーム〜グラフィックの取り扱い

今回からゲームを題材にiアプリ作りにトライしてみることにする。ゲームといえばグラフィックを使わなきゃならない（というわけではないとは思うが一応）ので，まずはグラフィックをキーに合わせて動かすというデモを作ってみることにしよう。

【国内記事】

2001年2月23日 更新

グラフィックを扱うCanvasオブジェクト

　iアプリでグラフィックを描画する方法はいくつかあるが，ゲームでポピュラーなのがCanvasというクラスだ。Canvasは（ちょっと語弊はあるが）iアプリのDirectXみたいなものと考えてもらえればいい。

　そういえば，Canvasの具体的な機能の説明に入る前に，クラスとは何ぞやという話をすべきかもしれない。クラスが理解できないとJavaも理解できないというくらい重要なモノだ。けれど説明しだすと結構ややこしいので，実際に使って体で覚えていくのが，いちばん楽かもしれない。この連載でも，必要に応じてクラスの振る舞いを説明していくことにしたい。

　さて，CanvasクラスはNTTドコモのライブラリに含まれていて，プログラマが便利に使うことができる。普通，次のような感じで利用する。

class MyCanvas extends Canvas {
   .....

}

　前（第3回参照）に述べたが，classの後ろは名前，extendsは拡張するという意味，そして最後のCanvasがドコモのクラス名だ。上記は，NTTドコモのCanvasクラスを拡張してMyCanvasというクラスを作る大枠みたいなものだ。

　Canvasを拡張するには，いくつか守らなきゃならない作法がある。もっとも基本の作法は，paintというメソッド（関数）を作り，そこで描画したい絵やイメージを描かなきゃならないということだ。

　Canvasに作るpaintメソッドは，システムから画面に絵を描かなきゃならないタイミング（そのCanvasを画面に表示した直後や，ほかの何かで画像が隠されたときなど）で呼び出されるようになっているからだ。

　そのときにシステムは，グラフィックのハードウェアを抽象化したGraphicsオブジェクトを渡してくれる。そのGraphicsオブジェクトの機能を使ってpaintメソッドの中でグラフィックを描くという形になる。たとえば次のような具合だ。

class MyCanvas extends Canvas {

  public void paint(Graphics g) {
   g.drawLine( 0,0, 20, 20 );
  }

}

　上記の“g”がシステムが渡してくれたGraphcsオブジェクトである。このオブジェクトはPCでいうビデオカードの抽象化バージョンようなモノで，線を引いたり円を描いたり，あるいはイメージを描く機能を持っている。上記では線を描く（drawLine）機能を呼び出して，座標０，０点（画面左上隅）からX座標20，Y座標20の点に線を引いているわけだ。

　実際のiアプリでは，上記のCanvasを作って，そいつをMyFirstiAppのときのようにDisplayで表示してやればいい。

　サンプルとしては，次のようになる。これで，画面左上隅に小さな斜線のグラフィックが画面に表示されるのだ。

public class MySecondiApp extends IApplication {

  public void start() {
    // MyCanvasを作る
    MyCanvas myc = new MyCanvas();
    // 画面に出す
    Display.setCurrent(myc);
  }
}

GIFで作ったアイコンを動かしてみる

　Graphcsオブジェクトは，簡単だが便利な機能をいくつか持っている。たとえばGIFイメージを描画することもできる。GIFでキャラクターを作って，それを画面上に描いたり動かしたりできるので，ゲームで利用するのにもってこいだ。

　描きたいGIFイメージは，指定したURLから読み込むことができる。iアプリでは，次の2つの特殊なURLが携帯のメモリ内部の場所を意味することになっている。

・scratchpad:///...
　iアプリにおけるストレージ（ディスク）に相当するスクラッチパッドを指定するURL。

・resource:///...
　iアプリを固めたJARファイルの中を指定するURLだ。たとえば，JARファイルにTEST.GIFというイメージが入っているのなら，

resource:///TEST.GIF

でアクセスできる。

　やや余談だが，JARファイルは最大10Kバイト以内という厳しい容量制限がある。そのため，メーカー製のゲームの多くは初回起動時にメーカーのiモードサイトにアクセスして，ゲームで使うキャラクタなどのイメージを携帯内部のスクラッチパッドに保存，次回起動時からスクラッチパッドに保存したキャラクタを使うという手のものが多いようだ。この手を使えばJARファイルにキャラクタを入れなくて済むので10Kバイトの制限に収めやすくなるからである。

　本稿では（まだ）そんなに複雑なものは作らない。GIFで作ったゲームキャラクタをJARでアーカイブしてしまっても容量制限には引っかかりそうもないので，そうすることにしよう。

　GIFイメージは，iアプリ内部の「メディアマネージャ」を通じて手に入れる仕組みになっている。メディアマネージャはGIFやサウンドデータなどメディアデータを一括して扱うマネージャというふうに理解して欲しい。

　GIFの場合，メディアマネージャからMediaImageというオブジェクトを得て，こいつからImageオブジェクトを取り出してGraphicsで表示するという形になる。ちょっと複雑だが，決まりきった手順なので「そういうものだ」と思って欲しい。

　具体例は次のような感じだ。

  MediaImage
   im= MediaManager.getImage(
          "resource:///TEST.GIF"
       );
   try {
     // 使用を宣言する
     im.use();
   }
   catch( ConnectionException e ) {
    // エラー
   }
   catch( UIException e ) {
    // エラー
   }
   Image img = im.getImage();
 ...
  // paintメソッド内で..
  g.drawImage( img , x, y );

　まず，メディアイメージimにメディアマネージャを通じてJARアーカイブ内のGIFイメージを取り込む。リスト中の「使用を宣言」の部分も作法の1つで，イメージを使うときは必ず一度，宣言しなければならない（このときにGIFが携帯電話内で使えるイメージデータに変換されるのだそうだ）。

　この変換の最中に，URLにアクセスできないといったエラー（例外）が起こる可能性があるため，上記のようにtry〜catch()構文を使って例外をキャッチをするように描いておく。もし例外が出たなら本来は処理が続けられないので，終了処理をするなどの対策がいるが，上記では省略している。

　そしてimからImageオブジェクトimgを取り出し，Graphicsの機能であるdrawImageを使って画面に描くという流れになる。

　動かす，というところまでは到達しなかったので次回は，上記のようにして描画したキャラクタを画面の上で動かすというテーマを解説することにしたい。なお，次回に取り上げるサンプルは，すでに完成していて

http://gadget.mda.or.jp/i/ImageDemo.html

からダウンロードできる。画面に表示されるGIFイメージ（画面では単に「にゃ」と描いてあるだけだが）を上下左右キーで動かせるようになっているので試して欲しい。

関連記事
503iのベンチマーク結果をどう読むか？
503iの詳細なベンチマーク結果公開──スパイシーソフト
iアプリの互換性は大丈夫なのか？
携帯電話はPCと逆方向に進化する？
503iの「速さ」をベンチマークテスト──意外な速度差が
ドコモ，Java搭載iモード端末503i発表──1月26日発売
iモード対応Javaを作るのに必要なものは？──NTTドコモ，仕様をついに公開
制限きついiモード用Java──ドコモ503iでできること，できないこと
Java搭載iモードではこんなことができる！──ドワンゴ「サムライ ロマネスク」
iモードのJava端末，当初はロースペックで登場

Copyright © ITmedia, Inc. All Rights Reserved.

---