使用Html5+C#+微信 開發移動端游戲詳細教程:（六）游戲界面布局與性能優化

本篇教程我們主要講解在游戲界面上的布局一般遵循哪些原則和一些性能優化的通用方法。

接着教程（五），我們通過Loading類一次性加載了全部圖像素材，現在要把我們所用到的素材變成圖片對象顯示在界面上，由上而下，首先是top層，top里面包涵了玩家（微信）頭像，關卡信息，怪物血條信息，玩家金幣，玩家寶石，玩家總攻擊力。

 

定義函數 setTop 來初始化top層：

 

function setTop() {



    TopDiv = new LSprite();//定義top層

    var Topshape = new LShape();//定義畫圖對象

    Topshape.graphics.drawRect(0, "#000", [0, 0, 484, 100, 10], true, "#000");//繪制一個矩形

    Topshape.alpha = 0.6;  //透明度

    TopDiv.addChild(Topshape); //添加矩形對象

    BGDiv.addChild(TopDiv); //添加top層





    userheadimg = CreatImg("userhead",0.62,0.62,22,12);//添加玩家頭像

    TopDiv.addChild(userheadimg);



    headborderimg =  CreatImg("headborder",0.8,0.8,18,7);//添加頭像邊框

    TopDiv.addChild(headborderimg);

}



//創建圖片對象公共方法

function CreatImg(name,scaleX,scaleY,x,y)

{

    var bitmapData = new LBitmapData(loadData[name]);

    var img = new LBitmap(bitmapData);

    img.scaleX =scaleX;

    img.scaleY =scaleY;

    img.x = x;

    img.y = y;

    return img;

}
 

 

運行一下發現頭像已經添加成功了！

 

 

我們添加引擎控制台查看當前游戲運行狀態：

addChild(new FPS());

 

 

其中FPS表示游戲速度，如果大幅低於設置的游戲速度則會出現掉幀卡頓等情況。

Draw image表示圖片對象的數量。

Draw graphics 表示繪圖對象的數量，例如圓形 矩形等。

Draw text 表示文本對象的數量。我們目前一共創建了3個圖片對象，背景圖片 、頭像、頭像邊框，當各種對象大於一定的數量時會占用很多系統資源，導致卡頓無響應等，所以要做一定的優化，我們設置對象所在的層運行時將緩存顯示對象的內部位圖表示形式，使用cacheAsBitmap函數，參數設為true，那么該層所有的對象將合並成一張圖像輸出，可以理解成photoshop中合並圖層的意思，生效后如果再對該對象進行操作就不會顯示效果，例如一個文本的值是“1”，使用 cacheAsBitmap函數后即使把值改成“2”，畫面上也是不生效的，需要先設置為false，再修改，再設置成true，所以我們原則上是一些靜態的圖片和文字是一定要使用cacheAsBitmap函數作優化，而一些動態變量，如金幣可以不考慮在其中，因為會隨時變化，但也不是絕對不能用cacheAsBitmap，這需要看場合使用，為了方便大家理解，下面是完整的top層的布局和優化代碼：

GuankaIndex=1;//當前關卡數

Money=100;//金幣

zuanshi=50;//鑽石

Dps=800;//總攻擊力

BoIndex=1;//當前波數

GWhpyushu=10;//怪物剩余血量

GWhp=100;//怪物總血量

function setTop() {



    TopDiv = new LSprite();//定義top層

    TopDivbm = new LSprite();//定義top緩沖層

    var Topshape = new LShape();//定義畫圖對象

    Topshape.graphics.drawRect(0, "#000", [0, 0, 484, 100, 10], true, "#000");//繪制一個矩形

    Topshape.alpha = 0.6;  //透明度

    TopDivbm.addChild(Topshape); //添加矩形對象







    userheadimg = CreatImg("userhead",0.62,0.62,22,12);//添加玩家頭像

    TopDivbm.addChild(userheadimg);



    headborderimg =  CreatImg("headborder",0.8,0.8,18,7);//添加頭像邊框

    TopDivbm.addChild(headborderimg);



    TopDivboshu1 = new LSprite();//波數按鈕層

    boshuimg1 = CreatImg("bbtn",0.8,0.8,0,0);

    TopDivboshu1.x = 94;

    TopDivboshu1.y = 10;

    TopDivboshu1.addChild(boshuimg1);

    TopDivboshu1text =CreatText(16,"#fff",GuankaIndex - 2,"微軟雅黑", "#603932",true,2, "bolder",0,0);

    TopDivboshu1text.y = 14 - TopDivboshu1text.getHeight() / 2;

    TopDivboshu1text.x = 45 - TopDivboshu1text.getWidth() / 2 - 21;

    if (GuankaIndex - 2 <= 0) TopDivboshu1text.text = "";

    TopDivboshu1.addChild(TopDivboshu1text);

    TopDivbm.addChild(TopDivboshu1);





    TopDivboshu2 = new LSprite();//波數按鈕層

    boshuimg2 = CreatImg("bbtn",0.8,0.8,0,0);

    TopDivboshu2.x = 148;

    TopDivboshu2.y = 10;

    TopDivboshu2.addChild(boshuimg2);

    TopDivboshu2text =CreatText(16,"#fff",GuankaIndex - 1,"微軟雅黑", "#603932",true,2, "bolder",0,0);

    TopDivboshu2text.y = 14 - TopDivboshu2text.getHeight() / 2;

    TopDivboshu2text.x = 45 - TopDivboshu2text.getWidth() / 2 - 21;

    if (GuankaIndex - 1 <= 0) TopDivboshu2text.text = "";

    TopDivboshu2.addChild(TopDivboshu2text);

    TopDivbm.addChild(TopDivboshu2);



    TopDivboshu3 = new LSprite();//波數按鈕層

    boshuimg3 = CreatImg("rbtn",0.8,0.8,0,0);

    TopDivboshu3.x = 202;

    TopDivboshu3.y = 7;

    TopDivboshu3.scaleX = 1.2;

    TopDivboshu3.scaleY = 1.2;

    TopDivboshu3.addChild(boshuimg3);

    TopDivboshu3text =CreatText(16,"#fff",GuankaIndex ,"微軟雅黑", "#603932",true,2, "bolder",0,0);

    TopDivboshu3text.y = 14 - TopDivboshu3text.getHeight() / 2;

    TopDivboshu3text.x = 45 - TopDivboshu3text.getWidth() / 2 - 21;

    TopDivboshu3.addChild(TopDivboshu3text);

    TopDivbm.addChild(TopDivboshu3);



    TopDivboshu4 = new LSprite();//波數按鈕層

    boshuimg4 = CreatImg("bbtn",0.8,0.8,0,0);

    TopDivboshu4.x = 265;

    TopDivboshu4.y = 10;

    TopDivboshu4.addChild(boshuimg4);

    TopDivboshu4text =CreatText(16,"#fff",GuankaIndex + 1,"微軟雅黑", "#603932",true,2, "bolder",0,0);

    TopDivboshu4text.y = 14 - TopDivboshu4text.getHeight() / 2;

    TopDivboshu4text.x = 45 - TopDivboshu4text.getWidth() / 2 - 21;

    TopDivboshu4.addChild(TopDivboshu4text);

    TopDivbm.addChild(TopDivboshu4);



    TopDivboshu5 = new LSprite();//波數按鈕層

    boshuimg5 = CreatImg("bbtn",0.8,0.8,0,0);

    TopDivboshu5.x = 318;

    TopDivboshu5.y = 10;

    TopDivboshu5.addChild(boshuimg5);

    TopDivboshu5text =CreatText(16,"#fff",GuankaIndex + 2,"微軟雅黑", "#603932",true,2, "bolder",0,0);

    TopDivboshu5text.y = 14 - TopDivboshu5text.getHeight() / 2;

    TopDivboshu5text.x = 45 - TopDivboshu5text.getWidth() / 2 - 21;

    TopDivboshu5.addChild(TopDivboshu5text);

    TopDivbm.addChild(TopDivboshu5);



    //玩家昵稱

    nicknametext = CreatText(16,"#fff","喬克灬叔叔","微軟雅黑", "",false,0, "bolder",0,75);

    nicknametext.x = 60 - nicknametext.getWidth() / 2 - 10;

    TopDivbm.addChild(nicknametext);



    //玩家金幣圖標

    jinbiimg =  CreatImg("jinbi",0.4,0.4,359,-3);

    TopDivbm.addChild(jinbiimg);



    //玩家鑽石圖標

    zsimg =  CreatImg("zuanshi",0.6,0.6,371,32);

    TopDivbm.addChild(zsimg);



    //玩家攻擊力圖標

    gongjiliimg =  CreatImg("gongjili",0.5,0.5,374,64);

    TopDivbm.addChild(gongjiliimg);



    //怪物血量背景

    gwhpsbgimg =  CreatImg("gwhpsbg",1,1,131,62);

    TopDivbm.addChild(gwhpsbgimg);

    TopDivbm.cacheAsBitmap(true);

    TopDiv.addChild(TopDivbm);



    //怪物血量

    gwhpsimg =  CreatImg("gwhps",1,1,132,63);

    TopDiv.addChild(gwhpsimg);



    //玩家金幣

    jinbitext= CreatText(16,"#fff",Money,"微軟雅黑", "#603932",false,2, "bolder",402,8);

    TopDiv.addChild(jinbitext);



    //玩家鑽石

    zuanshitext= CreatText(16,"#fff",zuanshi,"微軟雅黑", "#603932",false,2, "bolder",402,37);

    TopDiv.addChild(zuanshitext);



    //玩家攻擊力

    gongjilitext= CreatText(16,"#fff",Dps,"微軟雅黑", "#603932",false,2, "bolder",402,66);

    TopDiv.addChild(gongjilitext);



    //當前波數

    boyushutext= CreatText(14,"#fff",BoIndex + "/10","微軟雅黑", "#603932",true,2, "bolder",140,0);

    boyushutext.y = 10 - boyushutext.getHeight() / 2 + 59;

    TopDiv.addChild(boyushutext);



    //怪物血量總計信息

    Gwhpyushutext= CreatText(14,"#fff",GWhpyushu + "/" + GWhp,"微軟雅黑", "#603932",true,2, "bolder",140,0);

    Gwhpyushutext.y = 10 - Gwhpyushutext.getHeight() / 2 + 59;

    Gwhpyushutext.x = 326 - Gwhpyushutext.getWidth()-3;

    TopDiv.addChild(Gwhpyushutext);



    //玩家信息按鈕圖標

    hwenhaoDiv1 = new LSprite();

    hwenhaoimg =  CreatImg("userinfo",0.5,0.5,65,52);

    hwenhaoDiv1.addChild(hwenhaoimg);

    TopDiv.addChild(hwenhaoDiv1);

    BGDiv.addChild(TopDiv);

}



//創建圖片對象公共方法

function CreatImg(name,scaleX,scaleY,x,y)

{

    var bitmapData = new LBitmapData(loadData[name]);

    var img = new LBitmap(bitmapData);

    img.scaleX =scaleX;

    img.scaleY =scaleY;

    img.x = x;

    img.y = y;

    return img;

}



//創建文本對象公共方法

function CreatText(size,color,text,font,lineColor,stroke,lineWidth,weight,x,y)

{

    var txt = new LTextField();

    txt.size = size;

    txt.color = color;

    txt.text = text;

    txt.font = font;

    txt.lineColor = lineColor;

    txt.stroke = stroke;

    txt.lineWidth = lineWidth;

    txt.weight = weight;

    txt.x =x;

    txt.y =y;

    return txt;



}
 
 

 

運行游戲，top層已經OK了！

 

 

 

 

這時我們再看控制台，只有4個圖片對象，但達到了我們所需要的效果，這樣就起到了優化的作用，游戲運行效率會大大提高！

 

本篇教程結束，如果代碼中有不理解的地方可以選擇跳過，這里因為程序結構會預先寫出一些需要預留的代碼，后面會一一落實。

 

本篇源代碼+素材 下載地址：http://pan.baidu.com/s/1c2zeKda

 

下一篇我們將講解  怪物的動畫與位移