用CreateJS构建 Atari

分享于 

36分钟阅读

Web开发

  繁體

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

This recently Arcade Arcade Arcade Arcade Arcade Arcade and and and and and and。

to是最需要的游戏开发项目,因为在许多现代浏览器和设备上,我们不能完成 CreateJS。 我们从头开始重新构建这些游戏,我们可以在一年前的一半时间内完成这项工作。 从设计到代码,从设计到代码,所有的仿真都是完全原始的,在 HTML5.CSS3和JS中。 这也很有趣。

这会给你提供一些最佳的游戏实践- 我们如何使用这套工具来构建我们的现代街道。 实际上,我们已经做了数百种增强,可以在 GitHub上使用开放源码的代码。 它包括预先加载的游戏模板,预先设定的触摸控制,效果,得分助手和一些预先构建的库,用于基本的冲突和物理。

this IE 10的新功能和性能来自,允许人们在网络上以全新的方式互动- - Windows 8平板设备。 像小行星和导弹命令这样的游戏经典是展示触摸第一网可能看起来像什么的完美画布。

减少猜测,LESS 搜索

我们的任务是设计和开发一个小型游戏库,展示HTML5在 touch中所提供的最好 that 10. 我们目的是维护原来的in标题的灵魂,现现现代化视觉。动画和游戏的最新标准。

这提供了一个机会,可以按照它的预期方式使用 CreateJS: 吸收繁重和昂贵的HTML5开发相关的繁重提升,为构建现代网站交互内容的开发者提供一种简单。熟悉的方法。

奖金:我们可以和Atari一起工作。

游戏设计和开发需要灵活。灵活和并行执行- 尽可能少地陷入解决 跨浏览器 限制和不一致问题的时间。 它的轻量级hood提供了浏览器特定的敏感性,具有优先级和优雅的回退,可以消除你的技术方法的疑虑,并缩短了与测试和调试相关的时间。

如果这是你第一次听到 CreateJS,看看她的神经:

  • EaselJS: 基于 HTML5 Canvas 管理子画面。动画。矢量和位图图形以及用户交互( 包括多触摸)的库。 它使用了一个显示列表概念,该概念在 Flash 中提供。
  • TweenJS: 一个简单的链引擎,它在一段时间内转换数值或者非数值。 它可以用于 EaselJS,也可以用于自己的。
  • SoundJS: 音频播放引擎,允许使用基于用户的功能的各种方法播放声音。
  • PreloadJS: 考虑到资产。视频。声音。JS。数据或者whatevs的预加载之外的猜测。

Atari Arcade补充CreateJS为开发者提供许多额外的工具。

  • 用于实例化和控制游戏的框架,包括处理游戏场景。暂停。高分条目和显示,以及更多的游戏。
  • 游戏预加载的资产定义。
  • 用户输入( 键盘。鼠标。触摸和多玩家输入),包括skinnable控件。
  • 常用字符串。数学。碰撞实用程序和一些效果库的代码库。

使用CreateJS和 Atari,你的基本客户端游戏开发基地被覆盖。 如果来自 Flash background,EaselJS和CreateJS套件的它的余部分提供了一种熟悉而可以靠的方法来开发 IE 10和它的他现代浏览器。

如果你想在HTML5中构建游戏,实际上没有更好的工具可以开始。

EaselJS - 更容易的画布

EaselJS是CreateJS套件的核心,同样,它也成为每个游戏的核心。

游戏的所有可视元素都呈现到EaselJS阶段,每 16毫秒就会重画一次。 这个中心心跳或者"滴答"由EaselJS定标器自动处理,它将对文本。位图。矢量形状和动画的任何更改呈现到 HTML5 Canvas ( 这是很好的支持和硬件加速,在现代浏览器如 10.)。

游戏的可视元素可以是EaselJS提供的任何显示对象。 每个提供的功能都需要乏味地创建。

核心功能

提供简单的显示对象( 位图,图形和文本),为控制舞台上可见对象的位置。转换。不透明度。过滤器。可见性和其他特性提供了一种简单的方法。 元素可以使用容器组合和转换。

// Create a container (group)var container = new createjs.Container();// Transform and rotate. Any children will be affected.container.x = 100;
container.rotation = 5;// Create a shapevar shape = new createjs.Shape(
 new createjs.Graphics().beginFill("#999").drawRect(0,0,50,50)
);// Create an imagevar bitmap = new createjs.Bitmap("path/to/image.png");
bitmap.x = 100;// Create some textvar text = new createjs.Text("Hello World", "24px Arial", "#990000");
text.x = 200;// Add it all to the container, which is then put on the stage.container.addChild(shape, bitmap, text);
stage.addChild(container);

这种方法可以在不使用画布上下文的情况下轻松创建。更新和删除游戏( 例如精灵。控制和游戏横轴) 中的元素。

演示代码:

<scripttype="text/javascript">var particleStage; // Stagevar particleImage; // Particle spritevar particles = [];
 var emitterPoint = new createjs.Point(290, 195); // Point in container to spawn particles. window.addEventListener("load", initParticles, false)
 function initParticles() {
 particleStage = new createjs.Stage(document.getElementById("particleCanvas"));
 initDemo("particles", particleStage, startParticles, stopParticles);
 }
 function startParticles() {
 particleImage = new Image();
 particleImage.src = "assets/atariLogo.png";
 createjs.Ticker.addListener(particleTick);
 }
 function stopParticles() {
 createjs.Ticker.removeListener(particleTick);
 particles.length = 0;
 }
 function particleTick() {
 if (particles.length <30) {
 var p = new createjs.Bitmap(particleImage);
 p.regX = 25;p.regY = 28;
 particleStage.addChild(p);
 initParticle(p);
 particles.push(p);
 }
 for(var i = 0, l = particles.length; i < l; i++) {
 var p = particles[i];
 p.x += p.vx;
 p.y += p.vy;
 p.vy += 0.9;
 p.alpha *= 0.94;
 p.rotation = Math.atan2(p.vy, p.vx) * 180/Math.PI + 180;
 if (p.y >220 || p.alpha <0.01) {
 initParticle(p);
 }
 }
 particleStage.update();
 }
 function initParticle(p) {
 p.x = emitterPoint.x; p.y = emitterPoint.y;
 p.vx = Math.random() * 30 - 15;
 p.vy = Math.random() * -20;
 p.alpha = 1;
 p.scaleX = p.scaleY = 1;
 }</script>

2.简化而强大的图形层,允许使用熟悉的api创建矢量图形实例,连接代码友好。

// A Graphics object that represents the Atari Logo.// Each graphic command is chained to the previous one.var logo = new createjs.Graphics()
. beginFill("#ff0000")
. moveTo(37,3).lineTo(41,3).lineTo(41,23)
. quadraticCurveTo(41,62,8,68)
. lineTo(8,59).quadraticCurveTo(37,53,37,3).cp()
. dr(44,3,10,65)
. moveTo(61,3).lineTo(57,3).lineTo(57,23)
. quadraticCurveTo(57,62,90,68)
. lineTo(90,59).quadraticCurveTo(61,53,61,3).cp()

演示代码:

<scripttype="text/javascript"> window.addEventListener("load", graphicsInit, false)
 function graphicsInit() {
 var stage = new createjs.Stage(document.getElementById("graphicsCanvas"));
 // Create a Graphics on the Atari Fuji Logovar logo = new createjs.Graphics()
. f("#f00")
. mt(37,3).lt(41,3).lt(41,23).qt(41,62,8,68).lt(8,59).qt(37,53,37,3).cp()
. dr(44,3,10,65)
. mt(61,3).lt(57,3).lt(57,23).qt(57,62,90,68).lt(90,59).qt(61,53,61,3).cp()
 // Draw 5 shapes using the same graphics.for (var i= 0; i<5; i++) {
 var s = new createjs.Shape(logo);
 s.x = 10+(i*110);
 s.y = 10;
 s.scaleX = s.scaleY = 1.2;
 stage.addChild(s);
 }
 // Redraw the stage one time. stage.update();
 }</script>

3。基于spritesheets的框架动画非常适合将动画的资产组合到一个图像中,只需加载一次。

{"frames":{
 "width":52,
 "height":60"regX":0,
 "regY":0,
 "count":56,
}, "animations":{
 "CentipedeBodyWalk":[14, 26],
 "CentipedeWalk":[42, 55],
 "CentipedeButtWalk":[0, 12],
 "CentipedeBodyAltWalk":[28, 40],
 "CentipedeBodyWalkDown":[27, 27],
 "CentipedeButtDown":[13, 13],
 "BodyDown":[41, 41]
}, "images":["530428/centipede-article.png"]}

Pro提示

  • Spritesheets可以包含sprite的单个动画,但也可以在单个定义中包含多个子画面的信息,跨越多个PNG文件。
  • 一种新的gskinner.com, Omega,使用独立的alpha通道来提供图像的透明度,这可以节省图像的透明度,这会带来巨大的节省。
  • web服务 Flash Toolkit可以导出矢量数据,可以使用SpriteSheetBuilder文件节省到 spritesheets,并运行时性能提高,从而可以导出矢量数据。

4.图形和容器级缓存提供更好的性能,GPU支持,以及随时间动态组合纹理的能力。 另外,EaselJS SpriteSheetBuilder 类可以生成"运行时间"spritesheets,从而节省矢量图形的大小,它具有位图缓存和硬件加速的运行时间优势。

// Each time a shot is fired, the game stamps it into the arena.function explodeShot(shot) {
 var stamp;
 // Determine the right stamp. The stamp is an EaselJS bitmap// Reuse instances, rather than creating new ones each time.if (shot.hitSomething) {
 stamp = this.craterStamp;
 } else {
 stamp = this.explosionStamp;
 }
 // Position the shot stamp.x = shot.x();
 stamp.y = shot.y();
 // Set some random scale/rotation stamp.scaleX = stamp.scaleY = 0.5 + Math.random() * 0.5;
 stamp.rotation = Math.random() * 360;
 // Stamp the shot in the arenathis.arena.stamp(stamp);
}// The Arena.js contains the stamp methodfunction stamp(stamp) {
 // Clear out any old children. They aren't drawn so they// only get removed when we want to stamp something new.this.groundLayer.removeAllChildren();
 // Stamp the new sprite on top of existing cachethis.groundLayer.addChild(stamp);
 // Using source-over, it just applies on topthis.groundLayer.updateCache("source-over");
}

它没有结束。EaselJS是CreateJS套件的最成熟部分,并且在这里项目期间有许多更新和引入。

示例:超级中断

下面是所有不同显示对象的简单展示。 超级突破利用以下功能:

  • 计分板的文本
  • 各种球的图形
  • 球轨迹的单一位图
  • 用于paddle和砖块的SpriteSheets
  • 用于spark效果的缓存图形

用户交互

什么是伟大的概念,伟大的艺术,伟大的动画,成为一个伟大的游戏是用户交互。 幸运的是,HTML和Javascript长期以来一直支持一种健壮的鼠标交互模型。 然而,在HTML5中使用画布的本质在这个模型中引入了相当大的。 下面是原因:

当游戏呈现给 HTML5 Canvas 时,所有鼠标交互都被单个对象捕获: 在画布上单击单个对象并将( 平展) 与该单个平面画布中的所有其他像素组合在一起,没有预先设计的支持。

EaselJS是为你做的。 用户交互被转换为像素完美的点击检测,以高性能和直接的方式。 这就是EaselJS阶段的本质: 它将绘图之间的间隙连接到一个平面画布,并提供有利于设计用户交互响应的有用信息。

示例:多触控支持

新的浏览器创新如 IE 10和 Mobile Safari 提供强大的easy-to-use触摸 api。 直到最近,EaselJS只是简单的单一输入支持。 这个项目是添加多触摸支持需要的催化剂,现在包括 out-of-the-box,不需要在你的部件上添加任何额外的代码。 不同的浏览器在不同的方式支持多种触摸(。遵循不同的api ),但是如果你使用 EaselJS,则不必担心。 我们将 跨浏览器的不一致性抽象成一个简单的实现。

演示代码:

<script>// DRAG AND DROP DEMOvar dragStage;
 var dragUpdate = true;
 window.addEventListener("load", initDragDemo, false);
 function initDragDemo() {
 // create stage and point it to the canvas:var canvas = document.getElementById("dragCanvas");
 dragStage = new createjs.Stage(canvas);
 initDemo("dragAndDrop", dragStage, startDragDemo, stopDragDemo);
 }
 function startDragDemo() {
 // enable touch interactions if supported on the current device: createjs.Touch.enable(dragStage);
 // enabled mouse over/out events dragStage.enableMouseOver(10);
 dragStage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas// load the source image:var image = new Image();
 image.src = "assets/arcadeIcon-black.png";
 image.onload = handleDragImageLoad;
 }
 function stopDragDemo() {
 createjs.Ticker.removeListener(dragTick);
 createjs.Touch.disable(dragStage);
 }
 function handleDragImageLoad(event) {
 var image = event.target;
 // create and populate the screen with random images:for(var i = 0; i <30; i++){
 var bitmap = new createjs.Bitmap(image);
 bitmap.regX = 48;
 bitmap.regY = 65;
 dragStage.addChild(bitmap);
 bitmap.x = 580 * Math.random()|0;
 bitmap.y = 200 * Math.random()|0;
 bitmap.rotation = 360 * Math.random()|0;
 // wrapper function to provide scope for the event handlers: bitmap.onPress = handleDragPress;
 }
 createjs.Ticker.addListener(dragTick);
 dragStage.update();
 }
 function handleDragPress(event) {
 var target = event.target;
 // bump the target in front of it's siblings: dragStage.addChild(target);
 dragUpdate = true;
 // add a handler to the event object's onMouseMove callback// this will be active until the user releases the mouse button:event.onMouseMove = function(moveEvent) {
 target.x = moveEvent.stageX;
 target.y = moveEvent.stageY;
 // indicate that the stage should be updated on the next tick: dragUpdate = true;
 }
 }
 function dragTick() {
 // this set makes it so the stage only re-renders when an event handler indicates a change has happened.if (dragUpdate) {
 dragUpdate = false; // only update once dragStage.update();
 }
 }
 </script> <canvas id="dragCanvas" width="580" height="200"></canvas>
var button = new createjs.Bitmap(imagePath);// Standard display object mouse eventsbutton.onPress = handlePress;// Simple drag and drop. The events are automatically removed for you.function handlePress(event) {
 event.onMouseMove = handleDrag;
}
function handleDrag(event) {
 button.x = event.stageX;
 button.y = event.stageY;
}

示例:触摸控件

对于 of,我们还对用户对触摸交互所需的一般性进行了深入的研究,并试图提供框架解决方案。 在小行星中使用的游戏杆组件,yar。of和战斗,跟踪一个定义的区域中的鼠标交互。

// Initialization is a great time to set up touch controlsfunction initialize(stage, assets, gameInfo) {
 if (gameInfo.touchEnabled) {
 // Create a joystick. There are lots of awesome// configurations, but this is all you need to get// started. Check out the docs for options!var joystick = new GameLibs.Joystick(stage);
 joystick.setPosition(25, 25);
 stage.addChild(joystick);
 }
}

TweenJS - 摆动,脉冲或者幻灯片

游戏中大多数核心交互和动画都使用编程动作来响应不断改变的鼠标或者键盘输入。 然而,游戏( 过渡,计时动画,滴答计分,等等。)的它的他方面需要更可以预测的动画类型,一个由by引擎填充的角色。

TweenJS采用了通用的"move-this-from-here-to-there"for方法,并增加了强大的链接,使得游戏动画和事件的。 很容易用几行代码来控制复杂的动画队列。 为了让交易更加轻松,我们可以轻松地在,链的任意点注入函数调用。

<!-- TweenSample demo --><script>var tweenStage;
 var yar;
 window.addEventListener("load", initTweenSample, false);
 function initTweenSample() {
 tweenStage = new createjs.Stage(document.getElementById("tweenSampleCanvas"));
 initDemo("tween", tweenStage, startTweenDemo, stopTweenDemo);
 }
 function startTweenDemo() {
 // Create a spritesheet manually.var ss = new createjs.SpriteSheet(
 {
 frames:{
 regX:0, regY:0,
 count:2,
 width:103, height:81 }, images:["assets/yar.png"]
 }
 );
 // Create a bitmap animation, and put it on stage. yar = new createjs.BitmapAnimation(ss);
 yar.x = 50;
 yar.gotoAndStop(0);
 tweenStage.addChild(yar);
 // Tween the character back and forth, turning the eyes on and off. createjs.Tween.get(yar, {loop:true})
. wait(3000)
. call(yar.gotoAndStop, [1], yar) // red eyes. wait(300)
. to({x:430}, 1200, createjs.Ease.backInOut) // move. call(yar.gotoAndStop, [0], yar)
. wait(3000)
. call(yar.gotoAndStop, [1], yar)
. wait(300)
. to({x:50}, 1200, createjs.Ease.backInOut)
. call(yar.gotoAndStop, [0], yar);
 // Hover the character up and down createjs.Tween.get(yar, {loop:true})
. to({y:20}, 500, createjs.Ease.quadInOut)
. to({y:0}, 500, createjs.Ease.quadInOut);
 // Update the stage to reflect changes. createjs.Ticker.addListener(tweenStage);
 }
 function stopTweenDemo() {
 createjs.Tween.get(yar, {override:true});
 createjs.Ticker.removeListener(tweenStage);
 yar = null;
 }
 </script> <canvas id="tweenSampleCanvas" width="580" height="100"class="demo"></canvas><!-- snippet: tweenSample.js -->
// Tween the character back and forth, turning the eyes on and off.createjs.Tween.get(yar, {loop:true})
. wait(3000)
. call(yar.gotoAndStop, [1], yar) // red eyes. wait(300)
. to({x:450}, 1200, createjs.Ease.backInOut) // move. call(yar.gotoAndStop, [0], yar)
. wait(3000)
. call(yar.gotoAndStop, [1], yar)
. wait(300)
. to({x:50}, 1200, createjs.Ease.backInOut)
. call(yar.gotoAndStop, [0], yar);// Hover the character up and downcreatejs.Tween.get(yar, {loop:true})
. to({y:20}, 500, createjs.Ease.quadInOut)
. to({y:0}, 500, createjs.Ease.quadInOut);

TweenJS不仅限于显示对象属性,也不限于。 它可以重复任何事情。 例如游戏中的所有记分板都使用SDK中包含的ScoreManager库- 它有一个简单的API: setScore()。一旦分数改变,TweenJS将在指定的持续时间内转换得分,而没有任何代码。

// Each time score is added, tween the value.function addScore(score) {
 // Save the new scorethis.newScore = score;
 // Create a tween that will update the"displayScore", which// we use to display the changing number.var tween = createjs.Tween.get(this).to({displayScore:score}, 800);
 // For this example, set a local"scope" so the onChange// callback has something to refer to.var scope = this;
 // As the tween runs, it will call"onChange" tween.onChange = function(tween) {
 // Update the text instance with"displayScore". scope.text.text = scope.displayScore;
 }
}// The"ScoreManager" abstracts the score formatting and tweening.function killEnemy(points) {
 this.scoreManager.addScore(points);
}

演示代码:

<!-- ScoreManager demo --><script> window.addEventListener("load", initScoreManager, false);
 var scoreStage;
 var displayScore = 1000;
 var actualScore = 1000;
 function initScoreManager() {
 // Create the EaselJS stage scoreStage = new createjs.Stage(document.getElementById("scoreManagerCanvas"));
 initDemo("score", scoreStage, startScoreDemo, stopScoreDemo);
 }
 function startScoreDemo() {
 // Create a text field the score can live invar label = new createjs.Text("0", "40px Arial", "#f00");
 label.textBaseline = "top";
 scoreStage.addChild(label);
 // Create some simple instructions.var instructions = new createjs.Text("click the stage to add some points.", "12px Arial", "#999");
 instructions.textBaseline = "top";
 instructions.y = 45;
 scoreStage.addChild(instructions);
 // On stage mouse down, add some random points. scoreStage.onMouseDown = function() {
 var points = Math.random() * 1000 | 0;
 actualScore += points;
 createjs.Tween.get(window, {override:true})
. to({displayScore:actualScore}, 3000, createjs.Ease.quartOut)
. onChange = function() {
 var t = displayScore | 0;
 label.text = t;
 };
 }
 createjs.Ticker.addListener(scoreStage);
 }
 function stopScoreDemo() {
 createjs.Ticker.removeListener(scoreStage);
 }
 </script> <canvas id="scoreManagerCanvas" width="580" height="100"></canvas>

我们不能夸大我们用TweenJS开发街机游戏的多大程度。 从超级破裂中转换瓦片,重新设置在战斗中的罐子,TweenJS提供了一种简单而可以靠的方法。 因为它被绑定到 CreateJS,所以with只是暂停和继续游戏。

其他一些示例包括:

  • 在超级爆破中启动和 Flash,包括链接到每个 Flash 之间播放声音的呼叫。
  • 在乒乓和超级爆破中,转换和出现冲击器
  • 乒乓球得分时的烟火动画
  • 启动新生命时启动和 Flash 飞船中的飞船
  • 蜈蚣中的水平文字和得分
  • 蜈蚣仿生动画与蘑菇修复
  • 蜈蚣白天夜班
  • 触摸控制( 操纵杆和推力) 位置重置
  • 月球着陆器的延迟游戏
  • 月球着陆器中的旋转推进器

我们甚至在街机选取器导航中使用它,你可以选择游戏来将栏重新定位到它的位置。

最后一个提示是,因为我们的游戏都是一个单一的心跳,因这里TweenJS是延迟函数调用的重要替代。 这使得我们有计时事件链,而不用关心像用户暂停游戏一样的事情。

function killPlayer() {
 // Create a tweenvar tween = createjs.Tween.get(this.player).wait(100);
 for (var i= 0; i<5; i++) {
 // Tween in and out the player five times tween.to({alpha:1}, 200)
. to({alpha:0}, 600, createjs.Ease.quadOut);
 }
 // After 2 seconds, show a dialog.// After another 3, hide it, and restart the game. createjs.Tween.get(this)
. wait(2000)
. call(this.showGameOverDialog, null, this)
. wait(3000)
. call(this.hideGameOverDialog, null, this)
. call(this.restartGame, null, this);
}

PreloadJS - 覆盖你的资产

我们可以在CreateJS中很大程度上隐藏在中。 使用资产清单( 描述资产及其位置的简单XML文件),站点框架使用 PreloadJS插件自动下载和管理游戏所需的资产。 这包括脚本( 它们被注入到 HTML DOM中)。音频。图像和JSON数据,这些数据被传递到游戏中。

即使我们在这个项目上,PreloadJS也是上帝。 预加载是JavaScript中最碎片。不可以预测的"needs-a-fallback-approach"技术之一,库将它全部包装到一些简单的API调用中。 开发者认为浏览器是否支持XHR是不重要的,需要响应。深奥的标题或者其他有趣的解决方案。 只要点一些资产,然后。 最新的浏览器使用粒度数据获得奇异的进度事件,而旧的浏览器则会加载。

一旦资产被加载,一个JavaScript对象就会在开始之前被传递给游戏。 可以使用游戏 Manifest 提供的for访问资产,包括对实际加载内容的引用,而不必担心等待负载。

示例:在游戏中使用加载的资产。

// The game manifest includes an imagevar assets = [
 {id:"projectile", src:"images/projectile.png"}
];// Inside the game, we just do thisfunction initialize(assets, stage) {
 var bitmap = new createjs.Bitmap(assets.projectile);
 stage.addChild(bitmap);
}

SoundJS - 甜蜜情感

游戏里的声音让它变得完整。 我们在建筑蜈蚣时,游戏没有这种感觉,因为我们记得孩子们在我们老的dusty控制台上玩的游戏( 嘿,我们不是 )。 添加声音和 background 轨迹会激起情绪。

我们与Washingtron公司的美妙艺术家合作,为游戏创建一套很好的声音,并且无时间实现它们。 实际上,大部分时间是专门用来确定什么时候播放声音的,而不是如何。 对于浏览器功能。所需格式和回退场景,任何猜测都会被覆盖,并且任何故障情况都可以设置。

<script>var audioDemoIndex = 0;
 var audioLabel;
 var audioStage;
 window.addEventListener("load", initAudioDemo, false);
 function initAudioDemo() {
 audioStage = new createjs.Stage(document.getElementById("audioDemoCanvas"));
 initDemo("audio", audioStage, startAudioDemo, stopAudioDemo)
 }
 function startAudioDemo() {
 audioDemoIndex = 0;
 audioLabel = new createjs.Text("Loading", "40px Arial", "#f00");
 audioStage.addChild(audioLabel);
 var loader = new createjs.PreloadJS(true);
 loader.installPlugin(createjs.SoundJS);
 loader.onComplete = playAudioLevel;
 loader.loadFile({id:"win", src:"assets/LevelComplete.mp3|assets/LevelComplete.ogg", data:3});
 audioLabel.text = "Loading...";
 audioStage.update();
 }
 function stopAudioDemo() {
 createjs.Tween.get(window, {override:true}).wait(10);
 }
 function playAudioDemo() {
 audioDemoIndex++;
 createjs.SoundJS.play("win");
 if (audioDemoIndex> 3) {
 audioLabel.text = "Game Over! Click to start again!";
 audioDemoIndex = 1;
 } else {
 audioLabel.text = "Click to Play Level" + audioDemoIndex;
 }
 audioStage.onMouseDown = playAudioLevel;
 audioStage.update();
 }
 function playAudioLevel() {
 audioStage.onMouseDown = null;
 audioLabel.text = "Playing Level" + audioDemoIndex + "...";
 createjs.Tween.get(window)
. wait(1500).call(playAudioDemo);
 audioStage.update();
 }</script><canvasid="audioDemoCanvas"width="580"height="100"></canvas>

SoundJS透明地管理音频作为插件的预加载- 直接向下到确定要根据浏览器加载哪些音频。 这是不可能的。

Pro提示:

  • 标签加载音频并不优雅- 但它更好的支持,并且可以与跨域或者本地测试一起使用。
  • 在游戏清单中,只定义一个 MP3。 只要包含了它的他文件名( 然而,不同的文件扩展名)的音频文件格式,SDK将负责根据用户的浏览器加载相应的文件。

目前我们在HTML5音频 landscape 中所面临的唯一限制是在iOS上。 尽管可以播放音频( 单声音,点击),但是我们无法在任何地方播放多倍声音。 未来是明亮的- - 我们应该在 iOS 6中使用 WebAudio,SoundJS将准备支持它 !

任何熟悉 gskinner.com的人都知道我们来自强大的Flash background。 即使我们在这些新技术上工作,我们仍然认识到 Flash的优势。 our的作品设计了很多画家和 Photoshop,但对于时间线或者角色动画来说没有更好的工具,good Flash Pro Pro。

我们的另一个爱好是工具开发。 如果你可以在这里时构建一个工具,为你做一个任务,为什么要进行 1000次?

Flash 中的动画可以在微风中被吐出 spritesheets。 我们还提供了一个脚本帮助将资产组合成一个单独的包。

蜈蚣蜈蚣示例

游戏的主要攻击者和名字,可以用简单的spritesheet表示,行走周期水平和垂直。 final 游戏spritesheet与它的余的资产和"假死动画"结合在一起,当霓虹机满足他的结束时。

但它并没有结束。 数学 !

<script>var spriteStage;
 var centipede;
 window.addEventListener("load", initSpriteDemo, false);
 function initSpriteDemo() {
 spriteStage = new createjs.Stage(document.getElementById("spriteCanvas"));
 initDemo("sprite", spriteStage, startSpriteDemo, stopSpriteDemo);
 }
 function startSpriteDemo() {
 // Define the JSON datavar json = {
 "frames": {"regX": 0, "width": 52, "regY": 0, "count": 56, "height": 60},
 "animations": {"bodyWalk": [14, 26], "headWalk": [42, 54], "tailWalk": [0, 12], "bodyAltWalk": [28, 40]},
 "images": ["assets/centipede-article.png"]
 };
 // Create the spritesheet and pass in data. spriteSheet = new createjs.SpriteSheet(json);
 // Create a centipede container to control centipede = new createjs.Container();
 // Create 10 centipede pieces.for (var i= 0; i<10; i++) {
 var piece = new createjs.BitmapAnimation(spriteSheet);
 // Choose the right pieceif(i==0) { piece.gotoAndPlay("headWalk"); }
 elseif(i==9) { piece.gotoAndPlay("tailWalk"); }
 elseif(i%2==1) { piece.gotoAndPlay("bodyWalk"); }
 else { piece.gotoAndPlay("bodyAltWalk"); }
 // The centipede is right-aligned. piece.x = -i*30 - 30;
 centipede.addChild(piece);
 }
 spriteStage.addChild(centipede);
 createjs.Ticker.addListener(spriteTick);
 }
 function stopSpriteDemo() {
 createjs.Ticker.removeListener(spriteTick);
 }
 // Each tick, move the centipede. Once it reaches the end, it loops back. function spriteTick() {
 centipede.x = (centipede.x + 8) % 880;
 spriteStage.update();
 }
 </script> <canvas id="spriteCanvas" width="580" height="100"></canvas>

播放时间

CreateJS为游戏开发人员提供了一种适合他们的体系结构方法,同时维护开发的沙箱。 插件免费基于web的游戏和应用程序开发仍然是一个rocky的,而CreateJS旨在减少进入游戏的障碍。

当我们与令人关注的:和游戏框架相结合时,开发人员可以使用浏览器兼容性和方法。 游戏。

接下来

  • 阅读我们关于使用SDK开发游戏的文章。 在构建一个游戏时,包括一些技巧和技巧,我们在开发第一组游戏时使用的技巧和技巧。
    游戏开发与Atari街机 SDK。
  • 访问Arcade库,下载 SDK。文档和快速入门指南。
    在GitHub上的街机 SDK。
  • 开始播放 !

资源

下面是关于HTML5游戏开发的一些附加资源和参考。


构建  Building  ata  Createjs