Cocos study notes-Menu

Cocos2d-x 菜单系统详解
本文详细介绍了Cocos2d-x中菜单系统的三个主要类别:MenuItemLabel、MenuItemSprite 和 MenuItemToggle。MenuItemLabel 用于显示文字,包括MenuItemFont和MenuItemAtlasFont两种类型。MenuItemSprite 用于加载图片,而 MenuItemToggle 则可以视为一个按钮,能够接受多个MenuItem对象。

cocos study notes-Menu

reference: jellythink
In cocos-2d-x, its menu UI system can be divided to three catageries:

  • MenuItemLabel
  • MenuItemSprite
  • MenuItemToggle

Now, let’t talk about them in detail.

1.MenuItemLabel

It is a MenuItem which was defined by typeface, or we can say this is a MenuItem which can be used to write words on it. MenuItemLabel includes MenuItemAtlasFont and MenuItemFont.
MenuItemFont is a class which can set the size and name of typeface. This is its member functions:

static MenuItemFont *create(const std::string& value="start");
static MenuItemFont *create(const std::string& value,const MenuCallback& callback);
//the size of typeface
static void setFontSize(int size);
static int getFontSize();
//the name of typeface
static void setFontName(const std::string& name);
static const std::string& getFontName();

MenuItemAlasFont is created by typeface file,something alike plist file.

2.MenuItemSprite

MenuItemSprite is a class which can load picture.First, let’s see its member functions:

static MenuItemSprite *create(Node* normalSprite,Node* selectedSprite,Node* disabledSprite=nullptr);  
static MenuSprite *create(Node* normalSprite,Node* selectSprite,Node* disabledSprite,const MenuCallback* callback); //sometimes we can omit the disabledSprite
inline Node* getNormalImage()cosnt {return _normalImage;};
void setNormalImage(Node* image);
//the other two can be inferred by the functions above.

3.MenuItemToggle

You can pass any MenuItem to the MenuItemToggle,which can be treated as a button.And its member function:

//create with a vector containing MenuItem
static MenuItemToggle *createWithCallback(const MenuCallback& callback,const Vector<MenuItem*>&menuItem);
//create with plenty of MenuItem
static MenuItemToggle* createWithCallback(const MenuCallback& callback,MenuItem* item,...,NULL);
//create an empty MenuItemToggle
static MenuItemToggle* create();
//add MenuItem to it
void addSubItem(MenuItem *item);
MenuItem* getSelectedItem();
【电能质量扰动】基于ML和DWT的电能质量扰动分类方法研究(Matlab实现)内容概要:本文研究了一种基于机器学习(ML)和离散小波变换(DWT)的电能质量扰动分类方法,并提供了Matlab实现方案。首先利用DWT对电能质量信号进行多尺度分解,提取信号的时频域特征,有效捕捉电压暂降、暂升、中断、谐波、闪变等常见扰动的关键信息;随后结合机器学习分类器(如SVM、BP神经网络等)对提取的特征进行训练与分类,实现对不同类型扰动的自动识别与准确区分。该方法充分发挥DWT在信号去噪与特征提取方面的优势,结合ML强大的模式识别能力,提升了分类精度与鲁棒性,具有较强的实用价值。; 适合人群:电气工程、自动化、电力系统及其自动化等相关专业的研究生、科研人员及从事电能质量监测与分析的工程技术人员;具备一定的信号处理基础和Matlab编程能力者更佳。; 使用场景及目标:①应用于智能电网中的电能质量在线监测系统,实现扰动类型的自动识别;②作为高校或科研机构在信号处理、模式识别、电力系统分析等课程的教学案例或科研实验平台;③目标是提高电能质量扰动分类的准确性与效率,为后续的电能治理与设备保护提供决策依据。; 阅读建议:建议读者结合Matlab代码深入理解DWT的实现过程与特征提取步骤,重点关注小波基选择、分解层数设定及特征向量构造对分类性能的影响,并尝试对比不同机器学习模型的分类效果,以全面掌握该方法的核心技术要点。
Cocos 引擎中实现圆形菜单(Circular Menu)通常涉及节点布局、角度计算与动画控制。Cocos Creator 或 Cocos2d-x 均可通过自定义脚本实现该效果,以下为基本实现思路: ### 实现方法 1. **菜单项布局** 圆形菜单的核心在于将多个菜单项均匀分布在以中心点为圆心的圆周上。通过三角函数(`sin` 与 `cos`)计算每个菜单项的坐标位置: ```javascript const angleStep = (2 * Math.PI) / itemCount; for (let i = 0; i < itemCount; i++) { const angle = i * angleStep; const x = centerX + radius * Math.cos(angle); const y = centerY + radius * Math.sin(angle); // 设置菜单项位置 } ``` 此方法可确保菜单项均匀分布于圆周上[^1]。 2. **动画展开与收起** 通过 Cocos Creator 的 `tween` 或 Cocos2d-x 的 `Action` 实现菜单项的展开与收起动画。例如,在点击主按钮时,使用缓动动画将菜单项从中心点向外移动: ```javascript cc.tween(menuItem) .to(0.3, { position: cc.v2(x, y) }, { easing: 'easeOut' }) .start(); ``` 3. **交互控制** 为每个菜单项绑定点击事件,并在交互后收起菜单。可使用 `cc.Button` 或事件监听器实现交互逻辑。 ### 插件推荐 - **Cocos Store 插件** 在 Cocos Store 中可搜索到部分圆形菜单插件,如 `CircularMenu` 或 `RadialMenu`,这些插件通常提供可视化编辑界面与多种动画选项,适用于快速集成。 - **GitHub 开源项目** 可参考 GitHub 上的开源项目,例如: - [cocos2d-x Circular Menu](https://github.com/...) - [Cocos Creator Circular Menu](https://github.com/...) 这些项目通常提供完整的实现代码与示例场景,便于学习与扩展。 ### 示例代码(Cocos Creator) 以下为一个简单的圆形菜单实现示例: ```typescript const { ccclass, property } = cc._decorator; @ccclass export default class CircularMenu extends cc.Component { @property(cc.Node) private centerButton: cc.Node = null; @property([cc.Node]) private menuItems: cc.Node[] = []; private isOpen = false; private radius = 100; onLoad() { this.centerButton.on('click', this.toggleMenu, this); } private toggleMenu() { this.isOpen = !this.isOpen; const center = this.centerButton.position; const angleStep = (2 * Math.PI) / this.menuItems.length; for (let i = 0; i < this.menuItems.length; i++) { const angle = i * angleStep; const x = center.x + this.radius * Math.cos(angle); const y = center.y + this.radius * Math.sin(angle); const targetPos = cc.v2(x, y); if (this.isOpen) { cc.tween(this.menuItems[i]) .to(0.3, { position: targetPos }, { easing: 'easeOut' }) .start(); } else { cc.tween(this.menuItems[i]) .to(0.3, { position: center }, { easing: 'easeOut' }) .start(); } } } } ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值