如何在CocosCodeIDE中运行学习js-tests

我想对于每个Cocos2d游戏开发者来说,js-tests一直都是学习和参考的宝贵资源,也是最权威的指导教程。而,我们知道,CocosCodeIDE是官方推荐的一款强有力的IDE,其功能之强大,之便捷是其他IDE所无法比拟的。那么如何将二者组合在一起,为我们的学习提供帮助呢?本篇博客将带你走进他们的世界。

一、了解CocosCodeIDE和js-tests

CocosCodeIDE:官网推出的一款强大的IDE,基于Eclipse改制而成。其主要特色在于两个方面:

  1. 便捷实用: CocosCodeIDE安装简单,配置和创建项目非常容易,运行,调试,发布项目也非常容易上手。
  2. 功能强大: 我认为CocosCodeIDE最吸引我的地方就是其强大的功能,主要体现在对源码进行修改后,只需要保存,即可在运行的游戏中看到修改之后的效果,而不需要重新运行游戏。这为经常发生的“微调”操作带来了极大的便利。

PS:CocosCodeIDE官方下载地址:http://cn.cocos2d-x.org/download/#anchor5

CocosCodeIDE官方教程:http://cn.cocos2d-x.org/article/index?type=code-ide&url=/doc/cocos-docs-master/manual/code-ide/zh.md

js-tests:当你下载好游戏引擎包时,一般都会自带两个案例教程,一个就是大家经常看到的“打飞机”游戏,另一个就是js-tests。至于它们在哪里呢?请到你的安装目录下的samples文件夹下寻找,如下图:

js-tests里面主要展示的是cocos2d API的具体使用方法的案例教程,几乎每个API都可以找到使用示例,效果非常赞。

二、为什么要组合?

在组合之前,我们解释一下为什么要将二者组合。网上的不少教程都推荐大家通过第三方软件的帮助,如:appserv,wamp,xampp等,来实现在浏览器中直接运行js-tests和moonwarriors(打飞机),并通过浏览器中观看效果,IDE中查看代码的方式进行学习,可是这样不仅反复切换非常麻烦,也不能通过自己的微调来查看效果的改变,当然了,如果要看到改变必须重新运行加载一遍。非常浪费时间,异常繁琐。

相比之下,我们会发现,在CocosCodeIDE中,我们可以通过win32调试功能,这个非常强大的功能,对我们的js-tests进行实时微调,这对于学习来说,无疑是巨大的帮助。当然了,你也可以通过CocosCodeIDE中的通过浏览器运行的功能,在浏览器中查看js-tests的运行情况。下面,我们就来一起将CocosCodeIDE和js-tests组合起来吧。

PS:友情提醒,通过win32调试在浏览器中运行得到可测试的功能是稍有差异的,有的功能只能在win32调试状态下查看,有的则只能在在浏览器中运行状态下查看。

win32运行状态下无法查看的功能有:

Bake Layer Test

Box2D Test

Facebook SDK Test

Reflection Test

TextInput Test

Touches Test

在浏览器中运行无法查看的功能有:

Effects Test

Effects Advanced Test

MotionStreak Test

OpenGL Test

Reflection Test

Cocos2d JS Presentation

下图为CocosCodeIDE部分截图,其中最左边两个按钮分别为win32调试,win32运行,最右边的按钮为在浏览器中运行

三、组合出奇迹

说到组合方法,你可能第一个想法就是,既然CocosCodeIDE是基于Eclipse的,那我直接导入js-tests项目不就完事了嘛。这个,你可以去尝试一下,反正我是没成功,貌似js-tests不是一个完整的CocosCodeIDE项目,所以无法导入。如果你成功导入了,请告诉我,不胜感激。如果,你也没有导入成功,不要着急,跟着我做,只需四步,走向成功。

第一步:在CocosCodeIDE中新建工程

首先在CocosCodeIDE中新建一个Cocos JavaScript工程(我的工程名为js-tests,这个名字随便起。),工程截图如下:

PS:如果你对配置Cocos Code IDE以及其开发环境还不是很了解的话,可以参考我的两篇博客:

如何快速搭建Cocos2d-JS游戏开发环境:http://blog.csdn.net/qiumengchen12/article/details/44649331

如何在Cocos2d-JS环境下使用Cocos Studio导出的资源:http://blog.csdn.net/qiumengchen12/article/details/44726787

第二步:删除无用文件

由于我们创建的工程默认,我们使用了CocosStudio,并为我们创建了一些CocosStudio需要的文件及文件夹,而我们这里只是要制作js-tests的CocosCodeIDE运行版本,所以可以将和CocosStudio相关的文件暂时删除,使得整个项目更加清晰。但是可以保留CocosStudio文件夹,以备以后使用。如下图,选中的文件均与CocosStudio有关,均可删除。

第三步:替换相应文件

我们需要替换的文件有:res文件夹,src文件夹,index.html,main.js,project.json。替换文件,即将游戏引擎安装目录的samples/js-tests文件夹下的相应文件,复制粘贴到我们在CocosCodeIDE中创建的项目目录下,并替换项目目录下存在的旧文件。最后替换后的项目,如下:

第四步:运行项目

首先,为了防止资源不同步出错,你可以刷新一下你在CocosCodeIDE中的项目,然后你就可以愉快地运行你的项目了,无论是win32还是在浏览器中运行,你都会收获成功的喜悦!

win32运行效果截图:

在浏览器中运行效果截图:

四、最后的支援

帮人帮到底,送佛送到西。如果你懒于进行如上操作,或者操作过程中有不可抗拒因素导致你无法进行,你也可以考虑下载并使用我分享的已经修改好的CocosCodeIDE版的js-tests工程。

我的环境信息如下:

(1) Cocos2d-JS引擎版本:V3.3

(2) Cocos版本:V2.1.5 For Win

(3) Cocos Code IDE版本:V1.2.0 For Win(64bit)

百度网盘分享链接:

链接:http://pan.baidu.com/s/1o6xFnOu 密码:nv0s

时间: 2024-10-06 07:41:44

如何在CocosCodeIDE中运行学习js-tests的相关文章

[转帖]如何在VirtualBox中运行macOS Catalina Beta版本

如何在VirtualBox中运行macOS Catalina Beta版本 secist2019-08-03共2179人围观系统安全 https://www.freebuf.com/articles/system/208917.html 晚上尝试一下. 本内容是关于如何在Linux上的VirtualBox中运行macOS Catalina Beta版的简短指南. 在开始之前你需要做以下准备: Linux x86_64(我使用的是Mint 19.1)英特尔酷睿CPU,不少于8 GB的内存和一个不错

如何在linux中运行sql文件

1.在linux中进入sql命令行 mysql -u root -p   输入密码 2.假设home下面有a.sql文件 先得use databasename,要不会报错 “No Database Selected” 然后source /home/a.sql 记得home前面要有 / 要不会报错 不能打开这个文件的. ---------------------------------------- 还有一个更好的方法: 使用navicat来连接linux下的mysql数据库 然后再navicat

如何在android中运行C语言程序

问题阐述: 本人使用mini6410开发了一个sqlite数据库的程序,在mini6410的linux系统下已经能够成功运行了.因为Android使用的也是linux内核,所以我想当然的认为按照同样的方法将程序移植到mini6410的android系统中也可以成功运行,但是当我运行程序的时候却提示我不能找到可执行文件(xlisten-arm是交叉编译出来的可执行文件): / # ./xlisten-arm/system/bin/sh: ./xlisten-arm: not found 1.探索:

模拟Spring如何在WEB中运行

Spring在web中配置和普通的Java程序中有所区别,总结一下主要表现在以下几个方面: ①jar包不同,需要引入两个web的jar包 ②需要考虑IOC容器创建的时间 非 WEB 应用在 main 方法中直接创建 在web应用中为了保证spring的运行,所以必须在程序刚在容器中启动时就必须创建IOC容器,这样的时间人为不好把握,我们可以通过Listener来监听程序的运行,保证在刚开始时就创建,具体采用的是 创建一个实现ServletContextListener接口的类,并在重写的cont

如何在spring中运行多个schedulers quartz 实例

http://wzping.iteye.com/blog/468263 1.定义一个JOB <!-- 使用pojo来做job,指定pojo和method -->     <bean id="jobDetail" class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">         <property name="tar

如何在 Gradle 中运行 Groovy 的 主类以及测试类

完整的Gradle小项目:密码管理集中化 下面是配置范例 build.gradle: apply plugin: 'groovy' repositories { mavenLocal()     mavenCentral() } dependencies {     compile 'org.codehaus.groovy:groovy-all:2.3.7' compile 'org.apache.ant:ant:1.9.4'     testCompile 'junit:junit:4.11'

如何在cmd中运行.py文件

C:\Users\mf>cd C:\Program Files\Python36C:\Program Files\Python36>python const.py 切换到.py文件所在目录

在 Chrome 开发者工具中调试 node.js

命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node.js 和 Chromium 的功能融合在了一起.它的目的在于为调试.分析和开发 Node.js 应用程序提供一个简单的界面. 你可以使用 npm 来安装它: npm install -g devtool 在某种程度上,我们可以用它来作为 node shell 命令的替代品.例如,我们可以这样打开一

在sublime中运行python

最近sublime越来越火了,甚至大有赶超经典编辑器vim的趋势. 如何在sublime中运行python脚本呢? STEP 0.首先要到python官网下载安装python 推荐安装python3 STEP 1.安装插件 按ctrl+shift+p,在弹出的文本框中输入install package,回车.稍等就会弹出插件管理器(类似linux下的software center) STEP 2.安装如下插件: pylinter python PEP8 Autoformat python 3 S