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

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










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

接下来,我们一项一项给大家介绍,完整的代码可以在这里进行[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()。
      用于切换页面的函数changePage()和记录当前页面的参数currentIndex
      用于控制箭头显示隐藏的函数toggleArrow()
      用于控制音乐按钮回调的函数

    复制代码
    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 就是服务号啦,有服务号的同志们可以直接填写上去。
      imgUrl 就是分享出去的logo
      link 分享后,别人点进来的链接
      desc 分享后logo旁边的说明性文字
      title 就是标题啦

    如果有需要就可以对分享的回调进行监听了,针对分享过程中的每个状态,有需要的只需要在对应的函数回调里面进行编写对应代码就可以了。
    混淆发布
    如果使用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

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐


        本文实践自 RayWenderlich、Ali Hafizji 的文章《How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X》,文中使用Cocos2D,我在这里使用Cocos2D-x 2.1.4进行学习和移植。在这篇文章,将会学习到如何创建实时纹理、如何用Gimp创建无缝拼接纹
    Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@163.com微信公众号:HopToad 欢迎转载,转载标注出处:http://blog.csdn.netotbaron/article/details/424343991.  软件准备 下载地址:http://cn.cocos2d-x.org/download 2.  简介2.1         引用C
    第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从Cocos2D-x官网上下载,进入网页http://www.cocos2d-x.org/download,点击Cocos2d-x以下的Download  v3.0,保存到自定义的文件夹2:从python官网上下载。进入网页https://www.python.org/downloads/,我当前下载的是3.4.0(当前最新
        Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发引擎,易学易用,支持多种智能移动平台。官网地址:http://cocos2d-x.org/当前版本:2.0    有很多的学习资料,在这里我只做为自己的笔记记录下来,错误之处还请指出。在VisualStudio2008平台的编译:1.下载当前稳
    1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《最强大脑》娱乐节目。将2048改造成一款挑战玩家对数字记忆的小游戏。邮箱:appdevzw@163.com微信公众号:HopToadAPK下载地址:http://download.csdn.net/detailotbaron/8446223源码下载地址:http://download.csdn.net/
       Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试以QtCreatorIDE来进行CMake构建。Cocos2d-x3.X地址:https://github.com/cocos2d/cocos2d-x1.打开QtCreator,菜单栏→"打开文件或项目...",打开cocos2d-x目录下的CMakeLists.txt文件;2.弹出CMake向导,如下图所示:设置
     下载地址:链接:https://pan.baidu.com/s/1IkQsMU6NoERAAQLcCUMcXQ提取码:p1pb下载完成后,解压进入build目录使用vs2013打开工程设置平台工具集,打开设置界面设置: 点击开始编译等待编译结束编译成功在build文件下会出现一个新文件夹Debug.win32,里面就是编译
    分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!http://www.captainbed.net前言上次用象棋演示了cocos2dx的基本用法,但是对cocos2dx并没有作深入的讨论,这次以超级马里奥的源代码为线索,我们一起来学习超级马里奥的实
    1. 圆形音量button事实上作者的本意应该是叫做“电位计button”。可是我觉得它和我们的圆形音量button非常像,所以就这么叫它吧~先看效果:好了,不多解释,本篇到此为止。(旁白: 噗。就这样结束了?)啊才怪~我们来看看代码:[cpp] viewplaincopyprint?CCContro
    原文链接:http://www.cnblogs.com/physwf/archive/2013/04/26/3043912.html为了进一步深入学习贯彻Cocos2d,我们将自己写一个场景类,但我们不会走的太远,凡是都要循序渐进,哪怕只前进一点点,那也至少是前进了,总比贪多嚼不烂一头雾水的好。在上一节中我们建
    2019独角兽企业重金招聘Python工程师标准>>>cocos2d2.0之后加入了一种九宫格的实现,主要作用是用来拉伸图片,这样的好处在于保留图片四个角不变形的同时,对图片中间部分进行拉伸,来满足一些控件的自适应(PS: 比如包括按钮,对话框,最直观的形象就是ios里的短信气泡了),这就要求图
    原文链接:http://www.cnblogs.com/linji/p/3599478.html1.环境和工具准备Win7VS2010/2012,至于2008v2版本之后似乎就不支持了。 2.安装pythonv.2.0版本之前是用vs模板创建工程的,到vs2.2之后就改用python创建了。到python官网下载版本2.7.5的,然后
    环境:ubuntu14.04adt-bundle-linux-x86_64android-ndk-r9d-linux-x86_64cocos2d-x-3.0正式版apache-ant1.9.3python2.7(ubuntu自带)加入环境变量exportANDROID_SDK_ROOT=/home/yangming/adt-bundle-linux/sdkexportPATH=${PATH}:/$ANDROID_SDK_ROOTools/export
    1开发背景游戏程序设计涉及了学科中的各个方面,鉴于目的在于学习与进步,本游戏《FlappyBird》采用了两个不同的开发方式来开发本款游戏,一类直接采用win32底层API来实现,另一类采用当前火热的cocos2d-x游戏引擎来开发本游戏。2需求分析2.1数据分析本项目要开发的是一款游
    原文链接:http://www.cnblogs.com/linji/p/3599912.html//纯色色块控件(锚点默认左下角)CCLayerColor*ccc=CCLayerColor::create(ccc4(255,0,0,128),200,100);//渐变色块控件CCLayerGradient*ccc=CCLayerGradient::create(ccc4(255,0,0,
    原文链接:http://www.cnblogs.com/linji/p/3599488.html//载入一张图片CCSprite*leftDoor=CCSprite::create("loading/door.png");leftDoor->setAnchorPoint(ccp(1,0.5));//设置锚点为右边中心点leftDoor->setPosition(ccp(240,160));/
    为了答谢广大学员对智捷课堂以及关老师的支持,现购买51CTO学院关老师的Cocos2d-x课程之一可以送智捷课堂编写图书一本(专题可以送3本)。一、Cocos2d-x课程列表:1、Cocos2d-x入门与提高视频教程__Part22、Cocos2d-x数据持久化与网络通信__Part33、Cocos2d-x架构设计与性能优化内存优
    Spawn让多个action同时执行。Spawn有多种不同的create方法,最终都调用了createWithTwoActions(FiniteTimeAction*action1,FiniteTimeAction*action2)方法。createWithTwoActions调用initWithTwoActions方法:对两个action变量初始化:_one=action1;_two=action2;如果两个a
    需要环境:php,luajit.昨天在cygwin上安装php和luajit环境,这真特么是一个坑。建议不要用虚拟环境安装打包环境,否则可能会出现各种莫名问题。折腾了一下午,最终将环境转向linux。其中,luajit的安装脚本已经在quick-cocos2d-x-develop/bin/中,直接luajit_install.sh即可。我的lin
    v3.0相对v2.2来说,最引人注意的。应该是对触摸层级的优化。和lambda回调函数的引入(嗯嗯,不枉我改了那么多类名。话说,每次cocos2dx大更新。总要改掉一堆类名函数名)。这些特性应该有不少人研究了,所以今天说点跟图片有关的东西。v3.0在载入图片方面也有了非常大改变,仅仅只是