专栏首页游戏开发之旅CocosCreator + socketIO简易教程(更新至1.0)

CocosCreator + socketIO简易教程(更新至1.0)

我们从已经安装了CocosCreator 懂得建立HelloWorld项目 有前台与后台交互基本思想 但是完全不知道node.js是啥 的前提开始讲 提醒 : 如果在按照这个流程学习的过程中 有任何的bug 请在该帖子下回复 因为写帖子和敲代码还是两回事 可能有一些和描述上不一样的地方 首先下载并安装 node.js node.js MAC OS : (为什么放网盘里面呢 鬼知道你看到这篇帖子的时候 api都换了几代了)node.js_for_mac 双击安装 不断下一步就OK了 完成后安装目录如图

在Dos下 (windows 为 win + R -> cmd) 输入node 后显示箭头 > 则安装完成 后面安装web框架Express (如果npm不能安装 请看最后面网盘目录下打包的node_module 解压后 放到node.js安装目录下node_module下即可 然后直接看后面的路径配置) 在上图安装目录下 按住shift + 鼠标右键 -> 在此处打开命令行 输入 npm install --save express 稍等几秒后就会安装完成 后面安装webSocket包装框架SocketIO 在上图安装目录下 按住shift + 鼠标右键 -> 在此处打开命令行 输入 npm install --save socket.io 稍等几秒后就会安装完成

然后配置一下包路径 NODE_PATH : F:\Node.js\Root\node_modules (这个是我的Node.js安装路径下node_module文件夹的路径 你应当指到自己电脑上node.js安装路径下node_module文件夹) 添上这一句之后 后面代码里面的require('express') / require('socket.io'); 才知道 要在NODE_PATH指定的文件夹下面去找包 和 import JAVA 是一个道理 需要配置CLASS_PATH

到这里node.js后台的配置工作就完成了 现在来尝试一下写一个极简的后台代码 说白了 也就是 javascript代码 node.js编程的一个思想就是模块的组合 就和搭积木一样 要用什么就伸手要什么(require), 想叫别人做什么就大声喊出来(socket.emit('告诉一个人')或socket.broadcast.emit('告诉全部人')), 听到的人就会去做事情了(socket.on('听到了',function('你给我的这个啥玩意'){ 做事情}));

后面再server.js目录下 依旧shift + 鼠标右键 ->在此处打开命令行 输入node server.js (可以输入node 然后按Tab 自动补全) 运行 效果如图

至此 一个简单的服务器就搭建完成了 好了 那个黑框框(dos)先留着 不要关掉 我们等会继续用 然后下载客户端的socket.io.js文件 用于在前端访问socket.io socket.io.js 然后修改socket.io.js 代码 在源码的最外围做一个if包装(发布到Native平台时需要做到这一步)

现在来写个cocos前端代码 首先创建一个HelloWorld项目吧 这个就不多说明了 然后 在资源管理器下新建一个文件夹script

然后在电脑目录中 找到HelloWorld项目的script文件夹 将我们之前下的socket.io.js扔到里面

上面一个框框是项目目录 下面是socket.io.js文件 然后回到cocoscreator中 就能看到在script文件夹下有socket.io 了

后面我们开始写连接后台的前端脚本吧 在script文件下右键->新建->javascript (最好重命名一下 我的为myapp) 然后在onload函数下 写如下代码

好啦 到这里 前台的代码也写完啦 还有一点点收尾工作 首先 选中层级管理器中的 canvas 将资源管理器中的myapp.js拉到右边的属性管理器上 扔下去

首先 继续选中层级管理器中的 canvas 将层级管理器中的label拉到右边的属性管理器上myapp.js组件的Label框上 扔下去

好啦 我们现在可以运行来看一下啦 首先确定 之前的黑框框还在吧 不然就再开一次吧 进到server.js 目录下 shift +鼠标右键 ->在此处打开命令行 输入node server.js 开启后台 然后运行HelloWorld项目

好啦 大概就是这样子啦 有什么不清楚的可以在cocosCreator13群中问我们啦 企鹅群: 428196107 另外: socket.io.js的下载链接 可以通过访问 http://socket.io/download/ 点击下方socket.io-client 链接到github中

然后点击右中上位置DownloadZIP 然后解压就能找到socket.io.js啦

还有 注意到server.js 中这句话 app.use(express.static(__dirname + '/public')); 添加了这句之后 就可以在下面放各种html啥啥的 就可以访问本地html了

上面的范例在CCC中进行浏览器调试是没有问题的 但是如果发布到其他平台的时候 需要对myapp.js提前做下面改动

文章出自:http://www.cocoachina.com/bbs/read.php?tid-458895-toread-1-page-1.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入浅出js实现继承的7种方式

      有些人认为JavaScript并不是真正的面向对象语言,在经典的面向对象语言中,您可能倾向于定义类对象,然后您可以简单地定义哪些类继承哪些类(参考C++ i...

    TimothyJia
  • ​什么问题最让程序员头秃?我们分析了11种语言的11000个问题

    我们选择了 11 种最流行的编程语言(以 Stack Overflow 标签的频率来衡量),并进行了一项研究,旨在揭示这些问题中的某些共性和差异。

    华章科技
  • Rust 1.39 正式发布

    万众瞩目的 async/await 稳定了。async fn/async {}/ async move {} 都是可以的。

    MikeLoveRust
  • 聊聊rocketmq的enableMsgTrace

    rocketmq-client-4.5.2-sources.jar!/org/apache/rocketmq/client/producer/DefaultMQ...

    codecraft
  • 55款大数据分析神器:你还在用Excel?

    来源:DataCastle数据城堡(ID:DataCastle2016)、大数据分析和人工智能(ID:datakong)

    华章科技
  • 有道题,得细说

    最近,在一次正式场合下,遇到了一道检验js相关原理的题目,当时虎躯一震,这不是送分儿咩?不由分说,大笔一挥,写完之后还骄傲的叉了会儿腰,大概是这样事儿的:

    石燕平
  • ES6复制拷贝数组,对象,json数组

    数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。

    TimothyJia
  • Prometheus 通过 consul 实现自动服务发现

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    哎_小羊
  • 零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍

    html翻译一下:hype text mark language 超文本标记语言

    刘金玉编程
  • 介绍一种在ABAP内核态进行内表高效拷贝的方法,和对应的Java和JavaScript版本的伪实现

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券