首页 >Cocos引擎

如何用Cocos2d-JS制作一个微信报名宣传页 (一)

2014-10-23 15:32 编辑: suiling 分类:Cocos引擎 来源:CocoaChina

前言

Cocos 2014秋季开发者大会,微信报名页面上线后,大家一片惊呼声,都觉得Cocos2d-JS非常适合这种报名页和宣传页面的制作,可以以一个比较简单、快速的形式,构建出我们需要的漂亮页面。下面我们就来介绍一下,Cocos 2014秋季开发者大会的微信报名页面,是如何实现的。在这篇教程里,我会教大家如何用Cocos2d-JS来实现一个微信宣传页面,最终结果如下几个页面。

本主题内容分为3个部分

如何用Cocos2d-JS制作一个微信报名宣传页 (一)

如何用Cocos2d-JS制作一个微信报名宣传页(二)

如何用Cocos2d-JS制作一个微信报名宣传页 (三)



需求分析

五个界面基本上就是整个宣传页的全部内容,通过滑动这几个页面可以看出,我们要实现这个页面,大致需要完成下面几项内容:

1.实现上述五个页面的切换。

2.实现5个页面的入场和出场动画。

3.添加背景音乐

4.屏幕适配

5.添加微信分享的API

接下来,我们一项一项给大家介绍,完整的代码可以在这里进行下载:

/cms/uploads/soft/141023/4196-141023154059.zip

开发环境与新建项目

如果没用过Cocos2d-JS的朋友们,可以到cocos官网上去下载,此处我们用的是3.0final,或者,我们可以下载Lite版本的Cocos2d-JS,lite版本可以很方便的根据需求去下载所需要的模块,可以很大的减少代码的体积,可在此下载,我们需要用到的模块有core?actions?menuprogress-timer,在该页面中选择Customized Version然后勾选上述几个模块,并点击下载。

此处我们使用cocos 命令行来创建新的工程

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

环境搭建并不是这篇文章的重点,更详细的信息可以参考:《搭建 Cocos2d-JS 开发环境》。

主界面及其页面切换框架的实现

程序的入口代码在main.js中,用编辑器打开并修改为下面的代码。

  1. cc.game.onStart = function () { 
  2.     cc.view.adjustViewPort(true); 
  3.     cc.view.enableAutoFullScreen(false); 
  4.     var mode = cc.sys.isMobile && window.navigator.userAgent.indexOf("MicroMessenger") != -1 ? cc.ResolutionPolicy.FIXED_HEIGHT : cc.sys.isMobile ? cc.ResolutionPolicy.FIXED_WIDTH : cc.ResolutionPolicy.SHOW_ALL; 
  5.     cc.view.setDesignResolutionSize(640, 831, mode); 
  6.     //load resources 
  7.     cc.LoaderScene.preload(g_resources, function () { 
  8.     cc.director.runScene(new MainScene()); 
  9.     }, this);};cc.game.run(); 

关键点解析如下:

1.设置浏览器meta来适配屏幕,引擎内部会根据屏幕大小来设置meta的viewport值,会达到更好的屏幕适配效果。

2.针对手机浏览器和PC浏览器启用不同的分辨率适配策略。

3.预加载图片声音等资源。 cc.LoaderScene.preload会生成一个“加载中 x%”的界面,等待资源加载结束后,调用第二个参数传入的匿名函数。 对于基于html的游戏,页面是放在服务器端供浏览器下载的,为了获得流畅的用户体验,cc.LoaderScene.preload让浏览器先把远程服务器的资源缓存到本地。需要预加载的资源定义在src/Resources.js文件中。

4.启动游戏的第一个场景。

主界面分为2个部分,第一个部分是不随着屏幕移动而移动的向上箭头和音乐按钮,第二个部分是根据用户滑动屏幕而改变的场景。

我们先根据需要,构建出需要的函数,并一一实现他,这里我们使用cc.Scene.extend()来扩展出一个scene,并在这个scene中构建出我们需要功能,并一一实现他。

由引擎提供的cc.Scene.extend方法,让js能实现高级面向对象语言的继承特性。 onEnter方法是场景初始化完成即将展示的消息回调,在onEnter中必须调用this._super();来确保Scene被正确的初始化。

用于初始化UI的函数 initUI()

用于初始化touch事件的函数 initTouch()。

用于切换页面的函数changePage()和记录当前页面的参数currentIndex

用于控制箭头显示隐藏的函数toggleArrow()

用于控制音乐按钮回调的函数

  1. var MainScene = cc.Scene.extend({ 
  2.     listener: null
  3.     accelListener: null
  4.     currentIndex: 0, 
  5.     sceneList: [], 
  6.     ctor: function () { 
  7.         this._super(); 
  8.         cc.spriteFrameCache.addSpriteFrames(res.firstPage_plist); 
  9.     }, 
  10.     onEnter: function () { 
  11.         this._super(); 
  12.         this.initUI(); 
  13.         this.addTouch(); 
  14.     }, 
  15.     initUI: function () { 
  16.     }, 
  17.     toggleMusicCallback: function (sender) { 
  18.     }, 
  19.     togleArrow: function (status) { 
  20.     }, 
  21.     addTouch: function () { 
  22.     }, 
  23.     changePage: function (index, next) { 
  24.     } 
  25. }); 

接下来我们一一来实现。

首先,我们来实现音乐按钮与箭头,我们在initUI()中添加如下代码。

  1. var bg = new cc.Sprite(res.background_png); 
  2. bg.anchorX = 0; 
  3. bg.anchorY = 0; 
  4. bg.scaleX = cc.winSize.width / bg.width; 
  5. bg.scaleY = cc.winSize.height / bg.height; 
  6. this.addChild(bg, 0); 
  7. this.arrow = new cc.Sprite("#arrow.png"); 
  8. this.arrow.setPosition(cc.pAdd(cc.visibleRect.bottom, cc.p(0, 50))); 
  9. var posY = this.arrow.y; 
  10. var arrowAction = cc.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(function () { 
  11.     this.arrow.y = this.arrow.y - 30; 
  12.     this.arrow.opacity = 255; 
  13. }, this))); 
  14. this.arrow.runAction(arrowAction); 
  15. this.addChild(this.arrow, 1); 
  16. this.menuItemToggle = new cc.MenuItemToggle(new cc.MenuItemImage("#music.png"), new cc.MenuItemImage("#music_sel.png"), this.toggleMusicCallback, this); 
  17. this.menuItemToggle.setPosition(cc.pAdd(cc.visibleRect.right, cc.p(-this.menuItemToggle.width / 2 - 30, 140))); 
  18. var togglemenu = new cc.Menu(this.menuItemToggle); 
  19. togglemenu.anchorX = 0; 
  20. togglemenu.anchorY = 0; 
  21. togglemenu.x = 0; 
  22. togglemenu.y = 0; 
  23. this.addChild(togglemenu, 1);     

我们在屏幕中,添加了一个背景的sprite,并且,将这个背景进行缩放,以让其在各种情况下都布满屏幕,并且我们为箭头设置了一系列动画,让其能够循环播放,Cocos2d-JS,为了方便广大开发者,提供了丰富多彩的动画(actions)。下面,我们先简单的介绍一下几个常用的action的API。

cc.repeatForever(action) 无限循环某个action

cc.sequence(action1,action2,...)顺序执行括号里面的action

cc.spawn(action1,action2,...)同时执行括号里面的action

cc.moveTo(duration,targetPoint)从当前位置在duration(秒)时间内移动到点targetPosition的action

cc.easeIn(rate) 以rate为ease参数执行easeIn的action,一般是这样使用的action.easing(cc.easeIn(rate))

fadeOut(duration) 在duration时间内从屏幕淡出的action

cc.delayTime(duration) 延时duration时间的action,通常用于等待一段时间后再播放某个action

cc.callFunc(function) 用于执行action的回调,通常在某个action结束后需要执行某段函数的话,可以使用它。

通过上述的简单介绍,是不是对action有了一个初步的了解了呢,我们实际来操作一下:

我们需要一个箭头,往上走并慢慢减速和透明,最终消失,然后在原来的位置出现重复下去,所以我们可以归纳为,移动+淡出-->回到初始位置-->移动+淡出。这样我们很清晰就归纳出如何去写这个action了,我们使用cc.spawn(cc.moveTo(),cc.fadeOut())就构建出了移动+淡出这个效果,然后使用cc.callFunc()设置了这次action播放完毕要修改的位置回到初始位置,接着我们使用cc.sequence()来顺序执行这两个action,这样一来,一次action就编写完成了,最后我们只需要将这个action使用cc.repeatForever()就完成了我们需要的重复播放。

细心的读者可能会问了,代码中的位置设置,为什么是cc.pAdd(cc.visibleRect.right,cc.p())?这是cocos为了让大家更方便的做屏幕适配所定义的9个点,这9个点会根据不同屏幕大小来动态设定,例如cc.visibleRect.center,这个点的位置,无论在什么分辨率的屏幕下,都是在屏幕的正中央,这样我们就可以根据这个点的位置来做相对布局,已达到适配屏幕的目的,例如上面的代码this.arrow.setPosition(cc.pAdd(cc.visibleRect.bottom, cc.p(0, 50)));就是将arrow这个sprite,放在屏幕的底部的正中央,然后再在y轴上加50个像素,这样,无论屏幕的大小,都能保持在屏幕的底部的正中央向上50个像素。这也是我们做相对布局的基础。后续的布局,我们都会根据这些点的坐标来设置。

在接下来的第二讲中我们将学习如何填充5个页面的框架,实现相应的功能。

如何用Cocos2d-JS制作一个微信报名宣传页(二)

如何用Cocos2d-JS制作一个微信报名宣传页 (三)

 

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:金秋十月触控献礼 2000精英与会碰撞游戏精髓
下一篇:如何用Cocos2d-JS制作一个微信报名宣传页(二)
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部