设为首页收藏本站|繁體中文

Project1

 找回密码
 注册会员
搜索
查看: 1907|回复: 8
打印 上一主题 下一主题

[原创发布] RPGMV完全透明化方案!定制属于你的桌面精灵!

[复制链接]

Lv1.梦旅人

梦石
0
星屑
130
在线时间
12 小时
注册时间
2021-9-5
帖子
5
跳转到指定楼层
1
发表于 2023-4-29 15:02:54 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式

加入我们,或者,欢迎回来。

您需要 登录 才可以下载或查看,没有帐号?注册会员

x
本人一直有一个需求,就是能不能用RPGMV开发桌面精灵?我认为是可以的。但是有一个技术要点始终无法解决,那就是游戏透明化。
如今,本人终于解决了这个问题。下面是实现方案。
PS:该方案已经同步到我的教程中,详细请参考:https://rpg.blue/thread-493005-1-1.html
qq交流群:529245311
教程地址链接:https://klsdf.github.io/
GitHub项目链接:https://github.com/klsdf/klsdf.github.io



如果要让RPGMV完全透明,首先我们需要理解以下几个知识点:

1. RPGMV是一个网页,因此想让他透明本质上是需要网页透明
2. RPGMV运行在nwjs框架上,因此也需要让nwjs透明
3. pixijs是控制RPGMV显示的动画库,同样会控制游戏的透明



1. 因此,首先需要让rpgmv的html页面透明

   在index.html中,修改背景颜色为透明

  
HTML 代码复制
  1. <body style="background-color:rgba(0, 0, 0, 0);">



2. 修改并增加package.json的配置,让html的透明能显示到桌面


JAVASCRIPT 代码复制
  1. "window": {
  2.        "frame": false,
  3.        "transparent": true
  4.      },

   frame可以取消游戏的框架,取消关闭按钮和最小化最大化按钮,这也是桌面精灵的基础。transparent可以让游戏框架透明。

3. 修改pixi.js的源码

   ctrl+f,找到下面的代码


   _this._backgroundColorRgba[3] = _this.transparent ? 0 : 1;


   可以看到,虽然框架透明了,但是因为pixi也渲染了游戏,导致游戏还是没有透明。这个_backgroundColorRgba,前三个变量控制rgb,第三个控制alpha通道。

   所以我们要把这个代码修改为:


JAVASCRIPT 代码复制
  1. _this._backgroundColorRgba[3] = 0;



   当然,也可以自定义小数,实现半透明

4. 这样配置还是无法实现,透明。因为pixi.js在配置时,默认了禁止透明。所以还要开启透明配置。在RENDER_OPTIONS中,修改transparent为true

   ```js
    RENDER_OPTIONS: {
       transparent: true,
   ```

   如果配置加载还是不透明,可以强制修改透明度。

   ctrl+f找到下面的代码

   ```js
   _this.transparent = options.transparent
   ```

   修改为

   ```js
   _this.transparent = true;
   ```

5. 此时游戏的标题界面已经透明了,但是游戏画面仍不透明,此时我们要注意,游戏的图块本身就不是透明的,为了测试。我们需要新建一个场景,里面什么都不要加。仅仅测试透明效果。

6. 但是,这时候却发现,屏幕都是黑色。并没有透明。这是很正常的,查看源码发现Spriteset_Base中,this._blackScreen.opacity透明度默认为255。所以我们需要修改。

   ```
   this._blackScreen.opacity = 10;
   ```

   这个值同样是自定义的。

7. 这时,我们发现,右键菜单,还是无法透明。这是因为Scene_MenuBase中,没有设置透明。查看源码发现Scene_MenuBase.prototype.createBackground时,没有默认透明,因此修改代码为:

   
JAVASCRIPT 代码复制
  1. Scene_MenuBase.prototype.createBackground = function() {
  2.  
  3.        this._backgroundSprite = new Sprite();
  4.        //闫修改,增加了这个
  5.        this._backgroundSprite.opacity = 0;
  6.  
  7.        this._backgroundSprite.bitmap = SceneManager.backgroundBitmap();
  8.        this.addChild(this._backgroundSprite);
  9.    };

   

8. 此时,游戏已经全部透明。如果画上图块没有透明,这是因为,图块素材本身也需要透明。

   此时只要远景图是透明的,图块是透明的,就可以完全透明化。


剩下的就靠各位自由发挥了!

QQ截图20230419000348.png (1.1 MB, 下载次数: 31)

游戏画面透明

游戏画面透明

QQ截图20230429145322.png (846.86 KB, 下载次数: 21)

标题透明

标题透明

QQ截图20230429145414.png (149.27 KB, 下载次数: 22)

可以看到,远景图的透明也可以保留

可以看到,远景图的透明也可以保留

QQ截图20230429145549.png (1.28 MB, 下载次数: 22)

选项透明

选项透明

评分

参与人数 1+1 收起 理由
alexncf125 + 1 不明觉厉

查看全部评分

Lv5.捕梦者

梦石
0
星屑
21991
在线时间
1057 小时
注册时间
2019-3-5
帖子
1424
2
发表于 2023-4-29 15:24:53 | 只看该作者
透明了,但没完全透明
回复 支持 反对

使用道具 举报

Lv1.梦旅人

梦石
0
星屑
130
在线时间
12 小时
注册时间
2021-9-5
帖子
5
3
 楼主| 发表于 2023-4-29 15:34:05 | 只看该作者
Zeldashu 发表于 2023-4-29 15:24
透明了,但没完全透明

具体的透明程度可以根据文中参数调整,全写0就是完全透明了,然而不建议这样做。

点评

为什么,有什么弊端吗  发表于 2023-4-29 15:39
回复 支持 1 反对 0

使用道具 举报

Lv1.梦旅人

梦石
0
星屑
130
在线时间
12 小时
注册时间
2021-9-5
帖子
5
4
 楼主| 发表于 2023-4-29 16:57:07 | 只看该作者
klsdf 发表于 2023-4-29 15:34
具体的透明程度可以根据文中参数调整,全写0就是完全透明了,然而不建议这样做。 ...

如同我标题界面那个纯透明效果一样,过于透明反而不好看,建议加上30%左右,比较好看,也可以使用filter的效果,自定义毛玻璃效果
回复 支持 反对

使用道具 举报

Lv4.逐梦者

梦石
0
星屑
11175
在线时间
2066 小时
注册时间
2013-6-10
帖子
1516
5
发表于 2023-4-29 17:55:36 | 只看该作者
从未设想的道路
回复 支持 反对

使用道具 举报

Lv2.观梦者

梦石
0
星屑
811
在线时间
117 小时
注册时间
2018-8-25
帖子
95
6
发表于 2023-5-1 06:29:06 | 只看该作者
可以做不双修就会死那个类型了
回复 支持 反对

使用道具 举报

Lv1.梦旅人

梦石
0
星屑
26
在线时间
7 小时
注册时间
2023-4-27
帖子
16
7
发表于 2023-5-7 14:55:05 | 只看该作者
回复 支持 反对

使用道具 举报

Lv3.寻梦者

梦石
0
星屑
2967
在线时间
153 小时
注册时间
2022-12-18
帖子
209
8
发表于 2023-5-7 17:00:01 | 只看该作者
看起来很厉害的样子
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

拿上你的纸笔,建造一个属于你的梦想世界,加入吧。
 注册会员
找回密码

站长信箱:[email protected]|手机版|小黑屋|无图版|Project1游戏制作

GMT+8, 2024-11-17 09:29

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表