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

前端之家收集整理的这篇文章主要介绍了如何用Cocos2d-JS制作一个微信报名宣传页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
2014秋季开发者大会,微信报名页面上线后,大家一片惊呼声,都觉得Cocos2d-JS非常适合这种报名页和宣传页面的制作,可以以一个比较简单、快速的形式,构建出我们需要的漂亮页面。下面我们就来介绍一下,Cocos 2014秋季开发者大会的微信报名页面,是如何实现的。
在这篇教程里,我会教大家如何用Cocos2d-JS来实现一个微信宣传页面,最终结果如下几个页面










需求分析
五个界面基本上就是整个宣传页的全部内容,通过滑动这几个页面可以看出,我们要实现这个页面,大致需要完成下面几项内容
    实现上述五个页面的切换。
    实现5个页面的入场和出场动画。
    屏幕适配

接下来,我们一项一项给大家介绍,完整的代码可以在这里进行[url=local://base_request.html/res/register.zip]下载[/url]。


开发环境与新建项目
    如果没用过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中,用编辑器打开并修改为下面的代码


复制代码
cc.game.onStart = function () {
  • cc.view.adjustViewPort(true);
  • cc.view.enableAutoFullScreen(false);
  • 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;
  • cc.view.setDesignResolutionSize(640,831,mode);
  • //load resources
  • cc.LoaderScene.preload(g_resources,function () {
  • cc.director.runScene(new MainScene());
  • },this);};cc.game.run();



  • 关键点解析如下:
      设置浏览器Meta来适配屏幕,引擎内部会根据屏幕大小来设置Meta的viewport值,会达到更好的屏幕适配效果
      针对手机浏览器和PC浏览器启用不同的分辨率适配策略。
      预加载图片声音等资源。 cc.LoaderScene.preload会生成一个“加载中 x%”的界面,等待资源加载结束后,调用第二个参数传入的匿名函数。 对于基于html的游戏,页面是放在服务器端供浏览器下载的,为了获得流畅的用户体验,cc.LoaderScene.preload让浏览器先把远程服务器的资源缓存到本地。需要预加载的资源定义在src/Resources.js文件中。
      启动游戏的第一个场景。

    主界面分为2个部分,第一个部分是不随着屏幕移动而移动的向上箭头和音乐按钮,第二个部分是根据用户滑动屏幕而改变的场景。
    我们先根据需要,构建出需要的函数,并一一实现他,这里我们使用cc.Scene.extend()?来扩展出一个scene,并在这个scene中构建出我们需要功能,并一一实现他。
    由引擎提供的cc.Scene.extend方法,让js能实现高级面向对象语言的继承特性。 onEnter方法是场景初始化完成即将展示的消息回调,在onEnter中必须调用this._super();来确保Scene被正确的初始化。
      用于初始化UI的函数 initUI()
      用于初始化touch事件的函数 initTouch()。
      用于控制音乐按钮回调的函数

    复制代码
    var MainScene = cc.Scene.extend({
  • listener: null,
  • accelListener: null,247)"> currentIndex: 0,247)"> sceneList: [],247)"> ctor: function () {
  • this._super();
  • cc.spriteFrameCache.addSpriteFrames(res.firstPage_plist);
  • onEnter: function () {
  • this.initUI();
  • this.addTouch();
  • initUI: function () {
  • toggleMusicCallback: function (sender) {
  • togleArrow: function (status) {
  • addTouch: function () {
  • changePage: function (index,next) {
  • }
  • });


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


    复制代码
    var bg = new cc.Sprite(res.background_png);
  • bg.anchorX = 0;
  • bg.anchorY = 0;
  • bg.scaleX = cc.winSize.width / bg.width;
  • bg.scaleY = cc.winSize.height / bg.height;
  • this.addChild(bg,0);
  • this.arrow = new cc.Sprite("#arrow.png");
  • this.arrow.setPosition(cc.pAdd(cc.visibleRect.bottom,cc.p(0,50)));
  • var posY = this.arrow.y;
  • 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 () {
  • this.arrow.y = this.arrow.y - 30;
  • this.arrow.opacity = 255;
  • this.arrow.runAction(arrowAction);
  • this.addChild(this.arrow,1);
  • this.menuItemToggle = new cc.MenuItemToggle(new cc.MenuItemImage("#music.png"),new cc.MenuItemImage("#music_sel.png"),this.toggleMusicCallback,this);
  • this.menuItemToggle.setPosition(cc.pAdd(cc.visibleRect.right,cc.p(-this.menuItemToggle.width / 2 - 30,140)));
  • var togglemenu = new cc.Menu(this.menuItemToggle);
  • togglemenu.anchorX = 0;
  • togglemenu.anchorY = 0;
  • togglemenu.x = 0;
  • togglemenu.y = 0;
  • this.addChild(togglemenu,1);

  • 我们在屏幕中,添加了一个背景的sprite,并且,将这个背景进行缩放,以让其在各种情况下都布满屏幕,并且我们为箭头设置了一系列动画,让其能够循环播放,Cocos2d-JS,为了方便广大开发者,提供了丰富多彩的动画(actions)。下面,我们先简单的介绍一下几个常用的action的API。
      cc.repeatForever(action) 无限循环某个action
      cc.sequence(action1,action2,...)顺序执行括号里面的action
      cc.spawn(action1,...)同时执行括号里面的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,50)));就是将arrow这个sprite,放在屏幕的底部的正中央,然后再在y轴上加50个像素,这样,无论屏幕的大小,都能保持在屏幕的底部的正中央向上50个像素。这也是我们做相对布局的基础。后续的布局,我们都会根据这些点的坐标来设置。

    接下来,我们要开始思考,如何填充我们的主要功能——5个页面的框架。
    在这里我们使用cc.Layer.extend定义出5个Layer,并在每个layer中,实现appear方法和disappear方法,分别用于控制页面的入场动画和出场动画,后面,我们会详细介绍每个layer的动画,现在我们设计出layer的框架后呢,我们就可以动手编写MainScene里面的initUI的剩余部分和nextPage函数的编写了,一下是完整的initUI()代码

    复制代码
  • this.animLayer = new cc.Layer();
  • this.addChild(this.animLayer);
  • this.sceneList.push(new Layer1());
  • this.sceneList.push(new Layer2());
  • this.sceneList.push(new Layer3());
  • this.sceneList.push(new Layer4());
  • this.sceneList.push(new Layer5());
  • for (var i = 0; i < this.sceneList.length; i++) {
  • var scene = this.sceneList;
  • scene.anchorX = 0;
  • scene.anchorY = 0;
  • scene.x = 0;
  • scene.y = 0;
  • if (this.currentIndex != i) {
  • scene.setVisible(false);
  • this.animLayer.addChild(scene,this.sceneList.length - i);


  • 可以看到,首先,我们在MainScene中定义了一个animLayer,用来控制各个页面的动画层,然后我们定义了一个数组用来存储我们的需要的5个Layer,最后他们添加到animLayer里面,并将非当前显示页的Layer隐藏,这样引擎就不会去绘制他们了。


    复制代码
    var self = this;
  • self.listener = cc.EventListener.create({
  • event: cc.EventListener.TOUCH_ONE_BY_ONE,247)"> swallowTouches: true,247)"> startPosY: 0,247)"> onTouchBegan: function (touch,event) {
  • this.startPosY = touch.getLocation().y;
  • return true;
  • onTouchMoved: function (touch,247)"> onTouchEnded: function (touch,247)"> if (musicPlayStatus) {
  • playMusic(true);
  • if (canChangePage) {
  • var delta = touch.getLocation().y - this.startPosY;
  • if (delta > 15 && self.currentIndex < self.sceneList.length - 1) {
  • self.changePage(++self.currentIndex,true);
  • } else if (delta < -15 && self.currentIndex > 0) {
  • self.changePage(--self.currentIndex,false);
  • onTouchCancelled: function (touch,247)"> });
  • cc.eventManager.addListener(self.listener,self);
  • canChangePage = false;
  • var scene = next ? this.sceneList[index - 1] : this.sceneList[index + 1];
  • if (index == 4) {
  • this.togleArrow(false);
  • } else {
  • this.togleArrow(true);
  • var nextPage = function () {
  • scene.visible = false;
  • this.sceneList[index].visible = true;
  • this.sceneList[index].appear();
  • };
  • if (scene) {
  • scene.disappear(nextPage,247)"> }



  • 我们想好如何去编写5个页面后,就可以开始编写addTouch()和changePage()了,在这里,我们设置了一个全局变量canChangePage来判断当前换页的操作是否可以执行,如果动画正在播放中,我们不能进行页面的切换操作。由于iOS和某些Android特定版本的限制,需要有实际的点击才能触发音频的播放,所以我们在onTouchEnded的时候,去触发音频播放。
    说到音频播放,我们有2个选择,第一可以使用引擎自带的cc.audioEngine,其中集成了多种浏览器的兼容播放,可以很省时省力的进行音乐播放,不过这里,由于我们比较在意code的体积,所以直接使用简单粗暴的html标签<audio></audio>以下是我们简单实现的音乐播放,使用一个全局变量musicPlayStatus来控制音频的播放状态,其实现如下:
    复制代码
    var initMusic = function () {
  • var audio = getById("myAudio");
  • audio.src = "res/bg.mp3";
  • var playMusic = function (status) {
  • if (status) {
  • if (audio.paused) {
  • audio.play();
  • musicPlayStatus = true;
  • if (!audio.paused) {
  • audio.pause();
  • musicPlayStatus = false;
  • }

  • 由于我们不希望音乐在开始加载页面的时候就进行下载,所以我们使用initMusic()这个方法来初始化音乐,并使用playMusic()的方法来控制音乐的播放。
    同时我们需要在MainScene加入一个方法,用来监听浏览器进入后台,和从后台进入前台的事件,用来控制音乐的播放状态,引擎已经封装好了对应的事件,我们可以非常方便的去监听这些事件,可以大大减少开发的周期。

    复制代码
    initHideEvent: function () {
  • cc.eventManager.addCustomListener(cc.game.EVENT_SHOW,247)"> cc.eventManager.addCustomListener(cc.game.EVENT_HIDE,247)"> playMusic(false);
  • }


  • 第一个页面的实现
    由于我们已经制定好了,页面的规则,所以每个页面我们要做的就以下几点
      实现UI的布局
      实现appear入场动画
      实现disappear出场动画
      控制能否滑动到下一个屏幕的状态


    复制代码
    this.accLayer = new cc.Layer();
  • this.accLayer.anchorX = 0;
  • this.accLayer.anchorY = 0;
  • this.accLayer.x = 0;
  • this.accLayer.y = 0;
  • this.addChild(this.accLayer);
  • this.logo = new cc.Sprite("#logo.png");
  • this.logo.scale = 0;
  • this.logo.setPosition(cc.pAdd(cc.visibleRect.center,this.logo.height / 3 * 2)));
  • this.addChild(this.logo);
  • this.leftFont = new cc.Sprite("#font_left.png");
  • this.leftFont.setPosition(cc.pAdd(cc.visibleRect.left,cc.p(-this.leftFont.width / 2,-this.leftFont.height / 2)));
  • this.addChild(this.leftFont);
  • this.rightFont = new cc.Sprite("#font_right.png");
  • this.rightFont.setPosition(cc.pAdd(cc.visibleRect.right,cc.p(this.rightFont.width / 2,-this.rightFont.height / 2)));
  • this.addChild(this.rightFont);
  • this.leftUpPic = new cc.Sprite("#block_left up.png");
  • this.leftUpPic.anchorX = 0,this.leftUpPic.anchorY = 1;
  • this.leftUpPic.setPosition(cc.pAdd(cc.visibleRect.topLeft,cc.p(-this.leftUpPic.width,this.leftUpPic.height)));
  • this.accLayer.addChild(this.leftUpPic);
  • this.leftDownPic = new cc.Sprite("#block_left down.png");
  • this.leftDownPic.anchorX = 0,this.leftDownPic.anchorY = 0;
  • this.leftDownPic.setPosition(cc.pAdd(cc.visibleRect.bottomLeft,cc.p(-this.leftDownPic.width + 20,-this.leftDownPic.height)));
  • this.accLayer.addChild(this.leftDownPic);
  • this.rightUpPic = new cc.Sprite("#block_right up.png");
  • this.rightUpPic.anchorX = 1,this.rightUpPic.anchorY = 1;
  • this.rightUpPic.setPosition(cc.pAdd(cc.visibleRect.topRight,cc.p(this.rightUpPic.width,this.rightUpPic.height)));
  • this.accLayer.addChild(this.rightUpPic);
  • this.rightDownPic = new cc.Sprite("#block_right down.png");
  • this.rightDownPic.anchorX = 1,this.rightDownPic.anchorY = 0;
  • this.rightDownPic.setPosition(cc.pAdd(cc.visibleRect.bottomRight,cc.p(this.rightDownPic.width,-this.rightDownPic.height)));
  • this.accLayer.addChild(this.rightDownPic);
  • }


  • 以上是对第一个页面的布局,从图上我们其实就可以看到,页面logo、左上、左下、右上、右下、和左右两列文字组成,至于布局我们就不多说了,主要有以下几点。
      可以看到我们依然使用相对布局,让每个ui可以适应不同屏幕分辨率
      由于有入场动画,所以我们将这些UI都放到屏幕外面了
      我们对三角形的物体,放置在了一个独立的Layer?accLayer?为的是以后如果需要添加陀螺仪的监听,我们可以很方便的进行修改
    接下来我们要实现的时入场动画


    复制代码
    appear: function () {
  • var logoAction = cc.sequence(cc.scaleTo(0.5,1),247)"> this.leftUpPic.leftUpAction = cc.moveTo(0.5,cc.p(this.leftUpPic.x + this.leftUpPic.width,this.leftUpPic.y - this.leftUpPic.height + 80));
  • this.leftUpPic.runAction(this.leftUpPic.leftUpAction);
  • this.leftDownPic.leftDownAction = cc.moveTo(0.5,cc.p(this.leftDownPic.x + this.leftDownPic.width,this.leftDownPic.y + this.leftDownPic.height));
  • this.leftDownPic.runAction(this.leftDownPic.leftDownAction);
  • this.rightUpPic.rightUpAction = cc.moveTo(0.5,cc.p(this.rightUpPic.x - this.rightUpPic.width - 30,this.rightUpPic.y - this.rightUpPic.height - 30));
  • this.rightUpPic.runAction(this.rightUpPic.rightUpAction);
  • this.rightDownPic.rightDownAction = cc.moveTo(0.5,cc.p(this.rightDownPic.x - this.rightDownPic.width,this.rightDownPic.y + this.rightDownPic.height));
  • this.rightDownPic.runAction(this.rightDownPic.rightDownAction);
  • this.leftFont.fontLeftAction = cc.sequence(cc.delayTime(0.3),cc.moveTo(0.5,cc.p(this.leftFont.x + this.leftFont.width,this.leftFont.y)));
  • this.leftFont.runAction(this.leftFont.fontLeftAction);
  • this.rightFont.fontRightAction = cc.sequence(cc.delayTime(0.4),cc.moveTo(0.4,cc.p(this.rightFont.x - this.rightFont.width,this.rightFont.y)));
  • this.rightFont.runAction(this.rightFont.fontRightAction);
  • canChangePage = true;
  • this.logo.runAction(logoAction);
  • }


  • appear的实现方式非常简单,其实就是把几个我们上面写好的UI,移动到我们希望的位置。
      logoAction,使用前面介绍过的函数cc.sequence()和cc.scaleTo(),最后在结束的时候调用cc.callFunc()
      在cc.callFunc()中呢,我们对其余的元素一一进行了入场动画,主要使用了cc.moveTo()这个方法,可以看到,我们从屏幕外面,移动到了屏幕里面。
      值得注意的是,我们在logoAction的最后,使用cc.delayTime()延时了一段时间,然后再执行canChangePage = true主要是为了在动画播放过程中,不然用户滑动改变页面
    接下来就是disappear方法的实现了:


    复制代码
    disappear: function (callback,target) {
  • var action = cc.sequence(cc.scaleTo(0.5,0),247)"> this.leftUpPic.runAction(this.leftUpPic.leftUpAction.reverse());
  • this.leftDownPic.runAction(this.leftDownPic.leftDownAction.reverse());
  • this.rightUpPic.runAction(this.rightUpPic.rightUpAction.reverse());
  • this.rightDownPic.runAction(this.rightDownPic.rightDownAction.reverse());
  • this.leftFont.runAction(this.leftFont.fontLeftAction.reverse());
  • this.rightFont.runAction(this.rightFont.fontRightAction.reverse());
  • if (target && callback) {
  • callback.call(target);
  • this.logo.runAction(action);
  • 很简单,我们也是让logo执行了一个action,然后再执行disappear传进来的回调方法就ok了。
      这里,我们使用了action.reverse()这个方法,可以很简便的实现大多数action的reverse
      动画播放完毕后,调用回调方法执行我们需要的回调操作
    ok,此时我们第一个页面已经编写完了,赶紧运行下试试吧。接下来,由于第二第四第五个页面跟第一个页面都很类似,我们就不重复讲了,大家看看代码吧,也当做练练手。我们接着重点说说第三个页面的实现。

    第三个页面的实现
    第三个页面,是区别于其他页面的一个页面,主要原因是其余的页面,我们基本使用的是cc.moveTo()这个方法,配合上cc.delayTime()等,实现一系列的移动,只要多试验几次,我们就可以很清楚这些action的使用方法,各种混搭之后,可以实现出很复杂也很绚丽的效果
    不过接下来我们将介绍一个之前没有用过的接口cc.progressTimer()来快速实现我们的一条往下滑动的效果
    cc.progressTimer() 多数情况用于使用某个sprite进行计时,倒计时操作,如下图,我们可以很清楚的看到他的效果,我们使用这个效果,可以很容易的实现出那个功能



    我们需要准备一张图片,如下图,然后使用progressTimer,就可以很容易实现这个功能了。


    复制代码
    ...
  • this.line = new cc.ProgressTimer(new cc.Sprite(res.line_png));
  • this.line.type = cc.ProgressTimer.TYPE_BAR;
  • this.line.midPoint = cc.p(0,247)"> this.line.barChangeRate = cc.p(0,247)"> this.line.percentage = 0;
  • this.line.setPosition(cc.p(cc.winSize.width / 2 - 30,cc.winSize.height - this.line.height / 2));
  • this.addChild(this.line);
  • appear: function () {//20,50,80,100
  • this.leftUpPic.inAciton = cc.moveTo(0.2,cc.p(this.leftUpPic.x + this.leftUpPic.width + 20,this.leftUpPic.y - this.leftUpPic.height + 20));
  • this.leftUpPic.runAction(this.leftUpPic.inAciton);
  • this.leftDownPic.inAciton = cc.moveTo(0.2,cc.p(this.leftDownPic.x + this.leftDownPic.width + 20,this.leftDownPic.y + this.leftDownPic.height + 20));
  • this.leftDownPic.runAction(this.leftDownPic.inAciton);
  • this.rightUpPic.inAciton = cc.moveTo(0.2,247)"> this.rightUpPic.runAction(this.rightUpPic.inAciton);
  • this.rightDownPic.inAciton = cc.moveTo(0.2,cc.p(this.rightDownPic.x - this.rightDownPic.width - 20,this.rightDownPic.y + this.rightDownPic.height + 80));
  • this.rightDownPic.runAction(this.rightDownPic.inAciton);
  • var action = cc.sequence(cc.delayTime(0.2),cc.progressTo(0.3,20),247)"> this.firstPoint.inAction = cc.scaleTo(0.2,247)"> this.firstPoint.runAction(this.firstPoint.inAction);
  • this.firstText.inAction = cc.sequence(cc.delayTime(0.2),cc.spawn(cc.moveTo(0.2,cc.p(this.firstText.x - this.firstText.width / 2,this.firstText.y)),cc.fadeIn(0.5)));
  • this.firstText.runAction(this.firstText.inAction);
  • this.secondPoint.inAction = cc.scaleTo(0.2,247)"> this.secondPoint.runAction(this.secondPoint.inAction);
  • this.secondText.inAction = cc.sequence(cc.delayTime(0.2),cc.p(this.secondText.x + this.secondText.width / 2,this.secondText.y)),247)"> this.secondText.runAction(this.secondText.inAction);
  • this.thirdPoint.inAction = cc.scaleTo(0.2,247)"> this.thirdPoint.runAction(this.thirdPoint.inAction);
  • this.thirdText.inAction = cc.sequence(cc.delayTime(0.2),cc.p(this.thirdText.x - this.thirdText.width / 2,this.thirdText.y)),247)"> this.thirdText.runAction(this.thirdText.inAction);
  • this.forthPoint.inAction = cc.scaleTo(0.2,247)"> this.forthPoint.runAction(this.forthPoint.inAction);
  • this.line.runAction(action);
  • 上面的代码看似很多,不过,只要分清楚我们的目的,那就很清晰了(ps:initUI只贴出了一部分跟progressTimer相关的代码,具体代码请直接看源码吧)。
    我们重点介绍一下cc.progressTimer()
      他跟所有Cocos2d-JS的API一样,使用new来创建对象
      progressTimer的type参数用于设置类型,这里我们使用cc.ProgressTimer.TYPE_BAR也就是条状的progress
      midPoint参数,用于设置开始progress的起始位置,有点类似于锚点传入一个cc.p()x y范围都是0到1
      barchangeRate就是每次dt更新的百分比
      顺便介绍一下cc.progressTo(duration,percent),主要用于cc.progressTimer当中,从在duration的时间内,从当前的百分比增加到percent。

    介绍了基础的用法之后呢,我们对cc.progressTimer()有了一定的了解,接下来我们主要使用cc.progressTimer里面的cc.progressTo()这个方法去实现第三个场景的动画,经过对图片的测量,我们选定了20%,50%,80%,100%进行分段的价值,所以我们通过cc.sequence(cc.progressTo(),cc.callFunc(),cc.delayTime(),.....)这样一组循环,去分段加载那个图片
    到这里为止,我们比较详细的介绍了Cocos2d-JS一些常用的action,并且用他,实现了一个比较美观的动画,大家有兴趣可以动手亲自去试试。
    微信API的集成
    功能已经有大神提供了完整的库, 地址?,以下我们做一个简单的使用分析。
    复制代码
    // 微信分享的数据
  • window.wxData = {
  • "appId": "",// 服务号可以填写appId
  • "imgUrl": "http://upyun.cocimg.com/cocoachina/cocos_logo.png",247)"> "link": "http://devcon.cocos.com/weixin/",247)"> "desc": "Cocos 2014 开发者大会(秋季)—Great or nothing",247)"> "title": "COCOS 2014 秋季开发者大会"
  • WeixinApi.ready(function (Api) {
  • // 分享的回调
  • var wxCallbacks = {
  • ready: function () {
  • cancel: function (resp) {
  • fail: function (resp) {
  • confirm: function (resp) {
  • all: function (resp) {
  • Api.shareToFriend(wxData,wxCallbacks);
  • Api.shareToTimeline(wxData,247)"> Api.shareToWeibo(wxData,247)"> });
    • appId 就是服务号啦,有服务号的同志们可以直接填写上去。

    如果有需要就可以对分享的回调进行监听了,针对分享过程中的每个状态,有需要的只需要在对应的函数回调里面进行编写对应代码就可以了。
    混淆发布
    如果使用cocos命令行,非常简单就可以进行打包发布了,在控制台输入命令:
    复制代码
    cocos compile -p web -m release


    程序会在当前的工程目录下,生成一个publish的文件夹,里面的html5文件就是我们的发布版本了,小伙伴们,赶紧也发布一个试试吧。

    另外,如果需要更高得压缩比,只需要使用下面的指令:
    复制代码
    cocos compile -p web -m release --advanced

    添加--advanced标签会使用Closure Compiler混淆工具的高级压缩功能,将使JS代码所占的空间更加小,但是这个压缩模式有一定风险会导致错误,如果发现错误可以根据Google的 官方文档来进行调试。

    最后,记得哦,完整的代码可以在附件中下载。

    最后附上微信效果地址:



    [ 此帖被superdragon在2014-10-23 11:49重新编辑 ]

    附件: register.zip(1639 K) 下载次数:11
    原文链接:https://www.f2er.com/cocos2dx/346710.html

    猜你在找的Cocos2d-x相关文章