【Cocos2dx 3.3 Lua】滚动字幕

参考资料:
 

1、原理

        通过调用update来更新位置达到的移动效果,和背景滚动有点类似,一旦滚动结束就重置为起点,开始新的滚动。只是为了达到在某个区域内滚动而不至于超出这个区域,有时候会用一些前景图来做遮盖,所以这个时候其实字幕或者公告是有在后面滚动的,但是被遮住了,因此看起来就像是只在某个区域内滚动。
 
垂直滚动:

如下图

【Cocos2dx 3.3 Lua】滚动字幕

由底层和字幕以及遮盖层组成

水平滚动:

     设置字幕在update时x轴移动,移动到屏幕外时重新开始移动
 
2、实现
RollingFont.lua
Link: http://codepad.org/i2T4gEvB    [ raw code | fork ]  
RollingFont=class("RollingFont",function()
return cc.Layer:create()
end) RollingFont.ctor=function(self)
local cache=cc.SpriteFrameCache:getInstance()
cache:addSpriteFrames("rollfont/ui_serverlist.plist")
self.size=cc.Director:getInstance():getWinSize() --注册定时事件
self:registerScriptHandler(function(tag)
local scheduler=nil
if tag=="enter" then
scheduler=self:onEnter()
elseif tag=="exit" then
self:onExit(scheduler)
end
end)
end RollingFont.createText=function(self,text)
local ttfConfig = {}
ttfConfig.fontFilePath="fonts/arial.ttf"
ttfConfig.fontSize=11.4 local label = cc.Label:createWithTTF(ttfConfig, text, cc.TEXT_ALIGNMENT_LEFT, self.size.width)
label:setTextColor( cc.c4b(, , , ) )
return label
end --垂直滚动字幕
RollingFont.verticalFont=function(self)
--添加垂直滚动字幕边框
local listbox=cc.Sprite:createWithSpriteFrameName("login_listbase.png")
listbox:setPosition(cc.p(self.size.width/,self.size.height/+))
listbox:setScale(1.2)
self:addChild(listbox)
local listboxSize=listbox:getBoundingBox()
local listboxX=listbox:getPositionX()
local listboxY=listbox:getPositionY()
self.verticalRect=cc.rect(listboxX-listboxSize.width/,listboxY-listboxSize.height/,listboxSize.width,listboxSize.height) --垂直滚动字幕
local text="1.Hi! Welcome to My Blog,This is a Sample about\nfont vertical move with Cocos2dx 3.x Lua\n"
local label=self:createText(text)
label:setPosition(self.verticalRect.x+self.verticalRect.width-,self.verticalRect.y)
label:setAnchorPoint(,)
self:addChild(label)
self.labelVertical=label --字幕遮罩
local fg=cc.Sprite:create("rollfont/fg.png")
fg:setPosition(cc.p(self.verticalRect.x+self.verticalRect.width/,self.verticalRect.y+self.verticalRect.height/));
self:addChild(fg);
end --水平滚动字幕
RollingFont.horizontalFont=function(self)
--添加水平滚动字幕边框
local listbox=cc.Sprite:createWithSpriteFrameName("login_textbase.png")
listbox:setPosition(cc.p(self.size.width/,self.size.height/-))
listbox:setScaleX(2.5)
self:addChild(listbox)
local listboxSize=listbox:getBoundingBox()
local listboxX=listbox:getPositionX()
local listboxY=listbox:getPositionY() --水平滚动字幕
local text="1.Hi! This is a Sample about font vertical move with Cocos2dx 3.x Lua"
local label=self:createText(text)
label:setPosition(self.size.width,self.verticalRect.y-)
label:setAnchorPoint(,)
self:addChild(label)
self.labelHorizontal=label
local labelSize=label:getBoundingBox()
self.horizontalSize=cc.rect(,,labelSize.width,labelSize.height)
end RollingFont.onEnter=function(self)
--垂直滚动最大和最小高度
local hlabelSize=self.labelVertical:getBoundingBox()
local hmaxHeight=self.verticalRect.y+self.verticalRect.height+hlabelSize.height
local hminHeight=self.verticalRect.y+ --水平滚动最大宽度和最小宽度
local vmaxWidth=self.size.width
local vminWidth=-self.horizontalSize.width local function schedule()
--垂直滚动
local y=self.labelVertical:getPositionY()
y=y+
if y >= hmaxHeight then
y=hminHeight
end
self.labelVertical:setPositionY(y) --水平滚动
local x=self.labelHorizontal:getPositionX()
x=x-
if x <= vminWidth then
x=vmaxWidth
end
self.labelHorizontal:setPositionX(x)
end local scheduler=cc.Director:getInstance():getScheduler()
scheduler:scheduleScriptFunc(schedule,0.02,false)
return scheduler
end RollingFont.onExit=function(self,scheduler)
if scheduler then
cc.Director:getInstance():getScheduler():unscheduleScriptEntry(scheduler)
end
end RollingFont.create=function(self)
local roll=RollingFont.new()
roll:verticalFont()
roll:horizontalFont()
return roll
end return RollingFont

3、执行效果

    【Cocos2dx 3.3 Lua】滚动字幕
 
上一篇:vue.js+vue-router+webpack keep-alive用法


下一篇:(转)关于java.lang.UnsupportedClassVersionError解决方法总结