HTML5技术

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

字号+ 作者:H5之家 来源:H5之家 2017-01-08 09:00 我要评论( )

本篇教程我们主要讲解在游戏界面上的布局一般遵循哪些原则和一些性能优化的通用方法。 接着教程(五),我们通过Loading类一次性加载了全部图像素材,现在要把我们所用到的素材变成图片对象显示在界面上,由上而下,首先是top层,top里面包涵了玩家(微信)

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

接着教程(五),我们通过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; }

 

运行游戏,top层已经OK了!

 

 

 

 

这时我们再看控制台,只有4个图片对象,但达到了我们所需要的效果,这样就起到了优化的作用,游戏运行效率会大大提高!

 

本篇教程结束,如果代码中有不理解的地方可以选择跳过,这里因为程序结构会预先写出一些需要预留的代码,后面会一一落实。

 

本篇源代码+素材 下载地址:

 

下一篇我们将讲解  怪物的动画与位移

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序体验(2):驴妈妈景区门票即买即游 - 腾讯攻城师lee

    微信小程序体验(2):驴妈妈景区门票即买即游 - 腾讯攻城师lee

    2017-01-08 08:02

  • 总结的一些微信API接口 - 菜鸟的飞翔梦

    总结的一些微信API接口 - 菜鸟的飞翔梦

    2017-01-08 08:01

  • 微信小程序开发—快速掌握组件及API的方法 - iyifei

    微信小程序开发—快速掌握组件及API的方法 - iyifei

    2017-01-05 16:02

  • 【微信小程序开发系列文章六】生命周期和路由 - iyifei

    【微信小程序开发系列文章六】生命周期和路由 - iyifei

    2017-01-05 15:04

网友点评