MV 脚本初探

taroxd

开了太鼓的坑（基本界面已经完成，现在是可以玩的状态），写了一小会儿的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

xjh01

版主写的这个完全不懂，能开个教学贴从易到难教教新人吗？

H·H·Y

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

orzfly

1. 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，那可以

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

复制代码

ky52879

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

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

taroxd

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

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

否则……我还没找到

ky52879

请教各位，大家找到Viewport了吗？？

taroxd

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

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

trentswd

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

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

tan12345

看了MV的代码，我觉得我要屎了……我决定当个伸手党就好……求大神带我装X带我飞……