Html5 Egret游戏开发 成语大挑战(二)干净的eui项目和资源准备

现在我们使用egret来起步开发一个名叫《成语大挑战》的小游戏,关于egret的开发环境就不在这里啰嗦了,直接去官方下载安装就可,egret是我见过开发环境部署最简单的解决方案,这个系列教程中,使用了egret的Wing和ResDepot,只需要安装这两个就行,首先打开EgretWing,选择创建项目,输入你想要的项目名称,项目类型为“Egret EUI项目”,然后下一步:

由于游戏设计的是竖屏,而素材的分辨率为720x1136,所以设置是如上的选择,然后选择完成,稍等就会构建一个模板项目出来,只需要在此基础上进行开发,这时对于有洁癖的我来说,比较忍受不了的是模板中提供的默认皮肤,由于我们是自己有资源素材开发游戏,所以这些默认资源没什么用,可是创建空egret项目的话,配套的eui设置就得自己搞了,所以才用模板创建好了之后以下操作方式干掉没用的资源:

   

直接删除掉assets下的文件和eui_skins目录素材之后,还得要去编辑“default.res.json”和“default.thm.json”文件,确保它们没问题,首先打开“default.res.json”,删除清理掉丢失掉的资源:

然后打开“default.thm.json”文件,将没用配置给删除掉,最后变成如下的模样

顿时觉得清爽多了,这只是我的个人喜好,按照上面方法可以创建一个比较干净的项目。

下面将准备的资源放入到项目中,在assets目录下建立三个目录:“images”、“res”、“sound”,这三个目录的说明:

images:这里存放了游戏中的题目图片,由于有400道题目,所以,题目图片还是按需加载比较靠谱,大约有13MB

res:这里存放了游戏的ui图片等,将来要preload预先加载,将它们放在一起的原因是将来方便整合打包

sound:这是游戏的音乐和音效,至于是否要提前加载,看个人情况而定,本项目中使用异步加载

素材资源下载,请查看文章尾部的附件。

然后刷新当前项目,双击打开“default.res.json”,你就会发现有这个提示:

此时,建议不要点是,而是点否,自己通过拖拽进来按照自己需要安排资源比较好控制,将需要预先加载的资源扔到preload组里面

好了,在开搞之前的准备工作已经完成了,后面就可以进入正式状态了,敬请浏览下一篇

本篇中所使用的附件素材在这里下载:

成语大冒险图片1.zip

成语大冒险图片2.zip

成语大冒险图片其他.zip

由于博客园限制,只能上传分为3个包了

时间: 2024-10-07 18:40:05

Html5 Egret游戏开发 成语大挑战(二)干净的eui项目和资源准备的相关文章

Html5 Egret游戏开发 成语大挑战(一)开篇

最近接触了Egret白鹭引擎,感觉非常好用,提供了各种各样的开发工具让开发者和设计者更加便捷,并且基于typescript语言开发省去了很多学习成本,对于我们这种掉微软坑许久的童鞋来说,确实很有吸引力,在开发中最浪费时间就是设计和调试的阶段,js的语言过于自由,自由到有时候写错了都不知道,但typescript可以使用开发IDE帮助排错和调试,不得不说确实很有效率,在这之前,我在egret论坛里发了几个小游戏做练手,最近的一个<疯狂猜歌名>在素材齐备的情况下,仅用了不到1天的时间完成了开发,以

Html5 Egret游戏开发 成语大挑战(八)一般性二级页面处理

在游戏中,我们一般会有各种各样的二级页面,比如游戏暂停界面或者游戏结束界面,这些界面组成了对玩家交互主要手段,在游戏开发中,对于这些界面的coding组织是非常有学问的,如果倒退到十年前,游戏开发的老前辈们一定孜孜不倦的上课如何设计好“易读”“可维护”“逻辑清晰”的界面代码,本人曾深陷其中变得对代码抠抠索索,结果事倍功半,原因是什么?老前辈们的一个项目或一段代码可能是长期维护长期使用的,而现在的高速code和超短的产品生命周期,使得完全不用规划那么好的交互代码,有时候可能过几个月自己的代码都不认

Html5 Egret游戏开发 成语大挑战(九)设置界面和声音管理

在上一篇中,简单的使用界面元素快速实现了一个游戏中的二级页面,这种直接在游戏页面上做UI的做法并不太好,原因是,UI会让游戏的压力变大,即使它是隐蔽的,如果同样的功能在其它的地方也是一样的,那么就要写多个同样的逻辑吗?例如设置界面,游戏中的设置界面基本上功能都是一样,如果每个UI中都做一遍,是多么愚蠢的办法?在UI的代码设计中,一般来说,单独的功能不会在其它的地方用到,如GameOver,就直接写在UI里,而如果是通用功能,则最好的做法是做一个通用的单例类或者工厂类在需要的时候将它们初始化,在多

Html5 Egret游戏开发 成语大挑战(三)开始界面

本篇需要在前面的素材准备完毕,才可以开始,使用egret的eui结合代码编辑,快速完成基本的界面搭建,这里写的可能比较细,目的是减少大家对于其中一些操作疑问,我去掉了很多无用的步骤,以最精简的流程来完成,如果比较熟练的话,这些操作只需要不到15分钟就完全可以搞定. 特别说明:如果已经对EUI 有基础了解的童鞋,可以直接跳过这篇,因为实在是太简单了. 创建一个exml的皮肤,这里特别说一下,到现在仍然对于项目中的“包”和“目录”有什么具体区别仍然还是不是很清晰,反正对我来说就是一个目录,习惯性的会

Html5 Egret游戏开发 成语大挑战(七)游戏逻辑和数据处理

本篇在前面的基础上,将进行逻辑的编码开发让游戏能够正式的玩起来,这里没有注重太多的体验细节,而是直接实现游戏的规则逻辑,将分成两个部分说明:数据处理和游戏逻辑. 初始化游戏数据 在前面的第五篇中,我们通过数据的构建已经读取了所有的关卡数据在关卡选择界面中,LevelDataManager负责管理所有的关卡数据,在SceneLevels类中,当onclick_level触发时,就会切换到Game界面中,所以改造代码如下: private onclick_level(e:egret.TouchEve

Html5 Egret游戏开发 成语大挑战(四)选关界面

通过前面的开始界面基本上了解了eui的使用方法,可以简单快速的制作一个UI界面,本篇使用第二界面选关界面展示更为难一点的代码控制,来展现关卡地图的内容,请确保素材和资源完整,可以在前面的教程中找到下载. 选关界面和开始界面不太一样,请参考开篇的结构图,需要一个推进式上下拉动的地图界面,创建基本的exml和开始界面是一样的,这里的名字叫“SceneLevelsSkin”,在组件库中把Scroller组件拖进去并给其下属内容命名group_levels,用来承载地图内容,最后加一个返回按钮. <?x

HTML5物理游戏开发 - 越野山地自行车(三)粉碎自行车

自上一章发布到现在已时隔四月,实在对不住大家,让大家久等了~话说不是我不关注我的博客,而是事情一多起来写博客的时间就少了.待到今日有空了,回头看了看自己以前写的文章,猛得发现已经四个月不曾写文章了,便只得叫声:"苦也~",我害怕本系列文章会拖得更久,于是立刻提笔,也好为本系列文章留个凤尾. 首先,大家来温习一下前面两篇里的内容吧: HTML5物理游戏开发 - 越野山地自行车(二)创建一辆可操控的自行车 http://blog.csdn.net/yorhomwang/article/de

Html5 移动游戏开发

有很多游戏采用H5技术开发,比如三国来了.巴哈姆特之怒.切绳子等.我们公司也有多款游戏用H5开发,H5开发成本低,效率高,方便做自动更新,可移植性好.受益于H5技术,我们公司的很多产品都很方便跨平台. 早在2012年,我就很荣幸负责技术攻关,把我们的游戏移植到win8和wp8平台,当时在国内的win8和wp8平台是领先的.我们的一款游戏,跨ios.android.win8.wp8和黑莓10五大移动平台,这在国内肯定是唯一的吧? <Infinity Lands>喜获黑莓优秀大奖 也得益于在win

【cocos2dx游戏开发】之 坐标系(二) convertToNodeSpace和convertToWorldSpace

游戏中经常会用到一些变换: 游戏中武器和角色在一个layer上,为了效率,会考虑将bullet, effect和 PhysicsParticle分别放到不用的层上,对应的层上使用batchnode来提高效率 武器和PhysicsParticleLauncher(粒子发射器)绑定,发射的时候,会向PhysicsParticleLayer的武器相同的位置上生成一个物理粒子特效 会经常用到convertToNodeSpace和convertToWorldSpace转换坐标 我们加三个sprite,r0