使用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

 

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