• 在本文中,我将展示如何在 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开发网

    展开全文
  • 在菜单上选择文件-->新建-->项目-->展开Visual C++项-->新建Cocos2d-x   通过这种方法新建的Cocos2d-x项目无法运行,会出现以下提示:       这主要是用以上的方法新建的项目没有包含在所需库中,项目...

    自己动手实践过的朋友也许已经发现了问题,通过打开VS2008,

     

    在菜单上选择文件-->新建-->项目-->展开Visual C++项-->新建Cocos2d-x

     

    通过这种方法新建的Cocos2d-x项目无法运行,会出现以下提示:

     

     

     

    这主要是用以上的方法新建的项目没有包含在所需库中,项目没有所依赖的

     

    库,找到所依赖的文件,如以上的CCCtdC.h,cocos2d.h

     

    下面说一下如何正确新建一个cocos2d-x项目

     

    双击cocos2d-win32.vc2008.sln打开VS2008,

     

     

    右键最上面的解决方案

     

     

    选择“添加”-->“新建项目”

     

     

     

    展开Visual C++,选中Cocos2d-x,输入项目名称并选择项目存放路径

     

    在弹出的对话框中选择Finish完成项目新建

     

     

    右键新建的项目,选择“项目依赖项”

     

     

    勾选如图选项

     

     

     

    单击“确定”,然后再右键项目,选择属性,在左边选择“C\C++”项,在右边将“调试信息格式”的选项改为“程序数据库(/Zi)”

     

     

    单击确定后,再右键项目选择“重新生成”和“设为启动项”,再在菜单“调试”-->“开始执行(不调试)”

     

     

     

     

     

    展开全文
  • 关注公众号“码农帮派”,查看...触控科技开发的CocosCreator开发工具是的Cocos2d开发和Unity开发更加相似,使用CocosCreator开发2d游戏变得更加便捷快速,之后半年利用做毕业设计的闲暇之余学习使用Cocos Creator开...

    关注公众号“码农帮派”,查看更多系列技术文章:

     

    本节源码下载:

    链接: http://pan.baidu.com/s/1jIPYHOM  密码: 5zae

     

    触控科技开发的CocosCreator开发工具是的Cocos2d开发和Unity开发更加相似,使用CocosCreator开发2d游戏变得更加便捷快速,之后半年利用做毕业设计的闲暇之余学习使用Cocos Creator开发2d的游戏,主要是看触控科技官方提供的ExampleProject的源码来大致的模仿实现:

     

    Cocos Creator官方文档: http://www.cocos.com/

    Cocos Creator开发文档: http://www.cocos.com/docs/creator/

    Cocos Creator的ExampleProject项目下载文档:https://github.com/cocos-creator/example-cases (也可以直接在Cocos Creator新建项目那选择 新建范例工程)

     

    Cocos2d-JS开发的第一弹中,首先开发一个下面的界面:

    [说明]

    点击Menu的按键(绿色按键)会有事件相应,点击List的某一Item会有相应的事件相应。

     

    项目的结构:

              

     

    (一)绘制背景Sprite([层级管理器]中的background组件)

    background为一个Sprite,在[层级管理器]中 创建Sprite精灵,选中该Sprite精灵之后,在[属性检查器]中修改Sprite的属性:

    (1)将选中的背景图片(e.g. singleColor.png)从[资源管理器]中通过拖拽的方式添加到Sprite的[Sprite Frame]属性框中;

    (2)在[添加组件]处为Sprite添加Widget属性(添加组件-添加UI组件-Widget):

    [说明]Widget的作用是为了使得组件更好的适配父节点的大小,其中的Left,Top,Right和Bottom分别为该组件相对于父节点左边缘,上边缘,右边缘和下边缘的距离,可以使用px直接指定,也可以使用10%这样来制定是父节点长/宽度的百分比,这四项中打勾的表示该项起作用,下边的Horizontal Center和Vertical Center将会相对于父节点的横向置中,和垂直置中。

     

    经过上面的步骤,就完成了背景Sprite的绘制。

     

    (二)绘制选项节点([层级管理器]中的Menu组件)

    (1)在Canvas节点中建立Menu组件(为Sprite组件,并设置Widget属性,让其铺满父节点Canvas),并在[属性管理器]中Sprite的Sprite Frame属性框中设置为None:

    这样Menu铺满父节点Canvas,但不会覆盖父节点的背景。

    (2)在Menu节点中新建两个Button节点([层级管理器]中的btnBack和btnInfo),Button组件默认带一个Label子节点,选中Label组件,可以在[属性检查器]中Label-String属性处修改 按键上文字内容:

    选中Button组件之后,在[属性检查器]中可以看到一个Button组件默认有Sprite属性和Button属性,那么可以通过从[资源管理器]中拖拽图片的方式,添加到Button组件的Sprite属性的Sprite Frame属性框中,从而改变Button组件的背景图片:

    拖拽图片到Button的Sprite属性的Sprite Frame框后,可以看到Button的背景图片改变了,但是Button的边框出现模糊,这是因为Button的尺寸大于图片的尺寸,从而出现了模糊现象,此时我们展开[资源管理器]中Texture文件夹中对应的图片文件,双击可以打开[Editor Window]对话框处理图片:

    拖拽[Editor Window]中图片上的四条绿色的线,来设置图片的属性,{完成这一修改之后,一定要点击[Editor Window右上角绿色的对号进行属性保存]},至于为什么要这么修改,其实就和Android开发中的9patch图片的原理一直,当组件的尺寸大于图片尺寸的时候,要对图片进行拉伸,这四条线表示只拉伸四条线围成矩形框内的像素点,矩形框外部的像素点不会被拉伸,只会保持原来图片的像素。

     

    完成上面的操作之后,还需要将Button组件的Sprite属性的Type属性选项修改为SLICED:

    这样,我们的按键的效果看起来就舒服多了:

     

    (3)完成上述操作之后,分别为两个Button节点在[属性检查器]中添加Widget属性(添加组件-添加UI组件-Widget),将两个Button组件放置在界面的左上角 和 右上角,以[查看说明]Button为例(在界面的左上角):

     

    (4)为Button添加点击效果

    完成上面所有的操作之后,运行,在网页上点击发现按键并没有点击效果,如何做到点击的时候会有点击效果,选中Button组件,在[属性检查器]中Button属性下面可以看到:

    上图一中,Button属性的Transition属性选择框,有None,SPRITE,COLOR,SCALE四个选项,可以设置Button被点击的效果,None表示没有点击效果(默认),SPRITE表示点击效果使用Sprite精灵来展示,COLOR表示点击效果使用颜色变化来展示,SCALE表示Button被点击的时候改变其大小,下面以COLOR为例:

    上图中,Normal表示常态Button的颜色,Pressed表示Button被按下的颜色,Hover表示鼠标移动到该Button上之后Button的显示状态,按需求点击颜色选择条进行颜色设定。

     

    (5)为Button添加点击相应事件_需要js脚本

    首先在[资源管理器]中assets/Script文件下新建一个名为Menu.js的脚本文件,新建完成之后,打开脚本文件会发现,文件根是一个cc.Class,这是cocosJS中的类的声明方式,内部有:

     

    extends: cc.Component,
    
    properties: {
            
    }

    其中,extends表示该类即成自cc.Component组件,properties中声明该类的本地变量,以后可以通过this.propertyName来进行引用。除此之外,一个重要的函数为onLoad方法,当该类被加载的时候,就会调用此方法,可以在其中做一些初始化的操作,我们在Menu.js中添加如下的代码:

     

     

    cc.Class({
        extends: cc.Component,
    
        properties: {
            btnInfo: {
                default: null,
                type: cc.Button
            },
            btnBack: {
                default: null,
                type: cc.Button
            }
        },
    
        backToList: function(){
            cc.log("backToList Button Clicked!")
        },
    
        showReadme: function(){
            cc.log("showReadme Button Clicked!")
        }
    });
    


    添加完上面的代码之后,我们将该脚本文件添加给Menu节点:

     

    [方法一]:在[层次管理器]中点选中Menu节点,此时[属性检查器]中显示Menu节点的属性,从[资源管理器]中拖拽Menu.js脚本到[属性管理器]进行脚本添加;

    [方法二]:在[层次管理器]中点选中Menu节点,此时[属性检查器]中显示Menu节点的属性,点击 添加组件-添加用户脚本组件,便可以看到 已经在[资源管理器]中添加的所有的脚本文件,点选需要添加的Menu.js文件:

    从[层级管理器]中拖拽对应的组件到上图中的 Btn Info属性框和Btn Back属性框中进行数据添加:

     

    接下来,在[层级管理器]中点选中btnBack组件,在[属性检查器]中修改按键的属性,在Button属性栏中,首先将Click Events属性框修改为1,表示为Button绑定一个Click事件,此时就会出现 [0]事件编号,将[层级管理器]中的Menu节点拖拽添加到第一个属性框中(cc.Node),点击后面第一个下拉菜单,可以看到Menu节点上绑定的所有脚本,选中Menu.js的脚本,再继续点选后面的下拉框,可以看到Mneu.js脚本文件中已经添加的函数,选择事先写好的Btn Back的Click相应函数,这样就为[层级管理器]中的btnBack按键绑定了Click事件:

     

    (三)绘制MenuList节点

    首先给Canvas节点添加一个ScrollView组件,可以看到,ScrollView包含两部分,一个scrollbar,另一个是content,即为List内容显示部分,为了让ScrollView组件能够更好的适配父节点的大小,通过为ScrollView,子节点view以及content设置Widget属性控制其大小,让组件铺满整个父节点:

    需要说明,view节点是ScrollView显示区域,一般的要和ScrollView的大小一致,或比ScrollView稍小,以便能够看到List中的全部内容,view的字节点content是ScrollView将要显示的全部内容,其大小可以大于ScrollView和view,也可以小于,大于父节点大小之后,便可以通过拖拽来查看view之外的部分,所以一般不勾选content的Widget属性中Bottom属性项。

    (1)首先绘制ListItem,并制作Item-Prefabs

    在[场景绘制器]中绘制MenuList中单个Item,在content添加一个Sprite字节点,通过拖拽修改Sprite的Sprite Frame中的背景图片,为了让图片不出现失真的情况,需要对图片进行Editor:

    为了让Item可以显示 文字信息,可以为其 添加一个Label字节点,并在[属性检查器]中修改 Label的Color,修改文字颜色,为Label添加Widget属性,让Label适配父节点,需要注意的是,要修改Label的的Overflow属性为CLAMP,Label才能够铺满父节点:

     

    完成上面的步骤之后,在[层级管理器]中可以看到Item的结构:

    将上面的mainMenuItem拖拽到[资源管理器]中assets/Prefabs文件夹下,同时删除[层级管理器]中mainMenuItem节点:

    这样就完成了Prefab的制作,下面再为Prefab添加一个控制脚本,为不同index的Item设置不同的内容(mainMenuItem.js):

     

    cc.Class({
        extends: cc.Component,
    
        properties: {
            label: {
                default: null,
                type: cc.Label
            },
            index: -1
        },
    
        updateItem(index, name){
            this.index = index;
            this.label.string = name
        },
    
        itemClickedEvent: function(){
            cc.log(this.index)
        }
    });
    


    上面的代码中,为每一个Prefab设置了两个property属性,一个是显示内容的Label组件,另外一个是该Prefab-Item的index,实例化Prefab-Item之后,调用对象的updateItem方法来显示内容,并定义了Item被点击的响应事件,在[资源管理器]中双击选中assets/Prefabs/mainMenuItem,并将上面的脚本文件mainMenuItem.js拖拽添加到mainMenuItem-Prefab的属性管理器中,并将mainMainItem的字节点labelContent拖拽到脚本文件的Label属性框中:

     

     

    为了让每一个Item有点击事件,还需要给每个Item-Sprite添加一个Button属性,并修改Click Events属性设置,在[资源管理器]中双击选中assets/Prefabs/mainMenuItem,在[资源管理器]中通过 添加组件-添加UI组件-Button  来添加:

     

    (2)为ScrollView动态的添加Item

    ScrollView中显示的Item都是添加到其content节点中的,所以需要编写js脚本文件,进行动态添加(SceneList.js):

     

    cc.Class({
        extends: cc.Component,
    
        properties: {
            itemPrefab: {
                default: null,
                type: cc.Prefab
            },
            initItemCount: 0,
            scrollView: {
                default: null,
                type: cc.ScrollView
            },
            bufferZone: 0,
            itemContents: []
        },
    
        init(menu) {
            this.menu = menu;
            this.itemContents = this.getMainMenuContent();
            this.initList();
        },
    
        initList(){
            var count = this.itemContents.length
            for (let i = 0; i < count; i++){
                // 通过cc.instantiate方法生成了一个Prefab节点
                let item = cc.instantiate(this.itemPrefab);
                // 获得节点上的名称为mainMenuItem的属性,这里就是该Prefab对象的脚本熟悉
                // 因为脚本文件中包含了 Prefab 内容显示的组件,所以可以通过该脚本属性完成很多事情
                var itemComp = item.getComponent('mainMenuItem')
                // 直接调用脚本属性的动态方法,来操作Prefab对象
                itemComp.updateItem(i, this.itemContents[i])
    
                // 下面是通过脚本属性获得 显示内容的组件,
                // 从而改变组件显示的内容
                // var label = itemComp.label
                // label.string = this.itemContents[i]
                this.scrollView.content.addChild(item)
            }
        },
    
        // 自定义的脚本文件,获取 场景Scene的列表,
        // cc.game.__sceneInfos可以获取得到
        getMainMenuContent(){
            var array = ["第一个场景", "第二个场景", "第三个场景", "第四个场景", "第五个场景", "第六个场景"]
            return array
        },
    
        // called every frame, uncomment this function to activate update callback
        // update: function (dt) {
    
        // },
    });
    


    上面的代码中,我们可以看到,当要显示ScrollView中内容的时候,需要实例化该cc.Component组件,并调用自定义的init方法来初始化列表,在initList方法中,使用了cc.instantiate方法实例话一个item-Prefab对象,并通过addChild方法将这个实例化之后的item添加给ScrollView的content节点中。

     

     

    接下来,将上面的脚本SceneList.js添加到ScrollView的content上,并从[层级管理器]中通过拖拽添加相应的属性项:

     

    (3)在Menu中初始化List数据:

    我们想在Menu被初始化的过程中同时初始化MenuList数据,就需要在Menu的onLoad函数中实例化SceneList,并调用对象的自定义方法init来初始化List,修改Menu.js脚本文件:

     

    Menu.js 代码:
    cc.Class({
        extends: cc.Component,
    
        properties: {
            btnInfo: {
                default: null,
                type: cc.Button
            },
            btnBack: {
                default: null,
                type: cc.Button
            },
            menuList: {
                default: null,
                type: cc.ScrollView
            }
        },
    
        // use this for initialization
        onLoad: function () {
            // 通常只会加载一个场景,当场景发生切换的时候,默认会将原来场景中所有的节点和实例销毁,
            // 如果我们需要某个组建进行其他场景的加载,或者在场景之间加载数据,那么就需要将该组件
            // 标记为[常驻节点],使其不被自动销毁,就需要调用cc.game.addPersistRootNode(node)
    
            // this.node 会获得组建所在的节点对象
            cc.game.addPersistRootNode(this.node);
            this.node.zIndex = 999
    
            if (this.menuList && this.menuList.content){
                this.sceneList = this.menuList.content.getComponent("SceneList");
                this.sceneList.init(this);
                cc.log("加载完成....")
            }
        },
    
        backToList: function(){
            cc.log("backToList Button Clicked!")
        },
    
        showReadme: function(){
            cc.log("showReadme Button Clicked!")
        }
    });
    


    并将ScrollView拖拽到脚本文件的属性框中:

     

     

    运行项目,可以看到的效果:

     

    发现所有的List-Item全部都叠加到了一起,因为Item都是添加到ScrollView的content子节点中的,所以需要为content子节点设置Layout属性,在[层级管理器]中选中content节点,[属性管理器]中通过 添加组件-添加UI组件-Layout  来添加布局属性,并进行修改:

     

    添加Layout属性之后的效果:

     

    展开全文
  • http://www.cocoachina.com/bbs/read.php?tid=209356 ...https://github.com/faint2death/cocos2d-js/blob/master/build-ipa.md 1. 环境配置 MacBook Air,操作系统版本是10.9.3,Xcode版本是5.0.2

    http://www.cocoachina.com/bbs/read.php?tid=209356

    新文档在:
    https://github.com/faint2death/cocos2d-js/blob/master/build-ipa.md

    1. 环境配置

    MacBook Air,操作系统版本是10.9.3,Xcode版本是5.0.2。把cocos2d-js解压到/Users/x/cocos2d/cocos2d-js-v3.0-beta,配置环境变量:

    xtekiMacBook-Air:cocos2d-js-v3.0-beta x$ ./setup.py

    Setting up cocos2d-x...
    ->Check environment variable COCOS_CONSOLE_ROOT
      ->Find environment variable COCOS_CONSOLE_ROOT...
        ->COCOS_CONSOLE_ROOT is found : /Users/x/cocos2d/cocos2d-js-v3.0-beta/tools/cocos2d-console/bin

    ->Configuration for Android platform only, you can also skip and manually edit "/Users/x/.bash_profile"

    ->Check environment variable NDK_ROOT
      ->Find environment variable NDK_ROOT...
        ->NDK_ROOT not found

      ->Please enter the path of NDK_ROOT (or press Enter to skip):
    ->Check environment variable ANDROID_SDK_ROOT
      ->Find environment variable ANDROID_SDK_ROOT...
        ->ANDROID_SDK_ROOT not found

      ->Please enter the path of ANDROID_SDK_ROOT (or press Enter to skip):
    ->Check environment variable ANT_ROOT
      ->Find environment variable ANT_ROOT...
        ->ANT_ROOT not found

      ->Find command ant in system...
        ->Command ant not found

      ->Please enter the path of ANT_ROOT (or press Enter to skip):

    Please execute command: "source /Users/x/.bash_profile" to make added system variables take effect

    xtekiMacBook-Air:cocos2d-js-v3.0-beta x$ source /Users/x/.bash_profile

    IOS只需安装Xcode,不需要其他其他SDK。

    2. 编译测试

    生成一个测试项目:

    xtekiMacBook-Air:cocos2d-js-v3.0-beta x$ cocos new MyGame -l js -d /Users/x/project/ 

    编译这个测试项目:

    xtekiMacBook-Air:cocos2d-js-v3.0-beta x$ cd /Users/x/project/MyGame
    xtekiMacBook-Air:MyGame x$ cocos compile -p ios

    编译后,在项目目录的runtime/ios/下生成MyGame.app目录包,然后可以用xcrun打包:

    xtekiMacBook-Air:MyGame x$ xcrun -sdk iphoneos PackageApplication /Users/x/project/MyGame/runtime/ios/MyGame.app -o /Users/x/project/MyGame/MyGame.ipa
    xtekiMacBook-Air:MyGame x$ ls -l
    total 18328
    -rw-r--r--  1 x  staff  9370194  6 16 16:42 MyGame.ipa
    ...
    这个生成的ipa文件是i386指令集,用于模拟器测试调试。

    3. 真机安装包编译

    真机安装包需要证书签名,开发阶段一般有两种:开发和发布,本节讨论的是企业内部发布的in-house证书。

    首先,在苹果开发者网站https://developer.apple.com/account/ios/identifiers/bundle/bundleList.action配置App ID,这个App ID后面编译的时候要用到。然后到https://developer.apple.com/account/ios/profile/profileList.action?type=production下载刚才设置App ID的Profile,下载到本地后双击。

    双击项目目录frameworks/runtime-src/proj.ios_mac/下的xcodeproj文件,在打开的xcode里设置General里的Bundle Identifier,注意和App ID匹配,下面的Team选择企业发布证书。如果是横屏的游戏,那么在下面的Device Orientation勾选"Landscape Left"和“Landscape Right”,如果是竖屏游戏,那么勾选“Portrait”和“Upside Down”。然后在Build Settings的Code Signing Identity选择开发还是发布,最后在下面的Provisioning Profile选择刚才在苹果开发网站下载的Profile。

    需要编译arm指令集的ipa包,那么还要修改cocos2d-js-v3.0-beta/tools/cocos2d-console/plugins/project_compile/project_compile.py关于ios编译参数的修改:

        def build_ios(self):
    ...
            command = ' '.join([
                "xcodebuild",
                "-project",
                "\"%s\"" % projectPath,
                "-configuration",
                "%s" % 'Debug' if self._mode is 'debug' else 'Release',
                "-target",
                "\"%s\"" % targetName,
                "-sdk",
                "iphonesimulator",
                "-arch i386",
                "CONFIGURATION_BUILD_DIR=%s" % (output_dir)
                ])
    ...

    这里把iphonesimulator改成iphoneos,i386改成armv7,然后在项目目录执行cocos compile -p ios,编译到最后的时候,会调用codesign来做一个签名,会弹出一个钥匙串访问的对话框,选总是允许就可以了。

    编译好后,还是用xcrun打包成ipa文件:

    xtekiMacBook-Air:MyGame x$ xcrun -v -sdk iphoneos PackageApplication /Users/x/project/MyGame/runtime/ios/MyGame.app -o /Users/x/project/MyGame/MyGame.ipa --sign "iPhone Distribution: xxx"

    这个ipa文件还需要一个plist文件配合:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
      <key>items</key>
      <array>
        <dict>
          <key>assets</key>
          <array>
            <dict>
              <key>kind</key>
              <string>software-package</string>
              <key>url</key>
              <string>https://xxx.xxxx.com/magic/MyGame.ipa</string>
            </dict>
          </array>
          <key>metadata</key>
          <dict>
            <key>bundle-identifier</key>
            <string>com.xxxx.xxxx</string>
            <key>bundle-version</key>
            <string>alpha</string>
            <key>kind</key>
            <string>software</string>
            <key>title</key>
            <string>magic</string>
          </dict>
        </dict>
      </array>
    </dict>
    </plist>

    最后,用这样的html,用户就可以点击下载安装:

    <a href="itms-services://?action=download-manifest&url=https://xxx.xxxx.com/magic/MyGame.plist">点击安装(ios)</a>

    IOS 7.1以上版本必须要https才可以正常安装。
    [ 此帖被nonexist在2014-07-21 08:23重新编辑 ]
    展开全文
  • cocos2d-js如何在android平台上使用js直接调用Java方法

    在Cocos官方文档中看到的。

    在cocos2d-js 3.0beta中加入了一个新特性,在android平台上我们可以通过反射直接在js中调用java的静态方法。它的使用方法很简单:

    var o = jsb.reflection.callStaticMethod(className, methodName, methodSignature, parameters...)
    

    callStaticMethod方法中,我们通过传入Java的类名,方法名,方法签名,参数就可以直接调用Java的静态方法,并且可以获得Java方法的返回值。下面介绍的类名和方法签名可能会有一点奇怪,但是Java的规范就是如此的。

    类名

    参数中的类名必须是包含Java包路径的完整类名,例如我们在org.cocos2dx.javascript这个包下面写了一个Test类:

    package org.cocos2dx.javascript;
    
    public class Test {
    
        public static void hello(String msg){
            System.out.println(msg);
        }
    
        public static int sum(int a, int b){
            return a + b;
        }
    
        public static int sum(int a){
            return a + 2;
        }
    
    }
    

    那么这个Test类的完整类名应该是org/cocos2dx/javascript/Test,注意这里必须是斜线/,而不是在Java代码中我们习惯的点.

    方法名

    方法名很简单,就是方法本来的名字,例如sum方法的名字就是sum

    方法签名

    方法签名稍微有一点复杂,最简单的方法签名是()V,它表示一个没有参数没有返回值的方法。其他一些例子:

    • (I)V表示参数为一个int,没有返回值的方法
    • (I)I表示参数为一个int,返回值为int的方法
    • (IF)Z表示参数为一个int和一个float,返回值为boolean的方法

    现在有一些理解了吧,括号内的符号表示参数类型,括号后面的符号表示返回值类型。因为Java是允许函数重载的,可以有多个方法名相同但是参数返回值不同的方法,方法签名正是用来帮助区分这些相同名字的方法的。

    目前Cocos2d-js中支持的Java类型签名有下面4种:

    Java类型 签名
    int I
    float F
    boolean Z
    String Ljava/lang/String;

    参数

    参数可以是0个或任意多个,直接使用js中的number,bool和string就可以。

    使用示例

    我们将会调用上面的Test类中的静态方法:

    //调用hello方法
    jsb.reflection.callStaticMethod("org/cocos2dx/javascript/Test", "hello", "(Ljava/lang/String;)V", "this is a message from js");
    
    //调用第一个sum方法
    var result = jsb.reflection.callStaticMethod("org/cocos2dx/javascript/Test", "sum", "(II)I", 3, 7);
    cc.log(result); //10
    
    //调用第二个sum方法
    var result = jsb.reflection.callStaticMethod("org/cocos2dx/javascript/Test", "sum", "(I)I", 3);
    cc.log(result); //5
    

    在你的控制台会有正确的输出的,这很简单吧。

    注意

    另外有一点需要注意的就是,在android应用中,cocos的渲染和js的逻辑是在gl线程中进行的,而android本身的UI更新是在app的ui线程进行的,所以如果我们在js中调用的Java方法有任何刷新UI的操作,都需要在ui线程进行。

    例如,在下面的例子中我们会调用一个Java方法,它弹出一个android的Alert对话框。

    //给我们熟悉的AppActivity类稍微加点东西
    public class AppActivity extends Cocos2dxActivity {
    
        private static AppActivity app = null;
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            app = this;
        }
    
        public static void showAlertDialog(final String title,final String message) {
    
            //这里一定要使用runOnUiThread
            app.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    AlertDialog alertDialog = new AlertDialog.Builder(app).create();
                    alertDialog.setTitle(title);
                    alertDialog.setMessage(message);
                    alertDialog.setIcon(R.drawable.icon);
                    alertDialog.show();
                }
            });
        }
    }
    
    

    然后我们在js中调用

    jsb.reflection.callStaticMethod("org/cocos2dx/javascript/AppActivity", "showAlertDialog", "(Ljava/lang/String;Ljava/lang/String;)V", "title", "hahahahha");
    

    这样调用你就可以看到一个android原生的Alert对话框了。

    再加点料

    现在我们可以从js调用Java了,那么能不能反过来?当然可以! 在你的项目中包含Cocos2dxJavascriptJavaBridge,这个类有一个evalString方法可以执行js代码,它位于frameworks\js-bindings\bindings\manual\platform\android\java\src\org\cocos2dx\lib文件夹下。我们将会给刚才的Alert对话框增加一个按钮,并在它的响应中执行js。和上面的情况相反,这次执行js代码必须在gl线程中进行。

    alertDialog.setButton("OK", new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dialog, int which) {
            //一定要在GL线程中执行
            app.runOnGLThread(new Runnable() {
                @Override
                public void run() {
                    Cocos2dxJavascriptJavaBridge.evalString("cc.log(\"Javascript Java bridge!\")");
                }
            });
        }
    });
    

    这样在点击OK按钮后,你应该可以在控制台看到正确的输出。evalString可以执行任何js代码,并且它可以访问到你在js代码中的对象。

    展开全文
  • Cocos2d-JS v3.0 RC2中,与Android上js调用Java一样,Cocos2d-JS也提供了在iOS和Mac上js直接调用Objective-C的方法,示例代码如下: var ojb = jsb.reflection.callStaticMethod(className, methodNmae, arg1, ...
  • cocos2d-js 事件交互

    2015-08-31 22:04:41
    简介 游戏开发中一个很重要的功能就是交互,如果没有与用户的交互,那么游戏将变成动画,而处理用户交互就需要使用事件监听器了。 总概: ...事件监听器(cc.EventListener) 封装用户的事件处理逻辑事件管理器(cc...
  • 第一个Cocos2d-x Lua游戏

    2015-05-06 21:29:14
    我们的编写的第一个Cocos2d-x Lua程序,命名为HelloLua,从该工程开始学习其它的内容。创建工程我们创建Cocos2d-x Lua工程可以通过Cocos2d-x提供...由于Cocos Code IDE工具是Cocos2d-x开发的专门为Cocos2d-JSCocos2d-
  • 搭建Cocos2d-JS开发环境

    2015-03-18 17:06:50
    使用Cocos2d-JS引擎开发游戏,主要的程序代码是JavaScript语言,因此,凡是能够开发JavaScript语言工具都适用于Cocos2d-JS游戏开发。本书我们推荐WebStorm和Cocos Code IDE工具。搭建WebStorm开发环境我们在以往使用...
  • 网上关于cocos2d-x的安装教程有很多,但是都是旧版本的,我找了很多资料都无法创建proj.android-studio。后来发现是新版本的软件对安卓平台进行合并,只有proj.android文件,使用Android studio编写。 一、安装...
  • 前提条件: 先看此文:...你已经下载coccos2d-x和NDK,并且会使用build_native.sh和eclipse编译cocos2d-x项目 安装NDK Plugin 英文好的同学可以直接查看官方说
  • 第一个Cocos2d-JS游戏

    2015-03-19 18:55:44
    创建工程我们创建Cocos2d-JS工程可以通过Cocos2d-x提供的命令工具cocos实现,但这种方式不能与WebStorm或Cocos Code IDE集成开发工具很好地集成,不便于程序编写和调试。由于Cocos Code IDE工具是Cocos2d-x开发的...
  • 首先,先了解一下什么是模态对话框,百度百科的给出了下面一个定义: 模态对话框(Modal Dialogue Box,又叫做模式对话框),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应。如...
  • cocos2d-2.1rc0-x-2.1.3

    2014-12-10 15:31:57
    Cocos2D-x 2.0以上版本跨Win32、Android、iOS三个平台,本文介绍Cocos2D-x在这三个平台上如何搭建开发环境。 一、Windows开发环境配置 1、Visual Studio安装   Cocos2D-x支持Visual Studio的版本包括VS2008、...
  • eclipse编译cocos2d-x-3.7.1项目
  • 基于cocos2d js 的热更新学习笔记!
  • cocos2d-x面试题

    2013-09-17 17:50:14
    1,阐述cocos2d-x 中CCScene CCLayer CCSprite CCNode CCScene: CCScene是app工作流程上独立块,一个app可能拥有多个scene,但是在任何时候只能有一个是激活状态的。一个CCScene对象由一个或多个CCLayer组成,...
  • 【唠叨】 本节转自官方文档:...url=/doc/cocos-docs-master/manual/framework/native/v3/getting-started/setting-up-development-environments-on-windows7-with-vs201...
1 2 3 4 5 ... 20
收藏数 1,747
精华内容 698