RPG Maker MV 的源码研究 其一

沉滞的剑

大家好,我是一个不会排版的新人, 请多关照~

最近突然想起来自己曾原价买了的MV正在steam库里吃灰
不过喜加一多了也就没有感觉了

嗯, 不过这连带dlc快1000大洋这么打水漂也不好
于是我决定开始研究一下rpg maker的源码
也不知道能不能完全搞明白给有兴趣的朋友分享下心得, 各路大大请无视我就好
我是一边写, 一边查资料, 所以写的不对的地方还请指正, 谢谢啦

让我们正式进入 RPG Maker MV 简明易懂的魔法原理的讲解 [ 大误
============废话分割线=====================

序章 名为NW.js的皇家首席魔法师和我们关系不大

首先进入RPG Maker MV, 创建一个工程, 并运行它.
你会发现一个叫做game.exe的进程被创建,
这就是你的游戏进程, 看上去似乎和其他的游戏进程没啥区别
直到你按下F12...
一个开发者工具(Developer Tool)跳了出来
揭示了这个Game.exe的本质: 一个浏览器
是的, F12是一个标准的Chrome开发者工具
是的, 这就是RPG Maker跨平台的原理: 只要有浏览器就能玩
是的, RPG Maker MV的游戏就是一个画在html上的canvas而已
不过, 当你点开game.exe的属性
你会发现在描述上写着nwjs的字样
嗯, nwjs是个什么东西呢, 它自己是如此称呼自己的

NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

这就有意思了, 它不但是一个Chromium浏览器, 而且它好包含了完整的node.js模块, 也就是说我们可以使用node.js的功能哦, 这真是太酷了! 不过node.js是一个什么?
简单来说, 就是一个JS运行环境, 他能让你的js代码变成魔法!
嗯, 不过我们不是有浏览器了么, 为啥还需要node.js.
因为浏览器虽然能操控canvas, 但是由于安全性的原因是无法进行文件操作的
所以这部分需要交给虽然不能操控JS但是能读写文件的node.js来执行
嗯, 简而言之, nwjs就是一个能把代码变成魔法的魔法师
而且是官方指定的魔法师哦

不过民间魔法师也不是不可以, 比如electron, 只是需要一些这样那样的调♂教

因为RPG Maker MV并不是依赖于nwjs的
我们甚至可以去掉node.js变为纯web应用
你说独写存档怎么办? 我们可以云存档嘛, 或者使用web缓存, cookie, localStorage都可以啊
只需改写一部分存储逻辑相关的代码
我们甚至可以像开发网站一样使用webpack等等奇怪的东西
使用npm i 各种package, 并模块化你的代码
你们可以替换掉图像引擎!
可以替换掉RPG Maker的逻辑直接用pixi.js!
你甚至可以直接...嗯, 等等...我要干嘛来着

咳咳, 总而言之吧, 这就是你工程文件夹下最终是如何变成一个可执行的游戏的简要原理
那么, RPG Maker MV的工具是做什么的呢?
它提供了一个可视的数据编辑器
然后, 对应得你在工具里修改的数据, 保存时候会存到data文件夹下面相应的json文件中(包括plguins.js的配置)
所以, 这里就有了RPG Maker的一个很讨厌的地方它的数据结构修改起来不是非常方便
许多工具里的特性不一定能很好的满足你对游戏数据的需求
所以你只能手动敲, 或者自己开发一个编辑游戏数据的工具啦

我们再来看看nw的版本信息吧,
在debugger中输入process.versions可以看到各模块的版本号
我们甚至可以直接访问暴露出来的nw对象
嗯, 你现在可以选择如何玩坏nw了!

好, 现在让我们进入工程文件夹下
首先请看package.json这个文件
它是一个nwjs版本的node.js工程说明文件
包括工程名(name), 入口文件(main), 一些nodeJS参数(js-flags),nwjs窗口设定等等
基本是很一目了然了, 看不懂的东西比如暴露gc方法(--expose-gc)什么的其实对于我们来说并不重要啦
这个文件最主要的用途是指明了我们的入口在哪里
也就是index.html, 通常nodeJs工程的文件都是js文件
不过nwjs本质是一个浏览器, 一个网页文件作为入口也不稀奇吧

然后再打开index.html, 这是一个很标准的网页
这里也是唯一需要我们一点html和css知识的地方 (并不, 我可以选择无视

1. <link rel="stylesheet" type="text/css" href="fonts/gamefont.css">

复制代码

这行代码代表引入一个css样式文件
因为我们并没有什么网页元素样式需要设计
所以这个主要是用来定义字体的
嗯, 我们可以修改游戏中使用的字体了! 太棒了!
当然我们也可以定义多种字体并在游戏中混用!哇哦!
还有另外一坨设置, 我猜测是用来隐藏视频播放时候的各种浏览器UI效果的
不然让玩家看出这是个h5小游戏就太low了吧
就好像右键蹦出了4399一样的flash player菜单一样尴尬

1. <title>Project 1</title>

复制代码

这个网页的标题, 就是tab的名字
嗯, 这个玩过网页的玩家都知道可以通过操控document.title来更改
你可以偷偷更改你的游戏标题, 然后你的玩家就会觉得你...好无聊

接下来是一段导入js脚本的代码

1.         <script type="text/javascript" src="js/libs/pixi.js"></script>
   
2.         <script type="text/javascript" src="js/libs/pixi-tilemap.js"></script>
   
3.         <script type="text/javascript" src="js/libs/pixi-picture.js"></script>
   
4.         <script type="text/javascript" src="js/libs/fpsmeter.js"></script>
   
5.         <script type="text/javascript" src="js/libs/lz-string.js"></script>
   
6.         <script type="text/javascript" src="js/libs/iphone-inline-video.browser.js"></script>
   
7.         <script type="text/javascript" src="js/rpg_core.js"></script>
   
8.         <script type="text/javascript" src="js/rpg_managers.js"></script>
   
9.         <script type="text/javascript" src="js/rpg_objects.js"></script>
   
10.         <script type="text/javascript" src="js/rpg_scenes.js"></script>
    
11.         <script type="text/javascript" src="js/rpg_sprites.js"></script>
    
12.         <script type="text/javascript" src="js/rpg_windows.js"></script>
    
13.         <script type="text/javascript" src="js/plugins.js"></script>
    
14.         <script type="text/javascript" src="js/main.js"></script>

复制代码

那是个js还没有模块化的黑暗时代
所有东西都是通过写到全局变量里来实现互相依赖的
于是乎js代码执行的过程就变得很重要
而且所有东西都会暴露在全局对象windows下面
简单而又粗暴
不过因为node.js可以使用require方法加载commonJS模块
而且还可以通过Babel来使用ES6的方法加载模块
我们完全可以重写这一堆堆愚蠢的自运行方法编写的js文件让他们成为一个个优雅的模块
如果有人这么干了的话, 请务必告诉我!
我非常, 非常想知道, 你为啥...
这么闲
不过另外一个可能不使用模块的原因是因为不兼容现有的插件设计思路吧
嗯, 这个可以等到分析插件的时候(如果有的话)再说

我们看到这些引用的js分为3类
一类是库文件, 这些都是第三方的js插件,
比如pixi.js就是一个使用webGL等技术的图形库, 没有他我们什么都画不了
另一类是rpg maker的游戏逻辑代码
也是以后我, (如果还能填坑的话),要重点分析的对象
最后是入口主文件,
它在整个资源加载完毕后
执行了最初的一句SceneManager.run(Scene_Boot)
于是, 我们的旅程就开始啦!

347780682

不懂帮顶

walf_man

写的不错，思路清晰，逻辑明确，由上至下，由表入里，由浅入深，层层拨开rmmv的。。。

eterry11211

强力支持！希望一直更下去，能让一批想了解过程却无从下手的人有动力坚持下去

guidayu

大佬牛逼

1901631

支持支持。大佬牛批。

lazilime

牛批牛批，正好想试试啃源代码就看到这个帖子

wwwwwhya

点赞催更

447924513

大佬，加油