专访Layabox创始人谢成鸿：Flash与HTML5结合的背后
发表于 15:59|
摘要：Layabox是一个将Flash AS3项目一键变成HTML5项目的完整技术框架。这种Flash转H5的技术国内外很多公司都尝试过，但都没能有更深一步的进展。CSDN专访Layabox的创始人谢成鸿，请他为我们揭开Flash与HTML5结合的背后。
Layabox是一个将Flash AS3项目一键变成HTML5项目的完整技术框架。这种Flash转换到HTML5的技术国内外很多公司都尝试过，其中包括Google，甚至Adobe公司都作过转换尝试，但都没能有更深一步的进展。而Layabox宣称已实现Flash项目转换为HTML5项目，在全球还属于首次。如此领先的技术到底有多少不为人知晓的秘密呢？CSDN记者带着种种疑问，对Layabox的创始人谢成鸿进行了专访，请他为我们揭开Flash与HTML5结合的背后。Layabox创始人 谢成鸿CSDN：能讲一讲您的经历和Layabox诞生的关系吗？谢成鸿：我1999年就进入游戏行业，是中国网游游戏最早的开拓者之一，99年一个人花三个月的时间制作了全球首款商业webGame，2000年创立“可乐吧”，成为当时中国前三大休闲娱乐平台。在2003卖出“可乐吧”后研发了很多游戏产品，2014年底推出“Layabox”，却迅速在Flash和HTML5行业火爆。我的所有经历都是和游戏相关，Layabox的技术方案并不是凭空的构想，而是十多年的积累。比如H5加速器，就和可乐吧的FancyBox方案几乎一样，对H5游戏性能的极致优化，也是源于对HTML和做客户端游戏时自研引擎的深厚积累。虽然说Layabox在HTML5行业推出的时间不长，但是我们的技术积累、方案积累是时间最长的，尤其是在H5加速器性能上，做到我们这种程度，绝不是花个一两年就能作到的。CSDN：刚才听到您提到HTML5加速器，您能对我们的读者科普一下吗？还有，H5加速器产生的初衷是什么？谢成鸿：H5加速器比较好理解，从名字上基本上就能看出来了，是用于提高浏览器或App中H5项目性能的扩展组件，是为了解决H5的兼容性的性能问题而生。在2011年的时候，我就决定从H5行业入手，然而当时困扰H5行业的两大问题是就兼容性问题和性能问题，于是在2012年的时候，Layabox第一代完成。当时仅包括一个JavaScript版本的加速器和H5引擎，随H5游戏一起运行，在游戏运行前就接管了浏览器接口，支持HTML+CSS3，支持图文混排，支持硬件加速，在当时，甚至是IE6也可以运行Layabox的H5游戏。经过几年的反复迭代和重构，Layabox的技术方案更加成熟，解决了现阶段H5行业的所有问题，我们采用C++实现的H5通用加速器，性能上已经媲美原生App。CSDN：请详述加速器的实现原理，另外是否方便针对Layabox加速器的特点，做更详细一些的介绍？谢成鸿：在加速方面，一是采用GPU渲染加速，进行了特殊的优化，二是通过内置C++实现的高级对象来减少JS的调用量，经过实际的性能测试，在性能数据上我们已经超越了原生App。其他方面，比如，Laya.player是支持所有H5项目加速的通用加速器，还支持H5素材与代码的加密与解密、支持高速缓存管理、支持内存的智能管理、支持发布独立的App、支持多种格式的音频并发播放、支持通用的登录与支付接口等。CSDN：除了加速器，Layabox还有一个核心技术就是Flash转换器，请谢总对这块也讲一讲，尤其是转换器诞生的原因，让我们的读者多了解一些Layabox背后的故事。谢成鸿：在2013年的时候Layabox就已经拿到过CSDN的开源大奖，但是迟迟没有推出Layabox的很重要的一个原因，就是面临一个行业难题，H5开发者太少，推广困难。于是眼光开始聚焦到页游行业庞大的Flash程序员，如何能让这一群体直接使用Flash AS3语言去开发H5产品，也是我开始思考的问题。这里还有一个小插曲，当我决定要通过工具把AS3的项目一键变成H5项目的时候，引擎组的两个负责人当即愤怒：人家Adobe、谷歌都没干成的事，我们这些Flash外行能行？老大你是无知还是无畏？当我要亲自负责关键的编译模块又保证完成时，大家的愤怒就蔫了。当我们已经成功的实现Flash程序员直接用AS3去开发H5项目的时候，还能把旧的页游产品转换成H5产品时，大家又为能参与到改变几十万Flash程序员职业生涯的事业而自豪。聊完小插曲，我再分享点干货，Flash转换模块由运行库和工具集两部分组成。其中，运行库是由AS3语言重写的，完全兼容原生Flash运行环境的库，具体包括“iflash、ilaya、ilayamethod”三个类库。工具集主要为编译器和辅助开发的工具集组成。在开发H5项目时，直接使用Flash开发环境，导入运行库进行开发即可。通过工具集的编译功能，可以一键生成H5项目代码。因为Layabox这个技术框架，让AS3成为继Haxe、TypeScript后又一种JavaScript编写语言。Flash程序员除了掌握十几条开发规则外，没有任何额外的学习成本，即可开发出来高效的H5项目了。CSDN：Layabox的定位和盈利模式是怎样的？谢成鸿：Layabox就是为解决HTML5行业难题而生的，其中一个方向是通用加速器的极致性能，让所有的H5项目以超越App的性能流畅运行在各种机型上。另一个方向是继续保持Flash新项目一键编译H5的基础上，让Flash旧项目的转换周期再大幅缩短。在盈利模式方面，我们是通过几十亿的联合发行流量和独家发行流量与CP方共赢。而Layabox技术框架本身都是免费的，我们免费为所有的开发者服务，针对优秀的页游转换项目，还提供免费入驻扶持。CSDN：在实际推广中，开发者面对Layabox时，接受程度如何？您能不能给开发者一些建议？谢成鸿：推广中我们面临两类开发者，一类是以个人开发者，我们刚刚开始以报名的方式对开发者开放体验，从当前看，反响还不错。另一类是企业开发者，这里的态度会有一些区别，有一些品质不错或页游数据不错的CP非常积极的使用Layabox方案。还有一些自信心不足的CP还有迟疑，一是担心H5还没有赚钱的案例出来，要不要进去。二是转换的品质是否被市场接受。这里我想对所有的开发者强调一下，Layabox的代码转换率非常高，达到99.8%，大型项目的UI调整和代码修改1个人一个月左右即可完成。用这个成本去尝试一个蓝海的市场，你还不敢去作的话，那你可以退出游戏市场了，没有哪一个市场是零风险的。另外，还想对非Flash开发者一点建议，你们在选择HTML5开发语言的时候，要考虑是否是全平台开发方案。页游的市场规模并没有下降，如果你的产品在移动端表现不错，为什么不去尝试一下Flash页游市场的表现呢？CSDN：除了Layabox，在H5市场中，前几天Cocos开发者大会上也强调了Cocos2d-JS，陈昊芝的一番话还引起Egret陈书艺的内部邮件回应，您是怎么看这件事，以及H5三大技术提供商之间的关系？谢成鸿：这个行业的前景大家都非常看好，整个H5产业也开始热起来了，大家都想发出一些声音，这是可以理解的。在14年底，Layabox刚刚面世的时候，我们和Egret也曾发生过误会，闹的一塌糊涂，但是后来我和书艺坦诚的交流过，H5刚刚热起来，大家要团结，做好案例、产业，如果是虚热，那大家都完蛋。另外，有投资界的朋友也很直接的告诉我，如今HTML5技术提供商已经形成三足鼎立格局，几年内谁也死不了。与其你死我活，不如一起把市场作大。何况三家技术针对不同的开发者，服务好自己领域的开发者才是根本。CSDN移动将持续为您优选移动开发的精华内容，共同探讨移动开发的技术热点话题，涵盖移动应用、开发工具、移动游戏及引擎、智能硬件、物联网等方方面面，如果您有想分享的技术、观点，可通过电子邮件（tangxy#csdn.net，请把#改成@）投稿。第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章1.去layabox官网下载LayaAir IDE开发工具：https://www.layabox.com/
2.直接解压不需要安装就可以使用
3.打开layaAri IDE工具
4.新建一个空项目
(function(){
//初始化引擎 w h 是否使用webGL渲染
Laya.init(600, 400,Laya.WebGL);
//屏幕缩放模式
Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
//水平对齐方式
Laya.stage.alignW = Laya.Stage.ALIGN_CENTER;
//垂直对齐方式
Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
//屏幕适配
Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZONTAL;
//实现hello world
var tx = new Laya.Text();
//设置内容
tx.text = "hello world";
//设置文本位置
tx.pos(Laya.stage.width/2,Laya.stage.height/2);
//文本颜色
tx.color = "#ccc";
//文本大小
tx.fontSize = 66;
//文本的轴心点
tx.pivot(tx.width/2,tx.height/2);
//添加到屏幕
Laya.stage.addChild(tx);
& 著作权归作者所有
人打赏支持
码字总数 15804
LayaAir是HTML5开源引擎 提供Canvas和Webgl同时渲染，如果Webgl不可用，则可自动切换到Canvas模式。引擎为高性能游戏设计，支持AS,TS,JS三种语言开发，一套代码三端齐发（Flash，HTML5，APP...
LayaBox引擎技术副总裁汪阔在参加“2016开源中国开源世界高峰论坛”时，表示LayaBox已经启动了开源计划，开放了LayaFlash和LayaAir引擎。在未来，除了2D、3D、VR引擎，还计划对LayaAir的IDE...
概述 其实有人学了很久还是把docker当虚拟机来使用，但是docker其实和虚拟机是完全不一样的，如何理解这一区别呢，我觉得自己动手做一个docker的hello world镜像是最好的 先体验一下hello-w...
bboysoulcn
本篇博客旨在手动制作一个最简单的myhello镜像，而并非使用用官方的hello-world。 首先运行一下官方的hello-world看看效果： 官方的hello-world镜像也很小，只有1.85kB 我的宿主机环境ubunt...
在spring的xml配置文件中我们可以通过标签 进行java bean的注入 基础注入 基础bean类 xml文件bean配置 这种bean注入采用的是注入类的无参数构造函数进行类的实例化，并且是单例模式的 多实例...
作为一个AS3的老用户，曾经用它开发很多游戏，实现了自己的游戏梦，有着无比的成就感。在Adobe放弃Flash，整个市场偏向HTML5后，一度很迷茫，这么好的语言难道就要放弃吗。LayaAir的出现，让...
独立游戏开发者，一个略带高傲和偏执的名字。它代表了一群对游戏坚持、对梦想执着的热血游戏青年，骄傲的在独立游戏开发的道路上前行，只为实现心中的游戏梦想。 现在，实现游戏梦想的机会来...
Node js Hello world 环境安装 官网 Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable . Node.js uses an event-driven, non-blocking I/O......
Hello world 在开始写这篇博客的时候，我没用过Objective C,正在学习Swift，所以在这个过程中会犯一些和基础的错误，写博客的目的主要是为了辅助学习，所以当您在骂我“不懂就别瞎鸡吧写，简...
原生手游市场已是红海，腾讯、网易等寡头独霸天下，H5游戏市场或将成为下一个风口。据笔者所知，很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如何选择适合团队和项目的引擎，笔...
没有更多内容
加载失败，请刷新页面
参考： 1,Android Gradle Plugin解析 2,Android Gradle Plugin 源码阅读与编译 方法步骤： 1,专门建立一个gradle 插件module。 建立一个 android lmodule。 删除src/main/下的所有文件 在src...
Carlyle_Lee
1.准备两台装好mysql的机器 mysql单机安装步骤请参考https://my.oschina.net/qbj/blog/1850086 我的两台主机分别为 10.20.4.58 和10.20.4.59 58为mater机器 59为slave机器 在msater上的mysql...
熊小熊会写代码哦
1. SonarQube下载安装 官网下载：http://www.sonarqube.org/downloads/ （我这下载的是6.7.4版本） 2. 解压后 - 进入bin目录 3. 开启服务 打开windows-64 - 执行StartSonar.bat文件（这里根据...
张艺兴女朋友
想给自己的笔记本装Windows server 2008 r2，都知道原版的镜像不支持usb3.0，可是笔记本三个口都是usb3.0的，不相信我还特意去华硕官网查了这个笔记本的文档，在安装的过程中没有usb，没有鼠...
虚拟世界的懒猫
使用PD(UML工具——Power Designer)设计数据库正向工程 现在我们来使用Power Designer这个工具设计数据库。首先打开Power Designer这个工具，点击【文件】菜单，在下拉框中选中【建立新模型】...
1 K线图 &!DOCTYPE html&&html lang="en"&&#include "../header.ftl"&&body&&#include "../nav.ftl"&&div class="container"&&caption class="caption"&&h5&日K线:${pzId}&......
守望者之父
在本文中，我将向您展示一些基本和更高级的示例，说明如何使用Istio平台来提供部署在Kubernetes上的微服务之间的通信。按照Istio网站上的描述，它是： 一个开放的平台，用于连接，管理和保护...
xiaomin0322
由于类太多导致的内存溢出 java.lang.OutOfMemoryError: PermGen space at java.lang.Throwable.getStackTraceElement(Native Method) at java.lang.Throwable.getOurStackTrace(Throwable.j......
https://www.zhihu.com/video/042752 之前我们发过一篇关于 PyCharm 的文章： 喏，你们要的 PyCharm 快速上手指南 文章帮好多新手解决了问题，在微博上还被知乎官方账号推荐了。...
Java Exception： 1、Error 2、Runtime Exception 运行时异常 3、Exception 4、throw 用户自定义异常 异常类分两大类型：Error类代表了编译和系统的错误，不允许捕获；Exception类代表了标准...
没有更多内容
加载失败，请刷新页面
文章删除后无法恢复，确定取消删除此文章吗？
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
确定推荐此文章吗？
确定推荐此博主吗？
聚合全网技术文章，根据你的阅读喜好进行个性推荐
指定官方社区
深圳市奥思网络科技有限公司版权所有你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
laya真的很棒，但是作为新手的我有几个问题，希望能得到答复。
1、如果是使用js开发的，能使用ES6吗？如果可以的话，如何设置呢？
2、laya中没有场景的概念吗？比如游戏开始界面是一个场景，进行游戏时是第二个场景，游戏结束是第三个场景。如果有的话，该怎么做？如果没有的话又该如何做呢？
3、destroy销毁 和 removeSelf删除 有什么区别？什么时候该用哪一个？
4、在飞机大战实例教程中，有Laya.Pool对象，但是在API文档中却只能找到laya.utils.Pool，那么Laya.Pool又是从哪里来的？难道是API文档不全？
1、因为laya发布后就是js代码，所以js支持的类库和方法laya下都支持，ES6的使用请参考原生用法，一样的
2、场景是要开发者自己使用逻辑来控制的，不是引擎来提供的，实现原理很简单，3个场景是3个类。使用addChild和removeChild进行场景显示和移除。
3、destroy是立即销毁，即销毁该显示对象所占显存，removeChild从显示列表销毁显示对象，遵循js的垃圾回收机制，不是立即销毁
4、凡是laya引擎下的类库，类路径均可使用Laya.进行简化书写
1、因为laya发布后就是js代码，所以js支持的类库和方法laya下都支持，ES6的使用请参考原生用法，一样的
但是如果使用layaplayer打包native app的话，好像layaplayer不支持es6语法。
要回复问题请先
浏览: 1423
关注: 3 人2添加评论分享收藏感谢收起LayaBox 与 Egret 选择哪个呢？
· 169 天前 · 6032 次点击
RT，小弟 h5 游戏开发新人一枚，最近在学习 h5 游戏开发的文档。
目前国内最火的 h5 游戏框架一个是 Layabox，一个是 Egret，小弟目前在看 layabox 的文档，但感觉真的是对新人不友好，很多 API 没有 demo，文档似是而非，一个方法的中文解释还不如直接根据方法名来猜。
所以想问一下前辈们，h5 开发框架应该学哪个对新手比较友好？是否应该转投 Egret ？
18 回复 &| &直到
08:55:16 +08:00
& &169 天前 via Android
我后端的，用 egret 写个 Demo，痛苦得要死。文档要么没有，要么没更新。版本更新太快，完全跟不上。工具和引擎匹配不上。公司的 H5 项目，是自己在 egret 基础上改的，貌似还不错。菜鸟就不一定了。
& &169 天前
目前在学 laya ；
从个人角度来看，laya 可以用 js 直接写，对于 ts 来说门槛没那么高；
推荐方式，webstrom+laya.core.min.js + es6/7 来写
& &169 天前
我用的是 phaser， 那个文档有点奇怪，但是 demo 多， 我要的功能基本上都能找到，看到不懂的地方再去查 API。
只可惜没有官方中文。
& &169 天前
@ layabox 文档里的 demo 看了个遍，但是没有 demo 的 api 文档看起来完全就是天书
比如事件的 api 文档， CLICK 事件的解释是“定义 click 事件对象的 type 属性值。”，好吧，这种我猜也能猜出来，可是 LABEL 事件的解释是“定义 label 事件对象的 type 属性值。”，这不跟 click 的一样吗？这跟没说有什么区别……
& &169 天前
@ 准备入坑 phaser 试试了
& &169 天前
最近也研究了一下 phaser
& &169 天前
egret 是 H5 行业的正规军
phaser 更适合做点小项目
& &169 天前
@ 能否评价一下 layabox
& &169 天前
& &169 天前
我们选了 layabox
& &169 天前
去年年初考虑过做 h5 游戏，尝试后我选的 layaair，因为当时 laya 的 3d 性能比 Egret 强得多被震撼到了，稍微花点时间熟悉了一下 ActionScript3 之后发现这门语言本身还挺好使的，而且有什么问题直接看 layasdk 源码就差不多了。
推荐使用 idea 作为 as3 代码的 IDE，代码提示功能很强，因为 sdk 的源码（好像仅限 as 版）里就包含了很多注释，配置方式可以试试参考我之前发过的帖子：
不过没多久公司老大选型了另外一种方式开发项目，我的尝试也就结束了，当时的经验现在是否还适用不敢保证。。。
& &169 天前
@ 非常感谢！真是让人头疼啊！
& &168 天前
市场上 Egret 貌似多一点，之前公司用的 Egret
& &168 天前
不尝试一下 cocos creator ？
& &168 天前 via Android
egret. creator. laya 差不太多。随便选一个都行。主要是文档都不太全，只能自己摸索。等熟悉以后就好很多了。另外 egret 的工具链似乎更完善一些。creator 可能对 unity 使用者更有好点。
& &168 天前
@ 对啊，文档是硬伤
& · & 1809 人在线 & 最高记录 3541 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.1 · 17ms · UTC 09:44 · PVG 17:44 · LAX 02:44 · JFK 05:44? Do have faith in what you're doing.