有关HTML5的流言与真相,游戏开发基础的教程

12个有助简化CSS3开发的工具

2011/05/18 · HTML5 · CSS3, HTML5

Web 开发人员能通过CSS3为网站设计增添很多时尚元素,CSS3 对CSS规范做了很大的改进。现在,本文将为你介绍12款有助于简化CSS3开发的工具。

1、CSS3Pie

允许在IE上使用CSS3绝大部分的酷炫功能。

2、CSS3 Builder

通过该工具,你可以用类似应用photoshop特效的界面来设计复杂的CSS3 box模型。非常节约时间。

3、CSS3 Drop shadow generatr

通过滑块功能直观的设计阴影。只需复制已被自动创建的CSS代码并粘贴到CSS文件中便可。

4、Cascadr

非CSS3特有但却非常实用。允许输入HTML代码并能够侦测该代码中所有的内联CSS,将之从HTML中移除并添加到一个单独的样式表中。

5、Border Radius.com

当前最流行的CSS3属性之一。有助于快速创建圆角box模型并获取适当的CSS3代码。

6、Button Maker

允许创建出色的按钮。使得CSS3 按钮设计变得非常简便——只需采集颜色,调整半径,获取代码,粘贴代码至CSS文件即可。

7、CSS3 Generator

使用便利,有助于创建最流行的CSS3属性代码,如 @font-face, RGBA, text-shadow,border-radius等代码。

8、Modernizr

用于侦测浏览器是否支持CSS3,能为元素添加类以此在样式表上对特定浏览器功能进行定位。例如,当浏览器不支持多样背景时,”no-multiplebgs”就将被添加到元素上。

9、HTML5 & CSS3 Support

想知道IE 8是否支持”text-shadow”属性?那就看看这张图表吧!该图表展示了所有主流浏览器所支持的CSS3属性,极具实用性。

图片 1
(点击查看大图)

10、CSS3 Gradient Generator

渐变生成器。只需采集颜色、预览颜色,抓取代码并粘贴代码即可。

11、CSS3 Please

非常有用的可让用户复制并粘贴常见CSS3代码的站点。具有可供现场测试效果的预览区。

12、CSS3 Cheat Sheet

CSS3 cheat sheets有助于在编码过程中快速记忆属性及其语法。Smashing Magazine 创建了这个图表,支持下载与打印。同时支持.gif格式预览。

原文:Jean-Baptiste Jung    译文:oschina

赞 1 收藏 评论

图片 2

HTML5 游戏开发基础的教程

2017/03/24 · HTML5 · 2 评论 · 游戏

本文由 伯乐在线 - 紫洋 翻译,艾凌风 校稿。未经许可,禁止转载!
英文出处:Mikołaj Stolarski & Tomasz Grajewski。欢迎加入翻译组。

在游戏的视觉效果定义其整体外观、感觉和游戏玩法本身。玩家被好的视觉体验所吸引,从而可达到产生更多的流量。这是创建成功的游戏和为玩家提供很多乐趣的关键。

在这篇文章中,我们基于 HTML5 游戏的不同视觉效果实现,提出几个构思方案。这些示例将依据我们自己的游戏《Skytte 》所实现的效果。我会解释支持他们的基本思想, ,并提供应用于我们项目中的效果。

有关HTML5的流言与真相

2011/06/17 · HTML5 · HTML5

你是免不了的。每个人都在谈论HTML5。自众人开始滥用圆角和渐变效果以来,HTML5或许是最热炒的技术。然而,许多人眼中所谓的 HTML5实际上只是老式的DHTML和Ajax。有关HTML5的诸多信息中鱼目混珠,因此,JavaScript专家雷米·夏普(Remy Sharp)和Opera公司的布鲁斯·劳森(Bruce Lawson)着眼这些流言,对其中的常见谬误和事实做了分类整理。

首先,一些事实。

很久很久以前,世上有一门叫做HTML的可爱语言,这门语言简单易学,用它写网站真是轻而易举。因而,所有人都用这门语言,从此,Web也从一堆物理论文的链接变成了今天我们所熟知和喜爱的模样。

大多数页面并不遵循这门语言的简单规则(因为写这些网页的人对内容本身要比媒介形式更为关心),因此所有浏览器都必须忽略错的代码,尽最大努力猜测作者到底是想怎样展示内容。

1999年,W3C决定终止HTML的制定工作,转而制定XHTML。一切都很完美,直到少数人注意到从XHTML升级到XHML2的升级工作 几乎脱离实际。XML的标准要求浏览器一旦碰到错误,就停止工作。另外因为W3C正在起草一种比老式、简陋的HMTL更出色的语言,它不赞成 (deprecate)使用img和a标签这类元素。

Opera和Mozilla开发人员不认同这种做法,并于2004年给W3C提交了一份报告,该报告称:“我们认为网页应用(Web Applications)是一个极为重要的领域,但当前技术并未为这一领域提供充分的支持。在多方制定的规范出来之前,单一厂商的解决方案存在的潜在风险在不断增大。”(译注:暗指Adobe的Flash技术?)

  这份报告提了7条设计原则

  1. 向后兼容,并有一个清晰的迁移路线(migration path)
  2. 明晰(Well-defined)的错误处理机制,类似CSS(比如,忽略未知内容,继续执行),相比之下XML错误处理机制过于“苛刻”。
  3. 编程错误不应直接暴露给终端用户。
  4. 实用性:所有最终进入网页应用技术规范的性特性都必须有实际的应用案例支撑。但反之则不成立:即所有类似的应用案例并不必然会将新特性加入到技术规范中。
  5. 脚本支持已经已得到公认(但是当有更方便的标签可满足需求时,应避免使用脚本。)(译者:类似表单输入数据验证。)
  6. 避免针对特定设备的规范。
  7. 制定过程必须开放。(网络本身从开放式发展中受益颇多。邮件列表,存档,规范草稿应一直对公众开放。)

该报告遭W3C的拒绝,因此Opera和Mozilla以及后来的苹果继续维护着一个叫做网络超文本应用程序技术工作组(Web Hypertext Application Technology Working Group,简称WHATWG)的邮件列表(Mail list),继续制定他们用以验证概念( proof-of-concept)的规范内容。这份规范对HTML4表单规范进行了扩充,在伊恩·希克森(Ian Hickson)的不断校订中,这份规范最终成为一份名叫网页应用程序1.0(Web Applications 1.0)的规范。后来伊恩·希克森离开Opera,加入Google。

在2006年,W3C终于意识到自己的错误,决定重新启用HTML,向WHATWG索要它的规范,并将其作为HTML5规范的基础。

上面这些是史事资料。现在我们来看看一些流传甚广的流言。

流言

“在2012(或2022)年之前,俺是用不上HTML5的了。”

这一流言是从HTML5进入到W3C流程的候选推荐阶段(Candidate Recommendation,简称REC)的项目日期所误传开来的。官方Wiki上写道:[INDENT] 如今一个规范要成为候选推荐标准(REC),它需要具备百分之百的可实施性(interoperable implementations),只有成功通过上万项的测试案例(Test Case)后才能验证这点(据保守估计,整个规范可能需要进行2万项测试)。当你在心里默算写这些测试案例需要多少时间,实施每个新特性又需要多少时间 时,你就会明白HTML5规范制定的时间跨度为什么这么长了。
[/INDENT]  因此,按此说法,在你能在两大浏览器中用上所有的功能之前,HTML5的规范是没有最终定稿的。

当然,真正重要的一小部分HTML5的特性已得到浏览器的支持,任何浏览器的支持情况汇总表单都会在一周之内过时,因为浏览器制作厂商的创新速度非常之快。另外,许多HTML5的新特性也通过JavaScript脚本在不支持HTML5的老浏览器中得以重现。Canvas属性在所有新浏览器中得到支持,其中包括IE9,另外在老的IE浏览器中,通过excanvas库,我们也可以模拟Canvas的特性。而音频和视频标签效果,我们则可以通过Flash在旧的浏览器中实现。

HTML5在设计上就可以优雅降级,因此运用一些JavaScript代码和创意,HTML5的所有功能都可以在老浏览器上实现。

“俺的浏览器支持HTML5,你的不支持。”

这一流言认定HTML5是一个整体不可分割的标准。但实际上不是。正如前文所说,HTML5是一组新特性的组合。因此,短期来讲,你不能说一个 浏览器支持了HTML5的所有内容。而当浏览器能做到这点时,浏览器本身已经无关紧要了,因为那时我们将被新一代的HTML语言所震撼。

感觉HTML5乱的一塌糊涂,是吧?看看CSS2.1,这么多年了它都是一个尚未最终完成的标准,但是我们每个人无时不在用它。我们用CSS3轻松添加圆角,这点很快就会得到所有浏览器的支持,虽然CSS3的其他特性尚未得到所有浏览器的支持。

要提防那些浏览器“评分”网站。这些网站测试的内容经常与HTML5无关,比如CSS,SVG,甚至是网页字体(web fonts)。你手头需要完成的工作才是要紧的,你客户受众浏览器所支持的技术才是用得上的技术。

HTML5实际上正式认可了一些常见的书写错误(Tag Soup)

HTML5在语法方面要比XHTML松散很多:比如,你可以用纯大写或小写字母书写标签,甚至大小写混用也无妨。你无需对img这类的标签做自封闭处理(self-close),因此下面这两种写法都是合法的:

JavaScript

<img src="nice.jpg" /> <img src="nice.jpg">

1
2
<img src="nice.jpg" />
<img src="nice.jpg">

标签属性也无需用双引号括起来,因此下面这两种写法都是合法的:

XHTML

<img src="nice.jpg" /> <img src="nice.jpg">

1
2
<img src="nice.jpg" />
<img src="nice.jpg">

使用大写或小写(甚至混用)字母都可以,所以下面三种写法也都是合法的:

XHTML

<IMG SRC=nice.jpg> <img src=nice.jpg> <iMg SrC=nice.jpg>

1
2
3
<IMG SRC=nice.jpg>
<img src=nice.jpg>
<iMg SrC=nice.jpg>

这与HTML4毫无差异,但是如果你用习惯了XHTML,你碰到这种写法时还是会很震惊的。现实中,如果你使用HTML和文本内容书写页面,而 非使用XML(你极有可能是混用文本和HTML书写页面的,因为IE8并不能真正的渲染XHTML页面),那么上述细微差别也无关紧要:浏览器会忽略尾部 的斜杠,双引号,以及大小写。

HTML5语法看似松散,但实际的解析规则要严格的多。因而HTML5中,常见的书写错误(Tag Soul)将不复存在;HTML5的规范对这些无效标记做精确的描述和定义,因此所有遵循规范的浏览器都会生成同样的文档对象模型(DOM)。如果你曾写过JavaScript来遍历DOM,那么你就会对DOM不一致所带的恐怖经历有所体会。

但这种修正不应导致无效代码泛滥。HTML5为你创建的DOM可能并不是你想要的那个,因此对书写的HTML5代码进行验证仍然至关重要。随着新特性的大量涌入,对细小语法错误的忽视会让你的脚本失效,或是CSS样式出错,这也是我们为什么需要HTML5验证器的原因之所在。

HTML5远不仅仅只是让一些常见的书写错误合法化,而且让这些常见错误(Tag soup)成为历史。赞!

“我需要把我的网站从XHTML转换HTML5。”

HTML5对松散语法的包容性是敲响了XHTML的丧钟吗?制定XHTML2规范的工作组已经解散,对吧。

没错,XHTML2的工作组在2009年年末的时候解散了。他们起草的这个规范是用来与HTML5竞争的,但尚未得到执行实施,然而,同时保留 两队人马是对W3C组织资源的一种浪费。另外XHTML1已经是一个业已完成的规范,得到所有浏览器的广泛支持,并在必须的时限内仍将得到所有浏览器的支 持。因此你用XHTML书写的网站也将免受折腾之苦。

HTML5将会干掉XML

根本不会,如果你需要使用XML,而不是HTML,你可以选用XHTML5,它几乎包含所有HTML5的优点,只是要必须遵循严格XHTML语法(比如,要标签属性中的双引号不能省,自封闭元素的末尾斜杠不可省,必须用小写字母书写标签等等诸如此类。)

现实情况是XHTML5并不完全包含所有HTML5的特性。譬如< noscript> 就失效了。但你想想,这古董玩意儿还有人在用吗?

HTML5会干掉Flash和插件

< canvas> 标签可以让脚本根据键盘输入操纵图像实现动画效果,因此在一些简单的应用场景下可以与Adoble Flash竞争。HTML5还有对Video和Audio播放的原生支持。

正因为CSS Web字体尚未得到广泛支持,以Flash为基础的sIFR技 术将会填补这一空白,Flash也因逆向兼容HTML5视频内容而挽救局面。因为HTML5设计时“照顾”了老浏览器,Video标签之间的其他标记将会 被支持HTML5的浏览器所忽视,因此可以用老式的< object>或< embed> 标签,用Flash嵌入所有浏览器支持的视频内容,克罗克·卡门( Kroc Camen)在他的《全兼容的视频》一文中就倡导这种做法。(见下面截图。)

图片 3

 

但也并是不所的应用场合都是可以用HTML5取代Flash的。比如HTML5中就没办法进行数字版权的管理。Opera,Firefox和 Chrome这类浏览器允许简单的右键点几下就将视频保存的本地电脑上。如果你不想用户保存视频文件,你就需要使用插件。另外捕捉麦克风或是摄像头的信号 就只能通过Flash实现。(不过 元素已经出现到HTML5以后的规范中),因此如果你想写一个可以终结聊天轮盘(Chatroulette)网站的东西来,那么HTML5并不适合你。

HTML5在可访问性(Accessibility)方面做得比较差

关于HTML5的讨论中有不少是唠叨HTML5可访问性的。这点很好,应该欢迎:因为网络的基础语言已经做了太多了的改变,因此确保网页对于那 些残障人士的易访问性极其重要。另外,更为重要的是在技术方案的制定过程中就将其考量进入,而非事后修补。毕竟大多数开发人员甚至没有为图片标签添加 Alt属性,所以提供现成可用的易访问性(accessibility)相比人们手动添加更容易成功。

这也是为什么HTML5添加了类似滑块(

JavaScript

<input type="range">

1
&lt;input  type=&quot;range&quot;&gt;

,目前仅Opera和Webkit内核的浏览器支持)原生控件和日期选定控件(

JavaScript

<input type="date">

1
&lt;input  type=&quot;date&quot;&gt;

,仅Opera支持)——因为之前,我们只能用JavaScript和图片来模拟,并添加键盘支持和WAI-ARIA的Role属性。

而Canvas标签则又是另一番情况,该标签原本是苹果独创的,后遭其他浏览器厂商的逆向工程破解,继而被吸纳为HTML5规范的一部分,因此 Canvas技术本身在可访问性方面并未做考量。如果你只是用它制作一些视觉美化,那问题不大,你大可把它看成图片,只是不能添加ALt属性来指定替换的 文本内容(已有人建议在规范中作此增添,但目前尚未得到实施)。因此,确保Canvas之中的信息在页面的其他地方有替代信息,从而增强页面的可访问性。

Canvas中的文本变成了像素,如图片中的文本。因此,辅助技术和屏幕阅读器来可以读出其中的信息。可考虑用W3C的可缩放适量图像标准 (SVG)替代,尤其对于动态图像和文本内容来说。SVG目前得到了主流浏览器的支持,其中包括IE9(IE8及以下的浏览器不支持,不过SVGWeb库 通过Flash技术可以在老式浏览器中模仿SVG。)

video和audio标签也很有前途。尽管这两个标签的规范尚未完全确定(而且许多浏览器还不支持)。HTML5已经添加了一个新 的track 的标签,可以包含带时间轴的文本(歌词和外文媒体的字幕),你可以在视频下面用JavaScript来添加时间轴字幕,并与视频内容同步。

“当我第一次用HTML5的时候,HTML5的大师会助我一臂之力”

如果是真的那该多好。不过保罗·艾瑞士(Paul Irish)和迪维亚·梅丽亚( Divya Manian)打造的HTML5模板文件对 你来说就足以很好。模板文件包含一系列的文件,你可以作为模板用在你的项目中。模板文件包含了你所必须的JavaScript,方便在IE中添加新元素; 它从Google的CDN上引用jQuery,另外如果Google服务器出问题了,还可降级引用你自己服务器上的JS库。

图片 4

它也添加了适用iOS,Android和Opera手机版的标签,并用一个易于理解的CSS reset文件搭建了一个基本的CSS骨架。它甚至还一个.htaccess文件,以便为HTML5视频提供正确的MIME类型。如果你不需要全部的内 容,你可删除对你项目无用的内容,精简文件。

深入阅读材料

HTML5的话题很宽泛。下面是是我们手工挑选的几个链接。披露提醒(Disclosure):本文的作者参与了下面的一些项目。

  • W3C规范:HTML5
    写网站的同学都应该看看的资料。
  • HTML5的演示例子
    HTML5 API在浏览器中的实际效果示范例子
  • HTML5 Doctor
    这个博客上都是些短小精悍的文章,“帮你马上运用HTML5技术”
  • html5-shims 上面会分享一些脚本,教你如何在浏览器中模仿再现HTML5的功能特性。

原文:Remy and Bruce
译文:21haolou

 

赞 收藏 评论

图片 5

你会学到什么

在我们开始之前, 我想列出一些我希望你能从本文中学习的知识:

  • 基本的游戏设计
    我们来看看通常用于制造游戏和游戏效果的模式: 游戏循环、精灵、碰撞和粒子系统。
  • 视觉效果的基本实现
    我们还将探讨支持这些模式的理论和一些代码示例。

常见的模式

让我们从游戏开发中常用的大一些模式和元素开始

精灵

这些只是在游戏中代表一个对象的二维图像。精灵可以用于静态对象, 也可以用于动画对象, 当每个精灵代表一个帧序列动画。它们也可用于制作用户界面元素。

通常游戏包含从几十到几百精灵图片。为了减少内存的使用和处理这些映像所需的能力, 许多游戏使用精灵表。

精灵表

这些都用来在一个图像中合成一套单个精灵。这减少了在游戏中文件的数量,从而减少内存和处理电源使用。精灵表包含许多单精灵堆积彼此相邻的行和列,和类似精灵的图像文件,它们包含可用于静态或动画。

图片 6

精灵表例子。(图像来源: Kriplozoik)

下面是Code + Web的文章, 帮助您更好地理解使用精灵表的益处。

游戏循环

重要的是要认识到游戏对象并不真正在屏幕上移动。运动的假象是通过渲染一个游戏世界的屏幕快照, 随着游戏的时间的一点点推进 (通常是1/60 秒), 然后再渲染的东西。这实际上是一个停止和运动的效果, 并常在二维和三 维游戏中使用。游戏循环是一种实现此停止运动的机制。它是运行游戏所需的主要组件。它连续运行, 执行各种任务。在每个迭代中, 它处理用户输入, 移动实体, 检查碰撞, 并渲染游戏 (推荐按这个顺序)。它还控制了帧之间的游戏时间。

下面示例是用JavaScriptpgpg语言写的非常基本的游戏循环︰

JavaScript

var lastUpdate; function tick() { var now = window.Date.now(); if (lastUpdate) { var elapsed = (now-lastUpdate) / 1000; lastUpdate = now; // Update all game objects here. update(elapsed); // ...and render them somehow. render(); } else { // Skip first frame, so elapsed is not 0. lastUpdate = now; } // This makes the `tick` function run 60 frames per second (or slower, depends on monitor's refresh rate). window.requestAnimationFrame(tick); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var lastUpdate;
 
function tick() {
  var now = window.Date.now();
 
  if (lastUpdate) {
    var elapsed = (now-lastUpdate) / 1000;
    lastUpdate = now;
 
    // Update all game objects here.
    update(elapsed);
    // ...and render them somehow.
    render();
  } else {
    // Skip first frame, so elapsed is not 0.
    lastUpdate = now;
  }
 
  // This makes the `tick` function run 60 frames per second (or slower, depends on monitor's refresh rate).
  window.requestAnimationFrame(tick);
};

请注意,上面的例子中是非常简单。它使用可变时间增量 (已用的变量),并建议升级此代码以使用固定的增量时间。有关详细信息, 请参阅本文。

碰撞检测

碰撞检测是指发现物体之间的交点。这对于许多游戏是必不可少的, 因为它用来检测玩家击中墙壁或子弹击中敌人, 诸如此类等等。当检测到碰撞时, 它可以用于游戏逻辑设计中;例如, 当子弹击中玩家时, 健康分数会减少十点。

有很多碰撞检测算法, 因为它是一个性能繁重的操作, 明智的选择最好的方法是很重要的。要了解有关碰撞检测、算法以及如何实现它们的更多信息, 这里有一篇来自MDN 的文章。

粒子和粒子系统

粒子基本上是用粒子系统的精灵。在游戏开发中一个粒子系统是由粒子发射器和分配给该发射器的粒子组成的一个组成部分。它用来模拟各种特效,像火灾、 爆炸、 烟、 和下雨的影响。随着时间的推移微粒和每个发射器有其自身的参数来定义各种变量,用于模拟的效果,如速度、 颜色、 粒子寿命或持续时间,重力、 摩擦和风速。

欧拉积分

欧拉积分是运动的积分方程的一种方法。每个对象的位置计算基于其速度,质量和力量,并需要重新计算每个 tick 在游戏循环。欧拉方法是最基本和最有用的像侧滚动的射击游戏,但也有其它的方法,如Verlet 积分和 RK4积分,会更好地完成其他任务。下面我将展示一个简单的实现的想法。

你需要一个基本的结构以容纳对象的位置、 速度和其他运动相关的数据。我们提出两个相同的结构,但每一个都有不同的意义,在世界空间中︰ 点和矢量。游戏引擎通常使用某种类型的矢量类,但点和矢量之间的区别是非常重要的,大大提高了代码的可读性 (例如,您计算不是两个矢量,但这两个点之间的距离,这是更自然)。

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:有关HTML5的流言与真相,游戏开发基础的教程

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。