Project1

标题: MV 脚本初探 [打印本页]

作者: taroxd 时间: 2015-10-31 16:32
标题: MV 脚本初探
本帖最后由 taroxd 于 2015-11-1 12:47 编辑

开了太鼓的坑（基本界面已经完成，现在是可以玩的状态），写了一小会儿的MV脚本，感想如下：

Controller：
由于 html5 平台上异步io的特性，场景类必须提供更多的API。原先 VA 的 start 被拆分为 create（载入资源）和 start（载入完成后的处理）。
场景还必须提供 isReady 方法，用于判断资源是否载入完成。

至于场景处理的逻辑，写起来和VA几乎没有区别。
总结起来，Controller 部分比 VA 写起来稍微麻烦一些，但差别不大。

Model：
对于数据处理的部分，由于js原生提供的方法太少，所以比VA写起来会麻烦很多。
举个例子，下面是两段几乎等价的代码：

RUBY 代码复制

def init_notes_for_display
  @notes_for_display = @notes.flatten.sort_by(&:appear_time)
end

def init_notes_for_display


  @notes_for_display = @notes.flatten.sort_by(&:appear_time)


end

JAVASCRIPT 代码复制

Taiko.Fumen.prototype.initNotesForDisplay = function() {
    this._notesForDisplay = Array.prototype.concat.apply([], this._notes);
    this._notesForDisplay.sort(function(a, b) {
        return a.appearTime - b.appearTime;
    });
};

Taiko.Fumen.prototype.initNotesForDisplay = function() {


    this._notesForDisplay = Array.prototype.concat.apply([], this._notes);


    this._notesForDisplay.sort(function(a, b) {


        return a.appearTime - b.appearTime;


    });


};

View：
由于 addChild 机制以及资源不需释放的特点，这一部分的代码比 VA 会简单很多。事实上我在 VA 的太鼓里也是按照 addChild 的思路去写的。
Sprite 和 Bitmap 用完不需要 dispose —— 还有比这更开心的事情吗？
美中不足之处是，MV 似乎没有提供方法，将一个精灵以及它的 children 控制在画面上的一个区域（即 VA 的 viewport）。setFrame 可以控制当前的精灵，但是无法影响到 children。如果有这个方法而我没看到的话，请务必告诉我~

最后，给 XP/VX/VA 转 MV 的人一些小建议：
1. 不能省略 this。
2. 分清属性和方法。
3. Bitmap.load 以及 ImageManager 不能立刻返回加载完成的图像。除非确定资源已经加载完，否则不要访问该位图的属性。可以使用 addLoadListener。
4. 使用 Array.prototype.forEach/map/filter 等方法时，最好提供第二个参数 this。添加 listener 的时候，也最好把函数 bind(this)。这里的函数类似于 ruby 的 lambda 而不是 proc，确实是挺不方便的。
5. MV 支持的音频格式不止 ogg 和 m4a。
6. 不要省略分号。因为 ruby 在语法正确时，会将尽可能少行代码连成一句表达式；而 js 则相反，会尽可能读取更多行。
7. 使用 console.log 将对象输出到控制台。善用开发者工具。
8. 这个网址很棒：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

作者: 高须小龙 时间: 2015-10-31 17:15
网站的确很棒

作者: grayuncle 时间: 2015-10-31 17:26
最实在的是楼主赶快去汉化插件吧！

作者: 13790758417 时间: 2015-10-31 17:32
个人还是觉的这个比较好一点点http://www.javascriptcn.com/

作者: trentswd 时间: 2015-10-31 18:47
5. MV 支持的音频格式不止 ogg 和 m4a。

<--但是这么做本来就是为了兼容性啊……

作者: orzfly 时间: 2015-10-31 19:11
至于 Model 里说的那一点，你就不能找个 lodash.js 之类的吗= = https://lodash.com/

作者: 墨凌羽 时间: 2015-10-31 19:21
令我想起了DethKing前辈

作者: 龙和许也 时间: 2015-10-31 19:32
本帖最后由龙和许也于 2015-10-31 20:39 编辑

刚刚在网站测了一下IQ，结果是20
不知道学得好JS吗…… = =

= = 输给了OMG……

作者: 汪汪 时间: 2015-10-31 21:57
关于精灵以及它的 children 等的知识应该在哪里学习?

作者: tan12345 时间: 2015-10-31 22:55
看了MV的代码，我觉得我要屎了……我决定当个伸手党就好……求大神带我装X带我飞……

作者: trentswd 时间: 2015-11-1 03:20

Sprite 和 Bitmap 用完不需要 dispose —— 还有比这更开心的事情吗？

看见pixi论坛里面的人说，pixi的sprite和bitmap都要手动destroy，js的gc也不会自定销毁webgl的context
我想问一下楼主遇到过内存问题吗？

作者: taroxd 时间: 2015-11-1 06:46
本帖最后由 taroxd 于 2015-11-1 06:48 编辑

trentswd 发表于 2015-11-1 03:20
看见pixi论坛里面的人说，pixi的sprite和bitmap都要手动destroy，js的gc也不会自定销毁webgl的context
我 ...

没有。至少看默认脚本是没有用到过 destroy 的

作者: ky52879 时间: 2015-11-1 10:11
请教各位，大家找到Viewport了吗？？

作者: taroxd 时间: 2015-11-1 10:45

ky52879 发表于 2015-11-1 10:11
请教各位，大家找到Viewport了吗？？

如果不需要把所有 children 的图片砍掉半截，只需要整体移动的话，那么 sprite 已经充分胜任这个功能了。

否则……我还没找到

作者: ky52879 时间: 2015-11-1 11:51

taroxd 发表于 2015-11-1 10:45
如果不需要把所有 children 的图片砍掉半截，只需要整体移动的话，那么 sprite 已经充分胜任这个功能了。 ...

其实就是砍掉这个功能很好用，不过也无所谓了。。。。。

作者: orzfly 时间: 2015-11-1 12:27
本帖最后由 orzfly 于 2015-11-1 12:30 编辑

Array.prototype.concat.apply([], [[{a:"a",appearTime:1}, {a:"b",appearTime:2}],[{a:"d",appearTime:4}, {a:"c",appearTime:3}]]).sort(function(a, b) {return a.appearTime - b.appearTime;});

复制代码

虽然最前面和 flatten 还是有一定本质区别的逃（

如果有 lodash，那可以

_([[{a:"a",appearTime:1}, {a:"b",appearTime:2}],[{a:"d",appearTime:4}, {a:"c",appearTime:3}]]).flatten().sortBy("appearTime").value()

复制代码

作者: H·H·Y 时间: 2015-11-2 00:24
噢日……又是万恶的大括号和分号……前两年写C，程序错误不会报准确位置，然后一大行代码看下来居然是少了分号什么的，怨念极深啊……
到底还是喜欢Ruby的直接换行。

作者: xjh01 时间: 2016-10-5 19:14
版主写的这个完全不懂，能开个教学贴从易到难教教新人吗？

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