Project1

标题: 垃圾shitake又双叒叕写GUI了 [打印本页]

---

作者: shitake    时间: 2017-1-12 14:13
标题: 垃圾shitake又双叒叕写GUI了
之前给VA造GUI的轮子，结果因为RMVA的捉急渲染效率而弃坑。

顺手写了短时间的js。折腾了会儿html5。然后就把这个大坑搬到了pixi.js + electron上。
自己用ES6重写了Bitmap(基本是在抄RM)和Sprite。
整个项目都是用ES6（然而因为想直接不用babel编译就能跑在electron上，所以使用ES6特性都是electron支持的【所以你会看到各种require）

然后内置资源加载(顺手连cache也管了)和i18n支持（提供了一个 '_(str, flag)' 函数）。

虽然项目的名字还是叫RGUI，介绍也写的是 RPG Maker GUI Framework，然而并不能直接在MV里跑。原因主要是MV用的是nwjs，而且RGUI用了C++扩展库（fibers）。

所以web和移动端就不用想了（或者重写一个不使用fibers的Svent？反正目前也没用到异步事件回调）。

对于桌面端，要么魔改RMMV，让她泡在electron里，这么做基本没难度，目前王二就是被我魔改后跑在electron里。再要么就是魔改RGUI了。也没啥难度，修改几处对electron的引用，然后把fibers用nwjs重新build一下（目前跑的fibers是我自己build的electron版）。

控件方面，完全能用的就只有ImageBox。有几个正在重写（之前渲染部分使用的RMMV的Sprite和BItmap）。反正写起来应该没啥难度，很快就能封装一堆控件出来。

项目地址：https://github.com/molingyu/rguijs
文档：https://molingyu.github.io/rguijs/

想尝尝鲜的可以 git clone 下来，然后 npm install && npm run start 。

JAVASCRIPT 代码复制

let image = new RGUI.ImageBox({
    x: 100,
    y: 100,
    width: 400,
    height: 400,
    type: 0,
    focus: true,
    image: 'test'
  });
 
  image.eventManager.on('Right', {}, ()=>{ image.xScroll(5) });
  image.eventManager.on('Down', {}, ()=>{ image.yScroll(5) });
  image.eventManager.on('Left', {}, ()=>{ image.xScroll(-5) });
  image.eventManager.on('Up', {}, ()=>{ image.yScroll(-5) });
  image.eventManager.on('A', {}, ()=>{ image.x -= 10 });
  image.eventManager.on('D', {}, ()=>{ image.x += 10 });
  image.eventManager.on('W', {}, ()=>{ image.y -= 10 });
  image.eventManager.on('S', {}, ()=>{ image.y += 10 });
 
  stage.addChild(image);

let image = new RGUI.ImageBox({


    x: 100,


    y: 100,


    width: 400,


    height: 400,


    type: 0,


    focus: true,


    image: 'test'


  });


 


  image.eventManager.on('Right', {}, ()=>{ image.xScroll(5) });


  image.eventManager.on('Down', {}, ()=>{ image.yScroll(5) });


  image.eventManager.on('Left', {}, ()=>{ image.xScroll(-5) });


  image.eventManager.on('Up', {}, ()=>{ image.yScroll(-5) });


  image.eventManager.on('A', {}, ()=>{ image.x -= 10 });


  image.eventManager.on('D', {}, ()=>{ image.x += 10 });


  image.eventManager.on('W', {}, ()=>{ image.y -= 10 });


  image.eventManager.on('S', {}, ()=>{ image.y += 10 });


 


  stage.addChild(image);

这是范例里的一段代码，创建了一个 ImageBox 控件，然后添加了一些事件。效果是按 wasd 移动整个ImageBox控件位置。按 ↑↓←→ 竖向和横向滚动图片框的内容。

---

欢迎光临 Project1 (https://rpg.blue/)

Powered by Discuz! X3.1