[]タイトル画面の作成

前回までで、キー操作に関する２つの処理（イベント駆動型とフロー駆動型）を紹介しました。自分がやりたい内容によって使い分ける必要があります。

　ゲームを作り始めると、よくこんなケースに出くわします。
「タイトル画面でメニューを選択して、決定キーを押したらゲーム画面に移行する。」

　タイトル画面はイベント駆動型で作って、ゲーム中はフロー駆動にする。ということも、Canvasを切り替えることで実現できます。第９回ではタイトル画面の作成を行いましょう。

  画面の設計

　タイトル画面にもいろいろな作り方がありますが、メニューが画面に表示されていて、選択中の項目の前に●を付けて表示することを考えてみましょう。

　背景となる項目を描画します。文字の表示位置はとりあえず仮決めで、配置しておきましょう。

        g.drawString("タイトル画面", 80, 50);
       g.drawString("メニュー1", 100, 130);
       g.drawString("メニュー2", 100, 150);
       g.drawString("メニュー3", 100, 170);

　●の表示はメニューの選択状態に応じて表示します。どの項目が選択状態であるかを、変数に入れておきましょう。変数の値に応じて、表示位置を判定して変更します。

        if( sel==0 )  y = 130;
       if( sel==1 )  y = 150;
       if( sel==2 )  y = 170;
       g.drawString("●", 85, y);

キーが押された時に、変数selの値が変わればよいわけですから、ProcessEventの中で上下のキーで変数を変更します。上に行き過ぎたり、下に行き過ぎたりしないように値を制限しておきます。

         if( param == Display.KEY_UP) {

            if( --sel<0 ) sel=0;

        }

        if( param == Display.KEY_DOWN) {

            if(++sel>2)sel=2;

        }

状態が変化したら、再描画しておきましょう。

         repaint();

まとまったソースコードは続きから

今回作成した部分のソースコード

    public void paint(Graphics g) {

     

     int y=0;

     

        g.lock();

        g.clearRect(0, 0, Display.getWidth(), Display.getHeight());

        g.setColor(Graphics.getColorOfName(Graphics.WHITE));

        g.drawString("タイトル画面", 80, 50);

        g.drawString("メニュー1", 100, 130);

        g.drawString("メニュー2", 100, 150);

        g.drawString("メニュー3", 100, 170);

        

        if( sel==0 ) 

         y = 130;         

        if( sel==1 ) 

         y = 150;         

        if( sel==2 ) 

         y = 170;    

        

        g.drawString("●", 85, y);

        g.unlock(true);

    }

    public void processEvent(int type, int param) {

        if (type == Display.KEY_RELEASED_EVENT) {

            if (param == Display.KEY_SOFT1) {

                (IApplication.getCurrentApp()).terminate();

            }

            if( param == Display.KEY_UP) {

              if( --sel<0 ) sel=0;

            }

            if( param == Display.KEY_DOWN) {

             if(++sel>2)sel=2;

            }

            repaint();

       }

    }