大家好,我叫钟离伯涛【俞伯牙与钟子期 “高山流水” 典故里,钟子期的后裔(族谱记载详见下图,嘻嘻...)】。由于很多网友拿着这项目,找上门(加QQ,微信)找我咨询,找我做项目。所以在此,厚着脸皮,跟大家分享一下使用Annie2X的心得体会。
初识flash2X(Annie2X的前身)是2014年,在跟雪狼团小伙伴们(当年小可带团队,俺乃雪狼团009号成员,目前成员遍布省广,华扬,腾讯,以及创业中,我混的最差...囧)的一场聚会上了解到的,小可大大在开发一个工具flash2x,flash做好动画发布成canvas,支持用egret,laya,lufylegend等引擎,都可以开发成H5,我们都可以去使用。2014年当年我还在使用lufylegend,白鹭egret,html+CSS3+js等开发H5。(文章后面贴上我2014年Egret作品集)。没记错的话,直到2015年上半年,才公布这工具。我们是7,8月左右,才正式开始尝试这工具flash2x。经历了N个版本迭代,由于白鹭egret,layabox,lufylend引擎都在持续更新,每一个引擎的版本的更新,都会有一些废弃的接口,新的接口,导致fash2X工具也需要更新,才能适配新的引擎。最终小可决定才决定开发自己的引擎-----Annie2X.js,这就是大家现在用的引擎的初衷以及由来。(此处应该有掌声:啪啪啪...)
使用Annie2x已经3年多时间,用2X完成了很多优秀作品(客户爸爸,老板,网友都比较喜欢。我脸皮厚,贴一下金)。也多次向其他公司和网友,传播了Annie2X引擎,记得有一次一位看到我官网的网友加我微信为好友,说我个人网站作品很不错。后来得知是兔展公司的一名产品经理。后面邀请我去深圳总部交流。然后去到他们公司,机缘巧合就认识了微信群里的@深圳-H5-嘟嘟(此处老孟应该发个红包...)。后来....嘟嘟就一发不可收拾,爱上了Annie2X。嘿嘿...我的红包呢?
Annie2X给我最大的感受是:我能节省工作中30%时间(布局,制作动效,适配等),JS也非常容易理解。Annie2X引擎能解决我工作中80%的问题。我本来就是flash从业者,所以面对Annief2X并不陌生,也就看着API直接开始撸了。如今随着3年时间过去了,自己积累了很多Annie2X引擎的经验以及方法论,现在来聊聊我2017年9月份的《苏格拉宁地球大暴走》这个H5。
扫描体验
------------------------------------------------------------------------------------------------------- 我是分割线 --------------------------------------------------------------------------------------------------------
苏宁是公司很重视的一个客户,公司转型中服务的第一个IP - 苏格拉宁(微博搜索@盟主苏格拉宁 )。上半年陆陆续续去江苏南京,参与了很多次投标,PK掉了很多知名广告公司,终于拿下了苏格拉宁。它的动漫元素形象设计,双微(微博,微信)运营,H5输出,品牌创意都是我们公司团队服务。团队在制作苏格拉宁地球大冒险的原创漫画期间(可以去微博查看),需要制作一个H5来进行线上传播,于是乎,《苏格拉宁地球大暴走》H5就在这样的一个背景下,诞生了。由于是互动H5游戏,技术实现方面,直接就用Annie2X来执行了。连考虑一下都没有,直接定Annie2X。
------------------------------------------------------------------------------------------------------- 我是分割线 --------------------------------------------------------------------------------------------------------
一,各大Annie2X开发者,最想了解的就是如何适配问题。
2017年9月收到需求之后,设计和技术团队就商量是使用竖版,还是横版的设计稿呢?最终讨论完,技术团队给出了解决方案:1462宽度-800高度,设计稿主要内容做在1080宽度-640高度里。无论横竖,都兼容。不显示黑边。为什么这么说呢?
设计稿示例:
flash舞台大小:1040宽 - 640高。 设计稿大小:1462宽-800高。
元件的位置:y=-80,x=-211 【左右间距(1462-1040)/2=211,上下间距(800-640)/2=80,可视内容居中】
⑴舞台StageScaleMode缩放模式:采用SHOW_ALL。
⑵当用户开启横屏时候,微信顶部栏会打横。这时候屏幕是超宽的,高度超小。当时iPhone 7plus,小米Mix等,就会显示1080之外的像素。
(备注: 我现在用iPhoneX测试,才发现2017年9月当时iphone X ,三星note 8等超长屏手机,还没上市,所以当时最宽屏幕只支持同事的小米Mix全面屏。留给大家的思考:在iPhoneX,小米Mix2,三星Note8等超长屏手机的横屏状态下,兼容要怎么办呢?)
微信状态栏,横屏状态下,显示的最大区域。
⑶如果用户没有开启横屏,这时候微信顶部栏目会显示在顶部,这时候打横浏览,屏幕就会显示1040的宽度。
微信状态栏,竖屏状态下,显示的区域。
⑷那些屏幕小的安卓,微信竖屏时,可视范围小于1040高度的屏幕,就会看见640之外的像素,如下图所示。微信横屏时,效果如上第⑵点(当时最小兼容到了iPhone 4S,上下各80像素)。
微信状态栏,竖屏状态下,显示的范区域。
二,H5的首页,倒计时页,游戏结果页等动画都是由flash完成,flash2X工具导出。
首页动效时间轴
三,页面之间(首页,游戏页,游戏结果页,分享提示页等)的切换,由Tween完成。
贴出一点代码,献丑一下。切换页面的showPage方法里面有“T(top=从上往下切入),B(bottom=从底部往上切入),R(right=从右往左切入),L(left=从左往右切入),”方向,tween完成事件再播放动画。还可自行拓展缩放,透明出现等。上下左右定位记得参考元件的位置:y=-80,x=-211来定位。
四,判断碰撞是计算两点之间的距离Distance(PointA,PointB)来实现的,详见下图。
五,加载,如果有多余的制作时间可以进行分开加载。看大家需求。
我是做在一个FLA里面的,直接pcakToOne,打包成一个文件进行加载的。偷懒!!
六,开发时间:3-4天左右。动画+代码开发,都是我一个人。
众多开发者可能最难的部分可能就是动画了。对不起,我是奇葩,动画+代码都撸。
七,如要适配音乐按钮,LOGO,蹲下和跳跃等按钮,等元素,想靠左一些,靠右一些。看起来不会那么突兀的话。
大家需要计算屏幕比例,然后进行重新定位X位移。这里我就省了。大家去发挥!
------------------------------------------------------------------------------------------------------- 我是分割线 --------------------------------------------------------------------------------------------------------
随着时间的流逝,团队的努力也获得了回报。
苏格拉宁IP项目,2017年-2018年期间,陆陆续续获得了广告界几个重大奖项,互动H5也被多个平台收录,项目描述也都标注了:技术实现Flash2X引擎。
1,第九届-虎啸奖-IP营销类-银奖。
2,第十届广告主金远奖-案例类-整合传播类金奖 。
3,第九届-金属标-数字营销创意传播类-铜奖。
------------------------------------------------------------------------------------------------------- 我是分割线 --------------------------------------------------------------------------------------------------------
2014-2015年白鹭论坛,Egret作品以及原创链接:
2015年白鹭Egret明星开发者活动,奖品:《HTML5互动游戏开发高级编程》 (猜猜我是谁)
鄙人的个人网站:http://www.john-labs.com 2014-2017年早期的H5。很多也是flash2X完成的。
最近几个Annie2x好作品:
在未来工作中,我将继续使用Annie2X开发项目(因为方便,快捷,可以少加班,哈哈),继续传播Annie2X给更多的网友认识,也希望大家都加油!!!
后面抽空会写一篇Annie2X V4.0首个腾讯作品,《梦幻诛仙》的H5心得。敬请期待!!!
我家族谱记载:琴音,伯牙,叶公(子期)为我族第七代祖。嘿嘿。。。
(废话有点多,见谅!见谅!)
钟离伯涛
2018年08月02日
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!