扫一扫，访问微社区
后使用快捷导航没有帐号？
签到成功!您今天第{todayrank}个签到，签到排名竞争激烈，记得每天都来签到哦！已连续签到:{constant}天，累计签到:{days}天
当前位置： &
查看: 513|回复: 4
微信H5游戏来了：为什么你总是错过互联网的风口？
3191/300排名<font color="#FF昨日变化17主题帖子积分
偶尔光临, 积分 191, 距离下一级还需 109 积分
偶尔光临, 积分 191, 距离下一级还需 109 积分
蛮牛币1178
在线时间64 小时
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
才可以下载或查看，没有帐号？
一、互联网的下一个风口是什么？
山雨欲来风满楼，用这句话来形容2016年年底游戏行业的局势是最恰当不过了。
不过，这风不是山风，而是游戏行业的下一个风口。
11月17日，有媒体曝出消息，微信将在12月份上线H5游戏平台，并且首批推出数款H5游戏。
11月24日，腾讯相关负责人出面澄清，表示的确要做H5游戏的业务，将在QQ与微信两个平台进行推广，但仍处于论证阶段，不会在短期内大规模推广。
虽然腾讯否定了将在12月份推H5游戏的传言，但是这种说法显然带着很多公关的味道。坊间同样有传闻，支付宝也即将上架H5游戏，要争夺H5游戏的入口。
而且，不仅腾讯和阿里在暗中筹备，国外诸如Facebook、谷歌也纷纷把宝压在了H5游戏上。
行业内顿时议论纷纷：互联网的下一个风口来了吗？
二、微信为什么要做H5游戏？
根据行内一些商务的消息，其实早在数月前，腾讯就开始私下接触H5游戏研发团队，对一些H5游戏进行评测，应用宝和QQ空间也早就开放了H5游戏的窗口。不难判断，如果H5游戏测试的流水不可观的话，微信也不会把自己的流量放开。
如果你对H5游戏不明觉厉，那么下面这条消息你肯定有所耳闻：11月18日，张小龙在朋友圈发了一张照片，屏幕碎裂的手机上全是微信开发的小程序。
图一.jpg (24.22 KB, 下载次数: 1)
10:32 上传
H5游戏和小程序，吃瓜群众乍一听上去肯定觉得这是两个东西。根据张小龙自己的说法，小程序适合订票、找房、买家电这种低频、非刚需的场景，体现的是“用完即走”的理念，而H5游戏毕竟还是游戏，不可能绕开DAU和留存率，目的就是留住玩家、鼓励玩家去付费。
但是，如果我们换一个角度就会发现，H5游戏和小程序其实根本就是一件事。套用围棋里面的话来说，“金角银边草肚皮”，H5游戏和小程序就是微信提前在棋盘金角处布局的两颗未雨绸缪的好棋。
H5游戏：无需下载安装游戏包体，即点即玩。
小程序：不需要下载安装，扫一扫或搜一搜就可以打开应用。
他们的共同点显而易见：遵循HTML5标准，打破APP的禁锢，不需要下载安装，直接点击就可以进入。
媒体经常会讨论这样一个：打败微信的将会是一款什么样的产品？这个问题很难回答，但可以肯定的是，如果只是模仿微信，甚至都没有微信做得好，那是不可能打败它的。
互联网从PC端向移动端转移，在这个过程中，浏览器的地位一落千丈，而手机APP却在几英寸大的触摸屏上攻城略地，随之而来的就是APP Store、应用宝、360手机助手这种应用商店的崛起。
于是，在手游行业就有了“得渠道者得天下”的说法，APP Store上刷榜现象愈演愈烈，冲榜和维榜费用也是明码标价。
而H5游戏和小程序则是釜底抽薪，从根本上动摇了我们的固有观念：
手机内存有限，用户为什么要装那么多眼花缭乱的APP？每隔十天半个月就要给数十个应用更新版本？如果在网页上就可以玩游戏，玩家为什么还要下载安装动辄数百兆的游戏包体？开发者又为什么要受制于应用商店呢？
在用户抱怨微信越来越臃肿、占用时间越来越多的时候，向来具有预见性的微信出手了，一出手就击中用户的痛点：
臃肿的不是微信，而是你的手机，是时候卸载APP了。
张小龙没有做减法，反而做起了加法，H5游戏和小程序看似让微信变得更加庞大，实际上却是在为你的手机瘦身。
那么，你是卸载微信还是卸载多余的APP呢？
三、H5游戏的软肋
除了腾讯、阿里，国内越来越多的APP也加入到行列中来，生怕错过了这一波风口，甚至头一天对外声称不做H5游戏的业务，第二天就在自家APP悄悄上架H5游戏中心。
下图是我们统计的目前已经上架H5游戏的APP：
图二.jpg (55.55 KB, 下载次数: 5)
10:32 上传
H5游戏一方面通过游戏付费增加了APP流量变现的能力，同时还能把用户留在自己的生态圈，APP何乐而不为呢？试错的确需要付出代价，但因循守旧的话，下一个死的就是自己。
但是问题也随之而来，作为国民第一社交应用，微信已经开始做这件事了，中小APP又凭什么和月活8亿的微信竞争？不管是做H5游戏还是做小程序，微信凭借的都是背后巨大的流量，在这方面去较量无异于以卵击石。
事实上，微信也并非是无懈可击的，在H5游戏领域，仍然存在着一个被微信忽视的巨大的风口。
我们来看看2016年热门的几款H5游戏：
图三.jpg (96.81 KB, 下载次数: 2)
10:32 上传
从最初的《围住神经猫》到今年的《传奇世界》，都是裸跑的游戏，经过我们的市场调查，大部分CP用的也是Egret和-x引擎。这样的现状就导致H5游戏存在一个明显的天花板，游戏品质始终上不去，除非有经典IP和好创意，否则以目前2D游戏的卖相，很难让玩家买账。
爆料中微信下个月将推出的第一批H5游戏，在类型上也会优先选择休闲益智、模拟经营、策略和放置这几大类2D游戏，而在H5-3D方面则完全是空白。
难道手游从2D到3D、从轻度到重度的精品化的路在H5这里就走不通了？
四、H5-3D游戏才是真正的风口
看看下面这张图，注意，这并不是宣传图，而是编辑在试玩时随手截下来的图，看到这样的效果，你能相信这是H5游戏吗？
图四.jpg (100.27 KB, 下载次数: 6)
10:32 上传
这是用C2engine引擎开发的H5-3D游戏《真三国战记》，采用流式加载渲染技术，不仅做到了即点即玩，在游戏画面上也完全不逊于普通的3D手机端游。开放的视角，流畅的打击感，对玩家来说，这才是真正的H5游戏。
从技术的角度来说，浏览器界面并不是为了游戏而设计的，大部分H5-2D游戏都很难与手机和APP的界面适配，经常会点错退出游戏，而用C2engine引擎开发的H5-3D游戏，则完全可以和手机端游一样全屏运行。
另外，对H5游戏来说还有一大利好消息：美国当地时间11月17日，华为终于用Polar Code（极化码）方案打破高通垄断，成为5G控制信道eMBB场景编码方案。这意味着中国在5G时代终于掌握了话语权
4G的网络传输速率在100Mb/s，而5G能够达到10Gb/s，速度提高100倍。当你网速足够快的时候，你还会选择下载的方式来观看电影吗？进入5G时代之后，游戏资源的加载速度会呈指数级增长，玩H5-3D游戏也会变成一种全民普及的游戏方式。
微信出来的时候有人说：没有人用微信。
手游兴起的时候有人说：手游没有市场。
美国大选的时候有人说：希拉里稳赢。
H5游戏来了，同样有人说：做H5游戏没有前景。
为什么你总是错过互联网的风口？实际上，风口就在那儿，就看你敢不敢上去飞。
每日推荐：
72962/5000排名<font color="#FF昨日变化主题帖子积分
日久生情, 积分 2962, 距离下一级还需 2038 积分
日久生情, 积分 2962, 距离下一级还需 2038 积分
蛮牛币5392
在线时间776 小时
这引擎看起来不错！
[]: 冰糖葫芦 被钱袋砸中进医院，看病花了 2
每日推荐：
61141/1500排名<font color="#FF昨日变化1主题帖子积分
蛮牛粉丝, 积分 1141, 距离下一级还需 359 积分
蛮牛粉丝, 积分 1141, 距离下一级还需 359 积分
蛮牛币1766
在线时间353 小时
NICE ! Good article
[]: 一个袋子砸在了 一剑飙血 头上，一剑飙血 赚了 1
每日推荐：
3191/300排名<font color="#FF昨日变化17主题帖子积分
偶尔光临, 积分 191, 距离下一级还需 109 积分
偶尔光临, 积分 191, 距离下一级还需 109 积分
蛮牛币1178
在线时间64 小时
NICE ! Good article
!!!!!!YEAA
每日推荐：
19/50排名<font color="#FF昨日变化109主题帖子积分
注册看看, 积分 9, 距离下一级还需 41 积分
注册看看, 积分 9, 距离下一级还需 41 积分
在线时间2 小时
一个是因为微信用户量大，一个是H5游戏使用更方便。
每日推荐：
社区QQ达人
使用QQ帐号登录论坛的用户自由、创新、研究、探索
Linux/Windows Mono/DotNet [ Open Source .NET Development/ 使用开源工具进行DotNet软件开发]锐意进取，志存高远.成就梦想，只争朝夕.从你开始，创新世界.【That I exist is a perpetual supprise which is life. Focus on eCommerce】
　　好久没更新博客了，以前很多都不会，所以常常写博客总结，倒是现在有点点经验了就懒了。在过去的几个月里，在canvas游戏框架方面，撸过了CreateJS，玩得了Egret，又学过PIXI.js。在移动前端方面，尤其是小游戏开始有一点点小经验了。但只是小经验，为什么说是小经验？
　　首先，深度不足，虽然用得最熟最多的白鹭，可是习惯了JavaScript，对TypeScript的OOP编程掌握得还不够；其次，对Egret等游戏框架了解的广度还不够，还有相当部分用法没用到。虽然能够应付朋友圈里传播的大多数的H5小游戏，可是还有很大的进步空间。尤其是欠缺重度游戏以及性能方面的处理。所以，不论是一般的Web前端方面，还是H5游戏方面，我都要继续努力学习了。不足错漏之处，恳请大家多多指点。
什么是Egret？
　　Egret是一套HTML5游戏开发解决方案，产品包含Egret Engine，Egret Wing，EgretVS，Res Depot，Texture Merger，TS Conversion，Egret Feather，Egret Inspector，DragonBones，Lakeshore等。而核心产品是Egret Engine，是一个基于TypeScript语言开发的一个HTML5游戏引擎，其余的大多是开发和辅助工具。
　　关于这个引擎和工具方面的介绍，我就不多说了，以下是白鹭的下载地址，咋们直接从安装完成后讲起。
　　Egret官网：
准备阶段：
　　首先，安装完egret engine后在桌面打开这个logo，双击后你能看到以下引擎界面：
　　如果你已经下载最新版，那就直接使用最新版本就好，假如从别的地方拷到了不同版本的项目，那就必须打开这个界面再安装不同的引擎版本，以打开其他人不同版本的代码。
　　接下来点击工具按钮，从界面上我们可以看到很多工具，但是做H5小游戏常用的只有Egret Wing、Texture Merger等，部分人可能需要做重游或者native app的，可能需要其他的工具，但这里不作介绍。没用过哈哈哈~~
　　继续选择下载，由于我这里都已经下载安装好了，所以界面上显示已安装，这里比较简单就不详说了。
使用阶段：
　　在以上工具都准备后，在engine界面或者桌面图标点击打开Egret Wing，会看到以下画面：
　　Wing可以理解为专门使用TypeScript开发白鹭项目的IDE了，以后我们使用egret过程中，会一直跟这个界面打交道。
　　好，现在我们先创建一个项目，我先建一个游戏项目，置于其他界面有什么区别呢，可以自行新建试试。EUI是主要做交互界面的，空项目是没有配置好相关需要的代码以及功能模块的，例如做缓动效果的Tween和加载的RES等等，所以为了方便，我们一般直接新建游戏项目。
然后进入下一步：
　　在这里，你需要配置游戏界面的大小，视频模式以及旋转设置。尺寸直接是设计图宽高，而视口我们一般会选择showALL（显示全部内容，不变形但会在留白），
　　网上也有一部分人开发的时候用fixedWidth（适配宽度，高度不足时会隐藏底下部分，适用于只有一些动画在上方，且下方是无关重要的背景时）。
　　还有一些人（例如我有时候）会用到百分百满屏的exacFit，设计师弄一个适中的尺寸，然后按照这种模式铺满全屏，有少数很宽或很长的屏幕会有一点变形，但是不影响游戏体验与界面。但是不好的地方是PC或pad打开会变形。
选择完之后，我们点击完成。打开新建的项目目录：
　　src是TypeScript源码目录，bin-debug是调试环境编译出来的js，libs是文件包的引用目录，template主要是app用到的runtime；
　　resource是我们项目中的资源路径，一般我们把图片音频等素材放置asset目录下，json等配置文件放置config目录下，default.res.json是我们用于加载资源的json配置文件，一般不修改名字，后面会讲到怎么使用。
　　egretProperties是我们这个项目的一些配置记录信息，一般我们不需要动它。而index.html就是我们游戏的主界面文件。
　　打开index.html
　　我们可以看到游戏界面所需的js，都自动生成并引用好了。这一部分我们不需要也不能手动去修改。
　　但是你可以在style标签中修改背景色或者在div属性值中修改配置参数，如渲染的帧率（一般我们设成60，如果是计算量大的，我们再适当降低），在这里我们可以重新修改刚刚新建游戏时的适配模式、宽高、旋转等；
　　将data-show-fps和data-show-log设成true，我们就可以看到游戏运行的实时帧率了。
　　帧率可以检测游戏运行的流畅度（性能），渲染数量越多，同时计算量越大，性能就越差，掉帧就越多。所以帧率越高，则表示性能越好，流畅度高。
　　另外，在底部，我们还能看到一个egret.runEgret({})的运行方法，在这里，你可以修改egret的渲染模式，默认是"webgl"。但是如果你需要用到跨域图片资源或者有大量的图片和文字，你最好还是使用"canvas"模式，避免跨域报错和性能问题。
&　　明天更新第二篇，敬请期待。
阅读(...) 评论()
随笔 - 16083
评论 - 1373主题 : 如何处理h5游戏全屏的问题？
可可豆: * CB
威望: * 点
在线时间: (时)
注册时间: *
最后登录: *
发自: Web Page
来源于&&分类
如何处理h5游戏全屏的问题？&&&
我在cc.game.onStart中执行如下设置代码：&&&&cc.view.enableRetina(false);&&&&&&&&cc.view.adjustViewPort(true);&&&&//cc.view.enableAutoFullScreen(true);&&&&//这个在手机浏览器上什么都不会做，底层似乎有bug。&&&&&&&&cc.view.setDesignResolutionSize(, cc.ResolutionPolicy.SHOW_ALL);&& &&&&cc.view.resizeWithBrowserSize(true);&&&&if(!cc.sys.isNative)&&&&{&&&&&&&&var cb = function(event)&&&&&&&&{&&&&&&&&};&&&&&&&&cc.screen.autoFullScreen(document.getElementById(&gameCanvas&), cb);&&&&}在android上，大多数浏览器都可以点击后全屏，点击esc退出全屏。但是firefox和chrome浏览器全屏后，cocosstudio编辑的输入框点击后没有反应，没有弹出键盘。某些浏览器还有屏幕旋转后，显示比例异常的bug。在iOS上就没法全屏，除非用safari创建快捷方式打开游戏地址。有人有更好的解决方法没？江湖告急
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版layer弹出层中H5播放器全屏出错的解决方法
作者：imwtr
字体：[ ] 类型：转载 时间：
本文主要介绍了layer弹出层中H5播放器全屏出错解决&属性poster底图占满video的方法，具有很好的参考价值，下面跟着小编一起来看下吧
在layer弹窗组件中
如果使用了flash播放器，全屏是正常的
但若使用了HTML5的播放器，全屏失效
&!DOCTYPE html&
&meta charset="utf-8"&
&title&&/title&
&script src="/js/jquery/1.9.1/jquery-1.9.1.min.js"&&/script&
&script src="layer/layer.js"&&/script&
&h1&我是字&/h1&
&div id="box"&
&video id="video" controls preload="auto" width="400px" height="300px"&
&source src="http://movie./flv/other/1_0.mp4" type="video/mp4"&
layer.open({
title: false,
shadeClose: true,
area: ['400px', '350px'],
content: $('#box'),
success: function(layero){
可以看到全屏不正常了
通过调试发现是这个class的处理影响了全屏的展示
所以，目前的解决办法是在layer层创建之后，移除这个class即可（注意在success回调中置于下一轮事件循环）
layer.open({
title: false,
shadeClose: true,
area: ['400px', '350px'],
content: $('#box'),
success: function(layero){
console.log(layero)
// hack处理layer层中video播放器全屏样式错乱问题
setTimeout(function() {
// $(layero).removeClass('layer-anim');
video标签的poster属性指代视频未播放前放置的一张图片
如果video容器宽高小于等于poster图的宽高，则图片能充满容器，反之容器左右就会预留黑色栏
除了手动更换一张大图之外，可以结合CSS来控制，实现铺满
&div id="box"&
&video id="video" controls preload="auto" width="700" height="300" poster="../poster.png" &
&source src="http://movie./flv/other/1_0.mp4" type="video/mp4"&
现在图片宽度比容器小，没铺满，参考这里的讨论 可以用CSS让其撑开（这里相当于放大了，不想放大需自行更换大图）
poster里放一个透明图片（这里使用了一个1px*1px的base64格式透明图片），再用css定义video的background并将其覆盖住
&div id="box"&
&video id="video" controls preload="auto" width="700" height="300" poster="data:image/base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" &
&source src="http://movie./flv/other/1_0.mp4" type="video/mp4"&
background: transparent url('../poster.png') no-repeat 0 0;
-webkit-background-size:
-moz-background-size:
-o-background-size:
background-size:
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具