cocos2d-x使用CCClippingNode实现跑马灯

直接在代码,这是一个很好的包layer,可以直接调用  //原来白白

bool TestLayer::init()
{
    CCSize size = CCDirector::sharedDirector()->getVisibleSize();

	//创建要显示的文字
    text = CCLabelTTF::create("text\nbaibai\nfdffdd\nzimu\nhaha\njahjahjkd\njhahaj\n", "", 30);
    text->setPosition(ccp(100, -120));

	//绘制裁剪区域
    CCDrawNode* shap = CCDrawNode::create();
    CCPoint point[4] = {ccp(0,0), ccp(200, 0), ccp(200, 200), ccp(0, 200)};
    shap->drawPolygon(point, 4, ccc4f(355, 255, 255, 255), 2, ccc4f(255, 255, 255, 255));
    CCClippingNode* cliper = CCClippingNode::create();
    cliper->setStencil(shap);
    cliper->setAnchorPoint(ccp(.5, .5));
    cliper->setPosition(ccp(100, 20));
    addChild(cliper);
	//把要滚动的文字增加到裁剪区域
    cliper->addChild(text);

	//文字滚动。超出范围后从新開始
    schedule(schedule_selector(CTestLayer::rollText));
	return true;
}

void TestLayer::rollText(float)
{
    text->getPositionY()>300 ? text->setPositionY(-150) : text->setPositionY(text->getPositionY()+2);
}

版权声明:本文博客原创文章,博客,未经同意,不得转载。

时间: 2024-08-30 10:30:51

cocos2d-x使用CCClippingNode实现跑马灯的相关文章

Cocos2d-x 3.2:通过ClippingNode实现一个功能完善的跑马灯公告(1)

Cocos2d-x 3.2:通过ClippingNode实现一个功能完善的跑马灯公告(1) 本文转载至深入理解Cocos2d-x 3.x:一步一步通过ClippingNode实现一个功能完善的跑马灯公告(1) 这篇文章主要是通过一步一步实现一个功能完善的跑马灯公告来展示ClippingNode的用法并且最终深入ClippingNode的源码,了解其实现原理. 首先,先介绍一下ClippingNode,ClippingNode也叫裁剪节点,能将一些内容通过使用模板裁剪出来显示在界面上,可以实现一些

【深入了解cocos2d-x 3.x】一步一步通过ClippingNode实现一个功能完善的跑马灯公告(1)

这篇文章主要是通过一步一步实现一个功能完善的跑马灯公告来展示ClippingNode的用法并且最终深入ClippingNode的源码,了解其实现原理. 首先,先介绍一下ClippingNode,ClippingNode也叫裁剪节点,能将一些内容通过使用模板裁剪出来显示在界面上,可以实现一些很炫酷的效果.来看看今天要实现的效果 1.ClippingNode类分析 先来看看ClippingNode的声明文件 看看其中的public方法 class CC_DLL ClippingNode : publ

关于跑马灯的体会

1. android:singleLine="true"虽然被不建议使用,但是跑马灯必须是它.如果改为android:maxLines="1",不能实现跑马灯效果. 2. android:marqueeRepeatLimit="marquee_forever" 是否使用,没关系. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

Android仿京东首页轮播文字(又名垂直跑马灯)

Android仿京东首页轮播文字(又名垂直跑马灯) 京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果 实现思路 上图只是一个大概的思路,要实现还需要完善更多的细节,下面会一步步的来实现这个效果: 1.封装数据源:从图上可以看到,轮播的文字是分为两个部分的,暂且把它们分别叫做前缀和内容,而且实际的使用过程中点击轮播图肯定是需要跳转页面的,而且大部分应该是WebView,不妨我们就设置点击时候需要获取的内容就是一个

js简单跑马灯案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯</title> <style type="text/css"> *{ margin: 0; padding: 0; } #bian{ width: 300px; height: 300px; margin:0 auto

跑马灯《此方法为优化方法,内容不会有闪动效果》

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯</title> //css部分 <style type="text/css"> #box { height: 30px; width: 800px; line-height: 30px; background-color:

android 跑马灯

1.在TextView中实现我们的走马灯效果,需要两个属性android:singleLine="true",以及android:ellipsize="marquee": 2.跑马灯效果需要TextVIew获得当前的焦点(focus).然而对于TextView这个控件来说,他的默认的Clickable,LongClickable,Focusable, FocusableInTouchMode这四个属性的值都是false,所以跑马灯效果也就不会出来了,即使你用手触摸T

原生js实现跑马灯抽奖效果

目前好多的微信活动都有一些抽奖活动,其中就有跑马灯. <!DOCTYPE html> <html> <head> <title>跑马灯效果</title> <style> table .pao{ border:1px solid #e5e5e5; padding:10px 20px; } table .on{ border-color:red; color:red; } </style> <script> wi

Android TextView 横向滚动(跑马灯效果)

Android TextView 中当文字比较多时希望它横向滚动显示,下面是一种亲测可行的方法. 效果图: 1.自定义TextView,重写isFocused()方法返回true,让自定义TextView一直处于获取焦点状态. package com.example.shen.marqueedemo; import android.content.Context; import android.util.AttributeSet; import android.widget.TextView;