Cocostudio学习笔记(3) ImageView + Slider
此记录使用两个控制流:ImageView 和 Slide。
----------------------------------------------------------------------------------------------------------------------------
ImageView
---------------------------------------------------------------------------------------------------------------------------
此时已经十一点多了,尽管有点晚,但我还是毅然而然的研究下cocostudio版“Sprite类”(谁让LOL玩得太晚了)。
1、首先,在Cocostudio创建一个名为"SpriteTest"的项目。然后将须要的资源导入到项目中,我导入三张图片,也就是我们最熟悉的boy,girl,girl_3。
(都说三角形是最稳固的,那么三角恋呢?)。最后将创建好的项目导出到cocos2dx项目的Resources文件夹下。
2、打开cocos2dxproject,加入上面导过来的.json文件。代码例如以下:
cocos2d::ui::Widget* image_sp = GUIReader::getInstance()->widgetFromJsonFile("SpriteTest_1.json");//读取json配置文件
this->addChild(image_sp,2);
之后执行下程序。恩,三个主角都显示出来,没多大问题。
这里要点名的一点是:在cocos2dx中我的模拟器窗体大小为960x640,而cocostudio项目中我设置的窗体大小为480x320(请原谅我 的懒惰)。这样程序跑起来后会发现image_sp显示的位置处于左下方原点的位置。
3、我认为image_sp放在左下角太委屈它了,所以我要将它往右上角移动下。代码例如以下:
image_sp->setPosition(Point(300,200));
恩,执行后果然移动过去了,这样看来Widget也没什么了不起的嘛。我进它源代码里看看还有些啥玩意。呵呵,一大堆东西...吓尿了。
4、接下来我要单独取出boy来玩玩。但是,怎么取呢?难道也是用Sprite吗?要知道这但是cocostudio啊。
灵机一动:Menu是用Button取代,那么Sprite应该是用Image取代吧。赶紧写程序试下,还没敲完我最终反应过来。坑爹啊!
最后还是到Test里看下代码才知道是用ImageView这货。
ImageView* boy = static_cast<ImageView*>(Helper::seekWidgetByName(image_sp,"boy"));
boy->setPosition(Point(240,200));
恩。跑一下没有问题。
5、以下进ImageView的源代码里看看。ImageView的老子Widget我惹不起。难道它这小屁孩我还惹不起?看完源代码。果然,才这么几行,没难度啊!挑几个重点的API看吧。
static ImageView* create();//相似Sprite的create()
static ImageView* create(const std::string& imageFileName, TextureResType texType = UI_TEX_TYPE_LOCAL);//同上
void loadTexture(const std::string& fileName,TextureResType texType = UI_TEX_TYPE_LOCAL);//相似Sprite的initWithFile()。
没啥好说的。换汤不换药。唯一不同的地方就是TextureRestType这货,它应该是值读取纹理的类型。有以下两种:
typedef enum
{
UI_TEX_TYPE_LOCAL = 0,
UI_TEX_TYPE_UI_TEX_TYPE_LOCALPLIST = 1
}TextureResType; //UI_TEX_TYPE_LOCAL是直接读取资源文件夹下的图片,这也是创建初始化ImageView的默认方式。
//UI_TEX_TYPE_UI_TEX_TYPE_LOCALPLIST 应该是读取plist文件。
6、最后就是跳过cocostudio,直接用ImageView创建个对象来试试,这里我先用Sprite创建一个对象,看能否够载入到image_sp上,事实证明是能够的。最后看代码(有三个boy)
ImageView* boy = static_cast<ImageView*>(Helper::seekWidgetByName(image_sp,"boy")); //用image_sp中提取
boy->setPosition(Point(240,200)); auto boy_cx = Sprite::create("boy.png");//用Sprite创建
boy_cx->setPosition(Point(200,100));
image_sp->addChild(boy_cx,2); auto boy_cc = ImageView::create("boy.png");//用boy_cc创建
boy_cc->setPosition(Point(300,100));
image_sp->addChild(boy_cc,2);
执行起来效果杠杠的,睡觉去。
----------------------------------------------------------------------------------------------------------------------------
Slider
---------------------------------------------------------------------------------------------------------------------------
接下来開始搞下slider,也就是cocos2dx中是ControlSlider这货啦。
1、在cocostuido中创建一个project。然后将slider拖到场景中。在属性设置里我就改了个name。其它都默认。由于用的都是系统自带的那些资源图片,所以在cocos2dx中显示的效果很的不友好。
2、在cocos2dx中导入slider的.json文件。然后载入到场景中来。
代码例如以下:
cocos2d::ui::Widget* slideUI = GUIReader::getInstance()->widgetFromJsonFile("SlideUI/SlideUI_1.json");
this->addChild(slideUI,2);
3、单独提取出slide这个控件,然后对它做一些简单的操作,如setPosition。
Slider* slide = static_cast<Slider*>(Helper::seekWidgetByName(slideUI,"slide"));
slide->setPosition(Point(500,200));
事实上每篇都有这一步的原因是由于我想了解slider这个控件在cocos2dx中的类名叫什么。比如ProgressBar在cocos2dx中的类名就叫:
LoadingBar。
4、以下看下Slide的源代码:
//创建Slide的方式比較特别,由于它没有一个API是直接在create中载入资源的
static Slider* create(); //有以下几个载入资源的方式:
//a 载入背景条,背景条知道不?就是进度为0时。整个进度条显示的背景图片
void loadBarTexture(const std::string& fileName,TextureResType texType = UI_TEX_TYPE_LOCAL);
//b 载入拖杆,也就是在滑动条上滚来滚去的那个杆子
void loadSlidBallTextures(const std::string& normal,//未被触摸显示的图片
const std::string& pressed,//触摸后显示的图片
const std::string& disabled,//禁止触摸显示的图片
TextureResType texType = UI_TEX_TYPE_LOCAL); //上面这个API是能够一次性的载入三张图片,以下这三个是单独载入的:
void loadSlidBallTextureNormal(const std::string& normal,TextureResType texType = UI_TEX_TYPE_LOCAL);
void loadSlidBallTexturePressed(const std::string& pressed,TextureResType texType = UI_TEX_TYPE_LOCAL);
void loadSlidBallTextureDisabled(const std::string& disabled,TextureResType texType = UI_TEX_TYPE_LOCAL); //TextureResType这货在之前的笔记里有提到过,UI_TEX_TYPE_LOCAL 就表示载入的纹理图片是直接从Resources文件夹下载入,而
//UI_TEX_TYPE_PLIST表示载入的纹理是通过plist来载入。 //c 载入进度条
void loadProgressBarTexture(const std::string& fileName, TextureResType texType = UI_TEX_TYPE_LOCAL); void setPercent(int percent);//设置进度
int getPercent();//读取进度 void addEventListenerSlider(Ref* target,SEL_SlidPercentChangedEvent selector);//加入事件回调
5、以下简单的创建一个Slider:
auto m_slide = Slider::create();
m_slide->loadBarTexture("SlideUI/sliderTrack.png");
m_slide->loadSlidBallTextures("SlideUI/sliderThumb.png","SlideUI/sliderThumb.png","");
m_slide->loadProgressBarTexture("SlideUI/sliderProgress.png"); m_slide->setPosition(Point(200,200));
m_slide->setPercent(50);
m_slide->addEventListenerSlider(this,sliderpercentchangedselector(HelloWorld::sliderCallback));//加入回调函数
this->addChild(m_slide,3); //以下看下回调函数的声明:
void sliderCallback(Ref* sender,SliderEventType type); //进入SliderEventType看下它都有哪些參数:
typedef enum
{
SLIDER_PERCENTCHANGED
}SliderEventType; //好吧,就一个,那就是每当slide的进度发生变化时都会跳入到回调函数中。
//以下看下回调函数的实现:
void HelloWorld::sliderCallback(Ref* sender,SliderEventType type)
{
switch (type)
{
case SLIDER_PERCENTCHANGED:
CCLOG("slide percent change");
break;
}
}
恩。也就这样吧。
6、小结。
Slider个人感觉还是没有cocos2dx原装的ControlSlider好用,API也没多少。毕竟ControlSlider还有设置Slider的最大值。最小值,同意滑动的最大值等。
尊重原创。转载请注明来源:http://blog.csdn.net/star530/article/details/37365053
版权声明:本文博客原创文章,博客,未经同意,不得转载。
Cocostudio学习笔记(3) ImageView + Slider的更多相关文章
- Cocostudio学习笔记(1) 扯扯蛋 + 环境搭建
转眼七月份就到了,2014已经过了一半,而我也最终算是有"一年工作经验"了,开心ing. 回想这一年Cocos2dx的游戏开发经历,去年下半年重心主要在游戏的逻辑上,而今年上半年重 ...
- Cocostudio学习笔记(2) Button + CheckBox
这篇记录了两个控件的使用流程:Button 和 CheckBox. ------------------------------------------------------------------ ...
- Cocostudio学习笔记(5) Text + TextAtlas + TextBMFont
下午一群大学生到我们公司參观学习,搞得我好紧张.于是滔滔不绝的给他们介绍了怎样开发一款游戏... 今晚研究的控件就是三个label:Text,TextAtlas,TextBMFont 我先在cocos ...
- android学习笔记之ImageView的scaleType属性
我们知道,ImageView有一个属性叫做scaleType,它的取值一共有八种,分别是:matrix,fitXY,fitStart,fitCenter,fitEnd,center,centerCro ...
- Cocostudio学习笔记(4) LoadingBar+ TextField
这同时录制两个控件的使用方法:LoadingBar和 TextField. -------------------------------------------------------------- ...
- Android(java)学习笔记204:自定义SmartImageView(继承自ImageView,扩展功能为自动获取网络路径图片)
1.有时候Android系统配置的UI控件,不能满足我们的需求,Android开发做到了一定程度,多少都会用到自定义控件,一方面是更加灵活,另一方面在大数据量的情况下自定义控件的效率比写布局文件更高. ...
- Android(java)学习笔记147:自定义SmartImageView(继承自ImageView,扩展功能为自动获取网络路径图片)
1. 有时候Android系统配置的UI控件,不能满足我们的需求,Android开发做到了一定程度,多少都会用到自定义控件,一方面是更加灵活,另一方面在大数据量的情况下自定义控件的效率比写布局文件更高 ...
- Android动画学习笔记-Android Animation
Android动画学习笔记-Android Animation 3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中 ...
- Android学习笔记(十一)——ListView的使用(下)
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! ListView 这个控件比较复杂, 就是因为它有很多的细节可以优化,下面我们在试试提高它的运行效率:一.提高 ...
随机推荐
- thinkphp5 tp5 七牛云 上传图片
七牛sdk地址https://files.cnblogs.com/files/zonglonglong/qiniu-php-sdk-7.2.2.rar 首先下载php的sdk将文件夹放到vendor ...
- x265探索与研究(四):怎样编码视频?
怎样编码视频? 本文介绍x265中的两种编码视频方法,一是採用命令行的方法.二是GUI的方式. 1.命令行的方法 (1).第一种方式生成*.265格式的视频文件 ...
- [Recompose] Add Local State to a Functional Stateless Component using Recompose
Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local stat ...
- Java Queue的使用
Queue的成员函数 add 增加一个元索 如果队列已满,则抛出一个IIIegaISlabEepeplian异常 rem ...
- 驱动程序调试方法之printk——自制proc文件(一)
首先我们需要弄清楚proc机制,来看看fs/proc/proc_misc.c这个文件,从入口函数开始看: proc_misc_init(void) #ifdef CONFIG_PRIN ...
- WeakRefence
http://183615215-qq-com.iteye.com/blog/1867568
- Android中的动画详解系列【2】——飞舞的蝴蝶
这一篇来使用逐帧动画和补间动画来实现一个小例子,首先我们来看看Android中的补间动画. Android中使用Animation代表抽象的动画类,该类包括下面几个子类: AlphaAnimation ...
- An Overview of Cisco IOS Versions and Naming
An Overview of Cisco IOS Versions and Naming http://www.ciscopress.com/articles/article.asp?p=210654 ...
- 使用Kotlin开发Android
查看我的所有开源项目[开源实验室] 欢迎增加我的QQ群:[201055521],本博客client源代码下载[请点击] 摘要 我首先声明我并没有使用Kotlin非常长时间,我差点儿是在学习的同一时候写 ...
- boost1.59编译安装(可以完全安装,也可定制安装--buildtype=complete,link=static)
1.下载: 网址:http://sourceforge.net/projects/boost/files/boost/1.59.0/ 选择:boost_1_59_0.7z或者boost_1_59_0. ...