2015年的众多HTML5（以下简称H5）游戏当中，有个别游戏以超高的月流水向大众展示了其在未来游戏行业中不可限量的发展趋势。2015年4月，《愚公移山》以月流水超100万的成绩拔得头筹引起业界关注后，《传奇世界》H5上线3个月月流水就破了1500万。而今年2月14日情人节刷爆朋友圈的《晒结婚证》H5更是验证了移动网页游戏是如何利用碎片化的时间赢得市场的。

尽管如此，H5也并非像市场吹嘘的那样乐观。DataEye《2015年中国移动游戏行业年度报告》显示，截止到2015年底，H5游戏数量超过3000款，尽管发展态势乐观毋庸置疑，但是2015年的H5游戏市场未如年初预言那般迎来所谓的爆发。也就是说H5的现状就是千军万马过独木桥，大部分还是未能踏上桥就被出局。

因此有业内人士就表示，不管是类型和玩法的丰富性，还是游戏内容的体验，H5游戏都存在很大不足，因此手机用户的真实导入量长期处于很低的水平。那么面对美丽泡沫般的H5游戏，在除去好的产品技术外，更应该在渠道上下功夫了。

浏览器

以UC浏览器、QQ浏览器、手机百度为代表的浏览器渠道，是目前大部分H5游戏的主要流量来源，在所有流量来源中占比50%。

因此H5游戏厂商就需要根据浏览器的属性去调整，例如在《传奇世界》H5渠道推广中，浏览器的ARPU值高，大R用户多。而玩吧要做小付费，游戏就针对它开了2元、6元的小付费，ARPU值不高，但付费率高，用户短平快。

微信朋友圈KOL

2014-2015年，多数耳熟能详H5游戏均出自朋友圈传播，如《围住神经猫》、《打企鹅》、《找房祖名》、《貂蝉有妖气》、《时尚都市》、《来消星星的你》等爆款，因此，朋友圈被誉为最早的H5推广的温床。

虽然它被公认为最适合在微信平台上传播，但是在之前《神经猫》取得大火之后，基于对产品体验的考虑，微信朋友圈对于H5游戏的分享进行了流量管制，微信平台过了10万、20万就可能被封掉了。而随后再也没有出现过像《神经猫》那样大范围传播的H5游戏，直到《晒结婚证》H5的出现火了一整天也难逃被封的厄运。

尽管如此，朋友圈依然是适用于H5推广的一个渠道，因此不能因为限制就畏手畏脚，找到一个好的契合点，与用户行为习惯都相吻合，制造出更多的KOL才能将品牌打入用户手中，反过来说，一旦火爆被封，也可以在中转、跳转做一些调整，然后在一个时间节点上取消引导关注。

APP

去年包括滴滴、万能钥匙Wifi在内的多个超级APP开始尝试HTML5游戏的推广，不过在实际操作中的转换和留存率表现较为一般。

然而尽管目前长尾的流量型APP为HTML5游戏带来的流量并不高，但却是最具发展潜力的渠道类型。比如5秒轻游戏推出的APP游戏化运营解决方案，就快速为大量APP提供了“轻游戏+轻社交”的HTML5内容入口。

因此未来HTML5游戏渠道将出现定制化的游戏生态。以滴滴为例，开发商可通过针对打车优惠卷和周边礼品互动等内容进行相关推荐，从而引导和扩大用户需求。

传统游戏平台

像是5秒轻游戏、4399、手机小游戏、中国电信爱游戏、火舞游戏、1758等传统线上分发渠道，相较于在原生手游市场的呼风唤雨，线上分发平台目前对HTML5游戏的分发并不尽如人意，只占整个市场的20%。因此多数H5不选用这样的推广渠道与手游端游去PK。但如果有强IP做支撑，这样的平台再合适不过了。

媒体及公众号推广

H5游戏在新闻媒体上发消息需要的就是耐心，专业的媒体渠道必不可少，这是游戏品牌建设的基本保障，比如一个H5在媒体投放广告，一开始可能只有千个新增用户，收入不高，但媒体投放持续几个月后达到曝光，就会收入就会翻几倍，这时需要考虑的因素就很多了，比如广告素材，活动要跟上以及细致经营等。

公号的推广就是软文的形式，大V的领导作用也是有目共睹，虽然近些年对于大V粉丝作假的说法时有发生，但是即使只有千分之一的真粉，他们也能一石激起千层浪。

目前H5游戏分发渠道有上百家，这里只是简单介绍了用处最多的五种。而未来渠道整合一定是H5游戏线上分发过程中最重要的环节。因此，从多年来验证过的互联网三种盈利模式看，H5游戏的推广一是以上述广告营销渠道为主，二是电商类的一些合作也可能会在今年快速推进。

微信ID：yxhygc1

长按二维码关注我

荐：使用NSDT 编辑器快速搭建3D应用场景

建 模 和 3D 地形

大多数 3D 对象是 使用建模工具创建，这是有充分理由的。创建复杂对象 （如飞机甚至建筑物）很难在代码中完成。建模工具 几乎总是有意义的，但也有例外！其中之一可能是案例 就像飞行拱廊岛连绵起伏的丘陵一样。我们最终使用了 我们发现更简单，甚至可能更直观的技术：一个 高度图。

高度图是一种 使用常规二维图像来描述 像岛屿或其他地形一样的表面。这是一种非常常见的使用方式 高程数据，不仅在游戏中，而且在地理信息系统中 制图师和地质学家使用的 （GIS）。

帮助您获得想法 有关其工作原理，请查看此交互式演示中的高度图。尝试绘图 ，然后检出生成的地形。

高度图背后的概念 很简单。在上图所示的图像中，纯黑色是 “地板”和纯白色是最高峰。介于两者之间的灰度颜色 表示相应的高程。这为我们提供了 256 个海拔高度，这 是我们游戏的大量细节。实际应用程序可能会使用完整的 色谱可存储更多层次的细节（2564 = 4，294，967，296 级 详细信息（如果包含 Alpha 通道）。

高度图有几个 与传统多边形网格相比的优势：

一、高度图很多 更紧凑。仅存储最重要的数据（高程）。它 需要以编程方式转换为 3D 对象，但这是 经典交易：您现在节省空间，稍后通过计算付款。通过存储 数据即图像，您将获得另一个空间优势：您可以利用标准 图像压缩技术并使数据变小（相比之下）！

其次，高度图是一个 生成、可视化和编辑地形的便捷方式。非常直观 当你看到一个。感觉有点像看地图。这被证明是 对飞行街机特别有用。我们设计和编辑了我们的岛屿 在 Photoshop 中！这使得根据需要进行小调整变得非常简单。 例如，当我们想确保跑道完全平坦时， 我们只是确保以单一颜色在该区域上绘画。

您可以看到高度图 下面的飞行拱廊。看看你是否能发现我们为 跑道和村庄。

飞行街机岛的高度图。它是在Photoshop中创建的，它基于着名的太平洋岛链中的“大岛”。有什么猜测吗？

在解码高度贴图后映射到生成的 3D 网格上的纹理。更多内容见下文。

解码高度图

我们用Babylon.js建造了飞行拱廊，Babylon给了我们一个漂亮的 从高度图到 3D 的简单路径。Babylon提供了一个 API 来生成 来自高度图图像的网格几何体：

ar ground = BABYLON.Mesh.CreateGroundFromHeightMap(

'your-mesh-name',

'/path/to/heightmap.png',

100, // width of the ground mesh (x axis)
100, // depth of the ground mesh (z axis)

40, // number of subdivisions

0, // min height

50, // max height

scene,

false, // updateable?

null // callback when mesh is ready
);`

细节量是 由该细分的财产决定。需要注意的是， 参数是指高度图两侧的细分数量 图像，而不是单元格总数。所以稍微增加这个数字可以 对网格中的顶点总数有很大影响。

• 20 个细分 = 400 细胞
• 50 个细分 = 2，500 细胞
• 100 个细分 = 10，000 细胞
• 500 个细分 = 250，000 细胞
• 1，000 个细分 = 1，000，000 细胞

在下一节中，我们将 了解如何为地面设置纹理，但在尝试使用高度贴图时 创建时，查看线框很有用。这是应用简单代码 线框纹理，因此很容易看到高度图数据是如何转换为的 网格的顶点：

// simple wireframe material

var material = new BABYLON.StandardMaterial('ground-material', scene);

material.wireframe = true;

ground.material = material;`

创建纹理细节

一旦我们有一个模型，映射一个 质地相对简单。对于飞行街机，我们简单地创建了一个 非常大的图像，与我们的高度图中的岛屿相匹配。图像得到 延伸到地形的轮廓上，所以纹理和高度图 保持相关性。这真的很容易想象，再一次，所有 制作工作是在Photoshop中完成的。

原始纹理图像是 创建于 4096x4096。那可是挺大的！（我们最终将尺寸减小了 为了保持下载合理，级别到2048x2048，但所有 使用全尺寸图像进行开发。这是来自 原始纹理。

原始岛屿纹理的全像素示例。整个城镇只有大约300平方像素。

这些矩形表示 岛上城镇的建筑。我们很快注意到 我们可以在地形和 其他 3D 模型。即使使用我们巨大的岛屿纹理，区别在于 令人分心的明显！

为了解决这个问题，我们“混合” 以随机噪声的形式进入地形纹理的附加细节。您可以 请参阅下面的之前和之后。注意额外的噪点如何增强外观 地形细节。

我们创建了一个自定义着色器 添加噪音。着色器为您提供了对 WebGL 3D 场景的渲染，这是着色器如何 有用。

WebGL着色器由两个组成 主要部分：顶点和片段着色器。顶点的主要目标 着色器是将顶点映射到渲染帧中的某个位置。片段（或 像素）着色器控制像素的结果颜色。

着色器是用 称为GLSL（图形库着色器语言）的高级语言，它 类似于C。此代码在 GPU 上执行。深入了解如何 着色器工作，请参阅此处 有关如何为 Babylon.js 创建自己的自定义着色器的教程，或参阅此图形着色器编码初学者指南。

顶点着色器

我们不会改变我们的 纹理映射到地面网格体，因此我们的顶点着色器非常简单。 它只是计算标准映射并分配目标位置。

precision mediump float;
// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
// Uniforms
uniform mat4 worldViewProjection;
// Varying
varying vec4 vPosition;
varying vec3 vNormal;
varying vec2 vUV;
void main() {
vec4 p = vec4( position, 1.0 );
vPosition = p;
vNormal = normal;
vUV = uv;
gl_Position = worldViewProjection * p;
}

碎片着色器

我们的片段着色器有点 更复杂。它结合了两个不同的图像：基础图像和混合图像。 基础图像映射到整个地面网格。在飞行街机中，这个 是岛屿的彩色图像。混合图像是使用的小噪点图像 在近距离为地面提供一些纹理和细节。着色器 组合每个图像中的值以创建跨 岛。

飞行的最后一课 街机发生在有雾的日子，所以我们的像素着色器的另一个任务是 调整颜色以模拟雾。调整基于顶点的距离 来自相机，远处像素被“遮挡”得更厉害 在雾中。您将在函数中看到此距离计算 在主着色器代码上方。calcFogFactor

// #ifdef GL_ES
precision highp float;
// #endif
uniform mat4 worldView;
varying vec4 vPosition;
varying vec3 vNormal;
varying vec2 vUV;
// Refs
uniform sampler2D baseSampler;
uniform sampler2D blendSampler;
uniform float blendScaleU;
uniform float blendScaleV;
// #define FOGMODE_NONE 0.
// #define FOGMODE_EXP 1.
// #define FOGMODE_EXP2 2.
// #define FOGMODE_LINEAR 3.
// #define E 2.71828
uniform vec4 vFogInfos;
uniform vec3 vFogColor;
float calcFogFactor() {
// gets distance from camera to vertex
float fogDistance = gl_FragCoord.z / gl_FragCoord.w;
float fogCoeff = 1.0;
float fogStart = vFogInfos.y;
float fogEnd = vFogInfos.z;
float fogDensity = vFogInfos.w;
if (FOGMODE_LINEAR == vFogInfos.x) {
fogCoeff = (fogEnd - fogDistance) / (fogEnd - fogStart);
}
else if (FOGMODE_EXP == vFogInfos.x) {
fogCoeff = 1.0 / pow(E, fogDistance * fogDensity);
}
else if (FOGMODE_EXP2 == vFogInfos.x) {
fogCoeff = 1.0 / pow(E, fogDistance * fogDistance * fogDensity * fogDensity);
}
return clamp(fogCoeff, 0.0, 1.0);
}
void main(void) {
vec4 baseColor = texture2D(baseSampler, vUV);
vec2 blendUV = vec2(vUV.x * blendScaleU, vUV.y * blendScaleV);
vec4 blendColor = texture2D(blendSampler, blendUV);
// multiply type blending mode
vec4 color = baseColor * blendColor;
// factor in fog color
float fog = calcFogFactor();
color.rgb = fog * color.rgb + (1.0 - fog) * vFogColor;
gl_FragColor = color;
}

我们定制的最后一件作品 Blend shader 是 Babylon 使用的 JavaScript 代码。主要目的 此代码用于准备传递给顶点和像素着色器的参数。

function BlendMaterial(name, scene, options) {
this.name = name;
this.id = name;
this.options = options;
this.blendScaleU = options.blendScaleU || 1;
this.blendScaleV = options.blendScaleV || 1;
this._scene = scene;
scene.materials.push(this);
var assets = options.assetManager;
var textureTask = assets.addTextureTask('blend-material-base-task', options.baseImage);
textureTask.onSuccess = _.bind(function(task) {

    this.baseTexture = task.texture;
    this.baseTexture.uScale = 1;
    this.baseTexture.vScale = 1;
    if (options.baseHasAlpha) {
        this.baseTexture.hasAlpha = true;
    }
}, this);
textureTask = assets.addTextureTask('blend-material-blend-task', options.blendImage);
textureTask.onSuccess = _.bind(function(task) {
    this.blendTexture = task.texture;
    this.blendTexture.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
    this.blendTexture.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
}, this);

}
BlendMaterial.prototype = Object.create(BABYLON.Material.prototype);
BlendMaterial.prototype.needAlphaBlending = function () {
return (this.options.baseHasAlpha === true);
};
BlendMaterial.prototype.needAlphaTesting = function () {
return false;
};
BlendMaterial.prototype.isReady = function (mesh) {
var engine = this._scene.getEngine();
// make sure textures are ready
if (!this.baseTexture || !this.blendTexture) {
return false;
}
if (!this._effect) {
this._effect = engine.createEffect(
// shader name
"blend",
// attributes describing topology of vertices
[ "position", "normal", "uv" ],
// uniforms (external variables) defined by the shaders
[ "worldViewProjection", "world", "blendScaleU", "blendScaleV", "vFogInfos", "vFogColor" ],
// samplers (objects used to read textures)
[ "baseSampler", "blendSampler" ],
// optional define string
"");
}
if (!this._effect.isReady()) {
return false;
}
return true;
};
BlendMaterial.prototype.bind = function (world, mesh) {
var scene = this._scene;
this._effect.setFloat4("vFogInfos", scene.fogMode, scene.fogStart, scene.fogEnd, scene.fogDensity);
this._effect.setColor3("vFogColor", scene.fogColor);
this._effect.setMatrix("world", world);
this._effect.setMatrix("worldViewProjection", world.multiply(scene.getTransformMatrix()));
// Textures
this._effect.setTexture("baseSampler", this.baseTexture);
this._effect.setTexture("blendSampler", this.blendTexture);
this._effect.setFloat("blendScaleU", this.blendScaleU);
this._effect.setFloat("blendScaleV", this.blendScaleV);
};
BlendMaterial.prototype.dispose = function () {
if (this.baseTexture) {
this.baseTexture.dispose();
}
if (this.blendTexture) {
this.blendTexture.dispose();
}
this.baseDispose();
};

Babylon.js使它变得容易 创建基于着色器的自定义材质。我们的混合材料相对简单， 但它确实对岛屿的外观产生了很大的影响，当 飞机低空飞到地面。着色器将 GPU 的强大功能带到 浏览器，扩展可应用于 3D 的创意效果类型 场景。在我们的案例中，这是画龙点名！

原文链接：使用 WebGL 为 HTML5 游戏创建逼真的地形

为一名HTML5游戏开发者，

你还在为如何绞尽脑汁也玩不转命令行而愤恨吗?

你还在为无法及时预览自己所编辑的UI效果而苦恼吗?

你还在为翻来覆去进行繁琐的调试流程而纠结吗?

你还在为同时在几个工具之间切换编辑而混乱吗?

此时,你是不是特别渴望一款全功能集成开发工具呢?

白鹭Egret Wing2.0恰逢其时地出现，为开发者带来移动游戏开发一站式解决方案。

Egret Wing2.0是什么?

Egret Wing2.0是一款针对Egret项目的集成开发环境，通过可视化方式创建、编辑和管理项目中所有游戏用户界面，并同时进行TS代码编写和断点调试。

(经过全新的升级，Egret Wing2.0给开发者带来更加高效便捷的开发环境)

为什么选择Egret Wing2.0?

1. 工具体积精简，用户体验更流畅。

内存占用小，代码提示快：由于Egret Wing 2.0是为Egret项目深度定制并全部自主研发，省去其他不必要功能，故内存占用小，代码提示速度也高于基于Eclipse等大型工具定制的同类型产品。

加载速度快，体验流畅：由于针对性强，不依赖第三方大型开源工具，没有不必要的额外启动选项，所以加载速度更快，增强了用户体验流畅性。

2. 即时错误提示

在编译之前就可即时发现代码中的语法语义错误，并实时反馈错误代码位置和原因，以便开发者能够快速修改。

3. 全功能代码编辑器

作为一款全功能的集成开发环境，向开发者提供智能代码提示。

代码提示精准：即时提示可能要输入的类、方法或变量等，更容易看到选择部分的注释内容，提高代码编写速度和准确率。

悬浮注释提示：通过鼠标悬浮的方式，快速查看指定内容处注释。

智能代码定位：相同类型的类、对象、属性的高亮标记，便于开发者快速定位其在程序文件中的位置。

4. 强大的debug能力

Egret Wing2.0面向开发者提供了强大的无缝调试能力。

一键调试：一键启动调试功能，方便快捷地在工具内调试Egret游戏和应用。

TypeScript脚本断点调试：无需任何配置直接在TS源代码上设置断点调试TS代码。

5.可视化编辑UI

Egret Wing 提供的全局可视化UI编辑界面。

全程可视化编辑：通过可视化的方式直接拖拽和编辑UI皮肤属性，全程傻瓜式操作，免去写代码的烦恼。

可视化编辑UI动画效果：新增动画面板，以时间轴方式可视化操作UI组件，制作出不同动画效果，并可在预览模式中直接查看效果。

Egret Wing2.0的使用效果如何?

Egret Wing2.0终于让我告别命令行时代，自动编译项目，直接在浏览器中刷新就可以查看效果。同时，皮肤制作和代码编辑都在同一个工具中进行，不需要在几个工具之间来回切换。此外，直接在TS中进行代码调试，大大缩减到浏览器中调试的时间成本。

——某白鹭游戏开发者

如何获取Egret Wing2.0?

6月8日以后，欢迎广大开发者直接通过白鹭引擎面板更新到 Egret Wing2.0版，即可体验各种酷爽功能。

如对Egret Wing2.0有任何疑问?

如针对Egret Wing2.0版本有任何疑问，欢迎大家扫描下面二维码关注微信服务号“白鹭引擎开发者服务平台”，白鹭技术服务团队将为你答疑解惑。