cocos2d - js 知识整理

目录结构
- index.html
- main.js代码
- project.json文件
启动流程
- 导演
节点
- 节点常用基本属性
- 节点坐标
场景
图层Layer
精灵Sprite
- 自定义精灵
- 组合精灵定义
- - FarmScene .js
  - Farm.js
  - House.js
- 动画精灵定义
- - person.js
  - PersonScene.js
标签Label
菜单Menu

目录结构

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);//屏幕尺寸定义函数：setDesignResolutionSizecc.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=100node.y=100node.setPosition(100,100)node.getPosition()node.setPositionX(100)node.getPositionY()大小属性：适用：Layer，不适应：spritenode.widthnode.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,0layer.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.xsprite.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);//生成 actionvar 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);

cocos 2d - js相关推荐

在d3中使用2D.js获取图形间的交点
在d3中并不没有什么方法能直接获取到两条line.path或两个其他图形的交点,所以我们借助2D.js帮助我们计算交点. 2D.js From kevlindev 以两条线的为例获取svg中两条li ...
cocos 2d CCSprite 触摸识别非常有用！！！！！
cocos 2d 中的CCSprite 无法识别触摸操作,需要自定义类. 解决思想:找到触摸发生的那个点,判断其是否在sprite的矩形区域内完整代码如下: //MySprite.h文件 #impo ...
【vscode】调试cocos creator (Js 无法命中断点问题解决)
先看看官方教程–使用 VS Code 调试网页版游戏一.安装插件 Debugger for Chrome已弃用安装 JavaScript Debugger (Nightly) 插件替代,其他步骤 ...
cocos creator JS 实现微信小游戏体力倒计时恢复的代码
写微信小游戏时写的,功能可能还有待改进.目前这里只是在逻辑层获取了当前的系统时间,所以离开页面倒计时会停止(所以想要完成场景跳转之后仍在继续倒计时的功能,必须在逻辑层取回离开某个场景时的时间来做条件运 ...
【cocos 2d微信小游戏开发教程】基础使用笔记分享（三）
富文本(RichText) 优点:自定义颜色,大小,描边,还能加图片.对于复杂的文本表现力更好. 缺点:cocos的富文本是由Label组件拼装实现的.低版本会打断合批.Label太多导致卡顿. 常用 ...
Cocos Creator JS 时间戳日期转换
/*** 时间戳换算日期* */function formatDateTime (timeStamp) { var date = new Date(); date.setTime(timeStamp ...
Cocos Creator JS 获取当前日期与时间
var testDate = new Date(); testDate.getYear();//获取当前年份(2位) testDate.getFullYear(); //获取完整的年份(4位,1970 ...
cocos creator js 单利模型
//单利模型 function Model(){this.data=[1,2,3,4];this.getInfo=(()=>{console.log(this.data);console.log ...
2d游戏引擎_8年，从2D到3D，我的学习之路
Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...

cocos 2d - js

cocos2d - js 知识整理

目录结构

index.html

main.js代码

project.json文件

启动流程

导演

节点

节点常用基本属性

节点坐标

场景

图层Layer

精灵Sprite

自定义精灵

组合精灵定义

FarmScene .js

Farm.js

House.js

动画精灵定义

person.js

PersonScene.js

标签Label

菜单Menu

cocos 2d - js相关推荐

最新文章

热门文章