如果你是一个cocos2d-x的老手,那你可以忽略这篇博文,如果你是一个接触过javascript,想通过HTML5做游戏的,但是苦于不知道如何下手,那么这篇博文可能会帮到你。

cocos2dx-jsb的主要运用的语言是javascript,其实简单的说jsb就是cocos2d-x提供的C++ -> javascript的一系列接口,通过编写js的脚本来调动C++的接口做一系列的动作。实际的运行顺序是:js执行接口->spidermonkey解析js,判断调用了哪个C++接口->执行2dx的相应的接口->opengl 渲染...  知道了这个顺序以后,关键是怎么来写js呢?那下面来认识下cocos2d-html5

Cocos2D-HTML5是基于HTML5规范集的Cocos2D引擎的分支,于2012年5月发布,到现在差不多有1年多了,功能,API已经趋向于稳定,基本上每个月都有大的版本迭代更新,现在同时支持canvas和webgl渲染,有些功能比如批渲染,这个canvas是不能做的,如果浏览器支持webgl就可以运行。cocos2d-html5的API是向下兼容jsb的,也就是说有些api在jsb里面是执行不了的,但是90%以上的canvasAPI都是一致的,这一块的话jsb开发者和cocos2d-h5开发者两边都在不断的同步。绝大部分常用的API都是足够使用的,等熟悉了这两个框架以后就可以做到用cocos2d-h5在浏览器中调试一遍,然后在用jsb在手机上运行是一样的效果,也就是我们所说的一套代码,跨平台运行。但是要达到这样一个效果,需要了解这两个框架,了解的越深入,碰到问题处理起来越是游刃有余。

coding的最好的学习就是实践,jsb入门可以先从cocos2d-h5入门做起,首先需要配置一下web开发环境,这个比手机开发环境搭建简单多了,你需要一个web服务器,apache或者tomcat都可以(个人推荐apache),一个chrome最新的浏览器(当然firefox也可以,chrome调试,性能最好),然后从cocos2d-x官网(http://www.cocos2d-x.org/)中下载最新的cocos2d-h5压缩包,解压以后放到apache或者tomcat对应的资源目录下面,然后输入URL指向到cocos2d-h5包里面对应的index.html,如果没有什么问题的话就可以看到cocos2d-h5的页面了,到此你已经完成了h5环境的搭建,如果你对此还有疑问,可以看官方的详细H5入门上手说明 http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Getting_Started_with_Cocos2d-html5

如果你完成了上述HelloWorld的创建后,那就可以试着创建jsb的环境了,mac版的ios环境和android环境都非常容易,平时开发可以用chrome浏览器跑通功能->ios模拟器验证原生环境->做完一个模块用iphone真机测试性能效率,这里重点说一下window环境,jsb的环境其实就是cocos2dx的环境,官方有一篇win7下如何配置android环境的wiki http://www.cocos2d-x.org/projects/cocos2d-x/wiki/How_to_set_up_the_android_cocos2d-x_development_environment_on_Windows_7

基本上把会遇到的问题都详细描述清楚了,除此之外官方wiki还有个问题没有写到,某些win7系统编译工程的时候会发现无法把资源目录拷贝到assets目录下面,原因是cygwin的权限不够,需要把cygwin的权限设为root权限,然后重启电脑,应该就可以了,修改cygwin Root方法请自行百度。

完成windows下面android配置后,我们用创建工程工具脚本创建一个跨平台的工程。在cygwin中执行脚本

cd /cocos2d-x/tools/project-createor/

#其中Clams是project名,com.supersell.crash是安卓中主Activity所在的package名,这两个名字都可以根据项目来改,language对应的是变成语言,jsb项目就是javascript
python create_project.py -project Clams -package com.supersell.crash -language javascript

创建完工程以后,会在cocos2d-x/projects 下面生成Clams目录,打开目录结构如下

Classes目录,存放了AppDelegate.cpp和AppDelegate.h文件这两个文件,这两个文件是项目的C++入口,jsb接口的引入,加载入口js都是在这里,具体请看

 #include "cocos2d.h"
#include "SimpleAudioEngine.h"
#include "ScriptingCore.h"
#include "generated/jsb_cocos2dx_auto.hpp"
#include "generated/jsb_cocos2dx_extension_auto.hpp"
#include "jsb_cocos2dx_extension_manual.h"
#include "cocos2d_specifics.hpp"
#include "js_bindings_chipmunk_registration.h"
#include "js_bindings_system_registration.h"
#include "js_bindings_ccbreader.h"
#include "jsb_opengl_registration.h"
#include "XMLHTTPRequest.h"
#include "jsb_websocket.h" USING_NS_CC;
using namespace CocosDenshion; AppDelegate::AppDelegate()
{
} AppDelegate::~AppDelegate()
{
CCScriptEngineManager::purgeSharedManager();
} bool AppDelegate::applicationDidFinishLaunching()
{
   // 从这里开始实例化导演类
// initialize director
CCDirector *pDirector = CCDirector::sharedDirector();
pDirector->setOpenGLView(CCEGLView::sharedOpenGLView()); // turn on display FPS
pDirector->setDisplayStats(true); // set FPS. the default value is 1.0/60 if you don't call this
pDirector->setAnimationInterval(1.0 / );    // 实例化脚本核心类,这个类封装了spidermonkey的一些接口,基本上所有的js脚本处理都由这个类来执行
ScriptingCore* sc = ScriptingCore::getInstance();
// 从这里开始注册脚本绑定,如果以后自己写了新的绑定,也需要在这里执行注册
sc->addRegisterCallback(register_all_cocos2dx);
sc->addRegisterCallback(register_all_cocos2dx_extension);
sc->addRegisterCallback(register_all_cocos2dx_extension_manual);
sc->addRegisterCallback(register_cocos2dx_js_extensions);
sc->addRegisterCallback(register_CCBuilderReader);
sc->addRegisterCallback(jsb_register_chipmunk);
sc->addRegisterCallback(jsb_register_system);
sc->addRegisterCallback(JSB_register_opengl);
sc->addRegisterCallback(MinXmlHttpRequest::_js_register);
sc->addRegisterCallback(register_jsb_websocket); sc->start(); CCScriptEngineProtocol *pEngine = ScriptingCore::getInstance();
CCScriptEngineManager::sharedManager()->setScriptEngine(pEngine);
// main.js就是js的入口文件,存放在Resources下面,换新的js需要注意路径
ScriptingCore::getInstance()->runScript("main.js"); return true;
} void handle_signal(int signal) {
static int internal_state = ;
ScriptingCore* sc = ScriptingCore::getInstance();
// should start everything back
CCDirector* director = CCDirector::sharedDirector();
if (director->getRunningScene()) {
director->popToRootScene();
} else {
CCPoolManager::sharedPoolManager()->finalize();
if (internal_state == ) {
//sc->dumpRoot(NULL, 0, NULL);
sc->start();
internal_state = ;
} else {
sc->runScript("hello.js");
internal_state = ;
}
}
} // This function will be called when the app is inactive. When comes a phone call,it's be invoked too
void AppDelegate::applicationDidEnterBackground()
{
CCDirector::sharedDirector()->stopAnimation();
SimpleAudioEngine::sharedEngine()->pauseBackgroundMusic();
SimpleAudioEngine::sharedEngine()->pauseAllEffects();
} // this function will be called when the app is active again
void AppDelegate::applicationWillEnterForeground()
{
CCDirector::sharedDirector()->startAnimation();
SimpleAudioEngine::sharedEngine()->resumeBackgroundMusic();
SimpleAudioEngine::sharedEngine()->resumeAllEffects();
}

如果没有自己新写的js脚本绑定,这个类最多只需要修改入口js就行

pro.android:安卓项目工程,我们来看下他里面的结构

几个重要的文件说明下,

AndroidManifest.xml:用来记录安卓安装权限,app横屏竖屏等的一些配置

assets:资源目录,编译项目的时候,会自动将Rescourse目录下的资源(图片,js)和框架js都拷贝到这个目录下,每次编译都是直接覆盖的,所以如果你需要把一部分图片打包到apk里面,你只要把相应的资源存放到Rescourse目录。

bin:编译好的java文件会存放到这里,跑过build_native.sh才有

jni:这个目录下面存放了一个重要的文件,Android.mk,这个是项目的入口mk文件,ndk的项目编译从这里开始找,大部分情况你不需要动他,以后有自己新写的C++扩展,你需要在这个mk文件中声明。

libs:存放了编译好的cocos2d-x动态库(.so),跑过build_native.sh才有。

build_native.sh:一键编译脚本,编译项目的时候你需要先执行他,也可以在eclipse中直接右键项目run,其实也是通过脚本运行的,运行的前提需要配置好cocos2dx的安卓环境。

===========================

proj.ios:ios项目环境,直接双击.xcodeproj就能跑了,当然需要改入口文件的话还是参照上面的改法。

Resources:编写的脚本,还有打包进去的图片都存放在这里。

如果顺利的话,编译完工程后连上手机调试,你就可以直接看到helloWorld了

快速入门cocos2d-x jsbinding的更多相关文章

  1. Web Api 入门实战 (快速入门+工具使用+不依赖IIS)

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  2. SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=》提升)

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  3. 前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令(2)

    今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...

  4. 【第三篇】ASP.NET MVC快速入门之安全策略(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  5. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  6. Mybatis框架 的快速入门

    MyBatis 简介 什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果 ...

  7. grunt快速入门

    快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...

  8. 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  9. 【第四篇】ASP.NET MVC快速入门之完整示例(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  10. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

随机推荐

  1. [Android] AudioTrack::start

    AudioTrack的start方法用于实现Android的音频输出,start究竟做了什么?回顾一下上一小节createTrack_l的最后部分,通过binder返回了一个Track的句柄,并以被保 ...

  2. 霍布森选择效应(Hobson choice Effect)

    1631年,英国剑桥商人霍布森从事马匹生意,他说,你们买我的马.租我的马,随你的便,价格都便宜.霍布森的马圈大大的.马匹多多的,然而马圈只有一个小门,高头大马出不去,能出来的都是瘦马.赖马.小马,来买 ...

  3. vim插件

    所需即所获:像 IDE 一样使用 vim https://github.com/yangyangwithgnu/use_vim_as_ide mark.vim http://www.vim.org/s ...

  4. 【二分】Codeforces 706B Interesting drink

    题目链接: http://codeforces.com/problemset/problem/706/B 题目大意: n (1 ≤ n ≤ 100 000)个商店卖一个东西,每个商店的价格Ai,你有m ...

  5. 后缀.aspx.cs是什么软件的生成的

    ASP.NET技术 aspx ——ASP.NET文件(网页) aspx.cs ——ASP.NET文件中的代码页(与上面的对应) asp.net是微软公司推出的新一代网站程序开发架构,ASP.NET技术 ...

  6. C#中枚举类型和int类型的转化

    先定义一个枚举类型 , 初中, 高中,大学 }; int ->enum int d=2; PropertyType  a=(PropertyType)d; int <- enum Prop ...

  7. 安卓开发24:FrameLayout布局

    FrameLayout布局 FrameLayout是五大布局中最简单的一个布局.FrameLayout布局中的元素会根据先后顺序重叠起来.利用FrameLayout布局元素重叠的特性,我们一般可以做一 ...

  8. Navicat的快捷键

    1.ctrl+q 打开查询窗口 2.ctrl+/ 注释sql语句 3.ctrl+shift +/ 解除注释 4.ctrl+r 运行查询窗口的sql语句 5.ctrl+shift+r 只运行选中的sql ...

  9. JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...

  10. jQuery.holdReady()方法用法实例

    调用此方法可以延迟jQuery的ready事件,也就是说尽管文档已经加载完成,也不会执行ready事件处理方法.可以多次调用jQuery.holdReady()方法,以延迟jQuery的ready事件 ...