• 在本文中,我将展示如何在 Mac os 10.9(Maverics) 上搭建 Cocos2d-JS 开发环境。 下载必备的软件包 下载并安装WebStorm7。WebStorm7目前的稳定版本是7.0.3。为什么我们选择WebStorm?因为它提供了许多功能,如...

    在本文中,我将展示如何在 Mac os 10.9(Maverics) 上搭建 Cocos2d-JS 开发环境。

    下载必备的软件包

    1. 下载并安装WebStorm7。WebStorm7目前的稳定版本是7.0.3。为什么我们选择WebStorm?因为它提供了许多功能,如JavaScript代码的语法完成,调试,语法高亮,版本系统集成等,你可以去WebStorm的更多信息的官方网站。

    2. 从Cocos2d-x的官方网站下载Cocos2D-JS 3.0alpha版本。点此处下载。当你下载了的Cocos2D-JS 3.0alpha版本。你应该把它解压缩到一个合适的位置。在我们的例子中,我把它解压在~/work/cocos2d-js-v3.0-alpha2~代表你的主目录路径,这在我们的例子中是 /Users/linshun

    注意:

    你也可以通过GitHub上得到的Cocos2D-JS的前沿版本。这里是的Cocos2D-JS GitHub的版本库,最新的开发工作在develop分支。

    1. 下载并安装Chrome34和JetBrains-IDE-support扩展。

    好吧,让我们来看看如何配置WebStorm7开发和调试我们的Cocos2D-JS应用。

    如何创建新工程

    Cocos2d-JS 提供了一个控制台工具,使CH5JSB应用程序的开发更加简单和方便得多。你可以使用它来创建一个新的项目,其发布到Android,iOS,Mac OS或web,它是非常容易使用。

    安装Console工具

    第一步,在你使用该工具前需要先安装。 请克隆 Cocos2d-JS仓库并跟新所有子模块。在Cocos2d-JS文件夹下打开控制台工具(console),然后在控制台上运行./setup.py。在安装期间你可能需要提供你的 NDK, Android SDK 和 ANT的路径。 注意该工具是使用python开发的,所以你需要在你的机子上安装python 2.7.5或以后的版本(但是不支持 python3)。

    **注意: ** 请执行 source ~/.bash_profile,使环境设置立即生效。

    创建新工程

    // 创建一个包含 Cocos2d-x JSB 和 Cocos2d-html5 工程:
    cocos new -l js
    
    // 创建一个仅包含 Cocos2d-html5 的工程:
    cocos new -l js --no-native
    
    // 在指定的目录创建一个指定名字的工程:
    cocos new projectName -l js -d ./Projects
    

    在这个教程中,我们使用 cocos new -l js 在当前目录创建一个MyJSGame工程。

    运行该工程

    • 使用Websever 运行 Cocos2d-JS 工程

      cd ~/work/MyJSGame
      cocos run -p web
      
      
    • 使用Cocos2d-x JSB 编译并运行项目

      cd ~/work/MyJSGame
      cocos compile -p ios|android|mac
      cocos run -p ios|android|mac
      
    • 有用的参数

      -p platform : 平台可以是 ios|mac|android|web.
      -s source : 你的工程目录, 如果不指定当前目录会被使用.
      -q : 静默模式, 移除日志消息.
      -m mode : debug 或 release 模式, 默认是debug
      --source-map: 普通的 source-map 文件. (仅针对Web 平台)
      

    配置WebStorm 进行Cocos2d-JS开发

    首先,你应该启动WebStorm7。如果这是你第一次启动WebStorm,它会要求你选择你的个人偏好,比如选择键盘映射。

    这是我的WebStorm启动截图:

    图1

    img

    注意:

    如果你是第一次启动WebStorm,最近打开工程部分应该为空。

    现在,让我尝试用WebStorm进行Cocos2d-JS开发。

    1. 打开已经创建好的项目 MyJSGame

      正如我们可以从上面的图片中看到,你应该选择Create New Project from Exisiting Files(从已存在的文件创建新项目)

      然后,它会提示你以下选项:

      图2

      img

    2. 选择Source files are in a local directory, no Web server is yet configured(源文件在本地目录,没有配置web server) 并点击Next(下一步)继续

      图3 img

    3. 在这一步,你应该展开目录树来指定你的MyJSGame源代码放的位置。当你指定了正确的目录,注意Finish按钮仍然是灰色的。

    4. 现在,我们应该设置该目录为项目的Project Root(根目录)。单击项目根目录按钮,Finish(完成)按钮将激活。

      图4 img

    5. 恭喜你,你已经成功配置了webstorm 开发 Cocos2d-JS 项目。

    体验 Cocos2d-JS

    当你已经添加了整个的Cocos2D-JS项目目录到WebStorm7。WebStorm将解析所有的Cocos2D-JS源代码。如果你打开​​MyJSGame/src/myApp.js,你可以得到的准确的语法自动补全的能力。

    图5 img

    如果你有一个第三方JavaScript库在你的Cocos2d-JS游戏应用程序,你也可以把它添加到WebStorm库来解析并启用实时语法自动补全。

    下面是说明:

    (可选) 添加第三方库进行解析

    1. 点击Settings(设置)按钮启动你工程的设置对话框:

      图6 img

    2. 在点击Settings(设置)菜单后,它将弹出如下的对话框:

      图7:

      img

    3. 现在你可以点击 Add... 按钮,然后会提示你指定你的javascript库的路径。

      图8 img

    在WebStorm中调试Cocos2d-JS javascript

    是时候学习调试Cocos2d-JS代码了。

    使用JB chrome 扩展连接WebStorm 到 Chrome

    1. 右键点击 ~/work/MyJSGame下的index.html文件,并选择 Debug 'index.html'

      图9

      img

    2. 现在,它会自动打开你的Chrome浏览器。如果你把你的鼠标chrome上面的JB插件, 它会告诉你,它已经连接上WebStrom7.0.3:

      图10 img

    注意:

    这一步很简单,一旦你已经安装了插件 - “JetBrains IDE support”。当你单击WebStorm调试菜单,它会自动连接到浏览器。它是相当的方便啊!你也可以点击右侧Chrome浏览器的侧边栏的JB图标,它会立即把你带到WebStorm的IDE界面。

    在WebStorm中调试javascript代码

    返回到WebStorm界面,并双击 MyJSGame/src/myApp.js 在代码区展示。

    1. 设置断点。用鼠标右键单击myApp.js源代码视窗左边的侧栏。

      图11

      img

    2. 开始调试。 WebStorm会自动启动你的chrome浏览器,并运行示例项目。然后通过点击JB图标回到你的WebStorm。程序将停止在我们刚才设置的断点处。且编辑器将切换到Debug视图:

      图12

      img

    3. 现在你可以做调试之类的事情,单步跳出,单步进入入,单步跳过,继续执行等。

    总结

    在本教程中,向你展示了基本的步骤来配置WebStorm7进行Cocos2d-HTML5的开发工作,包括配置语法感知自动补全和调试。过程是相当简单明了。如果你对这个教程有任何疑问或建议,请告诉我们。我们将非常感谢你的贡献。

    何去何从

    在接下来的教程中,我们将通过内置的Cocos2d-JS测试和示例游戏,告诉你如何设置一个新的Cocos2d-JS项目。


    转载自:cocos2dx开发网

    展开全文
  • cocos2d-js 安装方式

    2017-02-17 10:46:51
    安装cocos-js方式: 1: git clone https://github.com/cocos2d/cocos2d-js.git  然后打开 2: git submodule update --init --recursive 3: frameworks/js-bindings/cocos2d-x/download-deps.py 4: tools/cocos2d...
    安装cocos-js方式:
    1: git clone https://github.com/cocos2d/cocos2d-js.git    然后打开
    2: git submodule update --init --recursive

    3: frameworks/js-bindings/cocos2d-x/download-deps.py

    4: tools/cocos2d-console/download-bin.py


    具体详情见https://github.com/cocos2d/cocos2d-js

    展开全文
  • Cocos2d-x Cocos2d-JS Cocos2d-lua概述

    Cocos2d-x

    2.1以前的版本

    第一步:下载Cocos2d-X的引擎包

    第二步:进入Cocos2d-X文件夹

    “cd cocos2d-1.0.1-x-0.9.2”

    然后“sudo ./install-templates-xcode.sh”命令开始执行安装命令

    执行成功后,会在Xcode中安装好一些Cocos工程模板




    然后根据这些模板去创建Cocos2d-x工程即可。



    2.2以后的版本

    将下载的压缩包解压到你指定的文件夹里。

    进入到目录cocos2d-x-3.2alpha0/tools/cocos2d-console/bin/cocos.py

    打开终端运行cocos.py脚本创建文件

    ./cocos.py new HelloWorldDemo -p com.coco2dx.org -l cpp -d ~/Desktop
    
    或者
    
    python cocos.py new HelloWorldDemo -p com.coco2dx.org -l cpp -d ~/Desktop

    参数说明:

    • HelloWorldDemo为项目名称
    • -p后面接包名
    • -l后面接开发语言类型,有cpp, lua, js三种类型
    • -d后面接项目存放的目录

    项目创建完成后,用Xcode打开HelloWorldDemo/proj.ios_mac里的Xcode项目文件,运行项目即可


    Cocos2d-JS

    Cocos2d-JS 是跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windows Phone8,Mac,Windows等平台,引擎基于MIT开源协议,完全开源,免费,易学易用,拥有活跃的社区支持。Cocos2d-JS让2D的游戏编程门槛更低,使用更加容易和高效。和其他类似游戏框架相比,它定义了更加清晰的2D游戏编程的基本组件,采用易学易用的API设计,并采用全球领先、具备原生性能的脚本绑定解决方案实现游戏的跨原生平台发布,开发效率更高,使用上最简单。

    Cocos2d-JS是Cocos2d-x的JavaScript版本,融合了Cocos2d-HTML5和Cocos2d-x JavaScript Bindings(JSB)。它支持Cocos2d-x的所有核心特性并提供更简单易用的JavaScript风格API,基于Cocos2d-JS的框架,您可以方便的使用JavaScript语言进行游戏开发,快速构建原型进行验证,并让您的游戏跑在所有支持HTML5规范的浏览器上。由于Cocos2d-html5的API和Cocos2d-x JSB的API高度一致,可让您的游戏不用修改代码或者修改少量代码就可打包为原生性能表现的混合游戏,发布到原生应用市场,从而实现,一次编码全平台部署的效果,带给您全所未有的机遇。


    不得不吐槽下cocos官网说明文档的坑爹之处:

    1. 用Cocos Console工作流开发网页/原生平台游戏(JSB开发环境简介)

    http://www.cocos.com/doc/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/cocos2d-js/2-working-environment-and-workflow/2-2-cross-native-browser-game-with-cocos-console/zh.md



    点击"引擎下载页面"跳到:



    这里好像也没有JS的引擎包吧,没办法,看着"HTML5 LITE VERSION"比较像,硬着头皮点进去


    下载下来的结果也跟说明文档里不一致


    2."搭建Cocos2d-JS v3.x 开发环境"

    http://www.cocos.com/doc/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/cocos2d-js/3-jumping-into-cocos2d-js/3-1-installation/zh.md



    点击"Cocos Code IDE"超链接却跳到 "Cocos Creator"的下载,好像他们不是同一个东东吧;

    点击"Cocos-JS v3.0"也是一样的结果。



    后面是到论坛上上找到了一个下载地址:

    http://forum.cocos.com/t/cocos-code-ide-1-2-0/34958


    够变态吧,既然让大家使用,居然把下载地址搞得云山雾罩的,这是要绕死大家的节奏啊

    后来在cc论坛发现,原来是被放弃了,既然放弃了,官方的文档也得同步更新啊,这误导多少无辜群众: IDE被放弃了?下载都没了


    真是蛋疼!抓狂抓狂抓狂

    后来终于搞明白了,原来是换成使用Cocos Creater了:

    Cocos Creator入门


    所以Coco-JS工程的创建方法:

    1. 直接命令行创建

    这个比较通用,不管官网各种开发工具怎么变来变去

    切换到Cocos2d-X的以下目录:   /tools/cocos2d-console/bin

    ./cocos new Cocos2d-JSDemo -p com.xxxxxx.cocos2djs -l js -d /doc/sample/cocos2d



    2. Cocos Creator创建


    Cocos2d-LUA

    1. 直接命令行创建

    切换到Cocos2d-X的以下目录:   /tools/cocos2d-console/bin

    按照官网的介绍:

    ./cocos.py new Cocos2d-LuaDemo -p  会出现权限的问题



    添加sudo运行,出现命令找不到的问题



    干脆直接换成cocos执行



    还是出现命令找不到,在cocos前添加 ./。不要使用sudo,否则会出现一些权限的问题



    终于成功了



    2. Cocos Creator也支持Lua:  LUA引擎支持

    3. 用Cocos Code IDE 创建lua工程

    不过Cocos Code IDE工具已经被废了


    参考

    1、官网: http://www.cocos.com/doc/

    2、cocos2d-x环境的搭建之xcode

    展开全文
  • 这篇指引主要介绍如何使用从在线下载工具下载下来的Cocos2d-JS的单文件引擎。 你有可能下载了下面三个版本中的一个: Cocos2d-JS Full Version: 完整版引擎包含Cocos2d-JS引擎的所有功能特性以及所有扩展,使用这...

    这篇指引主要介绍如何使用从在线下载工具下载下来的Cocos2d-JS的单文件引擎。

    你有可能下载了下面三个版本中的一个:

    • Cocos2d-JS Full Version: 完整版引擎包含Cocos2d-JS引擎的所有功能特性以及所有扩展,使用这个版本可以帮助你发掘Cocos2d-JS令人惊艳的创造力和可能性。你可以从官方文档首页中查看Cocos2d-JS所支持的特性列表。

    • Cocos2d-JS Lite Version: 精简版本只包含Cocos2d-JS的核心特性,它的优势是稳定,轻量,简单易用。它所包含的特性列表如下:

      • Canvas渲染器 (不支持WebGL)
      • 场景和图层
      • 事件管理器
      • 计时器
      • 精灵和贴图
      • TTF文本
      • 声音
      • 动作
      • 菜单和菜单项
    • Customized Version: 如果你选择了定制版本的引擎,引擎脚本文件将包含你所选择的所有特性。

    使用方式

    单文件引擎的使用方式和其他Web库完全一样,你只需要将脚本嵌入到你的页面中即可,可以参考下载目录中的HelloWorld.html。

    请注意脚本的加载时机,在HelloWorld的示例代码中:

    window.onload = function(){
        cc.game.onStart = function(){
            //...
        };
        cc.game.run("gameCanvas");
    };
    

    可以看到,cc.game.onStartcc.game.run都在window的onload函数中,因为只有在这时才能保证cocos2d-js-v3.0.js已经被加载成功,并且可以在你的用户脚本中使用Cocos2d-JS的API。在我们后面章节中将提到Cocos2d-JS的另一种传统工作流,那种工作流中由引擎脚本控制脚本的加载顺序,所以不需要检测页面的加载。

    你需要将这些文件放到一个本地服务器或在线服务器并通过服务器访问才可以看到正确的结果。

    帮助链接

    关于脚本压缩

    你可以使用Google Closure Compiler来将所有js文件压缩成一个文件,Closure Compiler的高级压缩压缩比非常高,即便你下载的是压缩版引擎,也可以获得可观的压缩比。具体压缩步骤如下:

    1. 下载Closure Compiler的jar程序文件
    2. 按照自己的环境配置build.xml
    3. 在控制台运行ant命令
    4. 将页面中的所有js引用删除,引入打包出的game.min.js

    请注意,你不可以在html页面中写任何js脚本,所有js脚本都必须一起打包起来,否则会引起错误。

    注意

    当你通过服务器访问游戏页面的时候,你将在控制台中发现一个错误提示: "Failed to load resource: the server responded with a status of 404 (Not Found)",提示project.json文件找不到

    这是正常现象,并不是问题,你可以忽略它。或者可以添加一个空的project.json文件来避免这个错误报告。


    转载自:http://www.cocos2dx.net/post/241

    展开全文
  • cocos2d-js总结

    2017-10-22 14:49:38
    cocos2d-js总结安装和目录介绍: 下载引擎包 http://www.cocos2d-x.org/download 安装Cocos Console 工程创建 cocos new -l js ProjectName 生成ProjectName文件夹 frameworks 包含Web引擎以及Native引擎res文件夹...

    cocos2d-js总结

    安装和目录介绍:

    • 下载引擎包 http://www.cocos2d-x.org/download
    • 安装Cocos Console
    • 工程创建 cocos new -l js ProjectName 生成ProjectName文件夹
    • web打包命令 :cocos compile -p web -m release

    frameworks 包含Web引擎以及Native引擎

    res文件夹存放资源文件

    src文件夹是主要的程序代码

    app.js是实现游戏场景的JavaScript文件

    resource.js在src文件夹中,定义资源对应的变量

    config.json保存模拟器运行配置信息

    project.json是项目的配置信息

    index.html是Web工程的首页

    main.js与首页index.html对应的JavaScript文件,负责启动游戏场景


    cocos常用的一些标签 封装成方法

    1.创建文字的方法

    setTextPos: function (position) {
        var range = position.range || ""; // 文字对齐的范围
        var pos =  position.pos || ""; // 文字对齐的方式 
        var period = new cc.LabelTTF(position.text, "",  position.fontSize,range,pos);
        var tag = position.tag || "";
        period.attr({
            x: position.X,
            y: position.Y,
            fontName: position.fontName || "",
            visible: position.visible == undefined ? true : position.visible
        });
        if (position.flag || position.Mcolor || position.Mwidth) { 
            period.strokeEnabled = position.flag; // 开启文字描边效果
            period.strokeStyle = cc.color(position.Mcolor); // 描边的颜色
            period.lineWidth = position.Mwidth; // 字体的宽度
        }
        period.setColor(position.color);
        period.setSkewX(position.setSkewX || 0) // 设置文字倾斜
        this.addChild(period, position.zOrder, tag);
    },
    // 文字对其方式
    1.TEXT_ALIGNMENT_LEFT // 居左
    2.TEXT_ALIGNMENT_RIGHT // 居右
    3.TEXT_ALIGNMENT_CENTER // 居中
    

    2.创建图片精灵的方法

    setSprite: function (option) {
        // 设置筹码
        var img = option.img; // 图片
        var zOrder = option.zOrder; // 显示层级
        var tag = option.tag || ""; // tag值
        var scale = option.scale || 1; // 缩放值
        var chip = new cc.Sprite(img); // 创建精灵
        // 设置精灵属性
        chip.attr({
            x: option.positionX,
            y: option.positionY,
            scale: scale,
            visible:option.visible == undefined ? true : option.visible
        }) 
        this.addChild(chip, zOrder, tag)
    },

    3.创建字体图片

    createText: function (option) {
          var tag = option.tag || "";
          var helloLabel = new cc.LabelBMFont(option.text, option.fnt);
          helloLabel.attr({
              x: option.X,
              y: option.Y,
              scale: option.scale || 1
          });
          this.addChild(helloLabel, option.zOrder, tag);
      },
    },
    // fnt图片中必须包含text值。使用GlyphDesigner软件制作自体图片。

    4.请求的方法

    function getRequestData(request) {
         var xhr = cc.loader.getXMLHttpRequest();
         xhr.open("GET", request.url, true);
         xhr.onreadystatechange = function () {
             if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status <= 207)) {
                 if (JSON.parse(xhr.responseText).code == 0) {
                     request.handler_success(JSON.parse(xhr.responseText));
                 } else {
                     request.handler_error(JSON.parse(xhr.responseText));
                 }
             }
         };
         xhr.send();
     }
    }

    展开全文
  • Cocos2d-JS 热更新

    2015-04-23 12:41:52
    工作需要,在空闲时间看了下Cocos2d-JS的热更新。对其进行了一个简单的实现,这里总结分享一下。 Cocos2d-JS 热更新 Cocos2d-JS 热更新是啥?Cocos2d-JS终归还是一个游戏引擎,就以游戏的过程来理解吧。传统...
  • cocos2d-js 环境配置

    2017-11-16 16:24:52
    入门的同学参考 1,下载cocos 工具 http://www.cocos2d-x.org/download  (中文网 ... 没看到cocos 只剩下 cocos2d-x 引擎 以及新出来的cocosCreator) 2,新建一个cocos 项目 3,打开cocosStudio 菜单中
  • Cocos2d官网上对于Cocos2d-JSCocosStudio的教程有很多,但是对于如何将二者连接起来的教程却很少,至于如何在Cocos2d-JS中使用从CocosStudio导出的资源方面的教程就更少得可怜。也应博友的要求,我最近会写一个...
  • 这些内容融汇了作者多年的工作经验和Cocos2d-JS 的亲身使用教训,有助于读者快速掌握游戏开发的方法和避开不必要的麻烦。 《Cocos2d-JS开发之旅——从HTML 5到原生手机游戏》以两个游戏为线索,每一章的学习都为...
  • Cocos2d-x实战 JSCocos2d-JS开发》完整源码
  • cocos2d-jscocos2d-x的JavaScript版本,真正跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windows Phone
  • cocos 2d-x的安装和使用基础。
  • Cocos2d-x 安装

    2016-12-23 16:59:47
    Cocos2d-x 入门 hello cocos2d 环境 安装环境:Mac OS X 运行目标:Android Cocos2d版本:cocos2d-x-3.13.1,Cocos Console 2.1 Cocos2d-x 安装
  • 很好的Cocos2d-JS开发书籍,通过对各种实际项目的学习,可以快速上手,掌握开发技巧,为自己的开发项目积累模块,和项目经验,很不错的一本学习书籍,值得多看看。
  • Cocos2d-JS打包

    2014-10-30 17:25:39
    Cocos2d-JSCocos2d-x的Javascript版本,融合了Cocos2d-html5和Cocos2d-x JSBinding。它支持Cocos2d-x的所有特性并提供更简单易用的Javascript风格API。 使用Cocos2d-HTML5,我们可以很方便用Javascript来...
  • 调试Cocos2d-JSCocos2d-Lua
  • 觉得cocos2d-js相对还是比较简单。我其实也没什么js基础,觉得只要知道了什么方法是做什么的,就能写游戏了。 0.安装环境 下载cocos2d-x http://www.cocos.com/download 下载安装python2 ...
  • Cocos2d-JS极速调试技巧

    2015-09-19 13:42:05
    本文教大家一个调试Cocos2d-JS的小技巧,我都是这么用的,特意来告诉大家这个轻量快速的调试技巧。 1.首先我们需要安装官方的cocos引擎,没错,银色图标那个,全名有且仅有"Cocos"那个(很多人都搞错)。安装完...
  • 一 、介绍cocos2d-x cocos2d-x是什么:是MIT许可证下发布的开源游戏引擎。 cocos2d-x的特点: 1 跨平台:支持跨平台部署,覆盖平台包括iOS、Android、Windows Phone及Tizen等等 2 语言:允许开发人员利用C++、...
  • JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求。由于Cocos2d-JS引擎是从Cocos2d-x演变而来的,在Cocos2d-JS的早期版本Cocos2d-HTML...
1 2 3 4 5 ... 20
收藏数 15,532
精华内容 6,212
热门标签