cocos2d-js引擎学习笔记
cocos2d-js3.0实用语法
/*初始化继承类*/
var Enemy = cc.Sprite.extend({
hp: 0,
fileName: "enemy.png",
ctor: function (arg) {
this._super(arg.pic);
this.hp = arg.hp;
}
});
var enemy1 = new Enemy(100); /*动作*/
var anAction = cc.sequence(
cc.moveBy(2,cc.p(100,50)).easing(cc.easeIn(0.3)).repeat(5).speed(1.7),
cc.rotateBy(2,110)
).repeatForever(); enemy1.runAction(anAction); this.sprite.runAction(
cc.sequence(
cc.rotateTo(2, 0),
cc.scaleTo(2, 1, 1)
)
);
helloLabel.runAction(
cc.spawn(
cc.moveBy(2.5, cc.p(0, size.height - 40)),
cc.tintTo(2.5,255,125,0)
)
); /*menuItem和winSize*/
var size = cc.winSize; var closeItem = new cc.MenuItemImage(
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log("Menu is clicked!");
}, this);
closeItem.attr({
x: size.width - 20,
y: 20,
anchorX: 0.5,
anchorY: 0.5
}); var menu = new cc.Menu(closeItem);
menu.x = 0;
menu.y = 0;
this.addChild(menu, 1);
Scale9Sprite
在用Scale9Sprite.create的时候出现Uncaught TypeError: Cannot call method 'create' of undefined这个错误,
后来发现在默认情况下,project.json里的modules只自带cocos2d模块,通过检查frameworks/cocos2d-html5/moduleConfig.json,可以看到cocos2d模块里并没有CCScale9Sprite.js这个类。
它在GUI里,所以可以在modules里添加"GUI"这个模块,或者可以像我这样,在moduleConfig.json里写一个myNeedfulClass这样的模块,里面添加CCScale9Sprite.js这个类,这样只要在modules里添加"myNeedfulClass"就行。有个好处就是可以不用加载GUI里其他的类。测试代码如下
var tmp = cc.Sprite.create(res.Block9);
var theSize = tmp.getContentSize();
var fullRect = cc.rect(0,0,theSize.width,theSize.height);
var insetRect = cc.rect(32,32,theSize.width-64,theSize.height-64);
var scale9sprite = cc.Scale9Sprite.create(res.Block9,fullRect,insetRect);
scale9sprite.setContentSize(theSize.width*3,theSize.height*2);
scale9sprite.x = size.width/2;
scale9sprite.y = size.height/2;
this.addChild(scale9sprite);
原先图片:
经过上述代码处理后的图片:
效果是A,B,C,D四个角大小不变,top,bottom俩条边横向拉伸,left,right俩条边纵向拉伸,中间的center既横向又纵向拉伸。
用在适配的地方比较多,譬如一个BUTTON精灵。
下面是九宫格精灵用作按钮的代码。
var size = cc.director.getWinSize(); var tmp = cc.Sprite.create(res.Block9);
var theSize = tmp.getContentSize();
var fullRect = cc.rect(0,0,theSize.width,theSize.height);
var insetRect = cc.rect(32,32,theSize.width-64,theSize.height-64);
var scale9sprite = cc.Scale9Sprite.create(res.Block9,fullRect,insetRect);
scale9sprite.setContentSize(theSize.width*2,theSize.height*2);
var scale9sprite1 = cc.Scale9Sprite.create(res.Block9,fullRect,insetRect);
scale9sprite1.setContentSize(theSize.width*2,theSize.height*2);
var scale9sprite2 = cc.Scale9Sprite.create(res.Block9,fullRect,insetRect);
scale9sprite2.setContentSize(theSize.width*2,theSize.height*2); var spriteNormal = cc.Sprite.create(res.Block9);
var spriteSelected = cc.Sprite.create(res.Block9);
var spriteDisabled = cc.Sprite.create(res.Block9);
var item = cc.MenuItemSprite.create(scale9sprite, scale9sprite1, scale9sprite2, this.onMenuCallback3, this);
var menu = cc.Menu.create(item);
item.x = 100;
item.y = 100;
menu.setPosition(0,0);
this.addChild(menu);
ClippingNode
设置模板的时候,模板一定要为有透明度为0的图,譬如PNG,否则没什么意义
闪亮标题案例
闪亮标题制作代码
var size = cc.director.getWinSize(); var clip = cc.ClippingNode.create(); //创建模板
var gameTitle = cc.Sprite.create(res.s_GameTitle);
clip.setStencil(gameTitle); //创建标题模板
clip.setAlphaThreshold(0); //给模板设置透明度阈值,这里为了达到标题外没有光晕的效果,模板透明度一定要为0,否则会把所有的光晕加进来,模板就不起作用了 clip.addChild(gameTitle, 1); //先添加标题,会完全显示出来,因为跟模板一样大小
var spark = cc.Sprite.create(res.s_Spark);
spark.setPosition(-size.width,0);
clip.addChild(spark,2); //闪亮图片,会被裁减 var moveAction = cc.MoveBy.create(0.6, cc.p(size.width*2, 0)); //闪亮图片做的动作
var seq = cc.Sequence.create(moveAction, moveAction.reverse());
var repeatAction = cc.RepeatForever.create(seq);
spark.runAction(repeatAction); //进行左右移动的重复动作 clip.setPosition(cc.p(size.width / 2, size.height / 2)); //clippingNode添加到layer上
this.addChild(clip,4);
子弹打靶案例
代码
ctor:function () {
this._super();
var size = cc.director.getWinSize(); var clip = cc.ClippingNode.create(); //创建clip节点
var holes = cc.Node.create(); //创建模板节点
clip.setStencil(holes); //设置clip节点的模板为holes
clip.setAlphaThreshold(0); //给模板的透明度阈值,因为只要取模板中有像素的部分来裁剪,所以要设置0,否则模板的裁剪效果为整个模板图,包括透明部分。
clip.setInverted(true); //设置反转,显示模板以外的地方。 var ba = cc.Sprite.create(res.s_ba); //靶
ba.scale =2;
clip.addChild(ba, 1); //靶加载clip节点上
clip.setPosition(cc.p(size.width / 4, 100)); //clippingNode添加到layer上
this.addChild(clip); var baSize = ba.getContentSize(); //确定ba在layer中的boundingBox
var baRect = cc.rect(clip.x-baSize.width/2*ba.scale,clip.y-baSize.height/2*ba.scale,baSize.width*ba.scale,baSize.height*ba.scale); //因为contentSize不会随scale的变化而变化,所以需要*ba.scale。 if ('mouse' in cc.sys.capabilities )
cc.eventManager.addListener({
event: cc.EventListener.MOUSE,
onMouseDown: function (event) {
if(cc.rectContainsPoint(baRect,event.getLocation())){
event.getCurrentTarget().fire(event.getLocation(),holes,clip); //参数:1.鼠标点击位置 2.模板节点 3.clip节点
}
}
}, this); },
fire:function(position,nodes,clippingNode){
var dian = cc.pSub(position,clippingNode.getPosition()); //因为洞和洞的修饰都是add在clip节点上的,所以坐标要进行换算。 var hole = cc.Sprite.create(res.s_moban); //洞,加在模板节点里
hole.setPosition(dian);
nodes.addChild(hole); var xiushi = cc.Sprite.create(res.s_xiushi); //洞的修饰,加在clip节点上
xiushi.setPosition(dian);
clippingNode.addChild(xiushi,2);
}
骨骼动画
var size = cc.director.getWinSize();
ccs.armatureDataManager.addArmatureFileInfo(CocoStudio_index); var armature = ccs.Armature.create("DemoPlayer");
armature.getAnimation().playWithIndex(1);
armature.attr({
anchorX:0.5,
anchorY:0.5,
scale:0.2,
x:size.width/2,
y:size.height/2
});
this.addChild(armature); //以下资源都要添加到g_resources里
var CocoStudio_index = "res/DemoPlayer/DemoPlayer.ExportJson";
var ab = "res/DemoPlayer/DemoPlayer0.plist";
var ac = "res/DemoPlayer/DemoPlayer0.png";
var ad = "res/DemoPlayer/Comet.plist";
setBlendFunc
这个方法其实是跟opengl绘制有关,默认是src:cc.SRC_ALPHA,dst:cc.ONE_MINUS_SRC_ALPHA,意思是如果上层图片的透明度为1,则不显示下层图片。
为了提亮某张图片,可以用dst=cc.ONE 来设置,达到类似发光物体的效果。
cocos2d-js引擎学习笔记的更多相关文章
- JS数组学习笔记
原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...
- js再学习笔记
#js再学习笔记 ##基本 1.js严格区分大小写 2.js末尾的分号可加,也可不加 3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...
- NVelocity模板引擎学习笔记
NVelocity模板引擎学习笔记 学习模板引擎有一段时间现在做一些总结
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- [Firefly引擎][学习笔记一][已完结]带用户验证的聊天室
原地址:http://bbs.9miao.com/thread-44571-1-1.html 前言:早在群里看到大鸡蛋分享他们团队的Firefly引擎,但一直没有时间去仔细看看,恰好最近需要开发一个棋 ...
- Knockout.js快速学习笔记
原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-Vie ...
- handlebars.js基础学习笔记
最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...
- 转:JS高级学习笔记(8)- JavaScript执行上下文和执行栈
必看参考: 请移步:博客园 JavaScript的执行上下文 深入理解JavaScript执行上下文和执行栈 JavaScript 深入之执行上下文 写在开头 入坑前端已经 13 个月了,不能再称自己 ...
- JS高级学习笔记(6)- 事件循环
参考文章:深入理解JS引擎的执行机制 JavaScript 异步.栈.事件循环.任务队列 我的笔记:ES系列之Promise async 和 await Event Loop 前提 js ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
随机推荐
- 基于存储过程的MVC开源分页控件
基于存储过程的MVC开源分页控件--LYB.NET.SPPager 摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件M ...
- 一步步教你读懂NET中IL(附带图)
一步步教你读懂NET中IL(附带图) 接触NET也有1年左右的时间了,NET的内部实现对我产生了很大的吸引力,在msdn上找到一篇关于NET的IL代码的图解说明,写的挺不错的.个人觉得:能对这些底部的 ...
- SSD Buffer Pool Extension
SSD Buffer Pool Extension 简介 SQL Server 2014中另一个非常好的功能是,可以将SSD虚拟成内存的一部分,来供SQL Server数据页缓冲区使用.通过使用SSD ...
- 设计模式之 - 工厂方法模式 (Factory Method design pattern)
1. 模式意图: 定义一个用于创建对象的接口,让子类决定实例化哪一个类,工厂方法使一个类的实例化延迟到其子类. 2. 别名(Virtual Constructor) 3. 结构 4. 工厂方法模式C ...
- 结构-行为-样式-Js函数节流
最近一个面试官问了我一个函数节流的问题,然后感觉自己工作中遇到过这个问题,但是不知道这种形式就是函数节流.下面我来说下这个Js的高级问题,思路:函数节流就是防止用户高频调用某个事件而做的Js层面的处理 ...
- 解决浏览器兼容问题的css hack
原理 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS.CSS Hack大致有3种表现形式,CSS类内部Hack.选择 ...
- 浅谈敏捷组织中PMO的角色
所谓的"敏捷组织"其实并没有标准的模式,而且PMO(项目管理办公室)并没有一个标准的角色定义.有一个非常普遍的误解,公司在选择"敏捷"或者"瀑布&qu ...
- 关于CachedRowSetImpl类
全称: com.sun.rowset.CachedRowSetImpl 父类: javax.sql.rowset.BaseRowSet 实现的接口: javax.sql.RowSet javax.sq ...
- list、dict、tuple的一些小操作总结
一.list 1.赋值(append) list.append(data) 2.去重 list(set(list)) list_gpcode = list(set(list(dfQuery.index ...
- AsyncTask兼容性
简介 AsyncTask是Android系统提供的异步方式,其优点在于在子线程执行任务,并将结果传递给主线程. 实现方式 AsyncTask封装了Executor和Handler. 基本使用 通过As ...