cocos 入门拖拽游戏

原创
10/28 22:51
阅读数 39

首先搞这些技术其实学习意义不大, 应用层无法就是组合而已, 大多数是体力活, 但是对这些东西有所了解, 在技术选型上会有一些优势, 比如同样的简单动画, 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;
    planeNode.on(cc.Node.EventType.MOUSE_DOWN, (event) => {
      mouseDown = true;
    });
    planeNode.on(cc.Node.EventType.MOUSE_MOVE, (event) => {
      if (!mouseDown) return;
      //获取鼠标距离上一次点的信息
      //   let delta = event.getDelta();
      //   planeNode.x = planeNode.x + delta.x;
      //   planeNode.y = planeNode.y + delta.y;
      let location = event.getLocation();
      planeNode.position = planeNode.parent.convertToNodeSpaceAR(location);
    });
    //当鼠标抬起的时候恢复状态
    planeNode.on(cc.Node.EventType.MOUSE_UP, (event) => {
      mouseDown = false;
    });
  },
});

 

构建发布

打包, 使用默认参数即可

注意在构建过程中不能修改, 否则会终止构建, 发布包出去cocos依赖其实并不多

 

 

 

本地测试

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部