说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

开源HTML5游戏引擎Frozen背后的技术

HTML文档下载 WORD文档下载 PDF文档下载
Frozen是一款开源的HTML5游戏引擎,它诞生的目的就是为了将构建现代Web App中使用的技术,应用到游戏开发当中。那在实现这一目的时,有哪些技术在Frozen背后支持着呢?文中就为大家揭晓这些技术及它们所起的作用。

Frozen是一款开源的HTML5游戏引擎,通过工具和模块化实现了其简单易用和快速开发的优点,而且大多的主流浏览器皆支持这一游戏引擎。它诞生的目的就是为了将构建现代Web App中使用的技术,应用到游戏开发当中,比如AMD模块、依赖管理、构建进程以及项目脚手架。


Frozen背后的技术

那么,Frozen在实现这一目的的同时,存在其背后的技术又有哪些?下面要介绍的就是这些技术及它们在构建Frozen时所起到的作用:

  • Node.js和npm:作用于构建进程和开发工作流的依赖管理。
  • Grunt:开发工作流的task runner,允许单一入口点进行开发配置。
  • Volo:负责客户端的依赖管理和项目脚手架工具。
  • Lo-Dash:库内所使用的低级工具库。
  • Hammer.js:多点触控库,用于鼠标/触摸/指针事件标准化和手势。
  • dcl:用于生成构造函数和提供AOP的简便方法。
  • Box2d:用于游戏中的物理计算。
  • Dojo:用于AMD载入器和一些库内的公共模块,Dojo构建进程是用来构建一个单独的JS文件。
  • JSDoc:生成代码文档。
  • Jasmine:使用Jasmine行为驱动,拥有灵巧而明确的语法可以让你轻松的编写测试代码。
  • AMD:所有的模块都是使用AMD编写,且单层包括一个AMD模块加载器。

代码示例:

GameCore:

require(['frozen/GameCore'], function(GameCore){  // game state  var x = 0;  var y = 0;  //setup a GameCore instance  var game = new GameCore({    canvasId: 'canvas',    draw: function(context){      context.clearRect(0, 0, this.width, this.height);      context.fillRect(x, y, 50, 50);    },    update: function(millis){      x += 1;      y += 1;    }  });  //launch the game!  game.run();});
InputManager:

require(['frozen/GameCore', 'dojo/keys'], function(GameCore, keys){  var x = 100;  var y = 100;  var speed = 2.5;  //setup a GameCore instance  var game = new GameCore({    canvasId: 'canvas',    draw: function(context){      context.clearRect(0, 0, this.width, this.height);      context.fillRect(x, y, 50, 50);    },    initInput: function(){      //tells the input manager to listen for key events      this.inputManager.addKeyAction(keys.LEFT_ARROW);      this.inputManager.addKeyAction(keys.RIGHT_ARROW);      this.inputManager.addKeyAction(keys.UP_ARROW);      this.inputManager.addKeyAction(keys.DOWN_ARROW);    },    update: function(millis){      //just an example showing how to check for presses, could be done more effeciently      if(this.inputManager.keyActions[keys.LEFT_ARROW].isPressed()){        x-= speed;      }      if(this.inputManager.keyActions[keys.RIGHT_ARROW].isPressed()){        x+= speed;      }      if(this.inputManager.keyActions[keys.UP_ARROW].isPressed()){        y-= speed;      }      if(this.inputManager.keyActions[keys.DOWN_ARROW].isPressed()){        y+= speed;      }    }  });  //launch the game!  game.run();});
ResourceManager:

require(['frozen/GameCore', 'frozen/ResourceManager'], function(GameCore, ResourceManager){  var x = 0;  var y = 0;  var speed = 1;  //setup a ResourceManager to use in the game  var rm = new ResourceManager();  var backImg = rm.loadImage('images/background.png');  var nyan = rm.loadImage('images/nyan.png');  //setup a GameCore instance  var game = new GameCore({    canvasId: 'canvas',    resourceManager: rm,    draw: function(context){      context.drawImage(backImg, 0, 0, this.width, this.height);      context.drawImage(nyan, x, y);    },    update: function(millis){      x += speed;      y += speed;    }  });  //launch the game!  game.run();});
传送门:Frozen官网、mobilehub主页

备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘