CocosCreator + 战斗系统(1) 简易教程

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

为避免再次出现 “在线角色扮演社区” 那种只能看不能动的情况

这次教程的节奏将会放缓 我们这次先模拟一个登录界面

首先新建项目吧:

然后新建一个场景 重命名为loginScene (鼠标对层级管理器中asserts右键->新建->Scene 重命名为loginScene)

继续建几个文件夹 loginSceneSrc放loginScene的资源 其下image放图片 script放脚本 (鼠标对层级管理器中asserts右键->新建->文件夹 重命名为 loginSceneSrc 然后鼠标对loginSceneSrc右键->新建->文件夹 重命名image script文件夹同上)

下面开始吧

先下载背景图 : http://pan.baidu.com/s/1mhldkcK,1

扔到image文件夹下

然后在层级管理器中新建背景精灵 重命名为background

然后选中background 资源管理器中的login拉到属性管理器的spriteFrame中 扔下去 (图片的尺寸已经调为960 640 默认的话大家不需要再改尺寸 如果有黑边请自行调成图片尺寸)

运行效果如图

后面我们用label来模拟一下输入框吧

先将控制台和动画编辑器关掉吧 这样场景编辑器会有更好的视野

然后放大一下我们视野内的组件吧 (鼠标滚轮放大缩小 鼠标右键移动)

然后我们在canvas下新建一个label 重命名为userName (鼠标右键canvas -> 创建节点 -> 创建渲染节点 -> Label 重命名为 userName)

然后选中userName 将其拖动到右下角位置(随便调位置 开心就好) 然后将属性检查器的颜色改为黑色 内容改为 ‘用户名:’ 字体大小改为30 排版改为匹配高度

然后回到层级管理器 点userName 复制节点

然后选中新的userName 重命名为password 将其在画板的位置往下拖 然后修改属性管理器的内容为 ‘密码:’ 其他默认保持和userName一样就行了

然后继续复制节点吧 点password复制节点 重命名为 userNameInput 将其在画板中的位置拖到右上方

然后选中CocosCreator左上角的矩形变换工具 将鼠标放在左右两侧的边框上 等到鼠标出现 ←||→ 的时候向左右拉动边框长度

然后调整内容为 ‘请输入用户名’ 对其为左对其

最后一个密码输入框就不演示了 大家将用户名输入框复制节点 修改位置 改内容就行了

然后添加button吧 层级管理器 对canvas鼠标右键 -> 创建节点 -> 创建UI节点 -> 按钮重命名为submit -> 调整画板上位置 -> 在层级管理器选中submit下拉按钮 -> 选中label -> 将内容改为 submit

然后复制一个submit节点 重命名为register 然后调整在画板上的位置 -> 选中层级管理器register下拉按钮 -> 选中label -> 将内容改为 register

然后我们给输入框加个背景色吧

选中canvas 创建节点 -> 创建UI节点 -> 布局 重命名为inputPanel

然后选中那4个Label 和 2个button 拖到 inputPanel下 好了 我们加了个灰色的背景 顺便把4个label的颜色都调成白色吧 (随意调 看得清就行)

好啦 后面我们开始写脚本吧

在资源管理器中script文件夹下新建javascript 重命名为myUserNameInput 然后在onload中写上两个监听事件 一个听输入框是不是被选中 一个听输入的是什么

鼠标点击监听就听是不是按的输入框 我们将鼠标点击的坐标转化为输入框的坐标 然后和输入框的尺寸比较一下 就能知道鼠标是不是点在输入框内了

那么 选中了 分两种情况 如果已经输入内容了 就不管了 如果没输入内容 就将 ‘请输入用户名’ 清空吧

如果没选中 分两种情况 如果已经输入内容了 就不管了 如果没输入内容 就将 ‘请输入用户名’ 再次显示出来

保存一下脚本 (ctrl + s) 关掉 然后将输入框引用一下 选中层级管理器的 userNameInput 将资源管理器的myUserNameInput 扔到属性检查器

然后再次选中userNameInput 扔到属性检查器里的myUserNameInput组件的UserName里面 (myUserNameInput组件要将属性查看器往下拉才能看到)

然后可以运行一下先看一下效果了 请输入用户名被选中后会消失 点其他位置会恢复

好啦 然后我们继续输入的部分吧

输入监听部分我做得很简单 大家可以自行扩展功能 具体查看API中 cc.KEY

然后呢可以再运行一下看看啦

然后把myUserNameInput脚本的focus属性补上吧 (如果这里感到突兀请大家不要见怪 = =因为我忘记加上去了)

然后在资源管理器中 script文件夹下 新建一个myPasswordInput脚本 将myUserName脚本的内容全部复制过来覆盖上去

我们用passwordText存密码, passwordInput存 * 号

将代码中的userNameInput全部替换成passwordInput (按两次ctrl + F 上面一栏填 userNameInput 下面一栏填passwordnput 然后按Replace后面的All)

然后把properties中的text修改为 ‘请输入密码’

好了 还有一点收尾工作 选中层级管理器中的passwordInput 将资源管理器中的myPasswordInput 扔到属性管理器中

然后将层级管理其中的passwordInut扔到属性管理器 myPasswordInput组件的 PasswordInput中

然后就可以运行看看了

输入用户名

输入密码

删除用户名

删除密码

用户名删除至空 并失去焦点

密码删除至空 并失去焦点

好啦 我们这次就先做个登录界面 后面会逐步推进至进入战斗界面 往后的教程会尽量做到步伐小一点

源码在这里 http://pan.baidu.com/s/1hr0K4rq

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

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

1赞

支持,希望你能写出更多的教程来

1赞