【Cocoa(mac) Application 开发系列之四】Cocos2dx动作编辑器制作流程详解

简介:

又要说好久没更新博文啦,咳咳....

其实博文中对于游戏开发,从j2me-android-ios ,从Client端-Server端  ,从jbox-cocos2d-cocos2dx 基本都囊括了,当然还有一些iap 防破解、GCC、架构等等,以及现在编辑器开发的博文,基本上貌似游戏开发不缺少什么了 = =..。当然后期应该会陆续上一些Unity3D博文吧。

到此,可以说Himi一直以来一个人能做个手机网游的目标基本实现了,废话不再这里多说了,等有时间把自己的历程更新下,在Himi浅谈4年游戏开发de自学历程!(仅供参考)【2012年5月21号更新】 中再详细说吧,本节为一些做游戏且对编辑器不是很熟悉的童鞋简单介绍下动作编辑器的制作详细步骤,仅供参考啦;

努力分享、共同进步!

首先对于游戏编辑器,这里概述下,在游戏开发中呢 大家难免会接触到一些编辑器,例如常见的“动作编辑器(动编)”、“地图编辑器”、“脚本编辑器”、“粒子编辑器”、“物理编辑器”、“场景编辑器”、“任务编辑器”等等等等..其实这些编辑器的初衷都一样,缩短游戏开发周期,简化开发工作复杂度等,将程序工作分离出来;

这里举例“动作编辑器”,动作编辑器的作用主要有以下几点:

1. 减少游戏内存 (图片复用率提高)   2.便于替换游戏角色动作图片资源(比如制作Avatar系统等) 3.工作分离

对于工作分离,比如,动作编辑器有了之后,至于游戏中每个角色的动作啦,特效啦,攻击距离啦,碰撞区域啦,帧间隔啦等等都可以直接交给非程序部门负责,程序部门直接负责拿来编辑器生成的文件进行解析操作使用即可啦;

大概叙述了一下,那么下面Himi来讲解基于Mac os 开发 Cocos2dx动编的全流程;

    步骤如下:  (这里Himi分为两个大步骤,1.切片视图    动画视图)

裁切区域,如下图:

 

 

1. 左侧“资源目录” 右侧“切片操作区”以及最下方的“切片展示区” Himi都使用的NSScrollView,原因如下:

资源目录由于你无法预知用户加载进来的资源目录图片数量,所以需要一个可滚动的视图来比较合适;

而其他两个是因为Himi加入了鼠标滚轴放大视图的功能;

接收鼠标滚轴事件分为两步:

1)让当前的View重写接收事件函数:

?
1
2
3
-( BOOL )acceptsFirstResponder{
     return  YES;
}

2)重写鼠标滚轴事件:

?
1
2
3
- ( void )scrollWheel:(NSEvent *)theEvent{
     //鼠标滚轴事件
}

一般情况下在苹果系统下的坐标系都是向右是X++,向上Y++,但是有的童鞋习惯与向下Y++吧,所以这里Himi给出反转坐标系的方法:如下:重写函数:

?
1
2
3
-( BOOL )isFlipped{
     return  YES;
}

话题转回来,对于切片操作区域呢,资源目录下的每张图片都应该对应着一个数组,用于存放切片的Rect,这个很容易想到不解释了;

至于展示区其实就是对应将每个图片对应的数组Rect都切出新图成为新切片放置 “切片展示区”即可;

可能大家有1个疑惑:如何显示一个界面让用户导入资源呢?

OK,其实很eazy,使用 NSOpenPanel  这个类即可实现啦。很简单给与提示即可。

当然啦 为了方便大家 给出一段使用代码吧:

?
1
2
3
4
5
6
7
8
NSOpenPanel *oPanel = [NSOpenPanel openPanel];
[oPanel setCanChooseDirectories:YES];  //可以打开目录
[oPanel setCanChooseFiles:NO];  //不能打开文件(我需要处理一个目录内的所有文件)
[oPanel setTitle:@ "选择动编操作的文件夹" ];
 
if  ([oPanel runModal] == NSOKButton) {   //如果用户点OK
 
}

这样会使用了吧 = =。再不会的请面壁谢谢;

效果如下:

 

需要主要一点,为了方便美术等进行裁切时候有误差等细节调整,那么Himi在“切片操作视图”每个切片矩形的右下角有个“小矩形”,拖动这个小矩形即可改变其大小啦 ,很方便的啦 嘿嘿

OK,切片视图貌似没有太多的东西,我们下面来看主要的“动作视图”:

 

基本上直接看上面这张图已经讲解的很清晰了 。。

这里说几个技术点:

1.视图没说的,最下方的还是切片视图,这里的视图都是由“切片视图”切好的直接拿过来使用的。以及上方的View都是用的NSScrollView进行使用的,Himi说过了,都是因为要做成右键缩放功能,你懂的。

2. 动作序列,帧序列,以及切片序列都是使用的NSTableView 来做的;很eazy 的;

其实说实话,Himi做这个编辑器大部门时间都花在这里了。其实功能不少,都是隐藏各种右键,还有呢就是与“切片视图”的数据一定要对应并且大家一定要做的时候理清思路和架构,以及代码,类的设计要考虑清楚,否则说实话...不然会各种晕。

3.关于右侧的角度、帧率、坐标、缩放比例等就不说了,很简单的NSLable和NSTextField啦。

 

OK,最后,我们看下最后一个视图,这个视图貌似隐藏的比较深,是个动作播放视图的观察视图。通过“动画视图的”的播放动作触发显示的。

如下图:

 

        大家要注意,这个播放动作展示的视图,Himi建议单独拿出来一个NSWindow来做,这样两者可以同时观察和修改!

这个动作查看的视图可以自动更新你在“动画视图”的调整;这个比较海皮;

 

  而后,重点就是你数据的存储和编译出你cocos2dx或者其他平台的文件即可。这里还是要提醒大家!

         c++属于小端数,Java属于大端数,这个千万别忘记了,否则你数据怎么都不对 哈哈。

好啦,再往后咱们就设计下我们这个编辑器的“ About ”,如下效果:


设计这个相当容易,我们只需要修改一个地方即可:

找你项目下的 Supporting Files 文件夹下的Credits.rtf文件,双击打开编辑好保存,就OK啦。!

 

最后的最后呢,就是打包的啦。这里不上图了。(Himi Xcode Version:4.3.2)

找到Xcode菜单的Product -> Archive , 然后在Organizer界面->Distribution-> 选中 Export as 并选择Application OK,Next-> Don't Re-sign ->Next 后面就是导出你放置的目录啦!





本文转自 xiaominghimi 51CTO博客,原文链接:http://blog.51cto.com/xiaominghimi/969976,如需转载请自行联系原作者

目录
相关文章
|
6月前
|
Web App开发 安全 iOS开发
基于PyCharm与Mac系统的Chrome历史记录清理工具开发实战
《基于PyCharm与Mac系统的Chrome历史记录清理工具开发实战》详细解析了如何在macOS下通过Python脚本自动化清理Chrome浏览器的历史记录。文章以`clear_chrome_history.py`为例,结合PyCharm开发环境,深入讲解技术实现。内容涵盖进程检测、文件清理、虚拟环境配置及断点调试技巧,并提供安全增强与跨平台适配建议。该工具不仅保障个人隐私,还适用于自动化运维场景,具备较高实用价值。
131 0
|
7月前
|
监控 Shell Linux
Android调试终极指南:ADB安装+多设备连接+ANR日志抓取全流程解析,覆盖环境变量配置/多设备调试/ANR日志分析全流程,附Win/Mac/Linux三平台解决方案
ADB(Android Debug Bridge)是安卓开发中的重要工具,用于连接电脑与安卓设备,实现文件传输、应用管理、日志抓取等功能。本文介绍了 ADB 的基本概念、安装配置及常用命令。包括:1) 基本命令如 `adb version` 和 `adb devices`;2) 权限操作如 `adb root` 和 `adb shell`;3) APK 操作如安装、卸载应用;4) 文件传输如 `adb push` 和 `adb pull`;5) 日志记录如 `adb logcat`;6) 系统信息获取如屏幕截图和录屏。通过这些功能,用户可高效调试和管理安卓设备。
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
567 0
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
325 4
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
343 0
|
11月前
|
前端开发
业余时间开发了个海报编辑器
为了满足撰写博客或录制教程视频时对高质量海报的需求,我利用业余时间开发了一款海报编辑器。第一版功能简单,支持固定尺寸、黑底白字的标题。后来经过优化,增加了背景图、模糊效果、文字样式调整等功能,使海报更具吸引力。目前该编辑器已上线,欢迎大家试用并反馈。[访问海报编辑器](https://tool.share888.top/#/poster)
174 6
业余时间开发了个海报编辑器
|
12月前
|
运维 Java Linux
【运维基础知识】掌握VI编辑器:提升你的Java开发效率
本文详细介绍了VI编辑器的常用命令,包括模式切换、文本编辑、搜索替换及退出操作,帮助Java开发者提高在Linux环境下的编码效率。掌握这些命令,将使你在开发过程中更加得心应手。
137 2
|
缓存 前端开发
ProFlow 流程编辑器框架问题之创建一个自定义节点如何解决
ProFlow 流程编辑器框架问题之创建一个自定义节点如何解决
139 1
|
小程序
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
1295 0
【微信小程序-原生开发】富文本编辑器 editor 的使用教程
|
小程序 API 容器
ProFlow 流程编辑器框架问题之查看ProFlow的开源地址和官网链接如何解决
ProFlow 流程编辑器框架问题之查看ProFlow的开源地址和官网链接如何解决
243 0

热门文章

最新文章