参考官网：https://www.cocos.com/docs/js/1-about-cocos2d-js/1-1-a-brief-history/zh.html
跨全平台（PC端，手机端），游戏引擎，开源易学易用有文档，非常容易上手。
可在浏览器中完成游戏的开发和调试，然后发布到网页, 移动 还有主机平台
Cocos2d-JS是Cocos2d-x的JavaScript版本，融合了Cocos2d-HTML5和Cocos2d-x JavaScript Bindings（JSB）。
Cocos2d-html5是Cocos2d-JS的一个重要模块，是一个面向Web的游戏引擎，并完全兼容HTML5规范，所以基于Cocos2d-JS开发的游戏天然可运行在所有支持HTML5规范的浏览器。
Cocos2d-JS和其他的Cocos2d分支相比，其跨平台的能力是最强的，使用难度也是最低的。主要用于h5游戏开发。
转载于:https://www.cnblogs.com/mySummer/p/10699691.html
cocos2d - js 知识整理
目录结构
main.js设置启动的场景
project.json配置写好的js文件index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cocos2d-html5</title> <link rel="icon" type="image/GIF" href="res/favicon.ico"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="full-screen" content="yes"/> <meta name="screen-orientation" content="portrait"/> <meta name="x5-fullscreen" content="true"/> <meta name="360-fullscreen" content="true"/> <style> body, canvas, div { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } </style> </head> <body style="padding:0; margin: 0;"> <canvas id="gameCanvas" width="720" height="1280"></canvas> <script src="frameworks/cocos2d-html5/CCBoot.js"></script> <script src="main.js"></script> </body> </html>main.js代码
cc.game.onStart = function(){ cc.view.adjustViewPort(true); //屏幕尺寸定义函数：setDesignResolutionSize cc.view.setDesignResolutionSize(640, 1136, cc.ResolutionPolicy.SHOW_ALL); cc.view.resizeWithBrowserSize(true); cc.LoaderScene.preload(g_resources, function () { cc.director.runScene(new MenuScene()); }, this); }; cc.game.run();函数：cc.view.setDesignResolutionSize 的参数
project.json文件
在jsList中配置写好的文件
{ "project_type": "javascript", "debugMode": 0, "showFPS": true, "frameRate": 60, "id": "gameCanvas", "renderMode": 0, "engineDir": "frameworks/cocos2d-html5", "modules": [ "cocos2d","ccpool" ], "jsList": [ "src/resource.js", "src/sushi/PlayScene.js", ] }启动流程
导演
负责游戏的初始化与过程统筹，cc.director是个单例对象
1.设置帧频 cc.director.setAnimationInterval(1/60) 2.获取屏幕的大小 var size=cc.director.getWinSize() size.width(size.height) 3.替换方式场景启动 cc.director.runScene(new Resolution()) 4.栈方式场景启动 cc.director.pushScene(new Resolution()) cc.director.popScene(); 5.动画场景 Var animScene=new cc.TransitionSlideInT(1, scene); cc.director.pushScene(animScene)节点
节点常用基本属性
位置属性 node.x=100 node.y=100 node.setPosition(100,100) node.getPosition() node.setPositionX(100) node.getPositionY() 大小属性：适用：Layer，不适应：sprite node.width node.height 锚点与层级 node.setAnchorPoint(0.5,0.5) node.getAnchorPoint() node.setLocalZOrder(100) node.getLocalZOrder() 旋转属性 node.setRotationX（angle） node.getRotationX() 缩放属性 node.setScale(radio) node.getScale() 倾斜与不透明 node.setSkewX(skew) node.getSkewX() node.setOpacity(opacity) 属性配置 node.attr({ x:100, y:100, scale:1.5 }) 节点操作 node.addChild(child,localorder,tag) node.removeChild(child) node.removeFromParent() 调度器 node.scheduleUpdate() node.update=function(dt){} node.schedule(callback,interval,repeat,delay,key) node.scheduleOnce(callback,interval,key)调度器演示
var ScheduleScene = cc.Scene.extend({ ctor: function () { this._super(); cc.spriteFrameCache.addSpriteFrames(res.personPlist); //第一种方法 //this.scheduleUpdate(); //每帧都激活 //第二种方法,时间秒为单位 //node.schedule(callback, interval, repeat, delay, key) this.schedule(this.addSprite, 1, 10, 1); //第三种方法 //node.scheduleOnce(callback,interval,key) //this.scheduleOnce(this.addSprite, 1); }, update: function () { this.addSprite(); }, addSprite: function () { console.log("测试"); var sprite1 = new cc.Sprite("#0001.png"); var size = cc.director.getWinSize(); sprite1.x = this.randomNum(300, 1000); sprite1.y = this.randomNum(300, 1000); this.addChild(sprite1); }, randomNum: function (minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); break; case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); break; default: return 0; break; } } })节点坐标
Var toWorldPos=nodeParent.convertToWorldSpace(node.getPosition()) Var toNodePos=node_A.convetToNodeSpace(node_B) node.getBoundingBox() 返回 cc.rect(x,y,width,height)场景
场景的过渡方式演示
var TestPeroidScene1 = cc.Scene.extend({ ctor: function () { this._super(); console.log("第一个场景:ctor"); var buttonLayer = new TestButtonLayer(); //加入按钮控制层 this.addChild(buttonLayer); }, onEnter: function () { this._super(); console.log("第一个场景:onEnter"); }, onExit: function () { this._super(); console.log("第一个场景:onExit"); }, onEnterTransitionDidFinish: function () { this._super(); console.log("第一个场景:onEnterTransitionDidFinish"); }, onExitTransitionDidStart: function () { this._super(); console.log("第一个场景:onExitTransitionDidStart"); }, }); var TestButtonLayer = cc.Layer.extend({ ctor: function () { this._super(); var menuitem1 = new cc.MenuItemFont("替换跳到第二场景", this.goSecond); var menuitem2 = new cc.MenuItemFont("栈方式切换第二场景", this.goSecondStack); var menuitem3 = new cc.MenuItemFont("替换跳过度切换第二场景", this.goSecondTransitionk); var menu = new cc.Menu(menuitem1, menuitem2, menuitem3); menu.alignItemsVerticallyWithPadding(20); menu.x = 400; menu.y = 500; this.addChild(menu); }, onEnter: function () { this._super(); }, goSecond: function () { cc.director.runScene(new TestPeroidScene2()); }, goSecondStack: function () { cc.director.pushScene(new TestPeroidScene2()); }, goSecondTransitionk: function () { var animateScene = new cc.TransitionSlideInT(1, new TestPeroidScene2()); cc.director.runScene(animateScene); } })var TestPeroidScene2 = cc.Scene.extend({ ctor: function () { this._super(); console.log("第二个场景:ctor"); var menuitem1 = new cc.MenuItemFont("替换返回第一场景", this.goFirst); var menuitem2 = new cc.MenuItemFont("栈方式返回第一场景", this.goFirstStack); var menuitem3 = new cc.MenuItemFont("替换过度返回第一场景", this.goFirstTransitionk); var menu = new cc.Menu(menuitem1, menuitem2, menuitem3); menu.alignItemsVerticallyWithPadding(20); menu.x = 400; menu.y = 500; this.addChild(menu); }, onEnter: function () { this._super(); console.log("第二个场景:onEnter"); }, onExit: function () { this._super(); console.log("第二个场景:onExit"); }, onEnterTransitionDidFinish: function () { this._super(); console.log("第二个场景:onEnterTransitionDidFinish"); }, onExitTransitionDidStart: function () { this._super(); console.log("第二个场景:onExitTransitionDidStart"); }, goFirst: function () { cc.director.runScene(new TestPeroidScene1()); }, goFirstStack: function () { cc.director.popScene(); }, goFirstTransitionk: function () { var animateScene = new cc.TransitionSlideInT(1, new TestPeroidScene1()); cc.director.runScene(animateScene); } });
图层Layer
Layer 相当于 网页的”DIV”元素,是一个容器的概念
var layer=new cc.Layer(); var layer= cc.LayerColor(cc.color(0,0,0,138),width,height)layer锚点设置
var TestLayerScene = cc.Scene.extend({ ctor: function () { this._super(); var layer = new cc.LayerColor(cc.color(255, 0, 0.128), 300, 300); //默认锚点 0,0 layer.setAnchorPoint(0.5, 0.5); //图层默认情况锚点效果是忽略 layer.ignoreAnchor = false; var size = cc.director.getWinSize(); layer.x = size.width/2; layer.y = size.height/2; this.addChild(layer); } });精灵Sprite
精灵定义 方法一： var sprite=new cc.Sprite(“res/1.png”); 方法二： resouce.js中配置图片预导入 var res = { bg: "/res/background.png", }; var sprite=new cc.Sprite(res.bg); 方法三： cc.spriteFrameCache.addSpriteFrames(res.personPlist); var sprite3 = new cc.Sprite("#0001.png"); 坐标： sprite.x sprite.y 缩放： sprite. setScale（0.5） 旋转： sprite. setRotationX（90）自定义精灵
var Farm = cc.Sprite.extend({ ctor: function (level) { switch (level) { case 1: this._super("res/house/house_1.png"); break; case 2: this._super("res/house/house_2.png"); break; case 3: this._super("res/house/house_3.png"); break; default: this._super("res/house/house_1.png"); break; } }, });组合精灵定义
FarmScene .js
var FarmScene = cc.Scene.extend({ farm: null, ctor: function () { this._super(); var size = cc.director.getWinSize(); this.farm = new Farm(); this.farm.x = size.width / 2; this.farm.y = size.height / 2; this.addChild(this.farm); this.addMenu(); }, addMenu: function () { //按钮代码 var menuItem1 = new cc.MenuItemFont("15", this.changBlood1, this); var menuItem2 = new cc.MenuItemFont("50", this.changBlood2, this); var menuItem3 = new cc.MenuItemFont("100", this.changBlood3, this); var menu = new cc.Menu(menuItem1, menuItem2, menuItem3); menu.x = 300; menu.y = 300; menu.alignItemsVerticallyWithPadding(20); this.addChild(menu); }, changBlood1: function () { //事件的激活，this环境 this.farm.changeBlood(15); }, changBlood2: function () { this.farm.changeBlood(50); }, changBlood3: function () { this.farm.changeBlood(100); }, });
Farm.js
var Farm = cc.Layer.extend({ blood: null, house: null, ctor: function () { this._super(); this.house = new House(1); this.addChild(this.house); this.blood = new cc.LayerColor(cc.color(0, 255, 0, 120), 100, 10); this.blood.y = this.house.height / 2 + 20; this.blood.x = -this.blood.width / 2; this.addChild(this.blood); }, changeBlood: function (width) { this.blood.width = width; } });House.js
var House = cc.Sprite.extend({ ctor: function (level) { switch (level) { case 1: this._super(res.house1); break; case 2: this._super("res/house/house_2.png"); break; case 3: this._super("res/house/house_3.png"); break; default: this._super("res/house/house_1.png"); break; } }, changeLevel: function (level) { this.setTexture("res/house/house_"+level+".png"); } })动画精灵定义
person.js
var Person = cc.Sprite.extend({ _animation: null, ctor: function () { this._super(); //帧动画的实现方法 cc.spriteFrameCache.addSpriteFrames(res.personPlist); // 动画配置，帧与时间 this._animation = new cc.Animation(); var name = ''; for (var i = 1; i < 8; i++) { name = "000" + i + ".png"; this._animation.addSpriteFrame(cc.spriteFrameCache.getSpriteFrame(name)); }; this._animation.setDelayPerUnit(1 / 20); //生成 action var action = cc.animate(this._animation).repeatForever(); this.runAction(action); }, changeSpeed: function (speed) { //以前的动画停止 this.stopAllActions(); this._animation.setDelayPerUnit(speed); var action = cc.animate(this._animation).repeatForever(); this.runAction(action); } });PersonScene.js
var PersonScene = cc.Scene.extend({ person: null, ctor: function () { this._super(); var size = cc.director.getWinSize(); this.person = new Person(); this.person.x = size.width / 2; this.person.y = size.height / 2; this.addChild(this.person); this.addMenu(); }, addMenu: function () { //按钮代码 var menuItem1 = new cc.MenuItemFont("1/10", this.changSpeed1, this); var menuItem2 = new cc.MenuItemFont("1/20", this.changSpeed2, this); var menuItem3 = new cc.MenuItemFont("1/60", this.changSpeed3, this); var menu = new cc.Menu(menuItem1, menuItem2, menuItem3); menu.x = 300; menu.y = 300; menu.alignItemsVerticallyWithPadding(20); this.addChild(menu); }, changSpeed1: function () { //事件的激活，this环境 this.person.changeSpeed(1 / 10); }, changSpeed2: function () { this.person.changeSpeed(1 / 20); }, changSpeed3: function () { this.person.changeSpeed(1 / 60); }, });标签Label
var sprite=new cc.LabelTTF(“hello”,”arial”,24)菜单Menu
var menu=new cc.Menu(menuitem1,menuitem2) menu.alignItemsVerticallyWithPadding(20); menu.alignItemsHorizontallyWithPadding(20); var menuItem1 = new cc.MenuItemFont(“test", this.test03);
了解
cocos2d-js是cocos2d-x的JavaScript版本，真正跨全平台的游戏引擎，采用原生JavaScript语言，可发布到包括Web平台，iOS，Android，Windows Phone8，Mac，Windows等平台。利用cocos2d-js开发HTML5游戏/动画，我们可以通过SDK也可以直接使用js类库：
l SDK下载：http://cn.cocos2d-x.org/download/
l js类库：http://www.cocos2d-x.org/filecenter/jsbuilder/
SDK的开发步骤：
1、 安装python
2、 解压SDK，运行setup.py
3、 运行cmd，新建cocos2d-js项目：cocos new –l js project_name
4、 使用webStorm等IDE打开项目目录，新建的项目已经有现成HelloWorld例子
5、 了解一下main.js的说明（关于project.json），然后打开resource.js和app.js阅读代码
6、 在app.js中正式开始自己的代码编写。当然，这里可以增加新的js文件，需要修改project.json。
