cocos2D-javascript 入门分享

原创 2013年12月05日 23:59:55

这篇文章先是用中文写的,因为要给老外分享,我又翻译成英文了。(欢迎转载~~~)


cocos2D-javascript使用了jah来管理js文件和资源文件。但是网站上的文档和教程都没有提到如何使用它。一番深入挖掘源代码后,我来分享一下成果。

‘jah’ is the library used by cocos2D-javascript for managing js files and asserts file. But there are not any materials mentioned jah from the document and tutorial in the site. The origin description from the author's github is:

"Jah is simple Node.js framework which enables you to build Web browser based applications using theCommonJS module system. This means you can easily break your application up into separate directories and files and include them when needed using the require function."

After digging deep in the src code, I want to share you the result.

init.js:

(function (window) {

    var assetURL = STATIC_URL + "assets";
    var scripts = [
      "http://code.jquery.com/jquery-1.10.2.min.js",
      STATIC_URL + "js/lib/cocos2d.js",
      STATIC_URL + "js/src/main.js",
      STATIC_URL + "js/src/state_machine.js",
      STATIC_URL + "js/src/logic_controller.js",
      STATIC_URL + "js/src/html_ui.js",
      STATIC_URL + "js/src/menu_scene.js",
      STATIC_URL + "js/src/loading_scene.js",
      STATIC_URL + "js/src/game_scene.js",
      STATIC_URL + "js/src/win_scene.js",
      ];
    var assets = [
      {baseUri:assetURL, path:"/questions/whois_that_pokemon.jpg", mimeType:"image/jpg"},
      ];
    
    window.__jah__ = {resources:{}, assetURL: assetURL, __blockReady: true};

    function initializeApplication () {
        if (window.document.readyState != 'complete') return;
        var i = 0
        function nextScript () {
            if (scripts.length > i) {
                addScript(document, scripts[i], nextScript)
                i++
            } else {
                window.__jah__.__triggerReady()
            }
        }
        nextScript();
        
        for(i = 0; i < assets.length; ++i) {
        	var asset = assets[i];
        	addAsset(asset.baseUri, asset.path, asset.mimeType);
        }
    }

    function addScript (document, script, callback) {
        s = document.createElement('script')
        s.type = 'text/javascript'
        s.defer = true
        s.onload = callback
        s.src = script
        document.body.appendChild(s)
    }

    function addAsset(baseUri, path, mimeType) {
    	__jah__.resources[path] = {data: baseUri + path, mimetype: mimeType, remote: true};
    }

    if (typeof window.document.onreadystatechange !== 'undefined') {
        var listener = window.document.addEventListener('readystatechange', initializeApplication, false)
        initializeApplication()
    } else if (window.document.readyState) {
        var checkReadyState = function () {
            if (window.document.readyState == 'complete') {
                initializeApplication()
            } else {
                setTimeout(checkReadyState, 13)
            }
        }
        checkReadyState()
    } else {
        window.onload = initializeApplication
    }
})(window)

作者提供了一套帮助加载模块和资源的模板js,并提供了一套nodejs脚本来帮助build出模块和资源。以上代码是我实例出的代码,并进行过些许改动,不影响作者原意。

Init.js is an template file for initializing module and assert. The above code is an instance with some mine changes to illustrate the principle.

.

这里首先要明确“模块”和“资源”的概念。

Firstly we should define the terms : "module" and "asset".


“模块”是指经过编译的单独的js文件。这里的编译仅仅是一些文法上的包装。可以通过require全局函数来导出模块所暴露的对象,供模块间使用。

"module" refers to the separated js files which have been built. The build here is just some kind of grammar wrapping. The globe function 'require' can be used to export the object which the module wants to expose for external using.


“资源”是指mimeType类型的资源,可以是js脚本,图片文件,视频文件,txt,json文本等……可以通过resource全局函数来引用。目前jah只支持一些文本类型的资源和图片资源。

‘asset’ refers to mime type resources. It can be js script, image, video, txt, json and so on... The globe function 'resource' can be used to reference the wanted asset. For now jah only implements some text type asset and image.


"模块"和“资源”都定义在全了__jah__这个全局变量中的resource对象里了。每一项都是resource中的一个属性对象,通过path作为属性名来查找具体的对象。remote属性表示它是一个“资源”,对于“模块”它的值是false。对“模块”来说,data是一个闭包对象来供程序调用。对“资源”来说,data保存url。

'module' and 'asset' are both listed in the 'resource' object which belongs to the globe object __jah__. The path is as the property name for the key to reference the resource. The 'remote' property means the resource will be loaded as an 'asset'. So the 'module' will has a false value. For 'module', data stands for a closure object for other scripts using. For 'asset', data stands for the url.

window.__jah__.resources[path] = {data: string/closure, mimetype: string, remote: bool};

从init.js内容来看,只看到了addAsset函数添加里__jah__.resource的属性,addScript没有。那是因为remote为false的“module”只能被直接append到dom中去,而“assert”可以被__jah__来动态的加载。

From init.js, we can see only addAsset function adds property to __jah__.resource, addScript not. It is because "module" resource which has a false value on remote property won't be loaded by jah( jah is the one of "modules", it can't be loaded by itself ), but "asset' resource can be loaded by jah dynamiclly.


所以要想利用模块化的特性,部署的js文件必须经过“编译”。以下是一个“模块”文件的例子,你可以看到所谓的“编译”只是加了一个resources属性的封装而已。

To take advantage of the modularization feature, the js must be "built". You can find that the so-called 'build' is just a property wrap in __jah__.resources though the following sample.

__jah__.resources["/main.js"] = {data: function (exports, require, module, __filename, __dirname) {"use strict"  // Use strict JavaScript mode

var events = require('events');
var director = require('cocos2d').Director.sharedDirector;
var logic_controller = require('/logic_controller').logic_controller;

function main() {
	events.addListener(director, 'ready', function (director) {
		logic_controller.Init();
	})
	director.attachInView(document.getElementById('view'));
	director.runPreloadScene();
	
	var img = resource('/questions/whois_that_pokemon.jpg');
}


exports.main = main;
}, mimetype: "application/javascript", remote: false};


接下来事情就比较容易了。初始化了“模块”和“资源”列表后,就到了真正的加载逻辑。Dom加载完所有脚本后,__jah__的内部功能在加载成功cocos2d.js后被初始化完成。之后require,resource什么的就都能用了。注意到__triggerReady()函数了吧,之后的逻辑会显示cocos2D-javascript的一个预置的资源加载场景,该场景里会启动一个preloader,来加载“资源”列表中的东西。加载的过程中场景中会伴随进度条显示,以提供一个良好的用户体验。当然你可以重载这个加载场景,以达到你想要的效果。

The following logic begins to be simple. After initialize the array of 'module' and 'asset', the DOM will complete all the appended scripts. One of them must be cocos2d.js. It will init __jah__ inside function. Then 'require' and 'resource' will be added as globe functions. Do you have an attention on  '__triggerReady' ? It will drive to run a  preload scene preseted by cocos2D-javascript. In this scene a preloader will be started for loading the asserts in the list one by one. While the process, user can see the process in the process bar of the scene. Of course,  you can overload the preload scene to change the representation by what you want.

纯干货-8 21套深度学习相关的视频教程分享

最近,整理和收集了从2014-2017年,21套深度学习相关的视频教程,覆盖深度学习从理论、在图像、语音以及NLP等各个方面应用,两套深度学习平台Tensorflow使用的教程。需要的朋友可以下载看一...
  • lqfarmer
  • lqfarmer
  • 2017年06月30日 15:50
  • 1491

IEC61850笔记--IEC61850应用入门(三)

IEC61850标准学习和调试,测试的记录文档。记录IEC61850标准学习,使用开源代码libIEC61850实现基于arm-linux平台的IEC61850标准支持。...
  • gp_scoprius
  • gp_scoprius
  • 2016年09月20日 17:56
  • 1433

Kafka从入门到实践

一、基本概念介绍Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。这个独特的设计是什么样的呢?首先让我们看几个基本的消息系统术语: Kafka将消...
  • rxt2012kc
  • rxt2012kc
  • 2017年05月02日 15:47
  • 385

1900页Python系列PPT分享一:基础知识(106页)

总体说明:本套PPT共约1900页,包含董付国老师Python系列图书《Python程序设计基础》(2017年7月第5次印刷)、《Python程序设计(第2版)》(2017年9月第4次印刷)、《Pyt...
  • oh5W6HinUg43JvRhhB
  • oh5W6HinUg43JvRhhB
  • 2017年10月30日 00:00
  • 394

React入门使用心得

1 前言 React目前在前端的影响力就不多说了,不管你目前有没有入坑React,估计都见过不少各种相关的新闻和技术文章。如果你有入坑React的打算,或者刚开始学习React ,可以参考一下下面内...
  • qq_32506555
  • qq_32506555
  • 2016年08月02日 21:57
  • 575

纯干货10 强化学习视频教程分享(从入门到精通)

分享两套关于强化学习的视频资料,一浅一深。后面,将陆续为大家奉上关于强化学习和深度强化学习的相关内容。 第一套是中文版的,讲的比较浅,适合入门的朋友,对强化学习有个初步的了解。 部分视频截图 ...
  • lqfarmer
  • lqfarmer
  • 2017年07月06日 22:02
  • 1848

PhoneGap从入门到精通视频教程

跨平台开发技术-PhoneGap从入门到精通视频教程 课程讲师:厉风行  课程分类:手机开发 适合人群:中级 课时数量:76课时 用到技术:PhoneGap、罗盘、运动传感器、地理位...
  • u014038124
  • u014038124
  • 2015年04月16日 15:49
  • 1071

Android | 将内容分享到自己的app

教你如何让别人可以把内容分享到自己的app!
  • guojiel
  • guojiel
  • 2016年06月16日 17:05
  • 1561

网页一键分享按钮HTML代码

在网页中加入以下代码可以实现网页的一键分享: Insert title here window._bd_share_config={ "common":{ "b...
  • u013372487
  • u013372487
  • 2015年09月01日 17:27
  • 17510

自己动手写js分享插件 [支持https] (QQ空间,微信,新浪微博。。。)

微信分享效果:QQ空间分享效果:HTML jQuery弹出社交分享按钮 ...
  • cometwo
  • cometwo
  • 2016年09月03日 17:18
  • 10882
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2D-javascript 入门分享
举报原因:
原因补充:

(最多只允许输入30个字)