《苏格拉宁地球大暴走》H5项目 - 纪实

《苏格拉宁地球大暴走》H5制作心得体会

前传:

大家好,我叫钟离伯涛【俞伯牙与钟子期 “高山流水” 典故里,钟子期的后裔(族谱记载详见下图,嘻嘻...)】。由于很多网友拿着这项目,找上门(加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。

attachments-2018-08-nWJAfnwE5b62aade622dc.png扫描体验



-------------------------------------------------------------------------------------------------------        我是分割线          --------------------------------------------------------------------------------------------------------

项目背景:

苏宁是公司很重视的一个客户,公司转型中服务的第一个IP - 苏格拉宁(微博搜索@盟主苏格拉宁 )。上半年陆陆续续去江苏南京,参与了很多次投标,PK掉了很多知名广告公司,终于拿下了苏格拉宁。它的动漫元素形象设计,双微(微博,微信)运营,H5输出,品牌创意都是我们公司团队服务。团队在制作苏格拉宁地球大冒险的原创漫画期间(可以去微博查看),需要制作一个H5来进行线上传播,于是乎,《苏格拉宁地球大暴走》H5就在这样的一个背景下,诞生了。由于是互动H5游戏,技术实现方面,直接就用Annie2X来执行了。连考虑一下都没有,直接定Annie2X。



-------------------------------------------------------------------------------------------------------        我是分割线          --------------------------------------------------------------------------------------------------------



技术剖析:

一,各大Annie2X开发者,最想了解的就是如何适配问题

2017年9月收到需求之后,设计和技术团队就商量是使用竖版,还是横版的设计稿呢?最终讨论完,技术团队给出了解决方案:1462宽度-800高度,设计稿主要内容做在1080宽度-640高度里。无论横竖,都兼容。不显示黑边。为什么这么说呢?

设计稿示例:

attachments-2018-08-FRwPYyNZ5b62c6c155376.png

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等超长屏手机的横屏状态下,兼容要怎么办呢?)

attachments-2018-08-nmK2mbIW5b62c399c4cd3.jpg

attachments-2018-08-tdkYYXEl5b62bb1745018.png微信状态栏,横屏状态下,显示的最大区域。


⑶如果用户没有开启横屏,这时候微信顶部栏目会显示在顶部,这时候打横浏览,屏幕就会显示1040的宽度。 

attachments-2018-08-qOWWJHZN5b62c3c9d5613.jpg

attachments-2018-08-9sxrY8Q35b62c0a9f07c0.png微信状态栏,竖屏状态下,显示的区域。


⑷那些屏幕小的安卓,微信竖屏时,可视范围小于1040高度的屏幕,就会看见640之外的像素,如下图所示。微信横屏时,效果如上第⑵点(当时最小兼容到了iPhone 4S,上下各80像素)。

attachments-2018-08-DjPxZfcB5b62c5418c25e.pngattachments-2018-08-lArBGRKn5b62c58216db8.png微信状态栏,竖屏状态下,显示的范区域。


二,H5的首页,倒计时页,游戏结果页等动画都是由flash完成,flash2X工具导出。

attachments-2018-08-KRVlUPoO5b62e457a34e1.png

首页动效时间轴


三,页面之间(首页,游戏页,游戏结果页,分享提示页等)的切换,由Tween完成。

attachments-2018-08-fsgc431D5b62b6caddedf.png贴出一点代码,献丑一下。切换页面的showPage方法里面有“T(top=从上往下切入),B(bottom=从底部往上切入),R(right=从右往左切入),L(left=从左往右切入),”方向,tween完成事件再播放动画。还可自行拓展缩放,透明出现等。上下左右定位记得参考元件的位置:y=-80,x=-211来定位。


四,判断碰撞是计算两点之间的距离DistancePointA,PointB)来实现的,详见下图。

attachments-2018-08-kYjeLS0o5b62b60bb25f0.png

attachments-2018-08-2dqll6ag5b62b617baa47.png


五,加载,如果有多余的制作时间可以进行分开加载。看大家需求。

我是做在一个FLA里面的,直接pcakToOne,打包成一个文件进行加载的。偷懒!!

attachments-2018-08-njvrg5105b62e47623fe4.png


六,开发时间:3-4天左右。动画+代码开发,都是我一个人。

众多开发者可能最难的部分可能就是动画了。对不起,我是奇葩,动画+代码都撸。


七,如要适配音乐按钮,LOGO,蹲下和跳跃等按钮,等元素,想靠左一些,靠右一些。看起来不会那么突兀的话。

大家需要计算屏幕比例,然后进行重新定位X位移。这里我就省了。大家去发挥!




-------------------------------------------------------------------------------------------------------        我是分割线          --------------------------------------------------------------------------------------------------------

项目收获:

随着时间的流逝,团队的努力也获得了回报。

苏格拉宁IP项目,2017年-2018年期间,陆陆续续获得了广告界几个重大奖项,互动H5也被多个平台收录,项目描述也都标注了:技术实现Flash2X引擎。

1,第九届-虎啸奖-IP营销类-银奖。

attachments-2018-08-xFEDgTKV5b62d53dd853a.png

2,第十届广告主金远奖-案例类-整合传播类金奖 。

attachments-2018-08-IfOd8K9u5b62d54b2de4b.png

3,第九届-金属标-数字营销创意传播类-铜奖。

attachments-2018-08-8NIx7yZ05b62d522d6dc4.png


attachments-2018-08-KGXolQWY5b62d52971c81.png




-------------------------------------------------------------------------------------------------------        我是分割线          --------------------------------------------------------------------------------------------------------

2014-2015年白鹭论坛,Egret作品以及原创链接:

原创Egret游戏《熊猫追月》

2015上半年公司Egret项目《太古汇超跑之夜》

2014年首个Egret原创游戏《吃饭睡觉打豆豆》

2015年白鹭Egret明星开发者活动,奖品:《HTML5互动游戏开发高级编程》 (猜猜我是谁)


鄙人的个人网站:http://www.john-labs.com    2014-2017年早期的H5。很多也是flash2X完成的。


最近几个Annie2x好作品:

attachments-2018-08-CZ9UZcgP5b62d238c2151.pngattachments-2018-08-oXAPq3Nc5b62d2a87e9ce.png



在未来工作中,我将继续使用Annie2X开发项目(因为方便,快捷,可以少加班,哈哈),继续传播Annie2X给更多的网友认识,也希望大家都加油!!!

后面抽空会写一篇Annie2X V4.0首个腾讯作品,《梦幻诛仙》的H5心得。敬请期待!!!


我家族谱记载:琴音,伯牙,叶公(子期)为我族第七代祖。嘿嘿。。。

attachments-2018-08-898Gz2LF5b62ca7ce4749.jpg



(废话有点多,见谅!见谅!)



钟离伯涛

2018年08月02日



你可能感兴趣的文章

相关问题

14 条评论

请先 登录 后评论
不写代码的码农
钟离伯涛

雪狼009

1 篇文章

作家榜 »

  1. 皮卡丘先生 13 文章
  2. 大北兔 10 文章
  3. hero 9 文章
  4. vien007 7 文章
  5. anlun214 5 文章
  6. Even 4 文章
  7. 炸天 4 文章
  8. ningbnii 3 文章