2017TFC跳跳糖余悠 HTML5游戏营销案例新

2017TFC跳跳糖余悠 HTML5游戏营销案例新技术展示

月25日消息，为期两天的2017第十四届TFC全球泛游戏大会暨智能娱乐展已于24在北京国际会议中心圆满落幕。在23日下午举行的2017TFC第五届HTML5游戏高峰论坛上，跳跳糖CEO余悠带来了主题为《HTML5游戏营销案例及新技术展示》的精彩演讲。他认为，品牌能够借助HTML5做营销，通过HTML5游戏的形式，做品牌的传播，可以达到不错的效果。他随后带来了杜蕾斯、京东的案例，HTML5游戏的很大一个特点便是与用户的互动，精美的游戏画质、强效的互动体验功能，能为游戏本身和广告主加分，HTML5游戏也成为了品牌营销的一种重要手段。但有时候刻意为之的怪异画风，也能吸引不少用户的关注，只是传播周期会非常短，可能两到三天热度就会冷却下来。而结合实时热点来做的游戏，能够促进用户的自主传播。在新技术方面，跳跳糖目前在尝试将AR与HTML5游戏相结合，利用HTML5的3D能力搭建技术框架，做AR技术嫁接的浏览器，让用户打开3D的HTML5游戏。

以下为精彩演讲实录：

大家下午好!今天我主要给大家分享几个方面的内容。首先给大家介绍一下大型的品牌主要借助H5游戏做营销的，包括杜蕾斯和京东平台的案例，第二给大家介绍一下我们自己做的一款小游戏，最后给大家介绍一下我们分析行业的新趋势和新技术。

下面是我们给京东做的一款游戏，这是京东去年“618”节时做的H5游戏的营销，大家知道京东每年“618”是很大的节日做H5促销的游戏。这是H5游戏的画面，可以看到画面很精美，之前嘉宾有说到H5游戏画质的问题，我觉得游戏画质最主要取决于设计。

这是我们给杜蕾斯去年七夕节做的抓喜鹊的活动，这个有点类似于AR的游戏，但是在H5游戏做不了AR，所以我们利用的地图。这个游戏已经下线的，但是还是可以体验，大家可以扫描二维码进行体验。

这也是京东的游戏，是在京东圣诞节时给京东做的一个ABL(音)的游戏，在地图里面寻找圣诞老人和奖励。

这是今年情人节给杜蕾斯做的一个H5的游戏，这个游戏跟之前的游戏有点类似，抓的是丘比特到屈臣氏兑换一些产品。

看其他的游戏，这些游戏主要是为了做营销，并不是像之前嘉宾介绍的大型的游戏类型。这是腾讯红包做的一个，这是一些品牌营销活动，并不是很纯粹的游戏。我们去年制造了两款刷屏级的小游戏，大家看画风不怎么样，是我们注意做的一种画风，是为了营销的策略。这款游戏叫你咋不上天，在猴年做的，总PV达到4000万。这款游戏还在线上，大家可以去扫描通过二维码去体验，这款比较虐心。像这种游戏传播周期非常短，可能两三天时间热度就冷却下来，与之前嘉宾介绍的持久战的游戏不太雷同。

这款游戏叫小船说翻就翻，当时有一个漫画叫南东尼把友谊的小船画成了一个漫画，当时我们捕捉到这个热点去做的游戏，三天达到了3000万。

刚才我说到的是自传播的数据，都是没有请营销大号做推广。

这是刚才介绍的第一款游戏你咋不上天的原型是我们的程序员在2014年做的一个APP叫小飞龙，这个在IBM平台也上了榜，这种本身就有很好的传播机制，然后借助H5游戏再让它火一次。

接下来看一下游戏的数量曲线图，两个游戏总人数达到了1.2亿万次，同时在线5000人，同时得到一些微博大咖转发。这是游戏自传播的曲线，这跟普通的花钱推广曲线不一样，它的曲线很平滑。

这个里面有一些其他的游戏我就不详细介绍了，这是前面嘉宾所介绍到的大型H5游戏。接下来我介绍一些新技术方面的，我们很想把AR技术跟H5游戏做结合，这是我做的一个尝试，是个AR名片。这从AR角度来说是很普通的AR，但是外部技术要实现3D的渲染，我们很好的把AR和H5游戏结合。这是我们做的3D案例，这些3D案例都可以很好的跟AR结合。

来介绍一下AR跟H5游戏如何结合的?常规开发AR需要在Unity里面去建模，建一个APP，这样的开发周期都是非常长，我们把利用H5的3D能力把3D部分拆出来做到H5里面去，我们只实现了AR的一个摄像头部分功能，实现了H5跟蓝牙的结合，这是我们的技术架构，首先做AR的浏览器，这个跟普通的浏览器没有什么区别，只是把AR的技术嫁接在浏览器框里面，最后打开的还是3D的H5游戏。

整个的开发周期很短，你需要H5游戏的开发就可以做出个AR。

这是一个H5+AR的展示，这是国外的一个案例，我们很喜欢，戴上眼镜去体验太空船的3D技术。现在3D技术已经很普及了，我们非常好的有机会把它用在H5游戏当中去。

今天的时间有限，我介绍这么多案例，如果有时间大家可以加我的微信我们去讨论案例，谢谢大家!

代浏览器都内置了专用动画技术，Martin G?rner为您展现四种最棒的实例。

现代移动操作系统将用户接口动画化，并已达到了电脑端交互的标准——精选流畅的动画，体现出沉浸效果以及支持直观的交互。我们都想当然的认为，可以设置一个列表，使之带有运动特性，用手指轻轻一推，它就如同有重量和惯性一样运动起来，直到遇到边缘再反弹回来一点。但是，在网络上，我们还达不到这样的效果。

接受事实吧，现有网上的动画经常被视作UI灾难，还在使用二十年前陈旧的<blink>标签技术。加入Flash有点帮助，不过它缺乏HTML DOM集成，都变成了不美观的800×600分辨率，并且JavaScript DOM操作还有其标志性的5帧/秒（fps）动画率——真是绝望啊！

改变

2013年，现代浏览器内置了专用动画技术，达到60 fps。是时候去忘掉过去，开始构建美妙的UI动画体验了。我将展示四个动画技术，帮助你决定，哪一个更适合你的项目。

CSS3动画——3D

让我们从最简单的声明式技术开始：CSS3。这里不需要JavaScript，存CSS，加上一点现代手段。

CSS通过两种基本属性来声明动画：过渡和动画。过渡属性通知浏览器计算两种状态（由各自CSS定义）间的中间帧。动画通过改变元素CSS触发。比如，当你以编程方式改变它的层，或启动一个:hover CSS。

当缩略图层从开始转变到结束，图像则从一处平滑的移动到另一处，典型的表现为JavaScript DOM动作的结果。

img { -webkit-transition: 1s; }.begin { left: 0px; }.end { left: 500px; }

动画属性最常用于持续运行的动画特效，它还允许自定义中间步骤的动画。

创建一个旋转的图像：

img {-webkit-animation: myAnim 3s infinite; }@-webkit-keyframes myAnim{ from {-webkit-transform: rotate(0deg) } 50% {/* possible intermediate positions at any % */} to {-webkit-transform: rotate(360deg) }}

利用大量CSS属性制作动画具有无限的创造性，你可以根据意图在边框宽度内任意创建动画。不过，大多数对动画有用的属性都是几何变换和不透明的。CSS3通过易操作的转换属性提供了全系列二维几何变换：平移、旋转、缩放和歪斜。

用旋转、缩放和歪斜创建2D转换：

webkit-transform：旋转30度
webkit-transform：缩小50%
webkit-transform：歪斜-20度，再20度

接下来变得有趣了。如果你觉得在CSS中添加3D效果，技术上是为了粗体和斜体的设计，这很愚蠢，请接着阅读。通过扩展几何转换到三维图像将是一个很自然的方式，相同变换属性还可以做平移X，Y，Z轴以及旋转X，Y，Z轴。

3D旋转图像：

webkit-transform：Y轴旋转45度

再加上点抛出动画效果，看上去就像是一个旋转的三维立方体。

如果确实这般容易的话，就不会有任何趣味性了。设计师留了一点悬念，你可以试一下，只对一个图像进行旋转，浏览器默认渲染出来的效果是不带透视性的：

webkit-transform：Y轴旋转45度

可以添加上透明属性，默认是无穷大极限值也是不带有一点透明效果的。就如同靠近镜头的对象与很远距离外的对象看上去大小一样。

为了确保图像看上去更真实，你还需要指定一个镜头与屏幕之间距离的值。加上-webkitperspective: 1000px就可以了。

一点数学问题：什么是透视性？

要在一块平面屏幕上呈现一个3D对象，首先画出一条线连接眼镜或相机与3D物理上的点。这条线与屏幕的交集就是相应像素所在的位置。为了找到像素在屏幕上的坐标，利用泰勒斯定理，你需要空间中点的3D坐标和相机与屏幕之间的距离（f在光学中也被称为焦距）。这就是视角属性提供的距离。如果这个距离是无限远的，你可以看到所有射线（眼球到3D点线）是水平紧密状的，而且很远很远的对象在屏幕上的大小一样。

现在我们有设置一个3D立方体的所有基础了，利用六个图像以及CSS 3D转换，接下来就可以实现旋转了。

旋转

这一步很简单：我们把一个三维旋转封装到一个div，将会产生如下效果：

浏览器执行你让它所做的步骤：在div渲染一个三维立方体，然后像一张平面图片般在自身运用3D旋转。这是默认效果，虽然不是你想要的。你要告诉浏览器运用嵌套div来构成3D转换，-webkit-transform-style: preserve-3d属性。通过这个，我们就能得到想要的旋转立方体了。

准确获取

很容易在空间失去定位。我的建议是采用一个div，命名为SCENE。这就是透明属性存放的位置。在内部，放置一个命名为OBJECT的div，它应当拥有transform-style: preserve-3d属性，并且该div就是你应用转换移动整个对象的地方。最后，在该div内部，使用3D转换设置你想要的正面图像，创建所需对象。在我们的例子中，立方体的六个面：

.SCENE { -webkit-perspective: 1000px; }.OBJECT{ -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(20deg rotateY(120deg) rotateZ(50deg); /* replace this with an animation property if you want movement */}.FACE1 { -webkit-transform:translateX(150px)rotateY(90deg);}...

关于3D CSS转换很棒的一点是CSS动画和过渡的完美结合。我们在这留了一个练习，让旋转立方体运动起来，当鼠标光标悬停其上时，立方体自动打开来。操作方法是：把立方体的面移动到与中心一定距离的地方。第二组CSS属性有一个 :hover选择器，将立方体的面放置在更远的距离。通过运用第一种转换属性，你将看到立方体从中心盘旋打开，同时还保持旋转（演示）。

可缩放的矢量图像（SVG）

HTML与CSS都是强大的动画技术，但缺乏绘图基元。SVG能够弥补这点，并拥有其独特的动画标签。SVG动画部分被特定称为同步多媒体集成语言（SMIL）。

首先，SVG是用于矢量基元的，比如矩形、圆形和贝塞尔曲线：

同样可用于：

其中一个基元，<path>标签，是SVG中最好用的。它允许你使用直线、弧和贝塞尔曲线定义任意路径。路径定义看上去想一个字母，如同Inkscape矢量图形软件生成的。对于SVG动画，你应该理解这一点。

一个二次和三次贝塞尔曲线的例子：

语法：

M x,y ? ? 新的起点 (标记)

L x,y ? ? ?到哪里的直线

Q cx, cy, x, y ?二次贝塞尔曲线到 (x,y)和一个控制点

C cx,cy, dx,dy, x,y 三次贝塞尔曲线到(x, y)和两个控制点

A ? ? ? 椭圆弧

z ? ? ? 字符串最后，用于结束路径

让我们把这些矢量变得更生动化。你可以查看演示，一个家伙踏着滑板翱翔于白云间。

冲浪板上下摆动，小人的嘴巴在大和更大的笑容间交替变化，眼睛滚动，瞳孔扩张。这是SVG动画四种可能的类型。

最简单的一种SVG动画运用<animate>标签，改变一种几何形状的一个参数，在本例中，就是眼睛的半径。

要使瞳孔扩张，需要改变属性列表值中的半径值。

方便的是变化的属性还可以成为<path>标签。允许你创建一个动画路径。唯一的限制是两个曲线之间要进行转换，必须是同一种类型且拥有相同数量的控制点。它们必须由相同位置上的同一个字母定义，唯一不同的只能是参数的改变。当移动小人的嘴巴时，只有“微笑”和“大笑”位置被定义了。SVG动画将完成插值。

当然，SVG还能进行几何变换，也能做成动画。这里的动画标签是<animate Transform>。你必须告诉它想要将哪里的转变做成动画，还要提供一个分号分隔的所有关键位置的值列表。还可以组成动画转换，你告诉浏览器使用additive=”sum” 属性。

几何转换的动画：

第三个和最后一个SVG动画标签也很有用。<animateMotion>用来引导对象沿着特定路径运动。它有一个隐藏的技巧称为rotate=”auto”属性。它让对象不仅能够遵循指定路径，同时自身保持朝前，如同路上行驶的车辆一样。

SMIL有大量控制动画特征。在它的JavaScript API中揭露pauseAnimations(), unpauseAnimations()和setCurrentTime(t) 函数在全局性开始/停止/暂停一个动画的功能。还在所有三种动画标签(<animate>, <animateTransform>, <animateMotion>)上指定了begin与end属性。它们可以利用一个事件节点/用户事件/动画事件的强大组合。你可以指定，动画在点击之后的一秒结束或开始。

例如，下面这个SVG按钮被点击后有一个移动的阴影效果：

HTML5绘图

由声明性动画转换到编程性动画技术，<canvas>标签是你的第一选择。本文所提到的所有技术中，<canvas>标签最具有跨浏览器支持，浏览器厂商做了很多努力使之兼容60fps动画，以下是设置一个画布的方法：

第一个尺寸（标签属性）设置了画布的分辨率，这就是你所使用的坐标空间。第二个尺寸（CSS属性）是画布出现在屏幕上的形状大小。为什么不把画布物理尺寸设置到100%分辨率，内部坐标空间不变，浏览器为任意窗口都能正确渲染图画？非常遗憾，浏览器将画布内容作为点阵图来扫描的，任何扩大范围的结果都将导致模糊混乱的像素。于是，把这两个值设置成相同的值是唯一可行的选项。

初始化画布需要JavaScript中<canvas>元素，并在其上调用getContext('2d')函数。获得的图画内容对象被用来调用到画布API。内容是状态性的，存储三种不同的状态信息：绘画风格，即时几何转换以及累计绘图路径。在画布上进行绘画的方法是发布绘图指令，不产生任何可见内容，但在内存中已创建了一个路径，然后发布一个油墨指令（ctx.stroke(), ctx.fill() 或两者皆有），就能显示出路径了。

逐帧动画

画布动画需要设置一个动画循环，你应当基于requestAnimationFrame()函数（带有正确的前缀）。该函数使浏览器能够管理帧率，在浏览器选项卡隐藏时也能停止动画。

function runAnimation(){ yourWorld.draw() // this is your drawing code webkitRequestAnimationFrame(runAnimation);}

一般来说，画布被用于动画的时候，对象的位置必须是在逐帧的基础上才行，这是因为它们都是物理仿真的结果。观看box2dweb.js教程。仿真不断改变仿真世界中对象的位置，动画循环周期性的在屏幕上展现当前环境状态。

画布SVG精灵

在画布动画中使用SVG精灵是一种很有用的技巧。一个任意复杂性的静态矢量图片在画布上呈现都是繁琐的，这样做实际上可行，虽然不如发送一个.svg到 ctx.drawImage()简单。出于模糊安全的原因，只有内联SVG支持，你必须在Blob API中使用它（代码）。

SVG精灵能够以任意比例展示其矢量美态，但遗憾的是，只支持Chrome浏览器。

使用WebGL

WebGL暴露浏览器运行的JavaScript应用程序OpenGL API，而不需要任何插件。理论上讲，你只需要在<canvas> 元素上调用getContext(‘webgl’)（而不是之前的2d）就可以了。然而，WebGL非常大，并且API等级低。最重要的是，web版本没有默认的渲染路径，这意味着你无法给它一个形状，让它使用适合的默认值展示出来。所以你必须编写着色器，使用GLSL语言编写屏幕上出现的任何内容。

幸运的是我们有Three.js帮助。Three最初是由Mr.doob开发的库，用于一些Chrome演示（www.ro.me/www.chaostoperfection.com），但它是相对独立的。它拥有所有的基础，以及内置独特的着色器，你就可以专注于其他有用的方面：相机、灯光、行动。

首先要做的是编写Three粘合代码（很简单）：

var renderer=new THREE.WebGLRenderer({antialias: true});renderer.setSize(width, height);renderer.setClearColorHex(0x000000, 0); // color,transparency// the renderer creates a canvas elementfor youdocument.whereeveryouwant.appendChild(renderer.domElement);

在lights和action之前，需创建camera和位置：

// arguments: FOV,viewAspectRatio, zNear, zFarvar camera=new THREE.PerspectiveCamera(35,width/height, 1, 10000);camera.position.z=300;

然后是light：

var light=new THREE.DirectionalLight(0xffffff, 1);//color, intensitylight.position.set(1, 1, 0.3); // direction

我们试着呈现一个立方体吧，3D对象在Three中被称为网络，都由一个几何体和一个材料构成。

我们使用一个简单的结构：

var texture=THREE.ImageUtils.loadTexture(‘Fernando Togni.jpg’);var cube=new THREE.Mesh( new THREE.CubeGeometry(100, 100, 100), new THREE.MeshLambertMaterial({map: texture}) );

最后添加内容，称为渲染函数。

var scene=new THREE.Scene();scene.add(cube);scene.add(light);renderer.render(scene, camera);

这将为我们的立方体产生一个静态图像，为了让它动起来，我们包裹渲染召集一个动画循环，改变立方体在每一帧的位置。

function runAnimation(t){ // animate your objects depending on time cube.rotation.y=t/1000; cube.position.x=... renderer.render(scene, camera); // display requestAnimationFrame(runAnimation); // and loop}

推荐使用三维建模软件例如Sketchup。Three识别几类3D模型结构，包括COLLADA（.dae）具有广泛行业支撑。下面是如何在Three中加载一个模型：

var loader=new THREE.ColladaLoader();loader.load("Android.dae", function(collada){ var model=collada.scene; model.position=...; // x, y, z model.rotation=...; // x, y, z scene.add(model);} );

再做一些努力，更换机器人外观花式，Three提供兰伯特和冯氏照明风格，法线贴图，凹凸贴图，环境映射以及更多。

还可以使机器人运动起来，具体步骤参考教程。

原文链接：http://www.gbtags.com/gb/share/2124.htm

个页面内容不能过多

设计常用尺寸：750 x 1334 / 640 x 1134，包含了手机顶部信号栏的高度。

移动端H5活动页面常常需要能够分享到各种社交App中，常用的有微信、QQ 等。

使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏，在qq内置浏览器里不止有顶部导航，底部也有操作栏（safari浏览器也一样），这些都会占用设计稿显示区域，因此在设计环节就需要考虑内容的多少，页面底部要预留一定的空白，这样在微信或qq中才不会被遮住（如果页面已经写好了，就只能按照上面的尺寸进行内容的调整了，缩小元素间距，缩放图片大小等）。

标题简短

移动端浏览器导航条宽度有限，简短的标题可以使其展示完整。

二维码图片使用 img 标签引入

二维码图片不要写为元素背景，不然长按没有办法触发扫描功能。应使用 img 标签引入。

二维码图片记得扫描测试

有时候扫描二维码之后，会跳转至某个地址，不幸的话QQ或者微信会对这个地址进行温馨提醒，这样会阻止部分用户继续访问，从而无法很好的将用户引导到活动想要推广的产品/品牌页面，如 App 的下载页面等。因此二维码的扫描测试不能少（举个例子，如果二维码扫描结果是应用的下载地址的话，可以使用应用宝的微下载地址来生成二维码，这是不会被“温馨提醒”的。）。

使用打包工具（比如gulp）拼合图片

如果打算先布局，后使用自动化工具（如：gulp-sprite-generator2）将图片拼起来（即通过 css 生成精灵图），减少请求数，需要注意：在编写 CSS 的时候，图片宽高应固定，图片拼合后才能通过定位和显示区域的宽高来展示图片。建议先将图片拼起来再布局，可以使用：gulp.spritesmith，一步获取合并的精灵图和对应的 css 文件。

CSS 动画属性前缀 webkit

使用 CSS3 来制作动画效果的话，webkit 前缀一定记得加，要不然在某些手机下动画效果是没有的（可以使用自动化构建工具完成）。

欢迎各位童鞋补充哦！

在线咨询

上一篇：vue项目本地开发完成后部署到服务器后报404是什么
下一篇：手机通讯录中“隐藏”的24个小秘密！（李金平）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

2017TFC跳跳糖余悠 HTML5游戏营销案例 新