unity 2.5d开发日志四

{"data":[{"sort":0,"status":true,"_id":"5fc32275f7abf11905c884fd","title":"unity 2.5d开发日志四","content":"今天试了一下Universal RP 光照系统，调色板什么的都不需要了。哈哈，白瞎了我研究很久的调色板。<img src=\"/upload/2020-11-29/12/21/11/4fed5130-31fa-11eb-9def-af6b01a723f7\"><img src=\"/upload/2020-11-29/12/20/52/4439dd40-31fa-11eb-9def-af6b01a723f7\">最后动画还是要自己代码封装。感觉基本的功能似乎可以了。主要是为了直接读取图片，来生成动画。 <pre class=\"ql-syntax\" spellcheck=\"false\">using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class SpriteAnimator\n{\n    SpriteRenderer spriteRenderer;\n    float framRate;\n    float timer;\n    bool loop;\n\n    int currentFrame;\n    List<Sprite> frames = new List<Sprite>();\n    public SpriteAnimator(List<Sprite> frames, SpriteRenderer spriteRenderer, float frameRate = 0.16f, bool loop = true)\n    {\n        this.frames = frames;\n        this.spriteRenderer = spriteRenderer;\n        this.framRate = frameRate;\n        this.loop = loop;\n    }\n\n    public int CurrentFrame\n    {\n        get { return currentFrame; }\n    }\n\n    public void Start()\n    {\n        currentFrame = 0;\n        timer = 0f;\n        spriteRenderer.sprite = frames[0];\n    }\n\n    public void HandleUpdate()\n    {\n        timer += Time.deltaTime;\n        if (timer > framRate)\n        {\n            if (loop)\n            {\n                currentFrame = (currentFrame + 1) % frames.Count;\n                spriteRenderer.sprite = frames[currentFrame];\n                timer -= framRate;\n            }\n            else\n            {\n                if (currentFrame < frames.Count - 1)\n                {\n                    currentFrame += 1;\n                    spriteRenderer.sprite = frames[currentFrame];\n                    timer -= framRate;\n                }\n            }\n\n        }\n    }\n\n    public List<Sprite> Frames\n    {\n        get { return frames; }\n    }\n\n}\n</pre> <pre class=\"ql-syntax\" spellcheck=\"false\">using System.Linq;\nusing System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class CharacterController : MonoBehaviour\n{\n    [SerializeField] string path;\n    // Start is called before the first frame update\n    public float MoveX { get; set; }\n    public float MoveY { get; set; }\n    public bool IsMoving { get; set; }\n    public bool IsRunning {get;set;}\n     public bool IsSkill {get;set;}\n     public bool IsHurt {get;set;}\n     public bool IsFaint {get;set;}\n    public bool IsAttack {get;set;}\n    public Vector2 Direction {get;set;}\n    //states\n    public SpriteAnimator currentAnim {get;set;}\n\n    Dictionary<AnimatorID, SpriteAnimator> animators;\n\n    List<Sprite> frames = new List<Sprite>();\n\n    SpriteRenderer spriteRenderer;\n\n    \n    public List<SpriteAnimator> AttackDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> runDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> skillDirections = new List<SpriteAnimator>();\n\n    public List<SpriteAnimator> helloDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> faintDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> hurtDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> defanceDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> cryDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> angryDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> sitDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> idleDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> nodDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> walkDirections = new List<SpriteAnimator>();\n    public List<SpriteAnimator> victoryDirections = new List<SpriteAnimator>();\n\n    int lastDireaction;\n\n    private SpriteAnimator wasPrevAnim =null;\n\n    private void Awake()\n    {\n        frames = Resources.LoadAll<Sprite>(path).ToList();\n    }\n    private void Start()\n    {\n        lastDireaction = 6;\n        spriteRenderer = GetComponent<SpriteRenderer>();\n        // nw 39 \n        for (int i = 0; i < 8; i++)\n        {\n            var index = i * 47;\n            AttackDirections.Add(new SpriteAnimator(frames.GetRange(index + 0, 8), spriteRenderer,0.16f,false));\n            runDirections.Add(new SpriteAnimator(frames.GetRange(index + 8, 6), spriteRenderer));\n            helloDirections.Add(new SpriteAnimator(frames.GetRange(index + 14, 2), spriteRenderer));\n            faintDirections.Add(new SpriteAnimator(frames.GetRange(index + 16, 6), spriteRenderer));\n            hurtDirections.Add(new SpriteAnimator(frames.GetRange(index + 22, 2), spriteRenderer));\n            defanceDirections.Add(new SpriteAnimator(frames.GetRange(index + 24, 1), spriteRenderer));\n            cryDirections.Add(new SpriteAnimator(frames.GetRange(index + 25, 2), spriteRenderer));\n            skillDirections.Add(new SpriteAnimator(frames.GetRange(index + 27, 3), spriteRenderer,0.16f,false));\n            angryDirections.Add(new SpriteAnimator(frames.GetRange(index + 30, 2), spriteRenderer));\n            sitDirections.Add(new SpriteAnimator(frames.GetRange(index + 32, 1), spriteRenderer));\n            idleDirections.Add(new SpriteAnimator(frames.GetRange(index + 33, 4), spriteRenderer, 1.394f / 4));\n            nodDirections.Add(new SpriteAnimator(frames.GetRange(index + 37, 2), spriteRenderer));\n            walkDirections.Add(new SpriteAnimator(frames.GetRange(index + 39, 6), spriteRenderer));\n            victoryDirections.Add(new SpriteAnimator(frames.GetRange(index + 45, 2), spriteRenderer));\n        }\n\n        // spriteRenderer.sprite = frames.GetRange(368,6)[0];\n        currentAnim = idleDirections[lastDireaction];\n    }\n\n    private void Update()\n    {\n        var prevAnim = currentAnim;\n        SetDirection();\n        if(IsMoving){\n           currentAnim = walkDirections[lastDireaction];\n        }else if(IsSkill){\n            currentAnim = skillDirections[lastDireaction];\n        }else if(IsRunning){\n            currentAnim = runDirections[lastDireaction];\n        }else if(IsAttack){\n            currentAnim = AttackDirections[lastDireaction];\n        }else{\n            currentAnim = idleDirections[lastDireaction];\n        }\n        if (prevAnim != currentAnim )\n            currentAnim.Start();\n       \n        currentAnim.HandleUpdate();\n    }\n\n    public int LastDireaction{\n        get {return lastDireaction;}\n        set {lastDireaction = value;}\n    }\n\n    public bool IsFinshed(){\n        return currentAnim.CurrentFrame == currentAnim.Frames.Count-1;\n    }\n\n    public void SetDirection()\n    {\n       \n        if (Direction.magnitude < 0.01) //MARKER character is static. \n        {\n            // IsMoving = false;\n            // directionArray = idleDirections;\n        }\n        else\n        {\n            // IsMoving = true;\n            // directionArray = walkDirections;\n            lastDireaction = DirectionToIndex();\n        }\n        // currentAnim = directionArray[lastDireaction];\n    }\n\n    private int DirectionToIndex()\n    {\n        Vector2 norDir = Direction.normalized;\n        float step = 360 / 8;\n        float offset = step / 2;\n        float angle = -Vector2.SignedAngle(new Vector2(-1,1), norDir);\n       \n        angle += offset;\n        if (angle < 0)\n        {\n            angle += 360;\n        }\n        float stepCount = angle / step;\n        //NOW      NW N  NE E  SE S  SW W\n        //BEFORE   N  NW W  SW S  SE E  NE\n        lastDireaction = Mathf.FloorToInt(stepCount);\n        return lastDireaction;\n    }\n}\n\n</pre> <pre class=\"ql-syntax\" spellcheck=\"false\">using System.Collections;\nusing System.Collections.Generic;\nusing UnityEngine;\n\npublic class NpcController : MonoBehaviour\n{\n    private float moveSpeed = 4f;\n     private Vector2 move;\n     private Rigidbody2D rb;\n     public float moveH, moveV;\n     private CharacterController animator;\n     bool isMoving;\n    // Start is called before the first frame update\n    IEnumerator Start()\n    {\n        animator = GetComponent<CharacterController>();\n         rb = GetComponent<Rigidbody2D>();\n        // Move(new Vector2(2,2));\n        var orginVec = new Vector2(transform.position.x,transform.position.y);\n        yield return StartCoroutine(Run(new Vector2(1,2)));\n\n        yield return StartCoroutine(Skill());\n\n        yield return StartCoroutine(Attack());\n\n        yield return StartCoroutine(Run(orginVec));\n       \n        animator.LastDireaction = 0;\n\n    }\n\n    // Update is called once per frame\n    void Update()\n    {\n    }\n    IEnumerator Skill(){\n         animator.IsSkill = true;\n         Debug.Log(\"start skill\");\n         yield return new WaitForSeconds(0.16f*5*2);\n         Debug.Log(\"end skill\");\n         animator.IsSkill = false;\n    }\n    IEnumerator Attack(){\n         animator.IsAttack = true;\n         Debug.Log(\"start IsAttack\");\n         yield return new WaitForSeconds(0.16f*8+1f);\n         Debug.Log(\"end IsAttack\");\n         animator.IsAttack = false;\n    }\n    IEnumerator Walk(Vector2 targetPos)\n    { //固定移动\n        animator.IsMoving = true;\n        animator.Direction = targetPos - new Vector2(transform.position.x,transform.position.y);\n        while ((targetPos - new Vector2(transform.position.x,transform.position.y)).sqrMagnitude > Mathf.Epsilon)\n        {\n            transform.position = Vector2.MoveTowards(transform.position, targetPos, moveSpeed * Time.deltaTime);\n            yield return null;\n        }\n        transform.position = targetPos;\n        animator.Direction = targetPos - new Vector2(transform.position.x,transform.position.y);\n        animator.IsMoving = false;\n    }\n    IEnumerator Run(Vector2 targetPos)\n    { //固定移动\n        animator.IsRunning = true;\n        animator.Direction = targetPos - new Vector2(transform.position.x,transform.position.y);\n        while ((targetPos - new Vector2(transform.position.x,transform.position.y)).sqrMagnitude > Mathf.Epsilon)\n        {\n            transform.position = Vector2.MoveTowards(transform.position, targetPos, moveSpeed * 1.5f * Time.deltaTime);\n            yield return null;\n        }\n        transform.position = targetPos;\n        animator.Direction = targetPos - new Vector2(transform.position.x,transform.position.y);\n        animator.IsRunning = false;\n    }\n}\n</pre> ","keywords":"","addTime":"2020-11-29T04:20:18.390Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-12-02T18:38:28.976Z","__v":0},{"sort":0,"status":true,"_id":"5fbb9021f7abf11905c884fb","title":"Unity 2.5开发日志 三","content":"动画，可以通过设置条件。预先设置好条件变量。新建new Blend Tree。通过代码来控制。 又发现一个好东西Scriptable Objects。使用这个来存储宠物和物品信息是很不错的方法。 这两天都在跟着 《Make A Game Like Pokemon in Unity 》做。目前到第18章，stat boosting moves 使用字典，确实很绕。。为了提前存储计算行动值，教程中真的很绕~看了四五遍。主要是他的口音真的听不惯~主要都是为了计算增益或减益效果，包括物理攻击、特殊攻击、状态。 https://www.youtube.com/watch?v=dOsk0r12ziI&list=PLLf84Zj7U26kfPQ00JVI2nIoozuPkykDX&index=18 随机遇敌已经实现了。整个游戏流程算是可以了。不过目前还是宠物小精灵模式的。还得改~<img src=\"/upload/2020-11-25/14/14/40/80e48320-2ee5-11eb-9def-af6b01a723f7\"><img src=\"/upload/2020-11-25/14/14/24/76dcc360-2ee5-11eb-9def-af6b01a723f7\"><img src=\"https://kacoro.com/upload/2020-11-25/14/14/58/8b70dc30-2ee5-11eb-9def-af6b01a723f7\">有多种行动选择，死亡判断，换宠。包括记录了宠物的等级 hp等。目前我见过最完整的一个教程。还有13章。里面有很多技巧都挺有用的。目前唯一使用的一个插件","keywords":"","addTime":"2020-11-23T10:32:13.016Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-11-25T06:25:52.997Z","__v":0},{"sort":0,"status":true,"_id":"5fb87b9af7abf11905c884fa","title":"Unity 2.5d 开发日志二","content":"原本是想停下来了。觉得技术储备已经足够，想等空闲时间再摸起来。不过自己确实还没有完成一整个游戏系统的流程开发。所以，还是接着做吧。对了这个项目我放在<a href=\"https://github.com/kacoro/crossgate-unity\" rel=\"noopener noreferrer\" target=\"_blank\">github</a>上面了。不过估计会非常大，酌情。 上一篇主要完成了 地图绘制，碰撞和遮罩。人物移动，人物动画，以及镜头跟随。 接下来做了场景切换。和一个简单的对战系统。目前是宠物小精灵模式，还需要很多调整的。关键词 trun base rpg<img src=\"/upload/2020-11-21/10/28/56/4e1f5f60-2ba1-11eb-9def-af6b01a723f7\"> 简单也算是一个流程吧。然后做了系统保存和读取，目前只支持玩家的。 接着更换了InputSystem。这个可能到时候会有坑。比如unity ui无法点击，不过通过报错，确实解决了。场景下的Event System，点击一下repalce和重新绑定键位。还有原本的input代码都需要调整。简单说一下使用方式，新建一个action asset。然后呢在EventSystem里面使用它。在代码中<pre class=\"ql-syntax\" spellcheck=\"false\">private PlayerInputActions controls;\nprivate Vector2 move;\nprivate void Awake() {\n controls = new PlayerInputActions();\n controls.GamePlay.Ok.started += ctx => OpenTreasureBox();\n controls.GamePlay.Move.performed += ctx => move = ctx.ReadValue<Vector2>();\n controls.GamePlay.Move.canceled  += ctx => move = Vector2.zero;\n}\nprivate void OnEnable() {\n controls.GamePlay.Enable();\n}\n \nprivate void OnDisable() {\n controls.GamePlay.Disable();\n}\n</pre> 做了主菜单和暂停菜单。暂停菜单支持了保存和读取和退出的功能。 <img src=\"/upload/2020-11-21/10/34/51/21bf8cf0-2ba2-11eb-9def-af6b01a723f7\"> 今天打算做一个对话框和打开物品。然后还需要有随机遇敌，物品管理，武器装备。人物状态管理。剧情管理，完善对战系统。整个游戏的数据管理（这个要使用数据库还是~~~sqlite）好多。 还有一个就是编辑器，之前没有打算深入体验unity，没有怎么配置vscode，即使安装了c#和unity的扩展也没有用。完全没有智能提示。在配置完成后，终于有提示了。 <img src=\"/upload/2020-11-21/10/42/39/38a25b40-2ba3-11eb-9def-af6b01a723f7\"> <img src=\"/upload/2020-11-22/16/10/04/204d1380-2c9a-11eb-9def-af6b01a723f7\"><img src=\"/upload/2020-11-22/16/10/23/2bac9b10-2c9a-11eb-9def-af6b01a723f7\">对话框和宝箱开启都完成了。为了做开启宝箱的效果，还自己画了几帧动画。这个魔力宝贝原本是没有的功能。宝箱开启后，我希望它永久保存。但是还得记录状态。所以~保存系统还需要完善。已经有思路了。","keywords":"","addTime":"2020-11-21T02:26:17.273Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-11-22T08:15:11.704Z","__v":0},{"sort":0,"status":true,"_id":"5fb43016f7abf11905c884f8","title":"关于魔力宝贝图档问题","content":" 关于图档问题。之前用网友的程序导出的图片，默认的调色版是08的黄昏色。特别是在出生点灵堂，看着很不舒服。由于C++的能力不足，我又不知道怎么改他的。最关键的默认读取08号cpg。读了很久的源代码始终不知道怎么改~之前也不理解为什么他要全部拼成json之后一次性导出全部图片，那是相当的花时间。主要参考的两篇文章https://blog.csdn.net/qq_37543025/article/details/88377553https://www.cnblogs.com/CG7/archive/2004/01/13/12237395.html 项目地址是：https://github.com/mversace/CrossGateRemastered 导出的一些信息tilemap丢失了。实际上都是有作用的。 于时我居然自己想写一个。node版本的。。有点后悔，要在js里面处理大量的二进制 十六进制 位运算，确实很头疼。node buffer又是存的 <code style=\"color: inherit; background-color: inherit;\"><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array\" rel=\"noopener noreferrer\" target=\"_blank\">Uint8Array</a></code>硬着头皮干。 首先还得理解，各种调色板的含义。从二进制文件读取图片信息，原始图片信息，解密算法，填色，再导出。graph_info.bin 和 graph.bin的理解。 目前已经可以读取到图片信息和原始图片信息。根据图片信息可以找到图片的地址，得到原始图片数据。再进行解密。 解压，解压算法好像不太对。。我解出来的图片明显太大了。肯定是哪里出了问题。还差读取调色板和填色的步骤。。不过如果能够实现的话，那么就可以直接运算魔力宝贝bin文件了。这样的话，其实可以畅想的就很多了，虽然我已经不想再复刻魔力了。不过，里面的游戏系统知识还是有用的。包括可怕的二进制文件。 折腾了一下c#，通过修改debug的目标路径，也算是可以调试了。到时候再监听对比一下数据应该就可以了。最后直接把08的替换掉，想要的信息只要稍微改动一下源代码就好了。把想要的调色板改成08就行了。。 调色板来控制白天00（） 傍晚01（发橙色） 黑夜02（发蓝色） 凌晨03（有点发青色）我觉得黑夜的颜色最好看。灵堂似乎永远都采用黑夜。 11月25日终于解决了。经过调试发现，原来调色板是用了unordered_map无序存储的。默认begin就是08。在define.h，添加默认读取的调色板<pre class=\"ql-syntax\" spellcheck=\"false\">__declspec(selectany) std::string defaultCgp = \"palet_03.cgp\";\n</pre>将getCGImage.cpp中 改成：<pre class=\"ql-syntax\" spellcheck=\"false\">unsigned char *pCgp = _uMapCgp.find(defaultCgp)->second.data();\nstrCgpName = _uMapCgp.find(defaultCgp)->first;\n</pre> 终于完美解决了~ node 方面 感觉看到了胜利的曙光。。 <img src=\"/upload/2020-11-26/07/19/04/9bd19e90-2f74-11eb-9def-af6b01a723f7\"><img src=\"/upload/2020-11-26/08/08/47/8e0e5940-2f7b-11eb-9def-af6b01a723f7\">终于！！！成功了。不过颜色不大对 11月26日 14:22<img src=\"/upload/2020-11-26/14/22/26/c10080b0-2faf-11eb-9def-af6b01a723f7\">泪流满面，终于~~其实透明好像不太好。在有一些调色板下，一些像素会丢失。这也是个问题。也就是还得保留黑色，之后再去除黑色背景？后面只要再完善一下就行了。 11月28日更新有些图还是有问题，程序目前还有bug~ <img src=\"/upload/2020-11-28/11/19/13/7d1da600-3128-11eb-9def-af6b01a723f7\">","keywords":"","addTime":"2020-11-17T19:36:44.122Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-11-28T03:38:24.200Z","__v":0},{"sort":0,"status":true,"_id":"5fb0a9c3f7abf11905c884f7","title":"unity 2.5d入门","content":"先放一个 目前的效果 <a href=\"https://kacoro.com/demo/webgl/index.html\" rel=\"noopener noreferrer\" target=\"_blank\">demo</a>可以通过手柄或者方向键控制人物行走哦 1、官方教程 https://docs.unity3d.com/Manual/Tilemap-Isometric-SpritesImport.html 遮挡问题https://blog.csdn.net/tianguisu/article/details/105631579像素问题：https://blog.csdn.net/yye4520/article/details/81208664https://www.cnblogs.com/vvjiang/p/10344007.html 注意导入的素材需要设置每单位像素数（PPU）比如单位宽度为64.就应该改为64.默认值是100.如果不修改。地图会出现问题。以64*47为例。Gird 和tile palette， cell size 设置为 ：x:1 y:47/64 z：1tile map层 设置为 x:0.5 y：0.5 z：0.5 <h3>遮挡问题</h3>edit->project settings->Graphics->Camera settingstransparecy Sort Mode设置为 Custom Axis，Transparency Sort Axis设置为：x:0,y:1,z:0 需要为物品设置正确的偏移 Pivot 设置为custom，Pivot Unit设置为pixels（默认都是百分比，是为了做适配吗？） <img src=\"/upload/2020-11-17/09/50/14/3c8d13f0-2877-11eb-9def-af6b01a723f7\"> 碰撞问题，可以为每个物品单独设置 动画动画的导入，有多少方式。图集的需要选择multiple，之后在Sprite Editor里面Slice。设置Samples帧率。默认没有打开<img src=\"/upload/2020-11-18/00/04/30/9337d790-28ee-11eb-9def-af6b01a723f7\"> 目前进度 高清化呀<img src=\"/upload/2020-11-18/03/30/12/4ffcd1c0-290b-11eb-9def-af6b01a723f7\"> 目前玩家与物品的遮挡问题还是存在~ 通过z as y 的方式好像也不能解决。可能还需要再看看资料。不过这样还是无法解决与不规则占多格的物品。难道还是得用常规的做法~ <img src=\"/upload/2020-11-18/13/50/28/f66039c0-2961-11eb-9def-af6b01a723f7\">unity相对于ue4来说，确实更加适合。tilmap的pallet很接近我想要的效果。","keywords":"","addTime":"2020-11-15T03:57:26.296Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-11-18T11:20:06.281Z","__v":0},{"sort":0,"status":true,"_id":"5fa093f4f7abf11905c884f4","title":"我最近折腾了一下unreal4 2.5d ","content":"通过一周多的时间研究，我发现，unreal对isometric的支持真的很不友好~ 一、贴图把一张图片导入后，先右键Sprite操作。应用paper2D纹理设置。之后就可以进行创建sprite，或者提取，瓦片集的操作。 二、动画，图片序列视图图片提取之后，就可以对多张sprite创建图片序列视图。这就是动画了。的确很方便。 三、自定义game_mode 四、角色 继承paperCharacter控制人物行根据当前状态，来控制对应的动画。 五、tilemap的使用unreal 的tilemap真心不好用。主要是在45度 isometric 里面比较难处理。只能用层，没有对象层的概念。这可就为难了。想要动态加载需要自己脑补很多办法。碰撞可以运用它里面提供的3d碰撞。但是遮挡就麻烦了。也不能直接引用 六、遮挡问题。在unreal里，可以设置半透明排序优先级，来控制遮挡。所用的材质必须要设置为TranslucentUnlitSpriteMaterial。才有效。主要是建立一个actor 继承PaperSprite，然后设置一个自定义的sprite变量来设置对象。再设定一个sortPoint变量，根据sortPoint，来设置半透明排序优先级。这两个变量都要可见，和生成时公开，以便后面动态生成时使用。<img src=\"https://kacoro.com/upload/2020-11-06/04/10/45/fce4d3f0-1fa2-11eb-9def-af6b01a723f7\"><img src=\"https://kacoro.com/upload/2020-11-06/04/10/58/04c56df0-1fa3-11eb-9def-af6b01a723f7\">角色类在移动时根据坐标实时设置半透明排序优先级。 动态生成我设置在了关卡蓝图，目前只是简单支持，墙壁。实在不想一个个拖进去。如何动态获取图片的宽高，都难以解决。最后估计还是靠数据表格来解决吧。<img src=\"https://kacoro.com/upload/2020-11-06/04/08/30/acb38020-1fa2-11eb-9def-af6b01a723f7\"> 由于有些是长方体的。遮挡的ac面还是比较难以控制。暂时，我是把其切割成两半，这样就行了。 又得重新自己建立坐标系。大概从tilemap editor里面的坐标转换是这样的。<pre class=\"ql-syntax\" spellcheck=\"false\">var tileWith = 64;\nvar tileHeight = 47;\nfunction getPinouter(x,y,width,height){\n    var n = (x) / tileHeight \n    var m = (y) /tileHeight\n    return {\n        x:(n-m)*32 , \n        y:-(m+n)*23.5 + height/2-23.5\n    }\n}\n</pre> 七、CVS和JSON的使用蓝图里面只有结构和枚举。在编辑器里，数据量大时非常不好修改。很浪费时间。数据表格，第一行必须大写Name，不然Json里面的第一行字段可能会丢失。对比一下建立的结构，数据表格以及导出json、csv文件。<img src=\"/upload/2020-11-06/04/50/10/7eae96f0-1fa8-11eb-9def-af6b01a723f7\"> 八、其他一些小问题。由于是在2d，可以取消掉重力，不然，在没有地面时，人物就会一直往下掉。 九、摄像机的设定需要使用正交模式。垂直对着玩家。正面。 我这又时何苦呢？","keywords":"","addTime":"2020-11-02T23:16:43.151Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-11-05T20:55:57.147Z","__v":0},{"sort":0,"status":true,"_id":"5f88f04df7abf11905c884f1","title":"在react中使用debounce和Throttle了。","content":"先说结论 ，ahook是更好的选择 继之前的debounce，和throttle的js实现，然后看了loadash和underscroe的源码，改成typescript并整合到自己的utils库里。<pre class=\"ql-syntax\" spellcheck=\"false\">yarn add @kacoro/utils\n</pre> 然后接着用react中使用，<pre class=\"ql-syntax\" spellcheck=\"false\">import {throttle,debounce} from '@kacoro/utils'\n\n<input type=\"text\" onChange={(e)=>{\ne.persist()   // react默认会清除所有的默认属性，所以需要添加这段，保留参数的属性\ndebounce(()=>{\n    console.log(e.target.value\n) },500)()\n}} />\n</pre> 在hook来实现。参考：https://www.freecodecamp.org/news/debounce-and-throttle-in-react-with-hooks/通过使用useRef、和useCallback来实现。 使用useCallback实现bebounce在向子组件传递回调时，useCallback通常用于性能优化。但我们可以使用它的约束记忆一个回调函数，，以确保该<code style=\"color: rgb(77, 77, 77); background-color: rgb(255, 255, 255);\">debouncedSave</code>引用同去抖功能跨越渲染。<pre class=\"ql-syntax\" spellcheck=\"false\">   const [value, setValue] = useState('');\n  const [dbValue, saveToDb] = useState(''); // would be an API call normally\n  \n  const debouncedSaveByCallBack:Function = useCallback(debounce((nextValue: string) => saveToDb(nextValue), 1000),[],); // will be created only once initially\n  \n  const handleDbChange = (event: { target: { value: any; }; }) => {\n    const { value: nextValue } = event.target;\n    setValue(nextValue);\n     debouncedSaveByCallBack(nextValue);\n  };\n</pre> 使用useRef实现throttle<code style=\"background-color: rgb(255, 255, 255); color: rgb(103, 149, 181);\">useRef</code>为我们提供了一个可变对象，其<code style=\"background-color: rgb(255, 255, 255); color: rgb(77, 77, 77);\">current</code>属性引用传递的初始值。 如果我们不手动更改它，则该值将在组件的整个生命周期内保持不变 这类似于类实例的属性<pre class=\"ql-syntax\" spellcheck=\"false\">  const [value2, setValue2] = useState('');\n  const [thValue, saveToTh] = useState(''); // would be an API call normally\n  const throttledSaveByRef:Function = useRef(throttle((nextValue: string) => saveToTh(nextValue), 1000))\n  .current;\n  \n  const handleThChange = (event: { target: { value: any; }; }) => {\n    const { value: nextValue } = event.target;\n    setValue2(nextValue);\n    throttledSaveByRef(nextValue);\n  };\n</pre> 自定义hooks<pre class=\"ql-syntax\" spellcheck=\"false\">interface CurrentRef {\n  fn: Function;\n  timer?: ReturnType<typeof setTimeout> | null\n}\n\nfunction useDebounce(fn: Function, delay: number = 300, dep = []) {\n  const { current } = useRef<CurrentRef>({ fn, timer: null });\n  useEffect(function () {\n    current.fn = fn;  // eslint-disable-next-line \n  }, [fn]);\n\n  return useCallback(function f(...args: any[]) {\n    if (current.timer) {\n      clearTimeout(current.timer);\n    }\n    current.timer = setTimeout(() => {\n      current.fn.call(useDebounce, ...args);\n    }, delay); // eslint-disable-next-line \n  }, dep)\n}\n\nfunction useThrottle(fn: Function, delay: number = 300, dep = []) {\n  const { current } = useRef<CurrentRef>({ fn, timer: null });\n  useEffect(function () {\n    current.fn = fn; // eslint-disable-next-line\n  }, [fn]);\n\n  return useCallback(function f(...args) {\n    if (!current.timer) {\n      current.timer = setTimeout(() => {\n        delete current.timer; // eslint-disable-next-line\n      }, delay);\n      current.fn.call(useThrottle, ...args);\n    }// eslint-disable-next-line\n  }, dep);\n}\n</pre> <pre class=\"ql-syntax\" spellcheck=\"false\"> const [counter, setCounter] = useState(0);\n  const handleDebounceClick = useDebounce(function () {\n    setCounter(counter + 1)\n  }, 300)\n  const handleThrottleClick = useThrottle(function () {\n    setCounter(counter + 1)\n  }, 300)\n</pre> 完整代码<pre class=\"ql-syntax\" spellcheck=\"false\">import React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport {throttle, debounce } from '@kacoro/utils'\n\ninterface CurrentRef {\n  fn: Function;\n  timer?: ReturnType<typeof setTimeout> | null\n}\n\nfunction useDebounce(fn: Function, delay: number = 300, dep = []) {\n  const { current } = useRef<CurrentRef>({ fn, timer: null });\n  useEffect(function () {\n    current.fn = fn;  // eslint-disable-next-line \n  }, [fn]);\n\n  return useCallback(function f(...args: any[]) {\n    if (current.timer) {\n      clearTimeout(current.timer);\n    }\n    current.timer = setTimeout(() => {\n      current.fn.call(useDebounce, ...args);\n    }, delay); // eslint-disable-next-line \n  }, dep)\n}\n\nfunction useThrottle(fn: Function, delay: number = 300, dep = []) {\n  const { current } = useRef<CurrentRef>({ fn, timer: null });\n  useEffect(function () {\n    current.fn = fn; // eslint-disable-next-line\n  }, [fn]);\n\n  return useCallback(function f(...args) {\n    if (!current.timer) {\n      current.timer = setTimeout(() => {\n        delete current.timer; // eslint-disable-next-line\n      }, delay);\n      current.fn.call(useThrottle, ...args);\n    }// eslint-disable-next-line\n  }, dep);\n}\nfunction DebonceThrottle() {\n  const [counter, setCounter] = useState(0);\n  const handleDebounceClick = useDebounce(function () {\n    setCounter(counter + 1)\n  }, 300)\n  const handleThrottleClick = useThrottle(function () {\n    setCounter(counter + 1)\n  }, 300)\n\n  const [value, setValue] = useState('');\n  const [dbValue, saveToDb] = useState(''); // would be an API call normally\n  \n  const debouncedSaveByCallBack:Function = useCallback(debounce((nextValue: string) => saveToDb(nextValue), 1000),[],); // will be created only once initially\n  \n  const handleDbChange = (event: { target: { value: any; }; }) => {\n    const { value: nextValue } = event.target;\n    setValue(nextValue);\n     debouncedSaveByCallBack(nextValue);\n  };\n \n  const [value2, setValue2] = useState('');\n  const [thValue, saveToTh] = useState(''); // would be an API call normally\n  const throttledSaveByRef:Function = useRef(throttle((nextValue: string) => saveToTh(nextValue), 1000))\n  .current;\n  \n  const handleThChange = (event: { target: { value: any; }; }) => {\n    const { value: nextValue } = event.target;\n    setValue2(nextValue);\n    throttledSaveByRef(nextValue);\n  };\n \n  return (\n    <div>\n      <textarea value={value} onChange={handleDbChange} rows={5} cols={50} />\n      <section >\n        <div>\n          Editor (Client):\n          {value}\n        </div>\n        <div>\n          Saved (Debounce):\n          {dbValue}\n        </div>\n      </section>\n      <textarea value={value2} onChange={handleThChange} rows={5} cols={50} />\n      <section >\n        <div>\n          Editor (Client):\n          {value2}\n        </div>\n        <div>\n          Saved (Throttle):\n          {thValue}\n        </div>\n      </section>\n      <section>\n        <button\n          onClick={handleDebounceClick}\n        >click debounce</button>  <button\n          onClick={handleThrottleClick}\n        >click throttle</button>\n        <div>{counter}</div>\n      </section>\n    </div>\n  );\n}\n\nexport default DebonceThrottle;\n</pre>","keywords":"","addTime":"2020-10-16T00:28:07.303Z","cate_name":"技术","cate_id":"5d7fec39b6bed22db8ec922a","updateTime":"2020-10-17T01:28:50.353Z","__v":0},{"sort":0,"status":true,"_id":"5f68dc56f7abf11905c884ec","title":"节流防抖分析 _的.debounce和.throttle","content":"<h2>分析<code style=\"background-color: rgba(27, 31, 35, 0.05);\">_</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.debounce</code>和<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.throttle</code></h2>DOM 上有些事件是会频繁触发的，比如<code style=\"background-color: rgba(27, 31, 35, 0.05);\">mouseover</code>、<code style=\"background-color: rgba(27, 31, 35, 0.05);\">scroll</code>、<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>...。以前有个需求，是做一个图表，是用<code style=\"background-color: rgba(27, 31, 35, 0.05);\">canvas</code>画的，最初，如果图表画完，用户拖拽浏览器窗口，改变浏览器大小的话，图表并不会自适应的变化，所以就需要监听<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>事件，每当窗口大小变化后，再重新绘制。但是<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>是频繁触发的，这就导致了页面的明显的卡顿，因为每次<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>后的回调要执行大量的计算。当时比较急，遇到这个问题以后，直接就查了<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.debounce</code>和<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.throttle</code>，就直接用了<code style=\"background-color: rgba(27, 31, 35, 0.05);\">lodash</code>。现在回过头了，看下源码，看看它的实现。<h2>Debounce</h2><h4>英文释义：</h4><blockquote>n. 防反跳</blockquote><blockquote>按键防反跳（Debounce）为什么要去抖动呢？机械按键在按下时，并非按下就接触的很好，尤其是有簧片的机械开关，会在接触的瞬间反复的开合多次，直到开关状态完全改变。</blockquote>我们希望开关只捕获到那次最后的精准的状态切换。在 Javascript 中，那些 DOM 频繁触发的事件，我们想在某个时间点上去执行我们的回调，而不是每次事件每次触发，我们就执行该回调。有点啰嗦，再简单一点的说，我们希望多次触发的相同事件的触发合并为一次触发（其实还是触发了好多次，只是我们只关注那一次）。所以，在 Javascript 中，我们就希望频繁事件的回调函数在某段连续时间内，在事件触发后只执行一次。拿<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>事件为例，在 2s 内的该事件会被触发多次（具体几次未知，不同浏览器并不一样）。我们需要对<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>的回调函数做 Debounce 100ms 化，这样<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>的回调会在 2.1s 后触发，之前 2s 以内的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">resize</code>我就无视了。<h4>我们先自己实现一个</h4><pre class=\"ql-syntax\" spellcheck=\"false\">/**\n *\n * @param fn {Function} 实际要执行的函数\n * @param delay {Number} 延迟时间，单位是毫秒（ms）\n *\n * @return {Function} 返回一个“防反跳”了的函数\n */\n\nfunction debounce(fn, delay) {\n\n // 定时器，用来 setTimeout\n var timer\n\n // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数\n return function () {\n\n // 保存函数调用时的上下文和参数，传递给 fn\n var context = this\n var args = arguments\n\n // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn\n clearTimeout(timer)\n\n // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），\n // 再过 delay 毫秒就执行 fn\n timer = setTimeout(function () {\n fn.apply(context, args)\n }, delay)\n }\n}\n</pre>将 Debounce 化后的闭包函数作为频繁触发的事件的回调，其实还是频繁执行的，只不过，返回的闭包函数内部通过<code style=\"background-color: rgba(27, 31, 35, 0.05);\">clearTimeout()</code>，让真正需要执行的回调函数不执行了，只有在连续时间内，不在触发频繁事件后的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">delay</code>秒后，执行真正的回调。<h4>Demo</h4><a href=\"http://lishengzxc.github.io/bblog/Debounce.html\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(3, 102, 214); background-color: initial;\">http://lishengzxc.github.io/bblog/Debounce.html</a><pre class=\"ql-syntax\" spellcheck=\"false\">document.addEventListener('mousemove', debounce(() => console.log(new Date().getTime()), 1000), false);\n</pre>再鼠标不移动后的 1000ms 后，执行了真正的回调，打印了当前时间戳。比较合理的应用场景还有，在一个表单的输入框中（包括多行文本输入框），想当用户停止输入后，再<code style=\"background-color: rgba(27, 31, 35, 0.05);\">ajax</code>：<pre class=\"ql-syntax\" spellcheck=\"false\">input.addEventListener('keyup', debounce(() => ajax(...), 1000), false);\n</pre><h4><code style=\"background-color: rgba(27, 31, 35, 0.05);\">_</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.debounce()</code>分析</h4>先看看<code style=\"background-color: rgba(27, 31, 35, 0.05);\">underscore</code>的。<pre class=\"ql-syntax\" spellcheck=\"false\"> _.debounce = function(func, wait, immediate) {\n var timeout, result;\n\n var later = function(context, args) {\n timeout = null;\n if (args) result = func.apply(context, args);\n };\n\n var debounced = restArgs(function(args) {\n if (timeout) clearTimeout(timeout);\n if (immediate) {\n var callNow = !timeout;\n timeout = setTimeout(later, wait);\n if (callNow) result = func.apply(this, args);\n } else {\n timeout = _.delay(later, wait, this, args);\n }\n\n return result;\n });\n\n debounced.cancel = function() {\n clearTimeout(timeout);\n timeout = null;\n };\n\n return debounced;\n };\n</pre>它的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">debounce</code>还接受第三个参数<code style=\"background-color: rgba(27, 31, 35, 0.05);\">immediate</code>，这个参数是用来配置回调函数是在一个时间区间的最开始执行（<code style=\"background-color: rgba(27, 31, 35, 0.05);\">immediate</code>为<code style=\"background-color: rgba(27, 31, 35, 0.05);\">true</code>），还是最后执行（<code style=\"background-color: rgba(27, 31, 35, 0.05);\">immediate</code>为<code style=\"background-color: rgba(27, 31, 35, 0.05);\">false</code>），如果<code style=\"background-color: rgba(27, 31, 35, 0.05);\">immediate</code>为<code style=\"background-color: rgba(27, 31, 35, 0.05);\">true</code>，意味着是一个同步的回调，可以传递返回值。关键的地方是，单独拿出了一个<code style=\"background-color: rgba(27, 31, 35, 0.05);\">later</code>函数通过控制<code style=\"background-color: rgba(27, 31, 35, 0.05);\">timer</code>来觉得连续的时间除一开始后，是不是要执行回调。<code style=\"background-color: rgba(27, 31, 35, 0.05);\">loadsh</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">debounce</code>，接受更多的配置：<ul><li><code style=\"background-color: rgba(27, 31, 35, 0.05);\">[options.leading=false] (boolean)</code>: Specify invoking on the leading edge of the timeout.</li><li><code style=\"background-color: rgba(27, 31, 35, 0.05);\">[options.maxWait] (number)</code>: The maximum time func is allowed to be delayed before it’s invoked.</li><li><code style=\"background-color: rgba(27, 31, 35, 0.05);\">[options.trailing=true] (boolean)</code>: Specify invoking on the trailing edge of the timeout.</li></ul><code style=\"color: rgb(3, 102, 214); background-color: rgba(27, 31, 35, 0.05);\"><a href=\"https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L7811\" rel=\"noopener noreferrer\" target=\"_blank\">lodash</a></code><a href=\"https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L7811\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(3, 102, 214); background-color: initial;\">的</a><code style=\"color: rgb(3, 102, 214); background-color: rgba(27, 31, 35, 0.05);\"><a href=\"https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L7811\" rel=\"noopener noreferrer\" target=\"_blank\">debounce</a></code><a href=\"https://github.com/lodash/lodash/blob/3.10.1/lodash.src.js#L7811\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(3, 102, 214); background-color: initial;\">源代码</a><code style=\"background-color: rgba(27, 31, 35, 0.05);\">leading=true</code>等效于<code style=\"background-color: rgba(27, 31, 35, 0.05);\">underscore</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">immediate=true</code>。<code style=\"background-color: rgba(27, 31, 35, 0.05);\">trailing</code>则正好相反。<code style=\"background-color: rgba(27, 31, 35, 0.05);\">maxWait</code>设置了超时时间，在规定的超时间后，一定调用回调。（通过内部设置了两个<code style=\"background-color: rgba(27, 31, 35, 0.05);\">setTimeout</code>，一个用来完成基础功能，让回调只执行一次，还有一个用来控制超时）<h2>Throttle</h2><h4>英文释义：</h4><blockquote>n. 节流阀</blockquote><code style=\"background-color: rgba(27, 31, 35, 0.05);\">throttle</code>就是设置固定的函数执行速率，从而降低频繁事件回调的执行次数。前面提到的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">canvas</code>绘制好的图表后，用户改变窗口大小后，重新绘制图表，就很适合使用<code style=\"background-color: rgba(27, 31, 35, 0.05);\">throttle</code>。最近在写一个 Tank 游戏，用户可以非常快的点击开火，但是我们需要通过 Throttle，来降低一些开火的频率。<h4>我们先自己实现一个</h4><pre class=\"ql-syntax\" spellcheck=\"false\">/**\n*\n* @param fn {Function} 实际要执行的函数\n* @param delay {Number} 执行间隔，单位是毫秒（ms）\n*\n* @return {Function} 返回一个“节流”函数\n*/\n\nfunction throttle(fn, threshhold) {\n\n // 记录上次执行的时间\n var last\n\n // 定时器\n var timer\n\n // 默认间隔为 250ms\n threshhold || (threshhold = 250)\n\n // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数\n return function () {\n\n // 保存函数调用时的上下文和参数，传递给 fn\n var context = this\n var args = arguments\n\n var now = +new Date()\n\n // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃\n // 执行 fn，并重新计时\n if (last && now < last + threshhold) {\n clearTimeout(timer)\n\n // 保证在当前时间区间结束后，再执行一次 fn\n timer = setTimeout(function () {\n last = now\n fn.apply(context, args)\n }, threshhold)\n\n // 在时间区间的最开始和到达指定间隔的时候执行一次 fn\n } else {\n last = now\n fn.apply(context, args)\n }\n }\n}\n</pre>代码中，比较关键的部分是最后部分的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">if .. else ..</code>，每次回调执行以后，需要保存执行的函数的时间戳，为了计算以后的事件触发回调时与之前执行回调函数的时间戳的间隔，从而根据间隔判断要不要执行回调。<h4><code style=\"background-color: rgba(27, 31, 35, 0.05);\">_</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">.throttle()</code>分析</h4>直接看<code style=\"background-color: rgba(27, 31, 35, 0.05);\">underscore</code>的。因为<code style=\"background-color: rgba(27, 31, 35, 0.05);\">lodash</code>没有对其再进行包装。<pre class=\"ql-syntax\" spellcheck=\"false\"> _.throttle = function(func, wait, options) {\n var timeout, context, args, result;\n var previous = 0;\n if (!options) options = {};\n\n var later = function() {\n previous = options.leading === false ? 0 : _.now();\n timeout = null;\n result = func.apply(context, args);\n if (!timeout) context = args = null;\n };\n\n var throttled = function() {\n var now = _.now();\n if (!previous && options.leading === false) previous = now;\n var remaining = wait - (now - previous);\n context = this;\n args = arguments;\n if (remaining <= 0 || remaining > wait) {\n if (timeout) {\n clearTimeout(timeout);\n timeout = null;\n }\n previous = now;\n result = func.apply(context, args);\n if (!timeout) context = args = null;\n } else if (!timeout && options.trailing !== false) {\n timeout = setTimeout(later, remaining);\n }\n return result;\n };\n\n throttled.cancel = function() {\n clearTimeout(timeout);\n previous = 0;\n timeout = context = args = null;\n };\n\n return throttled;\n };\n</pre>其中<code style=\"background-color: rgba(27, 31, 35, 0.05);\">previous</code>相当于自己实现代码中的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">last</code>。它还接受<code style=\"background-color: rgba(27, 31, 35, 0.05);\">leading</code>和<code style=\"background-color: rgba(27, 31, 35, 0.05);\">trailing</code>来控制真正回调触发的时机，这和<code style=\"background-color: rgba(27, 31, 35, 0.05);\">lodash</code>的<code style=\"background-color: rgba(27, 31, 35, 0.05);\">_.debounce</code> 差不太多。<h2>最后</h2>这里有一个可视化分析页面：<a href=\"http://demo.nimius.net/debounce_throttle/\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"color: rgb(3, 102, 214); background-color: initial;\">http://demo.nimius.net/debounce_throttle/</a>，大家可以点开看看。","keywords":"","addTime":"2020-09-21T16:59:44.789Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-09-21T17:01:10.746Z","__v":0},{"sort":0,"status":true,"_id":"5f683f03f7abf11905c884eb","title":"vue3全球发布会总结9月18日 ","content":"刚刚看完珠峰的面试视频，之前看了开课吧vue访谈中。就已经有初步了解vue3，有几个令人激动的新特性，除了性能有很大的提升，也通过composition，解决了部分开发过程令人不爽的地方。也很让人期待vue3的正式发布，原本计划是八月。而已经拖到9月18号了。接下来就是看涉及的生态发展如何了。 2018年2月就开始有想法。 2018年9月12 使用typescript monorepo 尝试重写的原型阶段。半年之后，有了virtrul dom runtime 基于proxy，并也支持 activitys。2018年9月19 经过一周，建立vue-next repo2018年9月21日 选部启动计划 2018.09-2019早期 experiments（class,TypeScript,hooks,time slicing）2019.01.04 Established the RFC process2019.02.27 Class API RFC2019.03-2019.05 researching new rendering strategy2019.05.21 Class API dropped2019.05-2019.06 Re-writing core rendering logic(patch flag & block tree optimizations)2019.06-2019-06 Composition API design / feedback2019.08.16 Compostion API RFC2019.09 2.x Options API support . New Compiler implementation2019.10 v-model2019.11 Transition system2019 12 Tooling(SFC,HMR)2020.01.02 3.0.0-alpha.12020.01-2020.04 Server-side rendering2020.4.16 3.0.0-bata.12020.04-2020.07 Dogfooding via vite& vitePress Teams working on V3 support in sub projects 2020.07.17 3.0.0-rc.1 what's New In Vue 3More maintainabletypeScript + modularized internalsFasterPoxy-based Reactivity SystemCompiler-informed Virtual Dom & SSRSmallerTree-shakingCompile-time flagsScales betterComposition APIBetter DXNew Single-file Component improvements <img src=\"/upload/2020-09-21/14/39/15/2b0e8880-fbd5-11ea-9def-af6b01a723f7\">Unlocking Advanced Use CasesCompile-time customizations via compiler plugins (E.g. build time i18n)Custom renderres (E.g. Native,WebGL,Terminals)Standalone reactivity package (E.g with alternative templating system) TypeScriptInternalBetter IDE support -> easier & safer refactoringActually lowers contribution barrierExternalIncreasing demand for better Type Script integration from Vue usersAuto generating type declarationsmore consistency,less maintenance,better DX Composition APIPurely additive for advanced use casesNatural,complete TypeScript supportDesigned for logic organization,encapsulation and reuseRecommended replacement for mixins Compiler-infomed Virtual DomTemplate compilation phase provides inforamtion that can be used for runtime optimzationsCompiles templates into optimized Virtual DOM render functionsRuntime diff algorithm detects compiler-geneated hints and take fast paths whenever possibleFalls back to full diff mode on manually written,un-optimized render functions omiler-informed SSRPre-optimizes static content into plain stringsHandles mix of template or VDOM based componentsEfficient hydaration on the client Tree-shaking-aware global APIpay for what you useAll features inclued:~23kbMinimal hello world:~14kb*Compostion API only: ~12kb* New Single File Component Features<script setup>syntax sugar for Composition API in SFCs<style vars>state-driven CSS variables injection into SFC <style> blocks <Suspense>Declaratively wait on nested async dependenciesStill experimental,but you've already witnessed it in action in the Nuxt 3 demo! 支持的组件ant design view / vent UI建议2020年末/2021年初才投入生产。https://composition-api.vuejs.org/zh/","keywords":"","addTime":"2020-09-21T05:43:22.587Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-09-21T07:26:32.329Z","__v":0},{"sort":0,"status":true,"_id":"5f653d6ef7abf11905c884ea","title":"使用mkcer本地支持https服务","content":"Chocolatey ","keywords":"","addTime":"2020-09-18T23:05:41.311Z","cate_name":"默认","cate_id":"5d7fe8aee56e8d5c841e8872","updateTime":"2020-09-18T23:14:57.756Z","__v":0}],"pagination":{"page":1,"size":10,"hasMore":true,"total":39,"num":4}}

unity 2.5d开发日志四

Unity 2.5开发日志 三

Unity 2.5d 开发日志二

关于魔力宝贝图档问题

unity 2.5d入门

我最近折腾了一下unreal4 2.5d

在react中使用debounce和Throttle了。

节流防抖分析 _的.debounce和.throttle

vue3全球发布会总结9月18日

使用mkcer本地支持https服务

Unity 2.5开发日志三