80,000行 Objective C: 将Contre的多点触摸 物理引入HTML5浏览器

分享于 

11分钟阅读

Web开发

  繁體

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

Contre新"是一个视频游戏"模糊互动艺术与游戏之间的界线"。 凭借 Maksym ( 最大) Hryniv,享誉世界,著名的Jour为它的创新的游戏,迷人的艺术风格,迷人的配乐,在世界范围。 随着 IE 10的出现,微软寻找一个机会来演示更新的JavaScript引擎和新的浏览器。

Contre快速的触摸控制,独特的游戏和多媒体要求,提出微软寻找的挑战。 Max和定制开发商店清晰咨询插件,带来了Contre的最新使用,仅使用HTML5和 JavaScript。 已经完成了六个月,将Contre推送到了网络上,我们认为,HTML5已经准备好了。 下面的技术切割提供了丰富的挑战,以及在浏览器中实现小生命的解决方案。 我们希望你喜欢它。

概述

项目的目标是展示 IE 10 如何缩小基于浏览器的游戏和原生游戏之间的差距,方法是将Contre最新的内容引入到 HTML5. 我们从一开始就设定了一个目标,我们不会牺牲Contre的任何深度。 我们知道将会有挑战,而且大量的。 Contre Jour,从代码和媒体角度来看。 它拥有超过 80,000行 objective-c 代码,数百个图像资产,甚至更多的配置文件。

到目前为止最大的挑战是 objective-c 代码和JavaScript的转换。 objective-c 代码是面向对象的,对封装( 如封装多态和继承的javascript支持在最佳程度上是稀疏的。 这两种语言之间的差异使得line-by-line端口出现了问题。 我们详细介绍了 objective-c 代码,评估每个组件,确定它与它的他组件的关系,并设计一种方法。

从一开始,就像游戏开发一样,性能是必须的。 我们考虑跟踪和移动屏幕上的许多元素,包括环境,可能会对浏览器产生税收。 HTML5使绘图变得简单,但我们需要认识到绘图将是我们最昂贵的操作。 查看'在引擎盖下'部分 below 以查看我们使用的一些性能技巧。

物理物理

Contre的一个定义是用户如何交互和操纵周围世界,而不是操纵游戏角色的英雄。 在Contre中,玩家用手指形成粘土,这是移动游戏的主要方式,叫做小博士。

在JavaScript中编写地逻辑是一个巨大的挑战。 模仿它移动和形状的方式,因为用户与游戏的英雄所需要的物理吸尘逻辑。 我们将 Contre Box2D 应用于 Box2D,渲染 clay,这是版本中使用的相同物理引擎。 这为管理物理对象。创建关节和处理碰撞提供了几乎相同的功能。

这个地面由许多独立的apriori体构成,这就是它能够形成的能力。 当它被绘制出来的时候,它的子物体之间就画出了一个光滑的曲线。 这给了它的claylike感觉,但也使它变得非常昂贵。

objective-c 到 Javascript

我们早期的一个关键挑战是将Contre的深层对象层次结构从原始的iOS代码迁移到 JavaScript。 为了帮助我们,我们在几个需要继承的地方 leaned "简单的Resig JavaScript继承"Pattern

这使得我们可以从Contre开放的体系结构中使用大量代码,而不仅仅是我们预期的。 共享共享基本行为( 比如粒子系统)的组件更容易实现,因为我们有一个"继承"层次结构。 如果没有这样的Pattern,它将非常困难,如果不可以能,将游戏带到 HTML5. 我们将不得不编写大部分游戏。 幸好,使用简单的JavaScript继承 Pattern 节省了大量时间和资源。

CSS3

在游戏菜单的开发和游戏非游戏元素的开发中,CSS动画转换。 大多数CSS转换过渡过程中发生,例如显示/隐藏暂停菜单,在级别之间转换。 在 IE 10这样的浏览器中,屏幕上的每个像素都是硬件加速的。 这意味着什么意味着没有任何额外的代码,你可以创建高保真性,高效效果。 这帮助我们从已经滥用的画布中转移一些渲染工作到DOM和CSS布局引擎。

我们还使用了媒体查询来扩展站点以支持多个屏幕分辨率。 CSS3媒体查询允许开发人员附加一个条件来影响样式所应用到的范围。 例如,我们使用媒体查询将比例转换应用到外部DIV容器,以缩小小屏幕的网站。

提示:使用媒体查询使我们摆脱了创建和支持多种图像大小的负担。 这是一个重要的优化- 维护多组图像会造成额外的痛苦,因为我们有数百张图片可以管理。

多重触控

在不同浏览器中,我们的代码分支在多个触摸支持的实现中的几个领域之一。 实现多触摸是开发的最简单部分,由于 IE 10建立了针对指针事件监听器的支持。 好消息是他们只是工作。 从开发者的角度来看,这是非常棒的,因为它允许我们把注意力集中在项目的更具挑战性的部分上。 下面是一个代码示例,其中的事件侦听器连接在浏览器中:


function inferInputModel() {



 if (window.navigator.msPointerEnabled) {


 return 'pointer';


 } else if (window.ontouchstart!== undefined) {


 return 'touch';


 } else {


 return 'unknown';


 }


}



switch (inferInputModel()) {



 case 'pointer':


 element.addEventListener('MSPointerDown', msStart);


 element.addEventListener('MSPointerOut', msStop);


 document.addEventListener('MSPointerUp', msStop);


 document.addEventListener('MSPointerCancel', msStop);


 document.addEventListener('MSHoldVisual', preventDefault);


 break;



 case 'touch':


 element.addEventListener('touchstart', touchStart);


 document.addEventListener('touchend', touchStop);


 element.addEventListener('mousedown', mouseStart);


 element.addEventListener('mouseout', mouseStop);


 document.addEventListener('mouseup', mouseStop);


 break;



 default:


 element.addEventListener('mousedown', mouseStart);


 element.addEventListener('mouseout', mouseStop);


 document.addEventListener('mouseup', mouseStop);


 break;


}



本文介绍了的基本概念touchEventWireupthis这是由GitHub给你的。

从编码的角度来看,我们花了一些时间编写一个主要的触摸 MODULE,它包装了浏览器特定的触摸支持。 无论浏览器平台如何,MODULE 跟踪输入事件,并将它们冒泡到我们的游戏引擎以进行处理。 这里外,游戏元素可以"订阅者"到一个给定的实例或者指针,通过它的生命周期接收更新通知。 这使得游戏中的元素很容易在浏览器平台上响应触摸。

你是开发人员?

如果你是一个热衷于在网络上构建游戏的网络开发者,我们已经把
你可以马上使用启动框架来构建HTML5游戏。

这个示例使用了与创建 Contre Jour游戏循环相同的Pattern,并帮助你开始编写HTML5游戏。 它包括一个简单的Pattern 来创建一个游戏循环,一个初学者游戏对象,以及画到画布的代码。 代码有良好的文档,并且将指导你完成创建基本游戏所需的步骤。 你还可以在这里查看其他开发人员资源:

IE GitHub知识库插件- 适用于中级用户。 our存储库 compiles months months building building building building interactive interactive interactive interactive interactive interactive interactive interactive interactive interactive interactive interactive interactive。

我们能实现什么?

我们能够给Contre带来一些事实证明了一些事情,最少的是HTML5游戏游戏和本地平台游戏。 虽然本机游戏仍然提供了浏览器游戏的边缘,但访问浏览器的机会是吸引人的。 随着 Windows 8和 IE 10等技术不断推进,HTML5游戏的未来将变得更加光明。 作为开发人员,我们相信我们可以重置对网络上可以能的人的期望。 我们希望 Contre Jour能够激励游戏社区来推动极限,并探索可能的内容。 你认为什么是可能的?

这篇文章是由清晰咨询撰写的。 是微软Partner合作伙伴之一,微软今年和中西部合作伙伴之一,专业从事微软平台技术,包括网络应用,SharePoint,Silverlight,Surface,Windows Mobile 和WPF智能客户端。 我们将创新的用户体验设计与敏捷软件开发合并在一起,从零售和制造业服务。

HTML5视频资源


bro  对象  浏览  Html5  objective  bri  
相关文章