Cómo utilizar Cocos2d-JS para crear una página de promoción de inscripción al canal WeChat

Si no ha utilizado Cocos2d-JS, puede descargarlo desde el sitio web oficial de cocos. Aquí estamos usando 3.0final, o podemos descargar la versión simplificada de Cocos2d-JS. , la versión simplificada puede descargar fácilmente los módulos necesarios según sea necesario, lo que puede reducir en gran medida el tamaño del código. Se puede descargar aquí. El módulo que debemos usar es core?actions?menuprogress-timer. El módulo que necesitamos es core?actions?menuprogress-timer. Seleccione la versión personalizada en esta página, seleccione el módulo anterior y luego haga clic para descargar.

Aquí, creamos un nuevo proyecto usando la línea de comando de cocos

$cd cocos2d-js/tools/cocos2d-console/bin $. /cocos new weChat -l js --no-native $cd weChat/ $./cocos run -p web

La configuración del entorno no es el tema central de este artículo. Para obtener más detalles, consulte: "Configuración. crear el entorno de desarrollo Cocos2d-JS".

Implementación de la interfaz principal y su marco de cambio de página

El código de entrada del programa está en main.js Ábrelo con un editor y modifícalo al siguiente código.

cc.game.onStart = function () { cc.view.adjustViewPort(true); cc.view.enableAutoFullScreen(false); var mode = cc.sys.isMobile && amp; userAgent.indexOf("MicroMessenger")! = -1? cc.ResolutionPolicy.FIXED_HEIGHT: cc.sys.isMobile? cc.ResolutionPolicy.FIXED_WIDTH: cc.ResolutionPolicy.SHOW_ALL; : cc.sys.isMobile ?LoaderScene.preload(g_resources, function () { cc.director.runScene(new MainScene()); }, this}); > Los puntos clave se resuelven de la siguiente manera:

1. Configure el elemento del navegador para que se adapte a la pantalla. El motor establecerá el valor de la ventana gráfica del elemento internamente de acuerdo con el tamaño de la pantalla, lo que logrará una mejor adaptación de la pantalla.

2. Habilite diferentes estrategias de adaptación de resolución para navegadores móviles y de PC.

3. Precarga imágenes, sonidos y otros recursos. cc.LoaderScene.preload generará una interfaz de "carga x%", esperará a que se cargue el recurso y luego llamará a la función anónima pasada como segundo parámetro. Para los juegos basados ​​en HTML, la página se colocará en el servidor para que la descargue el navegador. Para obtener una experiencia de usuario fluida, cc.LoaderScene.preload hará que el navegador almacene en caché los recursos del servidor remoto localmente primero. Los recursos que deben cargarse previamente se definen en el archivo src/Resources.js.

4. Comienza la primera escena del juego.

La interfaz principal está dividida en dos partes. La primera parte es la flecha hacia arriba y el botón de música, que no se moverá con la pantalla; la segunda parte es la escena que cambia según el usuario desliza la pantalla. .

Primero construimos las funciones requeridas de acuerdo con nuestras propias necesidades y las implementamos una por una. Aquí usamos cc.Scene.extend() para extender una escena, y construimos las funciones requeridas en esta escena e implementamos. ellos uno por uno.

El método cc.Scene.extend proporcionado por el motor permite a js implementar la función de herencia de lenguajes orientados a objetos de alto nivel. En el método onEnter, debes llamar a this._super(); para asegurarte de que la escena se haya inicializado correctamente.

La función initUI() se utiliza para inicializar la interfaz de usuario.

La función initTouch() se utiliza para inicializar eventos táctiles.

La función changePage() se usa para cambiar de página y el parámetro currentIndex se usa para registrar la página actual.

La función toggleArrow() se usa para controlar la visualización y ocultación de flechas

Devolución de llamada de función para controlar los botones de música

var MainScene = cc.Scene.extend({ listener: null, accelListener: null, currentIndex: 0, sceneList: [], ctor: función () { this._super (); cc.spriteFrameCache. addSpriteFrames(res.firstPage_plist); onEnter: función () { this._super(); : función () { }, toggleMusicCaller: función () { }, cc.spriteFrameCache.toggleMusicCallback: función (remitente) { }, togleArrow: función (estado) { }, addTouch: función () { }, changePage: función (índice , siguiente) { }.} );

A continuación, los implementaremos uno por uno.

Primero, implementemos los botones y flechas de música, agregando el siguiente código a initUI().

var bg = new cc.Sprite(res.background_png); bg.anchorX = 0; bg.anchorY = 0; bg.scaleX = cc.winSize.width / bg.scaleY = cc.winSize.height / bg.height; this.repeatForever(cc.sequence(cc.spawn(cc.moveTo(0.8, cc.p(this.arrow.x, posY + 30))). easing(cc.easeIn (0.5)), cc.fadeOut(1)), cc.delayTime(0.8), cc.callFunc(función () { this.arrow.y = this.arrow.y - 30; this.arrow.opacity = 255; }, esto)); this.arrow.runAction(arrowAction); this.addChild(this.arrow, 1); this.menuItemToggle = new cc.MenuItemToggle(new cc.MenuItemImage(togglemenu.anchorX = 0; togglemenu.anchorY = 0; togglemenu.x = 0; togglemenu.y = 0; this.menuItemToggle.setPosition( cc.pAdd(cc.visibleRect.right, cc.p(-this.menuItemToggle.width / 2 - 30, 140))); var togglemenu = new cc.Menu(this.menuItemToggle); togglemenu.addChild(togglemenu, 1);

Agregamos un objeto de fondo en el medio de la pantalla y escalamos el fondo para que aparezca en varios Puede llenar toda la pantalla en cualquier situación y hemos configurado una serie de animaciones para las flechas para que puedan reproducirse en un bucle. Para comodidad de los desarrolladores, Cocos2d-JS proporciona una variedad de animaciones (acciones). moveTo(duration,targetPoint). La acción de moverse desde la posición actual a la posición de destino dentro de la duración (segundos)

cc.easeIn(rate) ejecuta la acción easyIn con rate como parámetro easyIn. , action.easeing(cc.easeIn(rate ))

cc.easeIn(rate) ejecuta la acción easyIn con rate como parámetro easyIn, generalmente action.easing(cc.easeIn(rate))