特集：Eclipseで始めるiアプリ――低レベルAPI編（3/10 ページ）

[きしだ なおき，ITmedia]

　イベントの処理として状態を表す変数を変更した後は、repaintメソッドで描画の更新を行います。

 48:    public void processEvent(int type, int param){
 49:        switch(type){
 50:            case Display.TIMER_EXPIRED_EVENT:
 51:                mouth += dm;
 52:                if(mouth < 0){
 53:                    dm = 5;
 54:                    mouth = 0;
 55:                } else if (mouth > 45){
 56:                    dm = -8;
 57:                    mouth = 45;
 58:                }
 59:                repaint();
 60:                break;
 61:        }
 62:    }

　実行させると、画面2のように図形がアニメーションします。

画面2■図形がアニメーションする

キー操作で図形を動かすためには

　キー操作によって図形を動かしてみましょう。

　iアプリでキー操作によって図形を動かす時には、キーが影響を与える位置など状態を保存する変数を用意して、キーが押されたときにその変数の値を変更するようにします。

　ここでは左右のキーで図形の位置と向きが変わるようにするので、まず図形の向きとX座標を保存する変数arcとxを用意します。

 29:    /** 口の開く角度 */
 30:    int mouth = 45;
 31:    /** 口の動く速さ */
 32:    int dm = -8;
 33:    /** 口の向き */
 34:    int arc = 0;
 35:    /** 描画横座標 */
 36:    int x = 50;
 37:    

　描画に変数の値が反映されるように、paintメソッドでの図形の描画部分を書き換えます。

 41:    public void paint(Graphics g) {
 42:        g.lock();
 43:        g.clearRect(0, 0, getWidth(), getHeight());
 44:        Font f = Font.getFont(Font.TYPE_DEFAULT);
 45:        int ofset = f.getAscent();
 46:        g.drawString("動きます",10,10 + ofset);
 47:        g.setColor(Graphics.getColorOfName(Graphics.BLUE));
 48:        g.fillArc(x, 110, 30, 30, mouth + arc, 360 - mouth * 2);
 49:        g.unlock(true);
 50:    }

　最後に、キーが押された時に座標を増減させて、また向きが変わるようにします。

　キーが押されたときの処理もprocessEventで行います。このとき第一引数で渡される値はDisplay.KEY_PRESSED_EVENTになっています。

　第二引数に押されたキーを表す定数が渡されます。左キーはDisplay.KEY_LEFTで右キーはDisplay.KEY_RIGHTです。次のように処理を記述します。タイマーイベントによって再描画されるので、ここでは再描画を行っていません。

 52:    public void processEvent(int type, int param){
 53:        switch(type){
 54:            case Display.KEY_PRESSED_EVENT:
 55:                switch(param){
 56:                    case Display.KEY_LEFT:
 57:                        x -= 2;
 58:                        arc = 180;
 59:                        break;
 60:                    case Display.KEY_RIGHT:
 61:                        x += 2;
 62:                        arc = 0;
 63:                        break;
 64:                }
 65:                break;
 66:

　実行すると、画面3のように左右キーを押した場合に動きます。

画面3■図形が左右に動く