ECN>> FairyGUI-PixiJS>> 返回
项目作者： jcyuan

项目描述 ：
A flexible UI lib for PixiJS engine.
高级语言： TypeScript
项目地址: git://github.com/jcyuan/FairyGUI-PixiJS.git
创建时间： 2016-09-07T03:40:45Z
项目社区：https://github.com/jcyuan/FairyGUI-PixiJS
开源协议：MIT License
下载


* Please be noticed that this project won’t be maintained any longer because our projects are changed to Phaser3, I’m sorry.

What is this?

  • This is an UILib based on PixiJS to build game GUI.
  • Download editor here: http://en.fairygui.com/product/
  • Editor supports a few of game engines include Unity3D, PixiJS, ActionScript, Starling etc. Learn more.
  • The developers use the editor and Lib are all here in the Tencent QQ online chat group for discussing issues. Click to join in: Group1 434866637, Group2 614444599. Welcome to join us and have fun. :)

About Lib

Dependencies

Demo

About Editor

Editor

Features

  • WYSWYG
  • Build complex UI components easily without writing any code even no programming knowledge needed.
  • No complex skin configuration. All UI elements are seperated alone and can be mixed up to build more complex components.
  • Timeline tool provided for creating transitions at the design time.
  • Support sequenced frame animation creating.
  • Support using of bitmap fonts which created by BMFont technology, and support to create bitmap font using pictures.
  • Project files are stored separately in order to suit the version controlling, and for project collaboration.
  • Instant preview.
  • Flexible publish strategy, support packing atlas automatically, or define many separated atlases as you want.
  • Image compression with options for image quality etc, you can adjust options to reduce the size of the final package.

How to use the Lib?

Here is a snippet of basic usage example from the demo code: (typescript)

  1. class Main extends PIXI.Application {
  3.     public constructor() {
  5.         let view = document.querySelector("#canvasContainer canvas") as HTMLCanvasElement;
  7.         super({ view: view, backgroundColor: 0xb5b5b5, antialias: true, forceCanvas:false });
  9.         /**global settings */
  10.         fgui.UIConfig.defaultFont = "Microsoft YaHei";
  11.         fgui.UIConfig.verticalScrollBar = "ui://test/ScrollBar_VT";
  12.         fgui.UIConfig.horizontalScrollBar = "ui://test/ScrollBar_HZ";
  13.         fgui.UIConfig.popupMenu = "ui://test/PopupMenu";
  14.         fgui.UIConfig.globalModalWaiting = "ui://test/GlobalModalWaiting";
  15.         fgui.UIConfig.windowModalWaiting = "ui://test/WindowModalWaiting";
  17.         //main entry
  18.         fgui.GRoot.inst.attachTo(this, {
  19.             designWidth: 1136,
  20.             designHeight: 640,
  21.             scaleMode: fgui.StageScaleMode.FIXED_AUTO,
  22.             orientation: fgui.StageOrientation.LANDSCAPE,
  23.             alignV: fgui.StageAlign.TOP,
  24.             alignH: fgui.StageAlign.LEFT
  25.         });
  27.         //start to preload resource
  28.         //test.jpg actually is a binary file but just ends with fake postfix. so here we need to specify the loadType etc.
  29.         let loader = new fgui.utils.AssetLoader();
  30.         loader.add("test", "images/test.jpg", { loadType: PIXI.loaders.Resource.LOAD_TYPE.XHR, xhrType: PIXI.loaders.Resource.XHR_RESPONSE_TYPE.BUFFER })
  31.             .add("test@atlas0", "images/test@atlas0.png")
  32.             .add("test@atlas0_1", "images/test@atlas0_1.png")
  33.             .add("test@atlas0_2", "images/test@atlas0_2.png")
  34.             .on("progress", this.loadProgress, this)
  35.             .on("complete", this.resLoaded, this)
  36.             .load();
  37.     }
  39.     private loadProgress(loader: PIXI.loaders.Loader): void {
  40.         let p = loader.progress;
  41.         //this.loadingView.setProgress(p);
  42.         if (p >= 100) {
  43.             loader.off("progress", this.loadProgress, this);
  44.             //this.loadingView.dispose();
  45.             //this.loadingView = null;
  46.         }
  47.     }
  49.     private resLoaded(loader: PIXI.loaders.Loader): void {
  50.         loader.removeAllListeners();
  52.         fgui.UIPackage.addPackage("test");  //add your package built in the editor
  54.         let ins = fgui.UIPackage.createObject("test", "main") as fgui.GComponent;   //create an object to display
  55.         ins.setSize(fgui.GRoot.inst.width, fgui.GRoot.inst.height);     //add relation so that it will be auto resized when the window size is changed.
  56.         ins.addRelation(fgui.GRoot.inst, fgui.RelationType.Size);
  57.         fgui.GRoot.inst.addChild(ins);   //show it
  58.     }

License

This content is released under the MIT License.

Analytics