Can a web front end be a career game?

Manfredhu
Links: http://www.manfredhu.com/2018/03/15/31-laya-game-tips/index.html
Disclaimer: Copyright, reproduced Please retain this paragraph information, thank you

Layabox

The Web front end has recently been cross-border!! Now he's reaching out to the field of play. But is it really that good cross-border? Please give me one by one way.

The advent of canvas and WebGL actually makes the web game possible to achieve, but let us use ctx one after another to draw, efficiency or low point, so need game engine. It helps us to dynamically render the elements of each frame of the game.

The industry more famous several H5 game engine, has Egret (egrets), Layabox,three.js,coco2d-js and so on, the details can see the answer.
Because our team is not the beginning of the game, we are the traditional sense of the front-end team, from the Web, the first to do is the business of e-commerce-pat. So here we combine several game engines and choose Layabox.
It's a little bit like:

1. Layaair is an excellent multi-terminal game engine, equipped with a rich set of components, has its own IDE can quickly build layouts, etc., do not need to write CSS-like code
2. HTML-enabled page rendering, which means you can mix the game engine with a Web page (which is useful in some text-like pages)
3. Support 2D, 3D and even VR development. Performance is good enough
4. The general difficulty of getting started on the Web front end is much simpler than other engine frameworks
5. No need to write refactoring (CSS) code

In fact, our team was also done H5 guessing games, but based on the DOM, with CSS3 animation. But finding CSS3 to manipulate complex animations has many drawbacks:

1. Very poor support for complex animations
2. Too many page elements, poor rendering performance
3. Many complex requirements are time-consuming to do.
4. Player mobile phone easy to hot (More page elements, animation complex)

Therefore, we go through pre-research and discussion, decisively out of the traditional Web development model, embrace the traditional game development!! Of course, this is certainly not smooth sailing, from the Web front to the game development, or there are a lot of pit point.

First need to get rid of HTML and CSS, you are not doing the page, you are doing a game!! The logic of the game occupies a 80% of the work of a game, so you are writing JavaScript code very often, which is not a problem, and secondly, you need to have the idea of object-oriented programming. This may be lacking in many old front ends, because javascirpt is ultimately a function-oriented, process-oriented language. People know modularity, but they are still used to writing function rather than ES6 class .

Here because the platform is also in transition to ES6 near, so boldly adopted ES6+Babel+Webpack the model, even in doing Weex, small programs, web three-end fusion. That is, a code that can run on three platforms. It's a little far, huh? Below the beginning of the text, we do not say usage, specifically to say some pit points, and the pros and cons of the comparison.

Where the game engine doesn't work

Game engine This thing in the animation piece is really good, can highly restore the designer's animation, but its no page layout, more layout should be x, y, change pivot, anchor properties to achieve.
CSS can be very quickly through the layout of the code (flex, float, position and other properties), Web page that top-down content typesetting can automatically adapt to the content, the word processing is very convenient.

For their own advantages and disadvantages, from the realization of the convenience, the game home scene (animation very much), in order to improve the user's experience, should use the game engine to write.
And for some activities floating layer, betting records, game rules and so on a large number of picture text pages, should be used in the traditional Web page to write, so that is the best use of the practice.

In this context, the front-end of the game development needs to master several skills-simple game development skills, refactoring part of the building skills (team large front-end trend, the removal of refactoring jobs, refactoring work by the front end of the takeover), can say the workload doubled. But in the business side to consider, because the reduction of the relevant intermediate links, the demand iteration can be more quickly landed.

Laya IDE Use the place to note

Layaide provides a library of components, such as a list of lists, tab switch, and so on, simple Web components can be dragged and used without having to implement the code again.
But the IDE comes with a lot of components have pit point, such as the list component of the Selecthandler trigger is not sensitive, the data source re-binding will be a click can not respond to the problem, this time to bind Mousehanlder to replace the Click event.
The use of the IDE for unfamiliar people is not easy to get started, proficiency can improve efficiency. Specific can be crossing the introduction of the net.

Scenecolor doesn't work.

This property is a configuration property of the IDE and does not work at the time of reference. It can be understood as an IDE's background color, which allows you to see more clearly when editing with the IDE.
Scenecolor doesn't work.
If you need to change the background color, it should be done by drawing a rectangle at the bottom.

1	this. Graphics.drawrect (0, 0, this. Stage.width, this. Stage.height, ' #404d6f '); //Set background color

var and namevar

General component View no matter how deep the nesting level, as long as there is a var attribute named, can be used this.xxx to get the Var attribute to take the reference of the component, and logical operation.

Name

and name in a particular component name has its own naming rules, such as the list of box, named Render, you can automatically identify the box for the list of internal rendering nodes, set list of the repeat equivalent, directly and easily implement some functions.
For example, dialog interface, we set BTN name is close, yes, no equivalent, you can directly implement the function of Closing the dialog window, and so on. The name is also unique under this component and can be used to differentiate between different components.

The effect of top and right on X, y

If the component has the top and right equivalents set, the X, Y variation on it is not valid.
WORKAROUND: The IDE sets the layout to be canceled by these properties and translates to the corresponding x, y values, which can be manipulated at this time

Picture set image is too large to cause the image to fail to load

Previously, according to the official recommendations of the engine set the maximum collection picture is 2048 times 2048, after our test found that 1024 wide-height is more suitable for most models, that is, the maximum picture can not exceed 1024, or the hand Q will have the picture load time too long lead to failure problems.
this could be a partial merged large picture download failure, or it could be a full download failure. The engine then downloads each fragmented file separately, and the server does not have those files, causing the download to return all 404. this situation should be avoided as much as possible.

The display area is not exactly equal to the click area

In a word: what you see is not necessarily true. If I want to complete the close button, then hide the entire floating layer.
But you can clearly see that the binding click event is not triggered.
This is because the height or width of this level is too small and the part that is obscured is not triggered. But it's visible.

Separating code and engineering

Originally because do not want to write code under the Layaide, so divided into two parts, later found that this form is still very OK, because the Laya staff is not the traditional front-end development, their IDE is similar to atom-like electron, so actually run up coding experience is not too good. Second, because the IDE generates picture (PNG) and Atlas files, the static resources for these picture classes are updated very often. If you only need to modify the code, or just modify the picture Atlas, publish it once, do not need to publish two at the same time.

Such separation, code you can follow the way you like to write, such as webpack configuration works, such as file placement, how to put how to put. It would be nice to have a copy of what Laya generated.

Design drafts and Project sizes

Here our design draft and the IDE's width height is completely corresponding, so there is no conversion problem. There is no need for a CSS-like to do REM compatibility and so on. You set the width is 750, the height will automatically stretch, but the page level of the display, need to be stretched at the time of initialization, or the IDE set the width of the height, of course, if you are afraid of the above mentioned point, you can also set a very large value.

Object.assign compatible

Object.assign is the ECMAScript standard method of merging object properties, similar to the extend of jquery, and so on.
If you abandon jquery and zepto and so lazy to write extend method, and hug ES6, then you can like me to find polyfill to be compatible, here Babel official has a module
can also choose to do their own compatibility, at the beginning of the entrance to load the compatible file is good.

Anti-aliasing issues

The problem is that under WEBGL (Canvas does not), graphics.drawCircle there is a jagged problem with the drawn ring. Such as:
Sawtooth Issues
On the left, antialiasing is not set, and anti-aliasing is set on the right.

12	Laya.config.isantialias=true; //Turn anti-aliasing on and consume some performance Laya.init (Browser.clientwidth, Browser.clientheight, WebGL);

Mask mask does not support anti-aliasing

The difference between having or not sawtooth processing
, the bottom is not optimized before, the sawtooth is serious. The picture above is optimized, and the clear border is much clearer.
Here before the idea is a rectangular avatar and mask mask for a whole in front, and then inside and outside the bounding box level in the back, but in this case, the Mask mask part now Laya is not anti-aliasing, so here the public picture component of the parameter extension, add the ZOrder parameter. The anti-aliasing effect can be achieved by having the frame cover on the avatar.
The final idea of implementation is shown in the hierarchy.
Avatar level

Laya several optimization methods to get pixel ratio with Laya's own attributes

123	//var browserheight = document.body.scrollHeight * window.devicepixelratio; var browserheight = Laya.Browser.height; //will consider the device pixel ratio and will adjust the completion for specific models `

This doesn't have to be self- Laya.Broswer made, now can be obtained. simplifies the computational process

Inheriting the parent class with the. Super () method

The LAYA.CLASS definition will be defined in the prototype. Super method, just use it right. Two usages are equivalent, but it looks like. Super simpler?
There may be some examples xxx._super.call(this) of inheriting from the parent class, in fact, xxx.super(this) just fine. _superor as a private attribute OK.

Can a web front end be a career game?