使用Html5+C#+微信开发移动端游戏详细教程:（六）游戏界面布局与性能优化 - 乔克灬叔叔_H5之家

本篇教程我们主要讲解在游戏界面上的布局一般遵循哪些原则和一些性能优化的通用方法。

接着教程（五），我们通过Loading类一次性加载了全部图像素材，现在要把我们所用到的素材变成图片对象显示在界面上，由上而下，首先是top层，top里面包涵了玩家（微信）头像，关卡信息，怪物血条信息，玩家金币，玩家宝石，玩家总攻击力。

定义函数 setTop 来初始化top层：

function setTop() { TopDiv = 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); } 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; setTop() { TopDiv = new LSprite();//定义top层 TopDivbm = 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 + "http://www.cnblogs.com/" + 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); } 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; } 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; }