JavaScript Intensive tutorial--cocosjs screen adaptation scheme

This article is the official HTML5 training course for h5edu institutions, mainly introduces: JavaScript intensive tutorial--cocosjs screen adaptation scheme

First of all, humorous aside, for any large project, the coding specification is important, in cocos2dx-jsbinding this framework, JavaScript is an absolute core of the scripting language, 99% of the game logic is done by JS. Scripting is definitely larger than most Web projects, and mastering the solid foundation of JavaScript is critical.

Today, we are talking about how to use JSB to deal with the multi-resolution adaptation of mobile platforms. In terms of the current mobile platform, the resolution is flourishing, and do not talk about the Android platform a variety of bizarre resolution, on the iOS platform has IP4 (960*640), IP5 (1136*640), Ipad2,mini (1024x768), IPAD3,IPAD4 ( 2048*1536), these four kinds of course there will be more, how to guarantee a set of code, a set of resources-take-all Android and iOS platform, while the layout of the game is not biased, can be appropriate benefits, this is our goal. Cocos2d-x itself offers several screen adaptation APIs, but it's not perfect, and each one has its own flaws, and I'll show you how to handle this tricky problem with JS. First of all we want to define the actual use of the resource resolution, that is, the art design is the resolution size, here we define the resource as 960*640, what is the benefit of this resolution? The first is that this resolution is a medium type resolution, which is more than 1 years ago mainstream Android resolution 800*480) Large, smaller than the new high-end model resolution, but also the mainstream iOS resolution. Choose the size of the resources have a point, can not choose too high, so the low-end model is wasteful, you need to spend a lot of download to save these resources, not worth, but choose too small also not, high-end models on the fuzzy incomparable, so choose a medium resolution.

Resolution adaptation of the core idea is scaling, that is, Layer.scale function, but must be equal to the scale, if using Layer.scalex or Layer.scaley function, although the game screen can be very simple to make the resolution to fit into a no black edge, But the entire game screen has been stretched or squeeze, not to achieve the effect we need.

There are generally 3 categories of layers in the game.

1. Larger than the screen layer, can be dragged, scaled, or can move the scene with the role of moving scenes, the general scenario is the main city, copy and so on.

2. The middle layer, which is generally centered in both horizontal and vertical directions, is centered on One direction. This is typically the UI bullet layer.

3. The side-by-side layer, typically the UI, is glued to the edge of the screen, respectively.

The above types are basic types, and of course a scenario may be a combination of several layer types above. For example, a traditional nine gongge, the arrangement of the characters is based on the center, the UI distribution is to pull over, when the implementation of the character and UI we draw 2 layers, each layer based on the corresponding type of scaling, you can achieve the desired effect.

Below are some explanations of how three types of layers are scaled.

The first: This is actually the simplest, because the basemap of this layer is more than the screen (generally more than a lot, because to do the move and multipoint scaling, or to move with the character at least one screen), so as long as a universal scaling can be, what is universal scaling, or see the code

    Get the screen size            var size = cc. Director.getinstance (). Getwinsize ();           This.designresolution = Cc.size (960,640);             Get aspect coefficient            var widthRatio = Size.width/this.designresolution.width,heightratio = size.height/ This.designResolution.height;            if (WidthRatio!=1 | | heightratio!=1) {                //scaled by a small factor to scale                if (widthratio
The second type: set the coordinates of the layer on the basis of the above general scale, so that it can be centered up or down
    var size = cc. Director.getinstance (). Getwinsize ();            This.setposition (CC.P (size.width-this.designresolution.width*this._scaleratio)/2, ( Size.height-this.designresolution.height*this._scaleratio)/2));
 The Third Kind: This layer is close to the edge of the screen, so we have to set his anchor point, we divide the entire layer into 9 points, just to render a "meter" font, where each point needs a new layer to set its anchor point. 
    This._uilayermap = This._uilayermap | |            {};            if (This._uilayermap[directiontype]) {return this._uilayermap[directiontype]; } var layer = cc.            Layer.create ();            Layer.setposition (CC.P (0,0));            This._uilayermap[directiontype] = layer; Set anchor position switch (directiontype) {case 1:layer.setanchorpoint according to Directiontype.                    (CC.P (0,1));                Break                    Case 2:layer.setanchorpoint (CC.P (0.5,1));                Break                    Case 3:layer.setanchorpoint (CC.P);                Break                    Case 4:layer.setanchorpoint (CC.P (1,0.5));                Break                    Case 5:layer.setanchorpoint (CC.P (1,0));                Break                    Case 6:layer.setanchorpoint (CC.P (0.5,0));                Break Aa1E 7:layer.setanchorpoint (CC.P (0,0));                Break                    Case 8:layer.setanchorpoint (CC.P (0,0.5));            Break } this.addchild (layer);
Of course, after these layers are generated, you need to do a general scale. Pay attention to 2 points when using.

1. Set the coordinates to calculate the size according to Size.width and Size.Height, for example, I set the bottom right corner of the screen UI coordinates
    Sprite1.setpositon (size.width,50);    Sprite2.setpositon (size.width-80,50);    Sprite3.setpositon (size.width-160,50);
2. For each corner of the layer you need to select the above set the corresponding anchor point layer.
Click to enter JS Intensive tutorial: http://www.h5edu.cn/htm/step/h5edu_44.html
JavaScript Intensive tutorial--cocosjs screen adaptation scheme