オープンアプリ・ゲームコンテスト
コンテスト概要 応募方法 応募作で遊ぼう アプリ開発講座 Special Special

アプリ開発講座

講座スケジュール
第1回 オープンアプリ(Java)とJava実行環境
line
第2回 はじめてのオープンアプリ(Java)の作成
line
第3回 イメージの描画
line
第4回 キー入力の処理
line
第5回 オープンアプリ(Java)への移植
line
第6回 ゲームの作成
line
第7回 端末へのデータ保存
line
第8回 サウンドの再生
line
第9回 バイブレーションとブラウザ起動
line 最終回 HTTPによる通信
line

開発講座TOPへ



講師プロフィール
株式会社ユビキタスエンターテインメント 布留川英一

1999年のJavaMEの仕様公開を期に「JAVA PRESS(技術評論社)」にてライターとしての活動をはじめ、2000年の503iシリーズの発売を期にドワンゴへ移り、携帯アプリの研究開発を行う。2005年に独立し、ユビキタスエンターテインメントにて次世代コンテンツを作成中。
【著書】
MIDP 2.0 携帯Javaアプリ開発ハンドブック
iアプリゲーム開発テキストブック
ActionScript 3.0 ゲームプログラミングブック
他6冊

 

 

第3回 
イメージの描画


第3回の今回は、画像ファイルを読み込んで、イメージを描画するプログラムを作ります。
[サンプルプログラムのダウンロード]



プログラムは、次の2つのクラスで構成されています。

  • ImageExクラス(ImageEx.java)
  • ImageCanvasクラス(ImageCanvas.java)

プロジェクト名とクラス名「ImageEx」でプロジェクトを作成してください。

画像ファイルの準備

今回使用する画像ファイルは次の1枚です。プロジェクトのresフォルダ(C:\WTK22\apps\ImageEx\res)に置いてください。

・kero.png 48x48ピクセル


オープンアプリ(Java)で利用できる画像ファイル形式は「PNG-8(256色以下のインデックスカラーPNG)」と「JPEG」です。


◎Thumbs.db
Windows XPで開発していると、JARファイルの中に「Tumbs.db」という名前のファイルが混ざり、無駄にサイズが大きくなることがあります。Thumb.dbは、エクスプローラでフォルダ内の画像ファイルを縮小表示した時に作られるキャッシュファイルで、Windowsの初期設定では非表示になっています。

フォルダを表示しているウィンドウのメニュー「ツール⇒フォルダオプション」を選択し、表示タブの詳細設定で「保護されたオペレーティングシステムファイルを表示しない(推奨)」のチェックをはずし、「縮小版キャッシュしない」にチェックを入れることで問題を解消することができます。

ImageExクラス

ImageExクラスはプログラムの本体となるクラスです。キャンバスを生成後、スレッドを生成してImageCanvasクラスのrun()メソッドを実行しています。

ImageEx.java
import javax.microedition.lcdui.*;
import javax.microedition.midlet.*;

//イメージの描画(本体)
public class ImageEx extends MIDlet {

    //コンストラクタ
    public ImageEx() {
        //キャンバスの指定
        ImageCanvas c=new ImageCanvas();
        Display.getDisplay(this).setCurrent(c);

        //スレッドの実行
        (new Thread(c)).start();
    }

    //アプリの開始
    public void startApp() {
    }

    //アプリの一時停止
    public void pauseApp() {
    }

    //アプリの終了
    public void destroyApp(boolean flag) {
    }
}

ImageCanvasクラス

ImageCanvasクラスはキャンバスとなるクラスです。

ImageCanvas.java
import javax.microedition.lcdui.game.*;
import javax.microedition.lcdui.*;

//イメージを描画する(キャンバス)
public class ImageCanvas extends GameCanvas 
    implements Runnable {

    //コンストラクタ
    ImageCanvas() {
        //キーイベントの抑制
        super(false);
    }

    //実行
    public void run() {
        //グラフィックスの取得
        Graphics g=getGraphics();

        //画像ファイルの読み込み
        Image image=null;
        try {
            image=Image.createImage("/kero.png");
        } catch (Exception e) {
            System.out.println(e.toString());
        }

        //画面の塗り潰し
        g.setColor(255,255,255);
        g.fillRect(0,0,getWidth(),getHeight());

        //イメージの描画
        g.drawImage(image,10,10,Graphics.LEFT|Graphics.TOP);

        //左右反転
        g.drawRegion(image,0,0,48,48,Sprite.TRANS_MIRROR,
            10,70,Graphics.LEFT|Graphics.TOP);

        //上下反転
        g.drawRegion(image,0,0,48,48,Sprite.TRANS_MIRROR_ROT180,
            70,70,Graphics.LEFT|Graphics.TOP);

        //回転なし
        g.drawRegion(image,0,0,48,48,Sprite.TRANS_NONE,
            10,130,Graphics.LEFT|Graphics.TOP);

        //時計回りに90度回転
        g.drawRegion(image,0,0,48,48,Sprite.TRANS_ROT90,
            70,130,Graphics.LEFT|Graphics.TOP);

        //時計回りに180度回転
        g.drawRegion(image,0,0,48,48,Sprite.TRANS_ROT180,
            130,130,Graphics.LEFT|Graphics.TOP);

        //時計回りに270度回転
        g.drawRegion(image,0,0,48,48,Sprite.TRANS_ROT270,
            190,130,Graphics.LEFT|Graphics.TOP);
            
        //描画の反映
        flushGraphics();
    }
}



◎GameCanvasクラス
ImageCanvasクラスは「javax.microedition.lcdui.game.GameCanvas」クラスを継承しています。GameCanvasクラスはCanvasクラスを拡張したクラスで、「ダブルバッファリング」や「キー状態の取得」などの機能が使用できます。

GameCanvasクラスのコンストラクタでは引数にキーイベントを抑制するかどうかを指定します。通常falseを指定します。

[GameCanvasクラス]
GameCanvas(boolean suppressKeyEvents)

suppressKeyEvents キーイベントを抑制するかどうか:boolean型
GameCanvasクラスのコンストラクタ。

ダブルバッファリングとは、画面と同じサイズのイメージを用意し、必要なものをこのイメージに描画してから、実画面にまとめて反映させるという処理で、ちらつきを防ぎます。GameCanvasクラスのgetGraphics()メソッドでGraphicsオブジェクトを取得し、それに必要な描画を行い、最後にflushGraphics()メソッドを呼んで実画面に反映します。

[GameCanvasクラス]
Graphics getGraphics()

戻り値 Graphicsオブジェクト:Graphics型
Graphicsオブジェクトを取得する。

[GameCanvasクラス]
void flushGraphics()
描画処理の内容を実画面に反映する。



◎画像ファイルの読み込み

画像ファイルを読み込むには「Imageクラス」のcreateImage()メソッドを使います。

[Imageクラス]
static Image createImage(source)

source 読み込み先:String型
戻り値 Imageオブジェクト:Image型
画像ファイルを読み込む。

読み込み先は「/ファイル名」の書式で指定します。また、createImage()メソッドは読み込み失敗時に例外を投げるのでtry〜catchで囲んで下さい。


◎イメージの描画
「Image」クラスは画像データを保持するクラスです。ImageオブジェクトをGraphicsクラスのdrawImage()メソッドに渡すことで、イメージを描画することができます。

[Graphicsクラス]
void drawImage(image,x,y,anchor)

image Imageオブジェクト:Image型
x X座標:int型
y Y座標:int型
anchor アンカー:int型
イメージを描画する。

「アンカー」はXY座標として指定する位置が、イメージ全体のどの位置を示すかを指定するものです。文字列のアンカーと違い「Graphics.BASELINE」でなく「Graphics.VCENTER」を利用する点に注意してください。

Graphics.TOP
Graphics.BOTTOM
Graphics.LEFT
Graphics.RIGHT
Graphics.HCENTER 水平中央
Graphics.VCENTER 垂直中央



◎イメージの反転
イメージの反転を行うには、GraphicsクラスのdrawRegion()メソッドを使います。

[Graphicsクラス]
void drawRegion(image,x,y,width,height,
transform,distX,distY,anchor)

image 描画元イメージ:Image型
x 描画元X座標:int型
y 描画元Y座標:int型
width 描画元X座標:int型
height 描画元Y座標:int型
transform 反転方法:int型
distX 描画先X座標:int型
distY 描画先Y座標:int型
anchor アンカー:int型
イメージの部分描画・反転描画を行う。

引数の「反転方法」には、「javax.microedition.lcdui.game.Sprite」クラスの持つ定数を指定します。

Sprite.TRANS_NONE 反転なし
Sprite.TRANS_MIRROR 左右反転
Sprite.TRANS_MIRROR_ROT180 上下反転
Sprite.TRANS_ROT90 時計回りに90度回転
Sprite.TRANS_ROT180 時計回りに180度回転
Sprite.TRANS_ROT270 時計回りに270度回転

おわりに

今回はこれでおしまいです。次回は「キー入力の処理」を行うオープンアプリ(Java)を作成します。


ページ先頭へ


  Copyright(C) Spicysoft Corporation All rights reserved.
 
アプリゲット