Question

我正在使用Pixijs库进行一些研究，我觉得这很棒。我还会看看fabricjs，它似乎占用空间更小。

我已经和Angularjs合作了一段时间了，我喜欢惯例，而不是每次都在每个项目中花时间进行配置，每次都以不同的方式组织代码。

我想听听一些身体经验的Pixijs（或类似的）使用框架来组织代码。

我理解Angularjs是MVVM，但请告诉我您可能会想到的任何提示或建议吗？

到目前为止我做了一些研究，脑子里出现了一些问题，比如Browserify（我确实相信惯例，而不是像我之前提到的那样配置，也许这不是最好的工具对我来说。）

http://www.pixijs.com

非常感谢！

Answer 1

有点老问题，但这是我在开始使用PIXI时自己寻找的东西，所以我希望它可以帮助某人开始。

我使用Revealing module pattern并将应用程序分离到单独的文件/模块中，然后使用Browserify创建应用程序包。 HTML会加载源自app.js源代码的app.js包。

index.html ：在<head>中加载您的libs（PIXI等人），然后在app.js中加载<body>。

app.js 来源示例：

(function() {
  // App.js is the "bootstrap" that loads dependencies, takes care of pre-loading etc. 
  // I have a template of this which I copy into any new project and use as a checklist.

  var core = require("./core.js"); // Use a dummy module as application-wide namespace for easy access

  // Any external modules (f eg node modules) could go here 
  core.utilityLib = require("node-lib");

  // Application modules here
  core.myModule = require("./myModule.js");
  // core.myModule2 = require("./myModule2.js"); // .. you get the idea

  // Our main application module
  core.main = require("./main.js");

  // Init function to run when DOM/scripts have loaded
  var init = function() {

    // I have a generic screen module which sets up PIXI renderer depending on device compatibility using Modernizr (or weapon of choice). To keep it simple for the sake of the example, lets just create our renderer directly: 
    core.renderer = PIXI.autoDetectRenderer(screen.innerWidth,screen.innerHeight,{resolution:window.devicePixelRatio});

    // I also use a generic loader module that wraps PIXI.loader, taking a list of assets from a config file. Let's just call PIXI.loader directly for now:       
    PIXI.loader
      .add({name:"myasset",url:"/myasset.png"})
      .on('progress', loadProgressFunction)
      .once('complete',loadCompleteFunction) 
    })
    .load();
  }
  window.onload = init; // Tell browser to call init function when loaded

  // Optional loading progress bar
  var function = loadProgressCallback(e) {
  }

  // Call when mandatory assets has been loaded
  var loadCompleteFunction = function() {
    myModule.init(); // Init any mandatory modules, f eg to instantiate a player
    main.init(); // Tell our main application/game module that we're ready to do fancy stuff
  }

  // Method to make things move
  var animate = function() {
    // Send juice to modules that needs to be juiced (or use a ticker module on per-module basis).
    // core.main.animate(); 
    requestAnimationFrame(animate); 
  } 
  requestAnimationFrame(animate); // See comment below
}());

评论：PIXI有一个内置的requestAnimationFrame别名来处理后备。如果不使用PIXI，您可以使用Paul Irish'gist。

core.js ：

module.exports = {}; // Just a dummy object to create a module scope that all the modules 
// can use to communicate with each other, without running into circular reference problems

main.js ：

// Main application/game module
module.exports = (function() {
  // Dependencies
  var core = require("./core.js"); // This way we can easily access all the necessary modules

  // Exports
  var exports = {}; // Everything put into this object will be "public"

  // Vars
  var stuff = 1; // Module vars

  exports.init = function() {
    // Application magic starts here :)
  }

  // Some other public method ...
  exports.publicMethod = function() {
  } 

  // Some private method
  var privateMethod = function() {
  }

  return exports; // Expose public functions to other modules
}());

任何其他模块的组织方式与main.js几乎相同。

每次要“编译”捆绑包时运行browserify dev/app.js > html_root/app.js（或创建Makefile，gulp-，node-或webpack-脚本 - 无论您喜欢哪种方式）。

Pixijs（或类似的2D WebGL / Canvas库）：如何组织代码？

1 个答案: