Wizard menu and picture menu in Cocos2d-JS

Wizard menu and picture menu in Cocos2d-JS
The menu item class of the genie menu is cc. MenuItemSprite, And the menu item class of the Image menu is cc. MenuItemImage. Because cc. MenuItemImage inherits from cc. MenuItemSprite, the image menu also belongs to the genie menu. Why is it called the genie menu? This is because these menu items have the characteristics of the genie, we can make the genie move up, the specific use is to put a genie in the menu as a menu item.
Cc. MenuItemSprite In the genie menu item class. One of its constructor is defined as follows:

Ctor (normalSprite, // The sprite selectedSprite when the menu item is normally displayed, // The sprite callback when the menu item is selected, // The callback function pointer of the menu operation target)

It is troublesome to use cc. MenuItemSprite. Before creating cc. MenuItemSprite, you must first create three genie (normalSprite, selectedSprite, and disabledSprite) required for different states ). Cc. MenuItemSprite has other constructor functions that can omit the disabledSprite parameter.
If the genie is composed of images, we can use cc. MenuItemImage to achieve the same effect as the genie menu. One of the constructor definitions of the cc. MenuItemImage class is as follows:

Ctor (normalImage, // select the image selectedImage when the menu item is displayed normally, // select the image callback when the menu item is displayed, // The callback function pointer of the menu operation target)

Cc. MenuItemImage has some constructors, which can omit the disabledImage parameter.
This section describes how to use the wizard menu and Image menu through an example.


The following figure shows the initialization code in HelloWorldLayer in app. js:

Var HelloWorldLayer = cc. layer. extend ({ctor: function () {this. _ super (); var size = cc. director. getWinSize (); var bg = new cc. sprite (res. background_png); bg. x = size. width/2; bg. y = size. height/2; this. addChild (bg); // start the genie var startSpriteNormal = new cc. sprite (res. start_up_png); ① var startSpriteSelected = new cc. sprite (res. start_down_png); ② var startMenuItem = new cc. menuItemSprite (startSpriteNo Rmal, startSpriteSelected, this. menuItemStartCallback, this); ③ startMenuItem. x = 700; ④ startMenuItem. y = size. height-170; ⑤ // set the image menu var settingMenuItem = new cc. menuItemImage (res. setting_up_png, res. setting_down_png, this. menuItemSettingCallback, this); ⑥ settingMenuItem. x = 480; settingMenuItem. y = size. height-400; // help Image menu var helpMenuItem = new cc. menuItemImage (res. help_up_png, res. h Elp_down_png, this. menuItemHelpCallback, this); 7helpmenuitem. x = 860; helpMenuItem. y = size. height-480; var mu = new cc. menu (startMenuItem, settingMenuItem, helpMenuItem); mu. x = 0; mu. y = 0; this. addChild (mu) ;}, menuItemStartCallback: function (sender) {cc. log (menuItemStartCallback !); }, MenuItemSettingCallback: function (sender) {cc. log (menuItemSettingCallback !); }, MenuItemHelpCallback: function (sender) {cc. log (menuItemHelpCallback !); }});

In the above Code ~ (2) The line is used to create two genie in different States. (3) The line code is used to create the cc. MenuItemSprite object of the genie menu item, (4 ~ ⑤ The line of code sets the position of the Start menu item (startMenuItem). Note that the coordinates are (700,170). Because the coordinates of (700,170) are UI coordinates, You need to convert them to OpenGL coordinates, this conversion process is startMenuItem. y = size. height-170.
Lines 6 and 7 are the cc. MenuItemImage object for creating the image menu item. The first line of code is to create the cc. Menu object.
In addition, because the background image size is 1136x640, we can create a 1136x640 horizontal screen project when creating the project, we can modify the main. the content of the js file is as follows:

cc.game.onStart = function(){    cc.view.setDesignResolutionSize(1136, 640, cc.ResolutionPolicy.EXACT_FIT); ①cc.view.resizeWithBrowserSize(true);    //load resources    cc.LoaderScene.preload(g_resources, function () {        cc.director.runScene(new HelloWorldScene());    }, this);};cc.game.run();

We need to modify the screen size code in line ①.