当前位置:网站首页>cocos3——8.实现初学者指南
cocos3——8.实现初学者指南
2022-07-06 19:37:00 【全栈程序员站长】
大家好,又见面了,我是全栈君
1.采用ClippingNode裁剪范围
写作物接口:
function createClipNode(node, stencil, inverted) {
var clip_node = new cc.ClippingNode();
// 设置模板节点(就是要裁剪的区域)
clip_node.stencil = stencil;
// 加入要被裁剪掉的节点(显示的内容)
clip_node.addChild(node);
if (inverted != undefined) {
// 设置反转(由于我们须要保留模板区域外面的内容,裁剪掉区域里的内容)
clip_node.setInverted(inverted);
}
clip_node._stencil = stencil;
return clip_node;
}
在引导层创建裁剪节点:
// create clip node
var mask = cc.LayerColor.create(cc.color(0, 0, 0, ui.mask_a), ui.screen_width, ui.screen_height);
var stencil = cc.LayerColor.create(cc.color.GREEN, 100, 100);
stencil.ignoreAnchorPointForPosition(false);
this.clip_node = createClipNode(mask, stencil, true);
this.addChild(this.clip_node, ui.mask_z);
这里是创建了一个全屏的黑色遮罩层,然后在上面裁剪掉stencil的区域。要改变区域,我们仅仅须要改变stencil的位置和大小就能够了。
然后在引导层中写裁剪的函数:
node.clipNode = function (ref) {
this.clip_ref = ref;
var stencil = this.clip_node.stencil;
if (ref) {
stencil.setAnchorPoint(ref.getAnchorPoint());
stencil.setContentSize(ref.getContentSize());
stencil.setPosition(ref.getParent().convertToWorldSpace(ref.getPosition()));
} else {
// set out of screen
stencil.setPosition(cc.p(10000, 10000));
}
}
这个函数就是用传进来的參考节点ref的锚点、大小、位置来设置模板的属性,这样就能按參考节点进行裁剪了。
2.引导的简单流程
对于简单的引导实现,就是在引导開始的地方開始、引导结束的地方结束。
而什么时候開始、什么时候结束,假设量小且開始、结束条件都比較特殊的话,
就能够找到相关的地方開始和结束引导。
假设量大且条件比較一般化(比方button事件结束、滑动事件结束之类的),能够将条件 抽象话。然后进行配置。
以下就说简单的方式吧,先准备一下引导開始和结束的接口。
先从文件流获取上次引导的步数吧,这里用的local storage:
// local storage
var storage = {
ls: cc.sys.localStorage,
};
storage.set = function (key, value) {
this.ls.setItem(key, value);
}
storage.get = function (key) {
var value = this.ls.getItem(key);
if (value != '') {
return value;
}
}
storage.remove = function (key) {
this.ls.removeItem(key);
}
// global interface
var guide = {
node: node,
};
// arrow: // 0 down, 1 right, 2 up, 3 left
guide.steps = [
// 0
{
name: 'btn_right',
str: '请按住button,控制力度,将沙包扔进红色区域。', arrow: 1, }, // ...];// 获取上次引导完毕的步数guide.cur_step = storage.get('guide') || 0;
然后准备開始和结束引导的接口:
guide.start = function (step) {
if (step == this.cur_step) {
console.log('guide start:', step, ',', this.cur_step);
this.started = true;
this._show(true);
var info = this.steps[this.cur_step];
this.node.updateData(info);
}
}
guide.end = function (step) {
if (!this.started) {
return;
}
this.started = false;
if (step == undefined) {
step = this.cur_step;
}
if (step == this.cur_step) {
console.log('guide end:', step, ',', this.cur_step);
storage.set('guide', ++this.cur_step);
this._show(false);
}
}
guide._show = function (show) {
if (show) {
if (!this.node.getParent()) {
this.node.init();
ui.scene.addChild(this.node);
}
}
this.node.visible = show;
}
上面guide里的node就是引导界面的根节点。引导開始guide.start的时候,推断步数是当前步。就引导当前步,从上面配置的steps里面获取要引导的文字内容。
以及參考节点的名字(參考节点会挂到guide.start被调用的当前界面node对象下)、以及箭头等(文字、箭头的显示我就不多说了)。然后更新裁剪区域、显示文字、箭头等。在引导结束的时候将当前步数添加。
而实际设计各个引导的时候,比方在第i步的时候,去開始的地方调用guide.start(i),在引导完的时候掉guide.end(i)就能够了。
这里设计的是简单的单线引导,对于简单的
新手引导已经够用了。
版权声明:本文博主原创文章。博客,未经同意不得转载。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/116793.html原文链接:https://javaforall.cn
边栏推荐
- Oracle中日期的使用方法实例
- 从 1.5 开始搭建一个微服务框架——日志追踪 traceId
- Le tube MOS réalise le circuit de commutation automatique de l'alimentation principale et de l'alimentation auxiliaire, et la chute de tension "zéro", courant statique 20ua
- HDU 4337 King Arthur's Knights 它输出一个哈密顿电路
- Oracle connection pool is not used for a long time, and the connection fails
- Detailed explanation of 19 dimensional integrated navigation module sinsgps in psins (time synchronization part)
- C language string sorting
- c语言(字符串)如何把字符串中某个指定的字符删除?
- Huitong programming introductory course - 2A breakthrough
- Software testing -- common assertions of JMeter interface testing
猜你喜欢
How to design interface test cases? Teach you a few tips to draft easily
杰理之在非蓝牙模式下,手机连接蓝牙不要跳回蓝牙模式处理方法【篇】
What are the characteristics of the operation and maintenance management system
centerX: 用中国特色社会主义的方式打开centernet
MOS transistor realizes the automatic switching circuit of main and auxiliary power supply, with "zero" voltage drop and static current of 20ua
Statistics of radar data in nuscenes data set
Starting from 1.5, build a micro Service Framework -- log tracking traceid
上个厕所的功夫,就把定时任务的三种调度策略说得明明白白
What management points should be paid attention to when implementing MES management system
Babbitt | metauniverse daily must read: is IP authorization the way to break the circle of NFT? What are the difficulties? How should holder choose the cooperation platform
随机推荐
Detailed explanation of 19 dimensional integrated navigation module sinsgps in psins (time synchronization part)
首届“量子计算+金融科技应用”研讨会在京成功举办
Hash table and full comments
杰理之开启经典蓝牙 HID 手机的显示图标为键盘设置【篇】
Redis入门完整教程:复制配置
New benchmark! Intelligent social governance
Redis getting started complete tutorial: replication topology
Left value, right value
Kubernetes source code analysis (II) -- resource
Analysis of USB network card sending and receiving data
杰理之FM 模式单声道或立体声选择设置【篇】
Andrews - multimedia programming
Redis getting started complete tutorial: common exceptions on the client
房费制——登录优化
Development of wireless communication technology, cv5200 long-distance WiFi module, UAV WiFi image transmission application
Qpushbutton- "function refinement"
杰理之开 BLE 退出蓝牙模式卡机问题【篇】
wzoi 1~200
【Socket】①Socket技术概述
Redis入门完整教程:问题定位与优化