在HTML5中,behind的交互式音乐游戏构建的场景

分享于 

12分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

音乐视频演进,这是音乐视频的范例,比如 on,现在被发布在网络上的音乐视频。 传统媒体不同- 比如电视之后的一个音乐视频,在网络上的音乐视频与之相互竞争。 那么艺术家如何切断噪音并注意到,尤它的是如果你是 jasmine Villegas的一个上升星星。

这是 jasmine 和 IE 团队试图解决的挑战。 她的愿景是创建一个互动的体验来完成两件事,1 ) 和她现有的粉丝基础,2 ) 帮助她到达新的粉丝。 微软在数码厨房Bradley,create,Montgomery,Montgomery,Montgomery,Montgomery,Montgomery,Montgomery,Montgomery,Microsoft,Microsoft,Microsoft,Microsoft,Microsoft。

整个音乐视频中的分层都是大量的技术 sparklers。 无论你是 jasmine Villegas bff还是只想了解更多关于HTML5的信息,我们都想向你提供更多关于我们如何将一个朋友带到在线的信息:

使用HTML5标准设置站点

我们通过确保的现代浏览器能够识别并使用HTML5视频而不是 Plug-Ins 来启动这个项目。 这很简单:


<!DOCTYPE html>



将Facebook数据连接到你的网络应用程序

facebookconnect是 justafriend.ie 不可或缺的组成部分,它真正有助于将用户吸引到体验中。 当你第一次开始视频时,用户被要求连接到他们的Facebook帐户。 这允许我们从他们的NAME 帐户中拉出图像并直接将它们投影到视频中。 因这里,jasmine的风扇可以感觉到视频的一部分,与他们喜爱的歌手。

HTML5 Canvas 和视频上的项目图像

HTML5中的图像投影不是一个新概念。 实际上,项目早期的大部分工作都是基于Steven在上提供的。 但与它的他现代浏览器相比,tsm中的画布投影在测试中得到了更好的效果,因这里代码必须改变。

一个很好的例子是获取记分板以显示从Facebook连接中提取的用户的NAME的步骤。 为此,投影代码被更新为使用画布缓冲区而不是图像。 这允许将各种元素组合到缓冲区中,然后再投影到缓冲区。 从记分板的空白PNG开始,使用画布绘图API绘制名称。 另一个PNG被放在顶部,提供轻微的眩光。 这个投影是通过将这个投影与视频框架相匹配而不是一个静止的平面来进行的。

在视频开始时,用户照片的分层也用于将用户照片的Facebook投影到 jasmine 墙的卧室。 png提供阴影效果使照片与墙上现有的照片无缝融合。 这种技术再次用于视频结束时 jasmine 桌面上的照片。 下面是 final 体验和驱动它的代码。


if (frame_offset == null) frame_offset = 0;


 var canvas, proj;


 var score_img_1,


 score_img_2,


 overlay,


 board_canvas,


 score_canvas_1,


 score_canvas_2;



 // View in the following line is a Backbone.js (http://documentcloud.github.com/backbone/#View) view.


 var self = view.extend({


 template:'<div class="scene HD" id="scoreboard_projection"></div>&',


 name:'scoreboardProjection',


 pageName: 'Bowling Scoreboard',


 onInit:onInit


 });



 return self;



 function onInit() {


 // First we load our images."media" on the following lines are Media objects from http://www.justafriend.ie/cdn/js/jv/media.js


 score_img_1 = media.getImage('img/bowlingscore1.png');


 score_img_2 = media.getImage('img/bowlingscore2.png');


 overlay = media.getImage('img/bowlingscore_overlay.png');



 var scale_down_to_blur =. 75;


 board_canvas = canvasUtil.create(Math.floor(800 * scale_down_to_blur), Math.floor(450 * scale_down_to_blur));


 score_canvas_1 = canvasUtil.create(800, 450);


 score_canvas_2 = canvasUtil.create(800, 450);



 canvas = canvasUtil.create(10, 10);



 // projection is part of the canvas projection library at http://www.justafriend.ie/cdn/js/jv/projection.js


 proj = projection(board_canvas, canvas, null, {


 wireframe:false,


 subdivisionLimit:3,


 patchSize:32


 });



 }



 // There's more to this, and you can find the full code at http://www.justafriend.ie/cdn/js/jv/scenes/scoreboardProjection.js 



}



在描述 上面的技术中使用这里代码源将产生与你的项目无缝融合的图像投影。

记分板场景的源代码如下: http://www.justafriend.ie/cdn/js/jv/scenes/scoreboardProjection.js

要了解有关使用 HTML5 Canvas 进行开发的更多信息,请尝试以下链接:

用像素提取视频帧

HTML5视频仍然是一种发展的技术。 虽然已经做了大量的工作来确保框架的准确性,但它仍然不是完全的完美。 所以我们必须把它和一些帮助联系起来:

虽然它不总是匹配当前帧,但它并不总是与当前帧匹配,因此 HTML5 MediaElement API提供了一个'currenttime'的getter。 这尤其是当视频被渲染时进行计算昂贵的处理时的问题。

为了解决这个问题,帧号是使用 black 和白色像素从镜像中被刻录出来的。 这不是你在视频中看到的标准NTSC扫描显示。 相反,它是手动创建并刻录到视频中的二进制数据的原始位,可以使所有的。 虽然看似简单,但它是一种非常有用的技术,在视频的交互瞬间使用。 没有它,视频将不会被正确同步,这将导致覆盖不是 MATCH 他们相应的帧。


function getCurrentFrameFromTimecode() {


 frame_canvas_ctx.drawImage(video, 961, 0, 1, 16, 0, 0, 1, 16);


 var timeBitmap = frame_canvas_ctx.getImageData(0, 0, 1, 16);


 var timeData = timeBitmap.data;


 var frame = 0;


 var value;


 for (var i = timeData.length - 1; i >= 0; i -= 4) {


 value = (timeData[i - 3] + timeData[i - 2]


 + timeData[i - 1]) > 125? 1 : 0;


 if (Math.floor(i/4) == 15) {


 frame = value <<Math.floor(i/4);


 } else {


 frame |= value <<Math.floor(i/4);


 }


 }


 current_frame_text = "Frame:"+frame;


 return frame;


}



使用这里代码源可以帮助保持视频和交互式元素同步。 你可以在这里获取"框架代码读取器"模块的源代码:
http://www.justafriend.ie/cdn/js/jv/frameCodeReader.js

为提高性能而提高png性能

在舞蹈游戏中,当玩家敲击beat的时候,他们需要的图形元素,一旦他们按下了 paddle,就会产生凉爽效果。 对于爆炸,PNG子画面转换为画布图像数据,然后创建一个粒子系统,每个粒子代表图像中的单个像素。 粒子系统是非常基本的,使用toxiclibs的Javascript端口中的2D 矢量类开发。

获取代码示例: http://haptic-data.com/toxiclibsjs/

在早期测试中,当一次渲染过多的粒子时,性能是一个问题。 最简单的解决方案是在Photoshop中创建具有大量透明度的子画面。 然后,当粒子系统创建时,只为超过某些不透明度阈值的像素创建粒子。 通过快速淡出粒子,获得更好的性能。

在这里可以看到早期 Prototype: http://www.justafriend.ie/cdn/dev/proto13b.html

顺序和媒体加载

在整个体验中,根据用户交互,有不同的结果。 由于这些不同的结果,许多不同的视频必须被创建。 因此,需要以一种使转换看起来天衣无缝的方式来工作的媒体加载器。

最初,Popcorn.js 和 Popcorn.sequence MODULE 在其他的IE9项目中用来切割Rope的Rope。 然而,它很快发现这个框架对于这个项目是过度的,并且没有给出排序所需的精度。 对于初始值,在使用非整数和出现点时序列中断,并且时间回调并不真正同步。

最后,创建了具有特定的框架和外观的场景系统。 在每个帧上,渲染应在该框架上可见的所有场景。 每个场景都可以被视为叠加,因为HTML5视频在 background 中呈现。

每个场景都使用自定义媒体加载程序在启动时预加载所需的资产。 HTML5有多种媒体装载器,但找不到符合项目需求的多媒体装载器。 因此,创建了一个自定义媒体加载器,可以使用RequireJS和支持图像。视频和音频。 加载程序包括对onComplete和 onerror 回调以及应用程序级别状态通知的支持。 在某些浏览器中,所有请求都排队并限制为一定数量的同步"线程",以避免许多浏览器中最常见的HTTP管道问题,幸运的是,这不是像 IE 9这样。

一个问题是HTML5视频剪辑将不会完全预加载,因为现代浏览器自然地加载视频段。 为了确保缓存视频,它们通过ajax样式XHR加载。 主视频是唯一允许在传统意义上流传的视频。 主视频是一个没有根据用户的交互而改变的元素。 如果预加载,初始加载时间的初始加载时间将非常长。 使用预加载和逐步加载视频元素的这种组合,可以消除传统的缓冲时间。

调整这里代码源以加载你的资产,以便它们能够无缝地转换。

媒体加载程序的源代码在这里: http://www.justafriend.ie/cdn/js/jv/media.js

拨数字

经验中的一个隐藏元素是使用of可以在视频结束时在 table 上键入电话号码。 这样,jasmine 就可以拨打你拨打的号码,并留下 6个随机语音消息。 API很容易实现,并且添加了一层令人惊讶和令人兴奋的感兴趣的体验。

包装起来

感谢阅读 behind 场景开发者在 jasmine Villegas上 tear"。

要了解有关为现代浏览器开发 跨浏览器 代码的更多信息,请从MSDN开始: http://msdn.microsoft.com/ie


INT  GAM  Html5  视频  音乐  交互  
相关文章