cocos2dx简单实现自己的一套ui

版本:2.x

目标:基于cocos2dx底层实现一个自己简单的一套的ui,改屏幕坐标原点为右上角。

首先我们通过继承CCNodeRGBA来实现自己的基类,为什么要继承CCNodeRGBA而不是CCNode,因为CCNodeRGBA有对node的颜色与透明度的设置

#pragma once
#include "cocos2d.h"
class View:public cocos2d::CCNodeRGBA
{
public:
	View(void);
	~View(void);
	void draw();
	void setPosition(cocos2d::CCPoint & pos);
};
#include "View.h"
using namespace cocos2d;

View::View(void)
{
	this->setAnchorPoint(ccp(0,1));
	this->ignoreAnchorPointForPosition(true);//
	setCascadeColorEnabled(true);  //开启ccnodergba的颜色设置
    setCascadeOpacityEnabled(true);  //开启ccnodergba的透明度设置
}

View::~View(void)
{
}

void View::draw()
{
	//ccDrawLine(ccp(0,0), ccp(200,200));
	//CCNode::draw();
	glLineWidth(2.0f);
	ccDrawColor4B(0,255,0,255);
	ccDrawRect(ccp(0,0),ccp(getContentSize().width, -getContentSize().height));

}

void View::setPosition(cocos2d::CCPoint & pos)
{
	CCNodeRGBA::setPosition(ccp(pos.x, -pos.y));
}

说一下:ignoreAnchorPointForPosition

cocos2dx一个node有两个点,

一个是锚点,与父级相关,父级会根据这个点设置该node的位置。

另一个是原点,与子级相关,子级设置位置会以这个点为标准,这个默认为node的左下角。

所以你设置node的 锚点(setAnchorPoint(ccp(0,1));)并不会修改到原点,哪怎么样才能让原点跟着锚点的位置变,就是ignoreAnchorPointForPosition(true),这句话。

例子:现在画的框已经相当于view的子节点了

先看下创建代码:(写在helloworld.cpp里就可以)

View *xx = new View;
	xx->setContentSize(CCSize(150,150));
	xx->CCNodeRGBA::setPosition(ccp(200,200));
	this->addChild(xx, 0);

	Image *img = new Image;
	img->create("close2.png");
	img->setPosition(ccp(0,10));
	xx->addChild(img);

先看一下没注释view 没注释ignoreAnchorPointForPosition(true),的效果,很明显是以左上角对齐的

看一下,注释ignoreAnchorPointForPosition(true)的效果,因为我设置位置是200,200, 宽度是150,150,框是向下画的,所以在屏幕上面露出50像素的高度,很明显框是左下角对齐来画的。

实现坐标点为右上角的原理:首先我们先把view的锚点与原点设置为右上角,重写draw方法,画一个关于X翻转过的框,-getContentSize.height,实际上view的位置是正的height的才对。然后我们重写 setPosition方法,对Y的位置取反,然后再设置位置。这样就给人一个坐标原点是右上角的假象,

例如:我加入一个view设置大小为屏幕大小,位置设置为(0,getWin,hegiht),这样我的view就会在屏幕上画一个框,实际上他在屏幕上方的外面,我的锚点与原点设置在屏幕的左上角,这样我view中加入一个子node,setposition(ccp(0,0)),就会以左上角对齐,设置为为0,100,通过重载的setposition,就是(0,-100),这样就正好显示在屏幕上了

然后我们看一下上的image类的实现,

#pragma once
#include "View.h"
class Image:public View
{
public:
	Image(void);
	~Image(void);
	cocos2d::CCSprite * create(char *pszFileName);
	void draw();
	/*void setViewPosition(cocos2d::CCPoint & pos);*/
	cocos2d::CCSprite * sprite;
};
#include "Image.h"
using namespace cocos2d;
Image::Image(void)
{
	sprite = NULL;
	setAnchorPoint(ccp(0,1));
	ignoreAnchorPointForPosition(true);
}
Image::~Image(void)
{

}
void Image::draw()
{
	ccDrawRect(ccp(0,0),ccp(sprite->getContentSize().width, -sprite->getContentSize().height));

}
cocos2d::CCSprite * Image::create(char *pszFileName)
{
	sprite = CCSprite::create(pszFileName);
	sprite->setAnchorPoint(ccp(0,1));
	//sprite->ignoreAnchorPointForPosition(true);
	this->addChild(sprite);
	return sprite;
}

image类我我们组合了一个CCSprite对象,创建的时候,并把它加入到Image的子节点下,然后通过管理imgae对象来管理下面的ccsprite

我们设置位置为0,10,看一下效果

完美啊。。。。

不好的地方,因为是简单的实现,

1 、上面那种内存管理上会出现问题,要是时刻想着delete,否则会泄露。

改进方法:仿照cocos2dx的create方式来创建新ui的对象,利用引用计数与自动释放池来管理内存,不要让使用者来new这个对象,也可自己写这些东西。

2、上面的基础view对象,要调用之前的设置位置的函数,这里看起来有点怪怪的,这里可以对他进一步的封装,封装在一个类的内部,这样暴露出来的坐标原点就会是屏幕的左上角了。

3、有了这样的架构,我们就可以写一套自己的ui,使用在自己的游戏中了。如果有特殊需求,改起来也很方便,再写一套解析xml的工具类,就可以彻底实现自己的ui了。

时间: 2024-10-10 05:55:59

cocos2dx简单实现自己的一套ui的相关文章

【Cocos2d-x】源码分析之 2d/ui/Widget

从今天开始 咱也模仿 红孩儿这些大牛分析源码 ,由于水平有限 不对之处欢迎狂喷.哈哈. #ifndef __UIWIDGET_H__ #define __UIWIDGET_H__ #include "ui/CCProtectedNode.h" #include "ui/UILayoutDefine.h" #include "ui/UILayoutParameter.h" #include "ui/GUIDefine.h" NS

【Cocos2d-x】源码分析之 2d/ui/UILayoutDefine.h

#ifndef __UILAYOUTDEFINE_H__ #define __UILAYOUTDEFINE_H__ #include "cocos2d.h" NS_CC_BEGIN namespace ui { /** *控件 距离四周的间隙 *设置间隙之后 相当于控件的大小扩大了 *不会和周围控件紧挨着 有一定间距 * */ class Margin { public: float left; float top; float right; float bottom; public:

【Cocos2d-x】源码分析之 2d/ui/UILayout

#ifndef __LAYOUT_H__ #define __LAYOUT_H__ #include "ui/UIWidget.h" NS_CC_BEGIN namespace ui { typedef enum { LAYOUT_COLOR_NONE,//空 LAYOUT_COLOR_SOLID,//单一固定颜色的 LAYOUT_COLOR_GRADIENT//有梯度变化的 }LayoutBackGroundColorType;//容器背景颜色类型 typedef enum { LA

网购一套UI代码的始末

引言: 一个商业项目的需要,又因为时间紧迫的关系,准备购买一套简洁,易用,可定制化强的UI,经过对国内外多家UI产品进行了对比, 包括:FineUI, EasyUI, EXT.NET, EXTJS, jQueryUI, jQuery MiniUI, ligerUI, kendo-ui, uikit, hplus, uimaker . 最后选择了uimaker的一个模板. Ⅰ 优点: 1)示例不依赖于.net,java, php等服务器平台,只需要电脑有一个浏览器即可进行示例浏览. 2)在easy

一套ui满足ios与android界面

1.android 画布宽高720*1280的标准来切图生成xhdpi标准图,后自动生成mdpi.hdpi.xhdpi.xxhdpi四套图. 2.ios画布宽高640 x 1136的标准来切图生成xhdpi标准图,后自动生成mdpi.hdpi.xhdpi.xxhdpi四套图. 二套界面,其实只要出一套ui效果图.最后只需要分别切图就行. 如: 10 *75% /75%=10 1. A=10 px*75% 生成 hdpi 大小即生成480*800 2. B/75%   生成xhdpi 即720*1

Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用

最近忙死了,得空发表一篇关于所有的Cocostudio中的UI组件使用的教程,其实是对所有UI组件的Api介绍,作为手册收藏下吧!! CocosStudio UI组件 按钮UIButton 复选框UICheckBox 滑块UISlider 图片UIImageView 进度条UILoadingBar 纹理文本 UITextAtlas 字体文本 UIText 图片字体文本 UITextBMFont 文本区域 UITextField 布局组件 UILayout 滚动组件 UIScrollView 页面

cocos2dx简单实现TabBarView功能

吐槽:现在在做一个不是游戏的游戏...选用cocos2dx 来做真心累啊,除了很多问题找不到解决方式之外,就是很多控件没得用!只能靠自己实现... 效果图: 实现方法其实很简单: 下面菜单是一个Menu,然后选用MenuItemSprite来填充,(MenuItemSprite有个selected(),unselected()函数,可以方便地切换状态) 然后上面是一个LayerMultiplex,就是一个存放Layer 的Vector,可以很方便地切换显示哪个Layer. 实现代码如下: Hel

ASP.NET MVC4 打造一套UI与后台并重-通用权限系统快速开发框架+精美UI界面 秒杀EasyUi、Ext

一.前言 从进行到软件开发这个行业现在已经有几年了,在整理出这个套开发框架之前自己做了不少重复造轮子的事.每次有新的项目总是要耗费不少时间在UI.权限和系统通用模块上面,自己累得要死,老板还骂没效率.为了能提高开发效率,同时也多拿拿奖金.多存点私房钱,我就着手做了一套以权限管理为主的快速开发框架.不求功能在所有项目中都得到使用,至少要大大提高开发效率. 二.需求分析    根据<那些年我们一起做过的项目>中各类客户对权限模块和通用模块以及UI的要求,我明确了这个系统中要实现的东西. 1.组织机

打造一套UI与后台并重-通用权限系统快速开发框架+精美UI界面

一.前言 从进行到软件开发这个行业现在已经有几年了,在整理出这个套开发框架之前自己做了不少重复造轮子的事.每次有新的项目总是要耗费不少时间在UI.权限和系统通用模块上面,自己累得要死,老板还骂没效率.为了能提高开发效率,同时也多拿拿奖金.多存点私房钱,我就着手做了一套以权限管理为主的快速开发框架.不求功能在所有项目中都得到使用,至少要大大提高开发效率. 二.需求分析     根据<那些年我们一起做过的项目>中各类客户对权限模块和通用模块以及UI的要求,我明确了这个系统中要实现的东西. 1.组织