CocosCreator + 角色注册界面 简易教程

http://www.cocoachina.com/bbs/read.php?tid=458895&page=1&toread=1#tpc
New: 教程司令部已经更新了教程 往后不再使用链式的教程结构

最后面数据库部分出了点问题
过段时间再补上吧

这次加了一大堆的按钮 不要指望我再加一遍了= =

仅仅做一个介绍

里面用到的新内容会另开一个帖子

好了 开始吧

这次数据库还没有改

前台: http://pan.baidu.com/s/1dEyTSYX,1

后台: http://pan.baidu.com/s/1c0OyxWk,1

前后台都开起来吧

我那个号的角色满了
这次我们用panda的账号 PANDA123 ASD520

好了 和上次的项目比 我们多了一个创建的按钮

实现的过程也是很简单的 一开始左右两侧都有create的按钮
在服务器回传数据到前端, 我们在将数据更新到label texture animationClip的时候 顺便将按钮隐藏就行了

这个是 heroChooseSceneSrc/script/HeroInfoIO/myHeroInfoIO.js

那么按钮的脚本在 heroChooseSceneSrc/script/createBtn/myCreateBtn.js

上面的toRegisterScene 就是我们等会点击时调用的函数啦
我们切换到注册场景吧

好了 首先是角色形象的选择

这个呢 没有什么新东西 (连脚本都是用前面场景用到的 = =改都木有改)
头像纹理是设计的时候就已经加上去的
点击头像纹理的时候 会更新对应的动画

也是呢, 很简单, 头像的组件加上脚本, 监听点击, 如果有点击, 就告诉animNode : “兄弟, 我是2号,那熊孩子戳我了”

然后挂到不同的头像下就修改frameIndex为不同的值就行了

显示动画的节点将show的接口开出来就行了 用的是之前在角色选择界面显示动画的脚本(合着4个节点就只写了两个脚本,其中一个还是之前写过的= =大爱数据驱动)

加了一个记录当前帧 方便下一个场景使用

好了 没新东西了 我们继续下个场景吧

点击next(这里忘记插图了, 这里会将选好的角色形象的索引发给服务器, 下个场景的头像就是通过服务器再发回这个生成的)

好了 我们到最后一个场景了 等会开的新帖就会将这里面的内容

首先 改名字这个就不说了 用的之前的代码 只是将text改成了 ‘请输入用户名’,其他啥都没变

好了 我们随便输一个好了

然后呢 就是重头戏啦 大家自己感受下

果然还是这张好看点

咳咳 好了 这个内容就是等会开贴的主题

下面我们看一下加点

加点的脚本实现没有什么技巧 只要能明白要干嘛 后面敲成代码就是顺理成章的事情了

按下加号后 应该做的几件事是
1.显示减号
2.总点数减一
3.属性点数加一

属性点数改变后 应该做的几件事是
1.如果点数为0,隐藏减号

2.如果点数为15,隐藏加号

总点数改变后 应该做的几件事是
1.如果点数为0 隐藏所有加号

2.如果点数不为0,显示所有加号

可以看到加点为15的项依旧没有显示
其实隐藏所有加号和显示所有加号的操作 是通过在所有加号上加一个空的父节点
通过直接隐藏和显示父节点, 利用级联的特性, 达到批量的操作
同时又能保持内部的一些特性 比如加到了15还是不能显示加号

按下减号 应该做的几件事
1.显示加号
2.总点数加一
3.属性点数减一

那么 如果我们对上面的信息做一个整理 就能发现
对于按钮 实际上做的是相同的事情
而差别在于作用的目标(对应的属性)和方向(加还是减)
那么只要把这部分提出来,我们就能够复用脚本了

那么代码在 configSceneSrc/script/BaseStatusBtn/myBaseStatusBtn.js

so 如何处理这种差异呢 用cc.Enum

脚本写完了 现在把 脚本挂上去吧 这酸爽,简直不敢相信

那么如法炮制 我们将属性label的代码也进行枚举

= =下面处理的代码变成一团了 这里就不演示了 也不是什么新东西 大家感兴趣的按下面这么做

其他代码也可以这么看

我们继续看到下面的AttributePoint部分 有一个小细节要注意一下

显示部分我就不说了 其实就是在4条纯色sprite做的progressBar组件
在上面再添加一个镂空的Spirte作为mask
就能看到一颗一颗的效果了 很简单

但是注意个 我们的progressBar的长度显示是在0~1之间的
也就是说 在这里我们每添加一颗的地水火风属性
就可能需要执行这样的代码
this.getComponent(cc.ProgressBar).progress+=0.1;
这其实没什么问题
那如果我们按了减号
this.getComponent(cc.ProgressBar).progress-=0.1;
这就不怎么好了
因为
对于某个地水火风的属性大于4的时候
也就是progress大于0.4的时候
我们按了一下减号
神奇的事情就会发生了
console.log(this.getComponent(cc.ProgerssBar).progress);
竟然是0.30000004
= =我不觉得这是一件好事,如果逻辑严重依赖progerss的结果的话
这个bug就会时不时的出现

so 一个好的解决办法就是
在外面修改好应该显示的长度
然后直接给进度条赋值

好了 这次先介绍到这里 数据库部分的设计出了点问题 等想到解决办法之后继续填坑吧

我先把换纹理的教程整出来

http://www.cocoachina.com/bbs/read.php?tid=458895&page=1&toread=1#tpc

http://www.cocoachina.com/bbs/read.php?tid=459845

1赞

注册界面用户名和密码不能输入中文,请问如何解?

那个是用label模拟的,输入框要等到1.0出来吧
(=.=)by the way 注册界面不能输中文不是很正常吗

好帖顶顶顶!

新手请教一下,后台程序用什么运行?

后台使用的是node.js+mysql 详细可以查看上游的教程

谢谢 还有一个问题,我下载的版本为什么是英文版? 在哪里能设置成中文呢?

据说MAC版本里含有部分英文,具体我也不清楚啦