H5游戏引擎

---

白鹭引擎

Texture Merger 可以实现序列帧动画、图片字体、图片整合

1. 序列帧动画注意事项

    a 动画名和导出名应该一致或固定规律，方便程序导入
    b 编辑动画的中心点，设置y为0，x为站立动作的左边缘
   

2. Wing 里修改调试port端口号

   默认是5758，通过修改文件.wing/launch.json文件修改

    "port":5758
   

3. TiledMap 里面的bug

   必须有这句，里面的TMXObject才会有值！！！！！！ element.draw();

    let mapGroups: tiled.TMXObjectGroup[] = tmxTileMap.getObjects();
    for (let element of mapGroups) {
        if (element.name == "obj") {
            element.draw();// ！！！！！！必须有这句，里面的TMXObject才会有值，这他妈是个bug！！！！！！！！
            for (let i = 0; i < element.getObjectCount(); i++) {
                let obj: tiled.TMXObject = element.getObjectByIndex(i);
   

4. addEventListener一定要和removeEventListener配对，否则后果很严重！！！

   addEventListener一定要和removeEventListener配对，否则后果很严重！！！

5. =>的妙用

   回调方法中this一般不能用，但使用=>这个可以很方便使用this

    原来：
    
    let self = this;
    // 加载地图数据
    this.stageMap.loadMap("resource/assets/map/stage03.tmx", function (tmxTileMap: tiled.TMXTilemap): void {
            self.bm.addChild(self.stageMap);
       });
       
    现在：
    
    // 加载地图数据
    this.stageMap.loadMap("resource/assets/map/stage03.tmx", (tmxTileMap: tiled.TMXTilemap) => {
            this.bm.addChild(this.stageMap);
        });
   

6. 音乐节拍的应用

        /** 跳到下一个音阶所需帧数 */
        public static STEP_NUM: number = 16;
        // x方向基本速度
        public static VX: number = 8;
        /** 帧间隔时间 ms 
         * 128bpm的音乐，对应24.4ms
         * 126bpm的音乐，对应24.8ms
         * 125bpm的音乐，对应25ms
         * 71bpm的音乐，对应21.6ms
         * 每1bpm，对应0.2ms
         * 帧间隔 = 25 - 0.2*(bpm - 125)
         * 使用《格式工厂》转成mp3，44100赫兹，96比特率
         * 再用《audioretoucher3》查看mp3的bpm值
        */
        public static FRAME_STEP: number = 24.8;
   

寻路算法 PathFinding

基本用法

    this.grid = new PF.Grid(this.map_h, this.map_w, this.map);
    let option: PF.Option = new PF.Option();
    option.allowDiagonal = true;
    option.dontCrossCorners = true;
    this.finder = new PF.AStarFinder(option);
    let path = this.finder.findPath(this.start_y, this.start_x, this.goal_y, this.goal_x, this.grid);

H5游戏

HTML5游戏开发经验及开发工具分享

1. 自动保存用户的记录

2. 使用profiler

   通过按下F12按键可以打开开发工具面板。选择“Profile”选项然后选中“Start profiling”。在你觉得性能需要提升的地方停留30秒，profiler将收集相关数据，然后选择“stop profiling”。你将看到你的游戏中的每个功能的累积执行时间。通常，你会发现某些功能占用了大部分的时间。这样你就能有针对性地优化那些特别耗时的功能了。

   不要过分相信自己的直觉——有些代码可能看起来效率很低，但在某些JavaScript引擎上执行起来速度却很快。最好的办法就是时常地反复分析程序，对于修改过的代码，需要反复进行测试确保你的修改确实能够提升程序的性能。

3. fnt字体制作工具

   http://www.angelcode.com/products/bmfont/