Using Html5 + C # + WeChat to develop mobile games: (6) game interface layout and Performance Optimization,

Use Html5 + C # + to develop mobile games: (6) game interface layout and Performance Optimization,

In this tutorial, we will mainly explain the general principles of layout on the game interface and some general performance optimization methods.

Next tutorial (5), we loaded all the image materials at one time through the Loading class. Now we need to change the materials we use into image objects displayed on the interface, from top to bottom, the first is the top layer. The top layer contains the player's () profile picture, level information, monster blood records, player gold coins, player gems, and total attacking power.

 

Define the setTop function to initialize the top layer:

 

Function setTop () {TopDiv = new LSprite (); // defines the top layer var Topshape = new LShape (); // defines the top shape of the Drawing Object. graphics. drawRect (0, "#000", [0, 0,484,100, 10], true, "#000"); // draw a rectangular Topshape. alpha = 0.6; // transparency TopDiv. addChild (Topshape); // Add a rectangle object BGDiv. addChild (TopDiv); // Add the top layer userheadimg = CreatImg ("userhead", 0.62, 0.62,); // Add the TopDiv of the player avatar. addChild (userheadimg); headborderimg = CreatImg ("headborder", 0.8, 0.8,); // Add the TopDiv of the Avatar border. addChild (headborderimg);} // create an image object using the common 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 ;}

 

Run the command to find that the Avatar has been added successfully!

 

 

We can add an engine console to view the current game running status:

AddChild (new FPS ());

 

 

FPS indicates the game speed. If the game speed is significantly lower than the preset speed, frame freezing may occur.

Draw image indicates the number of image objects.

Draw graphics indicates the number of drawing objects, such as a circular rectangle.

Draw text indicates the number of text objects. At present, we have created a total of three image objects, including the background image, avatar, and Avatar border. When the number of objects exceeds a certain number, many system resources will be occupied, resulting in no response, so we need to make some optimization. When we set the layer where the object is located, the internal bitmap representation of the cached Display object will be used. The cacheAsBitmap function is used and the parameter is set to true, all objects in this layer will be merged into an image and output, which can be understood as the meaning of merging layers in photoshop. After this takes effect, operations on this object will not show the effect, for example, if the value of a text is "1" and the cacheAsBitmap function is used, the image does not take effect even if the value is changed to "2". You need to set it to false before modifying it, set it to true, so in principle, some static images and text must be optimized using the cacheAsBitmap function, and some dynamic variables, such as gold coins, can be ignored, because it will change at any time, but it is not absolutely impossible to use cacheAsBitmap, which needs to be used on the occasion. To make it easy for everyone to understand, the following is the complete top layer layout and optimization code:

GuankaIndex = 1; // number of current levels Money = 100; // gold coin zuanshi = 50; // diamond Dps = 800; // total Attack Strength BoIndex = 1; // current wave number GWhpyushu = 10; // remaining monster blood volume GWhp = 100; // total monster blood volume function setTop () {TopDiv = new LSprite (); // define the top layer TopDivbm = new LSprite (); // define the top Buffer Layer var Topshape = new LShape (); // define the top shape of the Drawing Object. graphics. drawRect (0, "#000", [0, 0,484,100, 10], true, "#000"); // draw a rectangular Topshape. alpha = 0.6; // transparency TopDivbm. addChild (Topshape); // Add the rectangular object userheadimg = CreatImg ("userhead", 0.62, 0.62,); // Add the TopDivbm. addChild (userheadimg); headborderimg = CreatImg ("headborder", 0.8, 0.8,); // Add the TopDivbm. addChild (headborderimg); TopDivboshu1 = new LSprite (); // wave number button layer boshuimg1 = CreatImg ("bbtn", 0.8, 0.8,); TopDivboshu1.x = 94; Limit = 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 (); // wave number button layer boshuimg2 = CreatImg ("bbtn", 0.8, 0.8, 148,); TopDivboshu2.x =; Limit = 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 (); // wave number button layer boshuimg3 = CreatImg ("rbtn", 0.8, 0.8, 202,); TopDivboshu3.x =; Limit = 7; keys = 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 (); // wave number button layer boshuimg4 = CreatImg ("bbtn", 0.8, 0.8, 265,); TopDivboshu4.x =; Limit = 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 (); // wave number button layer boshuimg5 = CreatImg ("bbtn", 0.8, 0.8, 318,); TopDivboshu5.x =; Limit = 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); // The Player nickname nicknametext = CreatText (16, "# fff", "Uncle jokwell", "", "", false, 0, "bolder", 0, 75); nicknametext. x = 60-nicknametext. getWidth ()/2-10; TopDivbm. addChild (nicknametext); // player Gold Icon jinbiimg = CreatImg ("jinbi", 0.4, 0.4, 359,-3); TopDivbm. addChild (jinbiimg); // player diamond icon zsimg = CreatImg ("zuanshi", 0.6, 0.6, 371,32); TopDivbm. addChild (zsimg); // the player's attack strength icon gongjiliimg = CreatImg ("gongjili", 0.5, 0.5, 374,64); TopDivbm. addChild (gongjiliimg); // background gwhpsbgimg = CreatImg ("gwhpsbg", 131,62); TopDivbm. addChild (gwhpsbgimg); TopDivbm. cacheAsBitmap (true); TopDiv. addChild (TopDivbm); // gwhpsimg = CreatImg ("gwhps", 132,63); TopDiv. addChild (gwhpsimg); // player gold coins jinbitext = CreatText (16, "# fff", Money, "", "#603932", false, 2, "bolder ", 402,8); TopDiv. addChild (jinbitext); // player diamond zuanshitext = CreatText (16, "# fff", zuanshi, "", "#603932", false, 2, "bolder ", 402,37); TopDiv. addChild (zuanshitext); // gamer attack force gongjilitext = CreatText (16, "# fff", Dps, "", "#603932", false, 2, "bolder ", 402,66); TopDiv. addChild (gongjilitext); // The current wave number boyushutext = CreatText (14, "# fff", BoIndex + "/10", "", "#603932", true, 2, "bolder", 140,0); boyushutext. y = 10-boyushutext. getHeight ()/2 + 59; TopDiv. addChild (boyushutext); // total monster volume 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); // player Information Button icon hwenhaoDiv1 = new LSprite (); hwenhaoimg = CreatImg ("userinfo", 0.5, 0.5, 65,52); expires (hwenhaoimg); TopDiv. addChild (hwenhaoDiv1); BGDiv. addChild (TopDiv);} // create the image object public method 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;} // create a text object using the common 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 ;}

 

Running the game, the top layer is OK!

 

 

 

 

Now let's look at the console. There are only four image objects, but they have achieved the desired effect, which plays a role in optimization and greatly improves the game running efficiency!

 

At the end of this tutorial, if there is something you don't understand in the code, you can skip it. Here, because the program structure will write some code that needs to be reserved in advance, it will be implemented one by one later.

 

This article source code + Material: http://pan.baidu.com/s/1c2zeKda

 

Next we will explain the animation and displacement of monsters.