当前位置：
H5是一场游戏变革 LayaBox发布三端游戏引擎
来源：安趣网&&&
作者：番茄&&&发表于
　　6月30日，国内老牌游戏引擎厂商LayaBox在北京发布了旗下第二代游戏引擎LayaAir1.0版本。据介绍LayaAir凭借其媲美APP的性能、多语言支持及对PC页游、APP手游、H5游戏三端支持等7大特点令人惊叹。　　媲美APP功能 完美支持三端游戏引擎　　LayaAir1.0同时支持PC页游、APP页游、H5游戏的引擎，这也是全球唯一一款支持三端发布的游戏引擎，意味着游戏开发商只需要开发一次就可以面向PC页游、手游APP、H5游戏平台，助力开发商获得更好的成绩。对于ActionScript3的支持让一批原本从事
Flash页游开发的程序员能够零成本进入到H5行业中来。也是全球唯一一款同时支持三端发布的游戏引擎，这意味着开发商只需要一次开发就可以面向PC页游、手机APP、H5游戏三端市场发布。　　LayaAir1.0引擎的学习成本也是极低，LayaAir1.0采用的是精简对象策略，通过归纳总结和精简的设计，一般程序员学习一天就能掌握LayaAir。LayaAir1.0的发布标志着三端融合游戏时代的到来，不仅如此LayaAir1.0还支持2D、3D、VR游戏的开发，这就是LayaAir“不仅仅是H5“的意义，也是游戏业发展过程中必将迎来的一次变革。　　布局教育产业 提前培养专业人才　　任何一款新鲜事物的出现，人们都难免对它有陌生感，LayaAir1.0也一样，就算它学习成本在低，再有极强的易用性，对于没有接触过LayaAir的人来说，它还是一个新鲜事物。因此LayaBox发起成立了“LayaBox教育联盟”，首批成员单位有龙图教育、汇众教育、触控未来。LayaBox产品相关学习资料将会进入到成员单位的教育计划中。未来，“LayaBox教育联盟”还将与各大高校展开合作，让LayaBox产品走进大学生群体。　　正如LayaBox所说的企业使命一样，“世界因我而不同”为企业使命，推动HTML5产业发展，打造的LayaBox技术品牌”。　　未来还有很远，留给LayaBox的空间还有很大......　　关于LayaBox：　　LayaBox所属公司搜游网络成立于2014年，其创始人谢成鸿进入游戏引擎领域十余年，曾创立页游平台“可乐吧”、做端游研发的中娱公司等。LayaBox创立之初天使轮融资千万，2016年A轮融资1亿，投资方深创投、金慧丰、合力资本等基金。
微信扫码关注安趣网公众号
或添加微信号：anqucom关注"安趣游戏"
回复""即可免费领取最新礼包！
扫码下载"实用攻略"APP
最全、最热、最好玩的手游，第一时间为您推送，新游享不停！
安趣助手是国内领先的手机游戏门户，提供全网最新的手游资讯、游戏新闻、评测、新游推推荐服务。
不删档内测
1新仙剑奇侠传h5
新仙剑奇侠传h5
2口袋妖怪联盟
口袋妖怪联盟
3啪啪动物城
啪啪动物城
4火影忍者忍者大师h5
火影忍者忍者大师h5
5妖怪宝可萌
妖怪宝可萌
6勇者必须赢
勇者必须赢
7西游记口袋版
西游记口袋版2被浏览335分享邀请回答0添加评论分享收藏感谢收起Layabox谢成鸿:H5游戏产业已进入2.0时代2 years ago0收藏分享举报文章被以下专栏收录H5引擎技术干货、产业动态、Layabox引擎产品案例{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&HTML5引擎的技术干货、产业动态、产品案例分享、Layabox引擎最新技术动态&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&H5引擎技术干货、产业动态、Layabox引擎产品案例&,&urlToken&:&layabox&,&id&:13867,&imagePath&:&0dffa8d7adc502b38dde.jpeg&,&slug&:&layabox&,&applyReason&:&0&,&name&:&HTML5游戏引擎&,&title&:&HTML5游戏引擎&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Flayabox&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:309,&avatar&:{&id&:&0dffa8d7adc502b38dde&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic2.zhimg.com\u002F0dffa8d7adc502b38dde_l.jpg&,&articlesCount&:15},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic4.zhimg.com\u002Fbbf6da6a_r.jpg&,&lastUpdated&:,&imagePath&:&bbf6da6a.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[],&summary&:&2015年开始，移动游戏APP市场开始趋于饱和，寡头现象显现，发行成本急剧提升，上万家APP游戏CP面临转型或破产压力，而此时，风口到底在哪里呢？VR还处于硬件、概念、小众线下体验等阶段，尽管一致看好未来趋势，但两三年内很难承接整个APP游戏行业。电竞或…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T11:42:46+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:685395,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&Layabox谢成鸿:H5游戏产业已进入2.0时代&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:13867,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic4.zhimg.com\u002Fbbf6da6a_r.jpg&,&author&:{&bio&:&&,&isFollowing&:false,&hash&:&f68ca49c79c6cf5a5f5e817ead28f7dd&,&uid&:069300,&isOrg&:false,&slug&:&layabox&,&isFollowed&:false,&description&:&&,&name&:&charley&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Flayabox&,&avatar&:{&id&:&v2-993dbda9bc8d03e5f4609d05&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:368809}],&title&:&Layabox谢成鸿:H5游戏产业已进入2.0时代&,&author&:&layabox&,&content&:&\u003Cp\u003E　　2015年开始，移动游戏APP市场开始趋于饱和，寡头现象显现，发行成本急剧提升，上万家APP游戏CP面临转型或破产压力，而此时，风口到底在哪里呢？VR还处于硬件、概念、小众线下体验等阶段，尽管一致看好未来趋势，但两三年内很难承接整个APP游戏行业。电竞或许还算一个炙手可热的领域，但是对于绝大多数CP而言，这个领域的进入成本太高。上万家APP游戏的中小CP何去何从？\u003C\u002Fp\u003E\u003Cp\u003E　　恰在此时，H5游戏市场月流水千万的《传奇世界H5》在2016年伊始被曝出。由Forgame集团与Layabox引擎联手打造，于本月正式上线的MMORPG《醉西游》也曝出成绩单：首测次留43.24%、三留40.38%、七留26.79%、玩家日均游戏时长135分钟，二测付费率19.63%，ARPU达到8.2。种种消息显示出H5行业在高速发展与变化，而单款产品的爆发正是整体行业兴起的前兆。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Febab3f8b9ad931_b.jpg\& data-rawwidth=\&509\& data-rawheight=\&383\& class=\&origin_image zh-lightbox-thumb\& width=\&509\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Febab3f8b9ad931_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='509'%20height='383'&&\u002Fsvg&\& data-rawwidth=\&509\& data-rawheight=\&383\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&509\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Febab3f8b9ad931_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Febab3f8b9ad931_b.jpg\&\u003E\u003C\u002Ffigure\u003EMMORPG《醉西游H5》测试期间曝出的数据\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fcbe6d12c8_b.jpg\& data-rawwidth=\&500\& data-rawheight=\&323\& class=\&origin_image zh-lightbox-thumb\& width=\&500\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fcbe6d12c8_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='500'%20height='323'&&\u002Fsvg&\& data-rawwidth=\&500\& data-rawheight=\&323\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&500\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fcbe6d12c8_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fcbe6d12c8_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Cp\u003EMMORPG《醉西游H5》正式上线后曝出的数据\u003C\u002Fp\u003E\u003Cp\u003E　　随着优异的产品数据表现，证明着H5领域已具有承载APP游戏产业的实力。凭借其入口广泛、无端易于推广，发行成本低等特性，H5已成为移动游戏行业的下一个“蓝海”。H5游戏行业从趋势到一个时代的来临，自然少不了引擎提供商的技术支撑。《醉西游H5》是怎样达到画面、流畅度媲美APP？H5行业未来的发展走向又当如何？我们走进中国三大H5引擎之一的Layabox，与创始人谢成鸿展开对话，将这位互联网老兵的近20年的创业经历分享给大家。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E守业数十载 \u003C\u002Fstrong\u003E\u003Cstrong\u003E山穷水尽疑无路\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E　　作为最早一批的互联网游戏开拓者，谢成鸿是个有故事的人。1999年，互联网在国内还处于刚起步的阶段，然而他已通过独自开发3个月的DHTML棋牌游戏平台，以300万的价格卖给联众母公司海虹。可谓是国内页游行业探索的第一批先驱者。\u003C\u002Fp\u003E\u003Cp\u003E　　其后2000年创办的“可乐吧”，是原国内的三大休闲游戏平台之一。于2003年被清华同方以数千万价格收购。谢成鸿早期的创业之路，走的顺风顺水，经验和人脉早已胜人一筹。但战无不胜、稳赚不赔只存在于童话故事里。\u003C\u002Fp\u003E\u003Cp\u003E　　自从2004年步入端游研发的创业以来，一路开发的产品，都是叫好不叫座，花开无果。哪怕是十几年经验的行业老兵，也终于走到了山穷水尽的地步。当最后一款3D端游《猎刃》推出失败后，投资人撤资、被迫裁员，300多人的团队，裁减到几十人，一大笔遣散费的压力迎面而来。\u003C\u002Fp\u003E\u003Cp\u003E　　在当时谢成鸿仍有千万身家，关门清算，无论是再创业还是舒舒服服的过点休闲日子。选择破产，或许不失为最好的办法。然而，他做出了一个让家人和朋友都反对的决定：卖房发遣散费。谢成鸿说道“企业没做好并不是员工的责任，而是自己的责任，需要我背负起这样的担当。”\u003C\u002Fp\u003E\u003Cp\u003E　　回忆起失败的经历，谢成鸿坦言自己当时承受着前所未有的压力，甚至一度萌生过放弃的念头。即便卖了房子，仍需要四处筹钱。就在自己险些绝望之际，一直陪伴自己的合伙人、老员工也抵押了自己的房子来支持他。出于对伙伴的感激与责任、加之自己“不服气”信念，支撑着他坚持并渡过了这一次人生难关。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E开拓新行业\u003C\u002Fstrong\u003E\u003Cstrong\u003E柳暗花明又一村\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E　　在2011年的时候，曾有朋友劝谢成鸿转身投向页游。但是他认为这个时候进入页游已经晚了。之后，他想到一个新的方向，那就是手机、PC等多端结合的游戏发展方向。究竟什么样的技术才能把所有的平台完美的融合在一起呢?只有H5技术才能实现，正是基于这样的前提，谢成鸿开始投身进入了H5行业中。一个在未来并没有形成行业的方向去开拓，这是他所擅长的。\u003C\u002Fp\u003E\u003Cp\u003E　　选定方向后，谢成鸿不断在H5的大型游戏领域探路开荒，2012年推出了自研引擎(Laya)的一款大型多人在线休闲游戏《疯狂雪球》，2013年推出了大型卡牌策略游戏《三国喵喵传》（已改名《上吧主公》），2014年完成了大型动作游戏《猎刃2》。2015年将引擎免费开源后，除《猎刃2》外，又推出移植自APP手游的《魔卡幻想》等十款大型H5游戏。本月推出的MMORPG《醉西游》更是“大型+重度+精品”的H5优秀代表作品。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002F83ab0da7a13afc26f8a5_b.jpg\& data-rawwidth=\&500\& data-rawheight=\&630\& class=\&origin_image zh-lightbox-thumb\& width=\&500\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002F83ab0da7a13afc26f8a5_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='500'%20height='630'&&\u002Fsvg&\& data-rawwidth=\&500\& data-rawheight=\&630\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&500\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002F83ab0da7a13afc26f8a5_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002F83ab0da7a13afc26f8a5_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003EMMORPG游戏《醉西游H5》截图\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EHTML5游戏产业的2.0时代\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E　　上个月，Layabox推出了号称裸跑性能比肩APP的第二代H5引擎——LayaAir，它最大的亮点是支持2D、3D以及VR的开发。\u003C\u002Fp\u003E\u003Cp\u003E　　H5技术也能支持VR？谢成鸿拿出一款VR设备让我亲自体验。尽管这是一段3D场景的游戏DEMO，但从视觉感受来说，很难相信这是通过H5网页技术来实现的。谢成鸿介绍，LayaAir正是为3D及VR技术而蓄力备战的，一旦未来VR时代来临后，H5还会有更大的应用空间。\u003C\u002Fp\u003E\u003Cp\u003E　　多平台结合，一直是谢成鸿努力的方向。尽管2013年推出的《三国喵喵传》，分别在APP市场、页游市场，还有H5市场都赚到了钱。但是H5在PC端的兼容性远弱于移动端。LayaAir引擎的产品不仅仅可以发布H5和APP，还可以发布Flash，这才真正解决了PC端的兼容性问题。\u003C\u002Fp\u003E\u003Cp\u003E　　不望初心，谢成鸿终于实现了他的“大统一”引擎，并且与3D、VR的结合，让H5的未来迸发无限可能，让H5不仅仅是一个狭小的单领域产业，而是依托于H5技术的“全领域”大市场。H5游戏产业自此开始进入2.0的时代。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E关于LayaAir引擎：\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E　　裸跑性能媲美APP的新一代HTML5引擎；支持Canvas、WebGL模式自动切换；支持2D、3D、VR产品开发；支持使用Action3、Type、Java三种语言开发；一次开发可同时发布：手游APP、HTML5、Flash页游多端版本。\u003C\u002Fp\u003E&,&updated&:new Date(&T03:42:46.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:0,&collapsedCount&:0,&likeCount&:0,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic4.zhimg.com\u002Fbbf6da6a_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&HTML5&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&HTML 5 游戏&}],&adminClosedComment&:false,&titleImageSize&:{&width&:500,&height&:395},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&layabox&,&name&:&HTML5游戏引擎&},&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:0,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T11:42:46+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[],&summary&:&\u003Cimg src=\&http:\u002F\u002Fpic2.zhimg.com\u002Febab3f8b9ad931_200x112.jpg\& data-rawwidth=\&509\& data-rawheight=\&383\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&http:\u002F\u002Fpic2.zhimg.com\u002Febab3f8b9ad931_r.jpg\&\u003E2015年开始，移动游戏APP市场开始趋于饱和，寡头现象显现，发行成本急剧提升，上万家APP游戏CP面临转型或破产压力，而此时，风口到底在哪里呢？VR还处于硬件、概念、小众线下体验等阶段，尽管一致看好未来趋势，但两三年内很难承接整个APP游戏行业。电竞或…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic2.zhimg.com\u002F50\u002Fa1bd5498fcf_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&HTML5&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&移动互联网
HTML5&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&&,&isFollowing&:false,&hash&:&f68ca49c79c6cf5a5f5e817ead28f7dd&,&uid&:069300,&isOrg&:false,&slug&:&layabox&,&isFollowed&:false,&description&:&&,&name&:&charley&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Flayabox&,&avatar&:{&id&:&v2-993dbda9bc8d03e5f4609d05&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&layabox&,&name&:&HTML5游戏引擎&},&content&:&\u003Ch2\u003E\u003Cb\u003E序\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003EHTML5是一种热门的跨平台开发技术，随着引擎技术的发展，如今LayaAir引擎的产品性能已达到原生APP的水准，甚至可以直接用于开发APP、HTML5、Flash的多端版本产品。认真学习完本篇教程，可以帮您打开全平台开发之门。\u003C\u002Fp\u003E\u003Cp\u003ELayaAir支持ActionScript3、TypeScript、JavaScript三种语言，因此入门教程也分为三个版本，本篇文章是面向JavaScript程序员的版本。\u003C\u002Fp\u003E\u003Cp\u003E另外，本篇LayaAir引擎入门教程是面向已拥有一定开发基础的程序员，如果对本篇文章中涉及的开发语言尚不熟悉的开发者，请先行学习掌握相关的语言基础后再阅读本文。\u003C\u002Fp\u003E\u003Cp\u003E如果您是第一次使用LayaAir引擎开发，请严格遵照本篇教程的步骤操作，直到正确完成第一个DEMO。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Ch2\u003E\u003Cb\u003E第一节 开发前的准备\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E一个强大的可视化编辑工具，可以大幅提升开发效率，也可以交由美术和策划直接使用，减轻代码开发压力。LayaAirIDE正是一款可视化集成开发工具，当前已集成代码编辑器，UI、粒子、动画等常用可视化编辑工具，还支持DragonBones骨骼编辑器、tileMapEditor地图编辑器等第三方工具。在系统方面，LayaAirIDE支持windows7或以上的windows系统，以及MAC系统。\u003C\u002Fp\u003E\u003Cp\u003ELayaAir引擎与IDE最新版本的官方入口URL地址：\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fldc.layabox.com\u002F\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttp:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eldc.layabox.com\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003ELayaAirIDE下载解压后的目录结构，如下图所示：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002F3eda9f18ce_b.jpg\& data-rawwidth=\&396\& data-rawheight=\&229\& class=\&content_image\& width=\&396\&\u003E\u003C\u002Ffigure\u003E由于LayaAir目前是绿色免安装版本，在下载解压后，建议先将主程序LayaAir.exe右键发送到桌面快捷方式。\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E第二节 创建项目\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cb\u003E步骤一：\u003C\u002Fb\u003E打开LayaAirIDE，如果是首次打开，直接点击“新建项目”开始创建新项目。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Ffd98eaa99f823d96ddb9d_b.jpg\& data-rawwidth=\&554\& data-rawheight=\&280\& class=\&origin_image zh-lightbox-thumb\& width=\&554\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Ffd98eaa99f823d96ddb9d_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cb\u003E步骤二：\u003C\u002Fb\u003E在“新建项目”的窗口里，第一行是项目名称,第二行是项目所在路径，第三行是项目类型，分别为ActionScript、JavaScript、TypeScript项目，这里我们需要选择 “JavaScript项目”。\u003Cbr\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002F0a494ab02dbf3ea63892_b.jpg\& data-rawwidth=\&554\& data-rawheight=\&283\& class=\&origin_image zh-lightbox-thumb\& width=\&554\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002F0a494ab02dbf3ea63892_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cb\u003E步骤三：\u003C\u002Fb\u003E点击确定后。我们可以看到LayaAirIDE的代码工作环境，项目创建的时候，自动生成了一个UI示例项目，包括了一个简单的DEMO。如下图所示：\u003Cbr\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002F1ecbe1e14ad215baf88c5ec39a95c046_b.jpg\& data-rawwidth=\&554\& data-rawheight=\&416\& class=\&origin_image zh-lightbox-thumb\& width=\&554\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002F1ecbe1e14ad215baf88c5ec39a95c046_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E第三节 显示文字“Hello Layabox”\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\u003Cp\u003E\u003Cb\u003E步骤一：\u003C\u002Fb\u003E选中bin右键单击，然后左键点击“新建文件”，在bin目录下建立一个HelloLayabox.js的文件。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fe92d0c4f9be868bfeeefe2_b.jpg\& data-rawwidth=\&400\& data-rawheight=\&238\& class=\&content_image\& width=\&400\&\u003E\u003C\u002Ffigure\u003E\u003Cb\u003E步骤二：\u003C\u002Fb\u003E按建步骤一的方式，还在bin目录下，创建一个HelloLayabox.html的文件，点击打开该文件编写如下图的HTML代码。这里包括了引擎库与程序代码的引用。（Tips:如果项目代码里涉及中文，需要在HTML里设置好utf-8编码）\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fa547e2f3da263bbc315ba6_b.jpg\& data-rawwidth=\&554\& data-rawheight=\&231\& class=\&origin_image zh-lightbox-thumb\& width=\&554\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fa547e2f3da263bbc315ba6_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E图中代码如下：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&cp\&\u003E&!DOCTYPE html&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehtml\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehead\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\t\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Emeta\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Echarset\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&utf-8\&\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E\u002F&\u003C\u002Fspan\u003E\n\t\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etitle\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003EhelloLayabox\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etitle\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehead\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ebody\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\t\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Esrc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&libs\u002Flaya.core.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\t\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Esrc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&HelloLayabox.js\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Escript\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ebody\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ehtml\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cb\u003E步骤三：\u003C\u002Fb\u003E打开项目文件“StudyLayaAirJS.laya”，将原来的默认显示页修改为bin\u002FHelloLayabox.html，修改后，该页就会成为调试运行(按F5)的入口主页。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fc9855abf1c3aabded45c_b.jpg\& data-rawwidth=\&554\& data-rawheight=\&260\& class=\&origin_image zh-lightbox-thumb\& width=\&554\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fc9855abf1c3aabded45c_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cb\u003E步骤四：\u003C\u002Fb\u003E准备工作完成后，就可以编码了，我们打开bin目录下的HelloLayabox.js，开始编写如下代码：\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&c1\&\u003E\u002F\u002F创建舞台，默认背景色是黑色的\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003ELaya\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Einit\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E600\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E300\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Enew\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003ELaya\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EText\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E();\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&c1\&\u003E\u002F\u002F设置文本内容\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&Hello Layabox\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n \n\u003Cspan class=\&c1\&\u003E\u002F\u002F设置文本颜色为白色，默认颜色为黑色\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ecolor\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&#ffffff\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n \n\u003Cspan class=\&c1\&\u003E\u002F\u002F将文本内容添加到舞台 \u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003ELaya\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estage\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EaddChild\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E步骤五：编码完成后，按F5调试，在弹出的页面里，我们可以看到代码的运行结果，如下图所示：\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002F63b96b3b472482daec2ae43ebc69e3d0_b.jpg\& data-rawwidth=\&554\& data-rawheight=\&319\& class=\&origin_image zh-lightbox-thumb\& width=\&554\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002F63b96b3b472482daec2ae43ebc69e3d0_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E步骤六：显示成功后，我们继续编写代码，让文字显的美观一些。继续完善代码如下：\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&c1\&\u003E\u002F\u002F创建舞台，默认背景色是黑色的\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003ELaya\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Einit\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E600\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E300\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Enew\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003ELaya\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EText\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E();\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&c1\&\u003E\u002F\u002F设置文本内容\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&Hello Layabox\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n \n\u003Cspan class=\&c1\&\u003E\u002F\u002F设置文本颜色\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ecolor\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&#FF0000\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&c1\&\u003E\u002F\u002F设置文本字体大小，单位是像素\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EfontSize\u003C\u002Fspan\u003E
\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E66\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n \n\u003Cspan class=\&c1\&\u003E\u002F\u002F设置字体描边\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estroke\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E5\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\u003Cspan class=\&c1\&\u003E\u002F\u002F描边为5像素\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EstrokeColor\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&#FFFFFF\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n \n\u003Cspan class=\&c1\&\u003E\u002F\u002F设置为粗体\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ebold\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&kc\&\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n \n\u003Cspan class=\&c1\&\u003E\u002F\u002F设置文本的显示起点位置X,Y\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Epos\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E60\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E100\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n \n\u003Cspan class=\&c1\&\u003E\u002F\u002F设置舞台背景色\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003ELaya\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estage\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EbgColor\u003C\u002Fspan\u003E
\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'#23238E'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n \n\u003Cspan class=\&c1\&\u003E\u002F\u002F将文本内容添加到舞台 \u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003ELaya\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estage\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EaddChild\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etxt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E编写完成后，按F5调试，运行结果如下图所示：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Faa0a69d2df68c1d8aa3fbe_b.jpg\& data-rawwidth=\&554\& data-rawheight=\&323\& class=\&origin_image zh-lightbox-thumb\& width=\&554\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Faa0a69d2df68c1d8aa3fbe_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E至此，如果您能跟随本篇入门教程，完成上图的显示，恭喜您入门成功，我们已经完成了第一个采用JavaScript语言开发的LayaAir引擎HTML5程序。更多LayaAir引擎开发的API使用方法，请前往官网Layabox开发者中心查看在线API与在线DEMO。\u003C\u002Fp\u003E\u003Cp\u003E在线API文档地址：\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Flayaair.ldc.layabox.com\u002Fapi\u002F\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttp:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Elayaair.ldc.layabox.com\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u002Fapi\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&ellipsis\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E在线DEMO文档地址：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cu\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Flayaair.ldc.layabox.com\u002Fdemo\u002F\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttp:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Elayaair.ldc.layabox.com\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u002Fdemo\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&ellipsis\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\u003C\u002Fu\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fd86b338ac40fa9ea549bad5_b.jpg\& data-rawwidth=\&554\& data-rawheight=\&491\& class=\&origin_image zh-lightbox-thumb\& width=\&554\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fd86b338ac40fa9ea549bad5_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cbr\u003E\u003Ch2\u003E第四节 WebGL开启\u003C\u002Fh2\u003E\u003Cp\u003ELayaAir引擎默认采用Canvas模式渲染，如果想要启动WebGL模式，需要在初始化舞台的时候的进行设置，例如：\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E默认Canvas模式渲染的写法为\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-as\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003ELaya\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Einit\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E600\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E500\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EWebGL模式渲染的JavaScript写法为\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-as\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003ELaya\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Einit\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E600\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E500\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003ELaya\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EWebGL\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E开启WebGL模式后，在支持WebGL的环境下，会优先采用WebGL 3D模式渲染，在不支持WebGL的环境下，会自动切换为Canvas 2D渲染模式。\u003C\u002Fp\u003E\u003Cp\u003E启用WebGL模式的LayaAir引擎，在FPS性能方面可以媲美APP，也超出Canvas模式很多，但编译出的JS文件体积也会变大，所以开发者可以依据项目自身情况自行取舍WebGL模式是否开启。 \u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E写在最后\u003C\u002Fh2\u003E\u003Cp\u003E在本篇文章中仅对引擎部分进行了入门级指引，请大家保持对Layabox开发者中心的关注，我们更多教程会逐步的丰富起来，及时更新到开发者中心。感谢大家的信赖，在开发过程中如有任何问题，请及时通过问答社区反馈给我们，我们将尽最大的努力快速处理和解决。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003ELayaAir引擎的问答社区：\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\u002Flink.zhihu.com\u002F?target=http%3A\u002F\u002Fask.layabox.com\u002F\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttp:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\u003Eask.layabox.com\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003ELayaAir引擎开发者交流群\u003C\u002Fp\u003E\u003Cp\u003EQQ群号：\u003C\u002Fp\u003E\u003Cp\u003ELayabox开发者官方总群（综合交流）\u003C\u002Fp\u003E\u003Cp\u003EQQ群号：\u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T00:14:28+08:00&,&url&:&\u002Fp\u002F&,&title&:&入门教程:一篇学会LayaAir引擎开发HTML5(面向JS开发者)&,&summary&:&\u003Cb\u003E序\u003C\u002Fb\u003EHTML5是一种热门的跨平台开发技术，随着引擎技术的发展，如今LayaAir引擎的产品性能已达到原生APP的水准，甚至可以直接用于开发APP、HTML5、Flash的多端版本产品。认真学习完本篇教程，可以帮您打开全平台开发之门。LayaAir支持ActionScript3、TypeScript…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:1,&likesCount&:6},&next&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002F50\u002F5ef743f98dee45b16f93abc5e3774ddc_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&HTML5&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&HTML 5 游戏&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&&,&isFollowing&:false,&hash&:&f68ca49c79c6cf5a5f5e817ead28f7dd&,&uid&:069300,&isOrg&:false,&slug&:&layabox&,&isFollowed&:false,&description&:&&,&name&:&charley&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Flayabox&,&avatar&:{&id&:&v2-993dbda9bc8d03e5f4609d05&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&layabox&,&name&:&HTML5游戏引擎&},&content&:&\u003Cp\u003E　　日下午，YAHOO代表团首站Layabox总部，就HTML5游戏的海外发行、引擎合作、市场联合推广等方面，达成深度合作。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EYAHOO将用一年扶持CP，全力推动H5发展\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E　　当Layabox创始人谢成鸿问到YAHOO代表团此行目的时，YAHOO代表团表示，YAHOO未来将采用两条腿走路，赚钱赢利的重度精品与休闲的小游戏全面布局。而首站来访Layabox，则是看重Layabox在引擎技术上的实力，期望能就重度精品HTML5游戏领域达成全面深入的合作。\u003C\u002Fp\u003E\u003Cp\u003E　　在洽谈过程中，YAHOO代表团还表示，本次与Layabox的合作，是YAHOO布局未来的一部重棋，在未来一年内，以扶持CP、让利CP为目标，全力推动HTML5市场发展壮大。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002F5ef743f98dee45b16f93abc5e3774ddc_b.jpg\& data-rawwidth=\&900\& data-rawheight=\&518\& width=\&900\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002F5ef743f98dee45b16f93abc5e3774ddc_r.jpg\& class=\&origin_image zh-lightbox-thumb\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003ELayabox创始人谢成鸿 与 YAHOO代表团、异军网络合影\u003C\u002Fp\u003E\u003Cp\u003E　　YAHOO代表团本次来访北京，首站选择Layabox引擎后，还将与HTML5行业的其它优秀企业展开访问与合作洽谈。YAHOO的北京之行，将助力HTML5行业发展。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E关于Layabox引擎商\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E　　2011年开始研发大型HTML5引擎，经过数款大型HTML5游戏产品的沉淀后，于2015年正式公布推出，并免费开源，且成为2015年唯一力推大型HTML5游戏的引擎商，相继推出行业首款重度动作游戏《猎刃2》和行业首款重度精品MMORPG《醉西游H5》等大型游戏。\u003C\u002Fp\u003E\u003Cp\u003E　　Layabox深耕于大型HTML5游戏领域。旗下核心产品LayaAir引擎，支持Canvas\\WebGL模式自动切换；支持2D\\3D\\VR产品开发；支持使用AS3\\TS\\JS三种语言开发；一次开发可同时发布：手游APP、HTML5、Flash页游多端版本。\u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T13:36:36+08:00&,&url&:&\u002Fp\u002F&,&title&:&YAHOO代表团首站Layabox，联手引擎方深度布局H5&,&summary&:&日下午，YAHOO代表团首站Layabox总部，就HTML5游戏的海外发行、引擎合作、市场联合推广等方面，达成深度合作。\u003Cstrong\u003EYAHOO将用一年扶持CP，全力推动H5发展\u003C\u002Fstrong\u003E 当Layabox创始人谢成鸿问到YAHOO代表团此行目的时，YAHOO代表团表示，YAHOO未来将采用两条腿走…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:0,&likesCount&:2}},&annotationDetail&:null,&commentsCount&:0,&likesCount&:0,&FULLINFO&:true}},&User&:{&layabox&:{&isFollowed&:false,&name&:&charley&,&headline&:&&,&avatarUrl&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-993dbda9bc8d03e5f4609d05_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&layabox&,&bio&:&&,&hash&:&f68ca49c79c6cf5a5f5e817ead28f7dd&,&uid&:069300,&isOrg&:false,&description&:&&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Flayabox&,&avatar&:{&id&:&v2-993dbda9bc8d03e5f4609d05&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&growthSearch&:&s2&,&sEI&:&c&,&nwebQAGrowth&:&experiment&,&qawebRelatedReadingsContentControl&:&close&,&liveStore&:&ls_a2_b2_c1_f2&,&qawebThumbnailAbtest&:&new&,&nwebSearch&:&nweb_search_heifetz&,&rt&:&y&,&showVideoUploadAttention&:&true&,&isOffice&:&false&,&enableTtsPlay&:&post&,&editorVideomakerEntrance&:&e&,&newLiveFeedMediacard&:&new&,&newMobileAppHeader&:&true&,&androidPassThroughPush&:&all&,&np&:&1&,&hybridZhmoreVideo&:&yes&,&nwebGrowthPeople&:&default&,&nwebSearchSuggest&:&default&,&qrcodeLogin&:&qrcode&,&enableVoteDownReasonMenu&:&enable&,&isf8&:&1&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&feedHybridTopicRecomButtonIcon&:&yes&,&androidDbRecommendAction&:&open&,&zcmLighting&:&zcm&,&androidDbFeedHashTagStyle&:&button&,&appStoreRateDialog&:&close&,&default&:&None&,&isNewNotiPanel&:&no&,&wechatShareModal&:&wechat_share_modal_show&,&growthBanner&:&default&,&androidProfilePanel&:&panel_b&}},&columns&:{&next&:{},&layabox&:{&following&:false,&canManage&:false,&href&:&\u002Fapi\u002Fcolumns\u002Flayabox&,&name&:&HTML5游戏引擎&,&creator&:{&slug&:&layabox&},&url&:&\u002Flayabox&,&slug&:&layabox&,&avatar&:{&id&:&0dffa8d7adc502b38dde&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&}}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&switches&:{&couldSetPoster&:false},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{&baidu&:false,&yidianzixun&:false,&qqnews&:false},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false,&userAgent&:{&ua&:&Mozilla\u002F5.0 (compatible, MSIE 11, Windows NT 6.3; Trident\u002F7.0; rv:11.0) like Gecko&,&browser&:{&name&:&IE&,&version&:&11&,&major&:&11&},&engine&:{&version&:&7.0&,&name&:&Trident&},&os&:{&name&:&Windows&,&version&:&8.1&},&device&:{},&cpu&:{}}},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}}