cocos 入门拖拽游戏

最新推荐文章于 2022-11-11 15:16:23 发布

阿豪boy

最新推荐文章于 2022-11-11 15:16:23 发布

阅读量106

点赞数

文章标签：游戏 java vue python javascript

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064861

版权

原文链接: cocos 入门拖拽游戏

上一篇: 舞蹈链解精确覆盖问题

下一篇: DLX 求解数独

首先搞这些技术其实学习意义不大, 应用层无法就是组合而已, 大多数是体力活, 但是对这些东西有所了解, 在技术选型上会有一些优势, 比如同样的简单动画, vue实现可能就十几k, 但是cocos打包下来2m起步, 因为引擎很大, 但是如果是很多的小游戏, 并且有比较丰富的动画, 那么缓存就能解决包大小问题, canvas相比css有更好的兼容性, 此时使用cocos会更加合理, 当然具体情况肯定还需要具体讨论, 但是学不止步, 玩一玩还是可以的~

参考

https://juejin.im/post/6844903667842170888

下载安装

后面需要注册, win10上相对简单的吧.....mac流程也一致

先下载dashboard, 然后下载引擎

https://www.cocos.com/creator

这里我没有选... 只想试试h5的, 实测只是web的话, 不需要vs

新建项目

新建hello world, 并运行, 没有c++和vs好像也能跑~

实现拖动功能

新建js脚本, 保存后, 并拖拽图片到对应的属性上

有两种位置的获取方式

cc.Class({
  extends: cc.Component,
  properties: {
    planeNode: {
      type: cc.Node,
      default: null,
    },
  },
  onLoad() {
    let { planeNode } = this;
    let mouseDown = false;
    const root = cc.director.getScene().getChildByName("Canvas");
    planeNode.on(cc.Node.EventType.MOUSE_DOWN, (event) => {
      mouseDown = true;
    });
    root.on(cc.Node.EventType.MOUSE_MOVE, (event) => {
      if (!mouseDown) return;
      let location = event.getLocation();
      planeNode.position = planeNode.parent.convertToNodeSpaceAR(location);
    });
    //当鼠标抬起的时候恢复状态
    root.on(cc.Node.EventType.MOUSE_UP, (event) => {
      mouseDown = false;
    });
  },
});