COCOS2D-JS入门-web端项目部署

时间:2023-03-08 19:55:17
COCOS2D-JS入门-web端项目部署

下载cocos2d-js文件,建议上官网下载(外国官网或者中国官网都可以)

外国官网:http://cocos2d-x.org/download(选择最新版即可,我下载时为3.9版本,大概300多M)

国内官网:http://www.cocos.com/download/cocos2d-x/

因为只写web版本:所以解压后我们只要里面的web文件夹即可,别的可以删掉了,而web文件夹才11多M(如果想写跨平台,还需要学习其他人的教程才可,本随笔不记录跨平台教程)

COCOS2D-JS入门-web端项目部署

之后我们要跑起个hello World (想必新学一门编程语言或者框架都要干这个事吧)

打开web目录我们可以看到有个template文件夹,这个就是cocos官网给我们写好的hello案例,打开index.html即可

COCOS2D-JS入门-web端项目部署

此时你会打开发现一直在loading对吧?是就对了,因为什么呢,因为官网给的代码有问题,一个很简单的问题:

COCOS2D-JS入门-web端项目部署

要想看到这个例子的庐山真面目,需要修改index.html才可以,也就是把js文件的加载位置放到body的最后边,如下:

COCOS2D-JS入门-web端项目部署

此时我们在运行这个文件,就可以在浏览器中看到效果了,并且官方的例子还做了移动端自适应:

COCOS2D-JS入门-web端项目部署

其实我们也可以不用下载这个完整的包,毕竟对于前端来说还是习惯了引入一个库文件即可的开发习惯。

所以官网也给了我们下载精简版Lite版本和完整版版本以及定制版版本的下载地址页面:http://cocos2d-x.org/filecenter/jsbuilder

并且下载下来的是一个压缩文件,里面带有你选择的js文件以及一个cocos2d-js开发的模板。

只要根据自己喜好去下载即可,但这里有个坑,就是官网的300多M里面自带的demo用lite版本会报错,原因是缺少必要模块。所以只能用完整版,或者自己根据需要用一些自动化构建工具合并压缩你需要的模块,这样也会减少js文件的体积,提高游戏资源的加载速度,毕竟完整版的压缩版本已经达到了1.8M(网站下载大小)的大小了。

在这里发布下我目前合并的版本。压缩完是500多kb:

var fileLiteArr = [
'./web/Base64Images.js',
'./web/CCBoot.js',
'./web/cocos2d/core/event-manager/CCEventHelper.js',
'./web/CCDebugger.js',
'./web/cocos2d/core/utils/BinaryLoader.js',
'./web/cocos2d/core/platform/CCClass.js',
'./web/cocos2d/core/platform/CCCommon.js',
'./web/cocos2d/core/cocoa/CCGeometry.js',
'./web/cocos2d/core/platform/CCTypesPropertyDefine.js',
'./web/cocos2d/core/platform/CCSAXParser.js',
'./web/cocos2d/core/platform/CCLoaders.js',
'./web/cocos2d/core/platform/CCConfig.js',
'./web/cocos2d/core/platform/miniFramework.js',
'./web/cocos2d/core/platform/CCMacro.js',
'./web/cocos2d/core/platform/CCTypesWebGL.js',
'./web/cocos2d/core/platform/CCTypes.js',
'./web/cocos2d/core/platform/CCEGLView.js',
'./web/cocos2d/core/platform/CCScreen.js',
'./web/cocos2d/core/platform/CCVisibleRect.js',
'./web/cocos2d/core/platform/CCInputManager.js',
'./web/cocos2d/core/platform/CCInputExtension.js',
'./web/cocos2d/core/cocoa/CCAffineTransform.js',
'./web/cocos2d/core/support/CCPointExtension.js',
'./web/cocos2d/core/support/CCVertex.js',
'./web/cocos2d/core/support/TransformUtils.js',
'./web/cocos2d/core/event-manager/CCTouch.js',
'./web/cocos2d/core/event-manager/CCEvent.js',
'./web/cocos2d/core/event-manager/CCEventListener.js',
'./web/cocos2d/core/event-manager/CCEventManager.js',
'./web/cocos2d/core/event-manager/CCEventExtension.js',
'./web/cocos2d/core/base-nodes/BaseNodesPropertyDefine.js',
'./web/cocos2d/core/renderer/RendererCanvas.js',
'./web/cocos2d/core/renderer/RendererWebGL.js',
'./web/cocos2d/core/base-nodes/CCNode.js',
'./web/cocos2d/core/base-nodes/CCNodeCanvasRenderCmd.js',
'./web/cocos2d/core/base-nodes/CCNodeWebGLRenderCmd.js','./web/cocos2d/core/base-nodes/CCAtlasNode.js',
'./web/cocos2d/core/base-nodes/CCAtlasNodeCanvasRenderCmd.js',
'./web/cocos2d/core/base-nodes/CCAtlasNodeWebGLRenderCmd.js',
'./web/cocos2d/core/textures/TexturesWebGL.js',
'./web/cocos2d/core/textures/TexturesPropertyDefine.js',
'./web/cocos2d/core/textures/CCTexture2D.js',
'./web/cocos2d/core/textures/CCTextureCache.js',
'./web/cocos2d/core/textures/CCTextureAtlas.js',
'./web/cocos2d/core/scenes/CCScene.js',
'./web/cocos2d/core/scenes/CCLoaderScene.js',
'./web/cocos2d/core/layers/CCLayer.js',
'./web/cocos2d/core/layers/CCLayerCanvasRenderCmd.js',
'./web/cocos2d/core/layers/CCLayerWebGLRenderCmd.js',
'./web/cocos2d/core/sprites/SpritesPropertyDefine.js',
'./web/cocos2d/core/sprites/CCSprite.js',
'./web/cocos2d/core/sprites/CCSpriteCanvasRenderCmd.js',
'./web/cocos2d/core/sprites/CCSpriteWebGLRenderCmd.js',
'./web/cocos2d/core/sprites/CCBakeSprite.js',
'./web/cocos2d/core/sprites/CCAnimation.js',
'./web/cocos2d/core/sprites/CCAnimationCache.js',
'./web/cocos2d/core/sprites/CCSpriteFrame.js',
'./web/cocos2d/core/sprites/CCSpriteFrameCache.js',
'./web/cocos2d/core/sprites/CCSpriteBatchNode.js',
'./web/cocos2d/core/sprites/CCSpriteBatchNodeCanvasRenderCmd.js',
'./web/cocos2d/core/sprites/CCSpriteBatchNodeWebGLRenderCmd.js',
'./web/cocos2d/core/CCConfiguration.js',
'./web/cocos2d/core/CCDirector.js',
'./web/cocos2d/core/CCDirectorCanvas.js',
'./web/cocos2d/core/CCDirectorWebGL.js',
'./web/cocos2d/core/CCCamera.js',
'./web/cocos2d/core/CCScheduler.js',
'./web/cocos2d/core/utils/CCProfiler.js',
'./web/cocos2d/core/CCDrawingPrimitivesCanvas.js',
'./web/cocos2d/core/CCDrawingPrimitivesWebGL.js',
'./web/cocos2d/core/labelttf/LabelTTFPropertyDefine.js',
'./web/cocos2d/core/labelttf/CCLabelTTF.js',
'./web/cocos2d/core/labelttf/CCLabelTTFCanvasRenderCmd.js',
'./web/cocos2d/core/labelttf/CCLabelTTFWebGLRenderCmd.js',
'./web/cocos2d/core/CCActionManager.js',
'./web/cocos2d/kazmath/utility.js',
'./web/cocos2d/kazmath/vec2.js',
'./web/cocos2d/kazmath/vec3.js',
'./web/cocos2d/kazmath/vec4.js',
'./web/cocos2d/kazmath/ray2.js',
'./web/cocos2d/kazmath/mat3.js',
'./web/cocos2d/kazmath/mat4.js',
'./web/cocos2d/kazmath/plane.js',
'./web/cocos2d/kazmath/quaternion.js',
'./web/cocos2d/kazmath/aabb.js',
'./web/cocos2d/kazmath/gl/mat4stack.js',
'./web/cocos2d/kazmath/gl/matrix.js',
'./web/cocos2d/shaders/CCShaders.js',
'./web/cocos2d/shaders/CCShaderCache.js',
'./web/cocos2d/shaders/CCGLProgram.js',
'./web/cocos2d/shaders/CCGLStateCache.js',
'./web/cocos2d/shape-nodes/CCDrawNode.js',
'./web/cocos2d/shape-nodes/CCDrawNodeCanvasRenderCmd.js',
'./web/cocos2d/shape-nodes/CCDrawNodeWebGLRenderCmd.js',
'./web/cocos2d/actions/CCAction.js',
'./web/cocos2d/actions/CCActionInterval.js',
'./web/cocos2d/actions/CCActionInstant.js',
'./web/cocos2d/actions/CCActionCamera.js',
'./web/cocos2d/actions/CCActionEase.js',
'./web/cocos2d/actions/CCActionCatmullRom.js',
'./web/cocos2d/actions/CCActionTween.js',
'./web/cocos2d/menus/CCMenuItem.js',
'./web/cocos2d/menus/CCMenu.js',
'./web/cocos2d/audio/CCAudio.js'
];

以上就是我目前压缩的版本,用这个跑官方的的demo就不会报错了,至于工具可以选择grunt,gulp或者webpack等前端构建工具进行合并压缩。

好了,这样我们的COCOS2D-html5的开发环境就部署好了,也算是学习web游戏的第一步就迈出去了,接下来就要看你自己找学习资料或者书籍努力了!