怎么找淘宝客网站自媒体运营
动画版雪碧
我一直很喜欢网页游戏; 它们只是制作有趣,易于编码(大多数情况下),并且当用户只需要单击一个链接即可开始玩游戏时,游戏的可访问性就非常不错。
Ajax和移动的dom元素带来了一些乐趣,但是限制了您可以创造什么样的体验。 对于游戏开发者而言,情况正在Swift发生变化。 HTML5纯粹是在浏览器中引入了许多用于游戏开发的新选项,并且浏览器供应商正在争夺成为新标准的最佳平台的竞争。
因此,从游戏开发人员的角度来看,一切都朝着正确的方向发展:2D和3D硬件加速,高性能javascript引擎,集成的调试器和分析器,以及最重要的是,浏览器供应商正在积极争取成为最适合认真的人。游戏开发。
因此,这些工具变得可以使用,浏览器也可以使用,而供应商正在聆听,我们可以制作出很棒的游戏,对吗? 好吧,主要是。
HTML5 / Javascript游戏开发仍处于早期阶段,需要避免的陷阱以及选择部署哪种技术的选择。
在本文中,我将介绍一些开发2D游戏的选择,并希望为您提供一些使用HTML5开发自己的游戏的想法。
基础
您必须回答的第一个问题是是使用HTML5 Canvas标签绘制图像(场景图),还是通过操纵DOM元素。
要使用DOM进行2D游戏,您基本上可以动态调整元素样式以使其在页面中移动。 尽管在某些情况下DOM操作很好,但我将重点介绍使用HTML5画布进行图形处理,因为它是现代浏览器中最灵活的游戏。
如果您担心与较旧的浏览器和canvas兼容,请查看excanvas( http://excanvas.sourceforge.net/ )。
页面设置
要开始,您需要创建一个包含canvas标记HTML页面:
<!doctype html> <html> <head> <title></title> </head> <body style='position: absolute; padding:0; margin:0; height: 100%; width:100%'> <canvas id="gameCanvas"></canvas> </body> </html>
如果您对此进行加载,那么您将获得的收益不多。 这是因为虽然我们有一个画布标签,但是我们没有在其上绘制任何内容。 让我们添加一些简单的canvas调用来绘制一些框。
<head> <title></title> <script type='text/javascript'> var canvas = null; function onload() { canvas = document.getElementById('gameCanvas'); var ctx = canvas.getContext("2d"); ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#333333'; ctx.fillRect(canvas.width / 3, canvas.height / 3, canvas.width / 3, canvas.height / 3); } </script> </head> <body οnlοad='onload()' ...
在此示例中,我向body标签添加了onload事件绑定,然后实现了该功能以获取canvas元素并绘制一些框。 到目前为止足够简单。
这些框不错,但是您会注意到画布没有占据浏览器窗口的整个区域。 为了适应这种情况,我们可以通过在canvas标签中添加宽度和高度样式来设置其大小。 我更喜欢通过根据画布所包含的文档元素的大小调整大小来保持动态。
var canvas = null; function onload() { canvas = document.getElementById('gameCanvas'); canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; ...
重新加载,您会看到画布占据整个屏幕。 甜。
进一步介绍一下,如果用户调整了浏览器窗口的大小,让我们处理画布的大小调整。
var canvas = null; function onload() { canvas = document.getElementById('gameCanvas'); resize(); } function resize() { canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; var ctx = canvas.getContext("2d"); ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#333333'; ctx.fillRect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3); }
并将onresize调用添加到body标签。
<body οnresize='resize()' ...
现在,如果您调整浏览器的大小,矩形将很好地跟随。
加载图形

免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
大多数游戏都需要动画精灵,因此让我们添加一些图形。
首先,您需要获取图像资源。 由于我们将要在javascript中进行绘制,因此我发现在其中声明图像,然后将其src属性设置为要加载的图像的url是有意义的。 请下载此图片文件,该文件改编自SpriteLib GPL : simba.png
var img = null; function onload() { ... img = new Image(); img.src = 'simba.png'; }
然后可以通过将其添加到resize方法来绘制图像:
ctx.drawImage(img, canvas.width/2 - (img.width/2), canvas.height/2 - (img.height/2));
如果您随后重新加载页面,则在大多数情况下,您会看到一个图像。 我说大多数情况是因为这取决于您的计算机的运行速度以及浏览器是否已经缓存了图像。 这是因为在您开始加载图像(设置其src属性)与浏览器准备就绪之间,将调用resize方法。 对于一两个图像,您可能会一无所获,但是一旦您的游戏扩展,您将需要等到所有图像加载完毕后才能采取行动。 要等待,请将通知侦听器添加到图像,以便在图像准备就绪时获得回调。 我必须重新整理一下内容才能使它们全部正常工作,所以这里是完整的更新代码:
var canvas = null; var img = null; var ctx = null; var imageReady = false; function onload() { canvas = document.getElementById('gameCanvas'); ctx = canvas.getContext("2d"); img = new Image(); img.src = 'images/simba.png'; img.onload = loaded(); resize(); } function loaded() { imageReady = true; redraw(); } function resize() { canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; redraw(); } function redraw() { ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, canvas.width, canvas.height); if (imageReady) ctx.drawImage(img, canvas.width/2 - (img.width/2), canvas.height/2 - (img.height/2)); }
结果应该是:
此图显示了一个吸血鬼小猫的6个跑步帧(嗯,这就是我认为的样子)。 要为子画面设置动画,我们需要一次绘制一个帧。
雪碧动画
您可以使用drawImage调用的源参数绘制单个框架。 实际上,仅绘制源图像的约束部分。 因此,要仅绘制第一帧,请使用drawImage的扩展版本,让我们在源图像中指定一个矩形。 由于我们的猫动画是由6个帧组成的,每个帧的大小为96 x 96像素,因此我们可以执行以下操作:
ctx.drawImage(img, 0, 0, 96, 54, canvas.width/2 - 48, canvas.height/2 - 48, 96, 54);
这里的关键是起始0, 0, 96, 54
。 这限制了将图像绘制到我们猫动画的第一帧。 我还将中心调整为也基于单个帧(48秒),而不是基于包含所有六个帧的整个图像尺寸。
现在好玩的一点。 为了使动画工作,我们需要跟踪要绘制的帧,然后随着时间的推移提前帧号。 为此,我们需要从静态页面转到定时循环的页面。
让我们以老式的方式开始。 添加一个间隔定时器,其周期时间等于每秒60帧(1000毫秒除以60)。 为确保仅在加载图像后才开始循环播放动画,请将调用放入已加载的函数中:
function loaded() { imageReady = true; setTimeout( update, 1000 / 60 ); }
然后添加更新功能可以使框架前进,并要求重绘:
var frame = 0; function update() { redraw(); frame++; if (frame >= 6) frame = 0; setTimeout( update, 1000 / 60 ); }
并条机前进后,将再次设置超时时间。
接下来,修改绘制图像以根据我们要绘制的帧移动源窗口(关键部分是源X的位置设置为帧乘以帧的大小(在本例中为frame * 96):
function redraw() { ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, canvas.width, canvas.height); if (imageReady) ctx.drawImage(img, frame*96, 0, 96, 54, canvas.width/2 - 48, canvas.height/2 - 48, 96, 54); }
结果:
我们邪恶的不死吸血鬼凯蒂生活! 甚至达到超级猫的速度。
现在我们有了动画,我们将在后天的第二部分中进行一些改进。
本文最初出现在BuildNewGames.com上 ,该网站是Bocoup和Internet Explorer团队的合作。
翻译自: https://www.sitepoint.com/sprite-animations-vampire-kitty-lives/
动画版雪碧