大佬教程收集整理的这篇文章主要介绍了如何用Cocos2d-JS制作一个微信报名宣传页,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
前言 2014秋季开发者大会,微信报名页面上线后,大家一片惊呼声,都觉得Cocos2d-JS非常适合这种报名页和宣传页面的制作,可以以一个比较简单、快速的形式,构建出我们需要的漂亮页面。下面我们就来介绍一下,Cocos 2014秋季开发者大会的微信报名页面,是如何实现的。 在这篇教程里,我会教大家如何用Cocos2d-JS来实现一个微信宣传页面,最终结果如下几个页面。 需求分析 五个界面基本上就是整个宣传页的全部内容,通过滑动这几个页面可以看出,我们要实现这个页面,大致需要完成下面几项内容:
接下来,我们一项一项给大家介绍,完整的代码可以在这里进行[url=local://base_request.html/res/register.zip]下载[/url]。 开发环境与新建项目
环境搭建并不是这篇文章的重点,更详细的信息可以参考:《搭建 Cocos2d-JS 开发环境》。 主界面及其页面切换框架的实现 程序的入口代码在main.js中,用编辑器打开并修改为下面的代码。
关键点解析如下:
主界面分为2个部分,第一个部分是不随着屏幕移动而移动的向上箭头和音乐按钮,第二个部分是根据用户滑动屏幕而改变的场景。 我们先根据需要,构建出需要的函数,并一一实现他,这里我们使用cc.Scene.extend()?来扩展出一个scene,并在这个scene中构建出我们需要功能,并一一实现他。 由引擎提供的cc.Scene.extend方法,让js能实现高级面向对象语言的继承特性。 onEnter方法是场景初始化完成即将展示的消息回调,在onEnter中必须调用this._super();来确保Scene被正确的初始化。
接下来我们一一来实现他。
我们在屏幕中,添加了一个背景的sprite,并且,将这个背景进行缩放,以让其在各种情况下都布满屏幕,并且我们为箭头设置了一系列动画,让其能够循环播放,Cocos2d-JS,为了方便广大开发者,提供了丰富多彩的动画(actions)。下面,我们先简单的介绍一下几个常用的action的API。
通过上述的简单介绍,是不是对action有了一个初步的了解了呢,我们实际来操作一下:
接下来,我们要开始思考,如何填充我们的主要功能——5个页面的框架。 在这里我们使用cc.Layer.extend定义出5个Layer,并在每个layer中,实现appear方法和disappear方法,分别用于控制页面的入场动画和出场动画,后面,我们会详细介绍每个layer的动画,现在我们设计出layer的框架后呢,我们就可以动手编写MainScene里面的initUI的剩余部分和nextPage函数的编写了,一下是完整的initUI()代码:
可以看到,首先,我们在MainScene中定义了一个animLayer,用来控制各个页面的动画层,然后我们定义了一个数组用来存储我们的需要的5个Layer,最后他们添加到animLayer里面,并将非当前显示页的Layer隐藏,这样引擎就不会去绘制他们了。
我们想好如何去编写5个页面后,就可以开始编写addTouch()和changePage()了,在这里,我们设置了一个全局变量canChangePage来判断当前换页的操作是否可以执行,如果动画正在播放中,我们不能进行页面的切换操作。由于iOS和某些Android特定版本的限制,需要有实际的点击才能触发音频的播放,所以我们在onTouchEnded的时候,去触发音频播放。 说到音频播放,我们有2个选择,第一可以使用引擎自带的cc.audioENGIne,其中集成了多种浏览器的兼容播放,可以很省时省力的进行音乐播放,不过这里,由于我们比较在意code的体积,所以直接使用简单粗暴的html标签<audio></audio>以下是我们简单实现的音乐播放,使用一个全局变量musicPlayStatus来控制音频的播放状态,其实现如下: 复制代码 |
复制代码 |
复制代码
this.accLayer = new cc.Layer();
|
复制代码
appear: function () {
|
复制代码
disappear: function (callBACk,target) {
第三个页面的实现 第三个页面,是区别于其他页面的一个页面,主要原因是其余的页面,我们基本使用的是cc.moveTo()@R_197_10377@,配合上cc.delayTime()等,实现一系列的移动,只要多试验几次,我们就可以很清楚这些action的使用方法,各种混搭之后,可以实现出很复杂也很绚丽的效果。 不过接下来我们将介绍一个之前没有用过的接口cc.progressTimer()来快速实现我们的一条往下滑动的效果。 cc.progressTimer() 多数情况用于使用某个sprite进行计时,倒计时操作,如下图,我们可以很清楚的看到他的效果,我们使用这个效果,可以很容易的实现出那个功能。 我们需要准备一张图片,如下图,然后使用progressTimer,就可以很容易实现这个功能了。 复制代码 ...
我们重点介绍一下cc.progressTimer()
介绍了基础的用法之后呢,我们对cc.progressTimer()有了一定的了解,接下来我们主要使用cc.progressTimer里面的cc.progressTo()@R_197_10377@去实现第三个场景的动画,经过对图片的测量,我们选定了20%,50%,80%,100%进行分段的价值,所以我们通过cc.sequence(cc.progressTo(),cc.callFunc(),cc.delayTime(),.....)这样一组循环,去分段加载那个图片。 到这里为止,我们比较详细的介绍了Cocos2d-JS一些常用的action,并且用他,实现了一个比较美观的动画,大家有兴趣可以动手亲自去试试。 微信API的集成 本功能已经有大神提供了完整的库, 地址?,以下我们做一个简单的使用分析。 复制代码 // 微信分享的数据
|
复制代码
cocos compile -p web -m release
|
复制代码
cocos compile -p web -m release --advanced
|
以上是大佬教程为你收集整理的如何用Cocos2d-JS制作一个微信报名宣传页全部内容,希望文章能够帮你解决如何用Cocos2d-JS制作一个微信报名宣传页所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。