小例子學J2ME手機遊戲開發――(二)圖形和圖像處理

小例子學J2ME手機遊戲開發――(二)圖形和圖像處理

原創 58prince http://blog.csdn.net/prince58 轉載請註明出處。

 

手機遊戲開發中,界面的表現是一個很重要的部份,我們常常會遇到很多問題,如要製作透明效果,爆炸效果等等,這些都是由Graphics來處理的。這一節我們講一些幾個基礎Graphics方法,其實很多特效也是由一些基礎方法混合使用做出來的。

-、繪製圖形基元

現在我們在上一節的代碼上加上:

            g.setColor(0xff0000);

            g.drawLine(70, 52, 120, 52);

           

            g.setColor(0x0000FF);

            g.drawRect(20, 80, 160, 80);

繪製一條紅色的直線和一個藍色的矩形框。如下圖所示:

 

別小看這些方法,有時你看到一些遊戲中的對話框的邊框效果就是通drawRectfillRect來實現,還有加載頁面的進度條也可以利用他們來實現。下邊我們看一下進度條的實例:

      //draw LoadingBar

     

      public static void drawLoadingBar(Graphics g,int left, int top,int width,int width2 )

      {  

          g.setColor(0x95750D);

          g.drawRect(left-1, top, width+2, LOADING_BAR_HEIGHT+2);

        

          for (int i=0; i<LOADING_BAR_HEIGHT-1;i++)

           {  

             g.setColor(0xEC5700);//這個地方稍微修改一下,如加個顏色的數組就可以畫出有顏色過度的進度條,color[i]

             g.drawLine( left+1, (top+2)+i, (left+1)+(width2-2), (top+2)+i);

           }

      }

效果如圖所示:

    

詳細的請自行參看完整代碼,這裏不再做講解。

二、繪製文本

上節我們也演示了繪製文本的方法(drawString),這種方法就是系統提供的方法,繪製的是系統字,所以在不同的手機上有時會有不同的效果,字體的效果也不是很理想。所以現在很多遊戲中都使用圖片字來代替系統字,好處是可以統一字體風格,不好的就是會增加包的大小,需要消耗一些內存。

三、繪製圖像

Graphics另一個比較常用的方法就是圖像處理(drawImage),J2ME設備上基本上都用PNG格式的圖片,也支持一些其他格式的圖片。這個地方是初學者提問比較多的地方,很多情況下他們的問題都是由圖片的位置不對引起的。

這裏需要說明一點,很多程序員繼承了一些J2EE方面的思想,轉做J2ME時會不自覺的對代碼、資源進行分門別類,代碼會使用Package管理,資源放在res目錄下,有時還是多建幾個子目錄來存放不同類型的資源。不過J2ME上並不建議用這種方法,因爲每多一層package就會多一些資源,所以我基本上把所有的代碼和資源都放在src目錄下。

(1)、好,現在看我們做一個在屏幕上畫LOGO圖片(直接找的GameloftLOGO圖片,請見諒)的小例子。

static Image s_logoIamge = null;//添加一個image的成員變量。

 

 

      protected void paint(Graphics g) {

 

            ……      

            if (s_logoIamge==null)

            {

                  try

                  {

                        s_logoIamge = Image.createImage("/logo.png");

                  }catch (Exception e) {

                        e.printStackTrace();

                  }

            }

            else

            {

                 g.drawImage(s_logoIamge, 240>>1, 320>>1, Graphics.VCENTER|Graphics.HCENTER);

            }

                 

      }

 

效果如下圖:

 

 

drawImage 前先斷判斷一下s_logoIamge是否爲空,爲空就先加載圖片。這樣做的好處是避免多次載入圖片。

 

(2)、我們前面畫LOGO的基礎上多加一 setClip 即可以實現一個簡單的動態現示logo的效果。這個setClip也是要經常用到的一個功能,把圖片拼成動畫效果也需要用到它。

 

            if (s_logoIamge==null)

            {

                  try

                  {

                        s_logoIamge = Image.createImage("/logo.png");

                  }catch (Exception e) {

                        e.printStackTrace();

                  }

            }

            else

            {

                  g.setClip(34, 137, (s_paintCount%172), 44);

                 g.drawImage(s_logoIamge, 240>>1, 320>>1, Graphics.VCENTER|Graphics.HCENTER);

            }

 

 

效果圖片如下:

 

  

 

這裏我們只解紹了畫圖像的一個基礎方法drawImage,實際開發中還常用到drawRegiondrawRGB,以及NOKIA  UI  APIdrawPixels

 

完整代碼下:

http://www.xun6.com/file/1d2c9f228/J2ME_Game_02_src.rar.html

 

使用和上一節一樣,把相關例子下src的所有文件複製到你的J2ME項目的src目錄即可調試運行。

發佈了13 篇原創文章 · 獲贊 3 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章