小言_互联网的博客

Unity实战之类爬塔功能

260人阅读  评论(0)

推荐阅读:

前言

首先,小编在这里给大家道个歉。由于最近被生活折磨得不成人形,在文章输出方面明显能感觉到水的成分,虽然也在持续输出,但是大部分都是转载。
“盼来盼去盼不尽 天涯何处是归鸿”,终于有时间写文章了,来之不易的空闲时间,打算来介绍一下最近做的功能,先来看看成品吧!

功能简介

元朝圣殿,说白了就是一个类爬塔功能。根据星期开启对应类型的爬塔,爬塔按照一层一层的通关要求进行挑战。不可挑战已挑战的,不可跨层挑战。
首先看看主界面:包含帮助按钮,排行榜按钮和中间的5个圣殿。

创建对象,拼接界面如下:

可以发现,main下面的5个对象颜色与其他对象颜色不同,这就是传说中的预制体。

什么是预制体?

简单来说,预制体就是一个模板,你可以使用这个模板来快速生成一个相同的游戏对象,包括游戏对象的所有组件以及其下的所有子游戏对象。像上图中主界面场景那样,
这个预置体包括背景,名字,倒计时。他们长相一样却又有差异,就像双胞胎一样,名字不同,衣服(背景)不同,喜好(倒计时)不同一样。那么,怎么修改他们之间的区别呢?这时候我们
有两种解决办法:
1.直接在功能中替换名字背景
2.代码动态修改
由于策划的需求变幻莫测,推荐大家代码可以控制的表现,都用代码实现,手动在工程中修改真的很辛苦~
那么,接下来介绍一下如何代码动态修改。
首先创建一个table来存储这5个对象的信息:名字,背景,倒计时等

ui.relicsAdven = {
   }
ui.relicsAdven.Item = {
   }--RelicsAdvenItem
ui.relicsAdven.ItemTxt = {
   }--名字
ui.relicsAdven.ItemBg = {
   }--背景
ui.relicsAdven.openTm = {
   }--倒计时
ui.isOpen = {
   }--标识该神殿是否开启
for i = 1 , 6 do
    ui.relicsAdven.Item[i] = base:findobj("Main/RelicsAdvenItem"..i)
    ui.relicsAdven.ItemTxt[i] = utils.findtext(ui.relicsAdven.Item[i],"relicsName/Text")
    ui.relicsAdven.ItemBg[i] = utils.findimage(ui.relicsAdven.Item[i],"bg")
    ui.relicsAdven.openTm[i] = utils.findtext(ui.relicsAdven.Item[i],"openTm")
    utils.addclickevent(ui.relicsAdven.Item[i],base.ClickPoint,i)
    ui.isOpen[i] = false
end

接下来便是数据填充阶段了

local testData = {
   
    [1] = {
   name = "光之圣殿",bgImg = "1",openTime = {
   1,}},
    [2] = {
   name = "暗之圣殿",bgImg = "2",openTime = {
   2,}},
    [3] = {
   name = "水之圣殿",bgImg = "3",openTime = {
   3,}},
    [4] = {
   name = "火之圣殿",bgImg = "4",openTime = {
   4,}},
    [5] = {
   name = "风之圣殿",bgImg = "5",openTime = {
   5,}},
}
local function InitData()
    local tm = os.time()
    GetWeek(tm)
    for i,v in ipairs(testData) do
        ui.relicsAdven.ItemTxt[i].text = v.name
        ui.relicsAdven.ItemBg[i].sprite = utils.loadsprite("relicsadven","relicsadven_00"..v.icon)
        local temp = ""
        for a,b in ipairs(v.openTime) do
            if wday ~= b then
                --未开启
                if temp == "" then
                    temp = b
                else
                    temp = string.format("%s,%s",temp,b)
                end
            end
        end
        if temp == "" then
            --已经开启,倒计时
            isOpen[i] = true
            ui.relicsAdven.ItemBg[i].material = nil
            local tm = GetReaminSecondsTo24()
            if this.coroutine == nil then
                settime(tm,i)
            end
        else
            isOpen[i] = false
            ui.endTm[i] = nil
            ui.relicsAdven.ItemBg[i].material = Asset:LoadAsset(asseturi.getshaderpath("UIGray_Material"))
            ui.relicsAdven.openTm[i].text = string.format("<color=#FF0000>周%s开启</color>",temp)
        end
    end
end

上述代码中有些功能,接下来做简单介绍:

获取当前星期几

1.通过时间戳获取当前是星期几的方法:

local function GetWeek(tm)
    local temp = os.date("*t", tm)
    local wday = temp.wday - 1
end

该方法返回的数据与星期的对应关系如下,因此需要减一:
1:星期天
2:星期一
3:星期二
4:星期三
5:星期四
6:星期五
7:星期六
接下来就是未开启的显示文本处理:
因为测试数据中openTime字段是一个table表,里面可能配有多个星期,需要处理一下数据:
首先创建一个temp变量,用来存储周几开启,如果temp值变了,代表未开启;没变,代表当前已开启
已开启需要显示关闭倒计时:显示倒计时,需要知道剩余时间,剩余时间=结束时间-当前时间。当前时间使用os.time()获取,结束时间为当天晚上13:59:59,那么如何获取当钱距离当天结束的剩余呢?请看下面代码:

距离当前结束倒计时

--获取到当日凌晨的剩余时间 返回秒数
function GetReaminSecondsTo24()
    local toYear=os.date("*t").year
    local toMonth=os.date("*t").month
    local toDay=os.date("*t").day
    local toTime = os.time({
   year =toYear, month = toMonth, day =toDay, hour =23, min =59, sec = 59})
    local time=os.time()
    return toTime-time  
end

-- 获取到了剩余时时间戳,接下来就是倒计时计时器了,使用协程等待1秒的方式来实现:
local function settime(tm,index) --设置剩余时间
   this.coroutine = coroutine.start(function ()
        while true do
            if this.gameObject == nil then
                return
            end
             if tm < 1 then
                --结束
                ui.openTm[index].text = ui.openTxt[k]
                coroutine.stop(this.coroutine)
                this.coroutine = nil
            else
                tm = tm - 1
                local timedata = FormatTime(tm)
                ui.openTm[index].text = string.format("<color=#00FF00>%s 后关闭</color>",(timedata))
            end
            coroutine.wait(1)
        end 
    end)
end 

说明:当剩余时间<=0时,结束倒计时,协程停止并刷新界面;否则继续倒计时,显示剩余时间。
FormatTime函数:将时间戳转换为xx填xx小时XX分钟XX秒,具体实现如下:

local function second2DHMS(second)
    if second <= 0 then
        return 0,0,0,0
    end
    local d = math.floor(second / 86400)
    second = second - d * 86400

    local h = math.floor(second / 3600)
    second = second - h * 3600

    local m = math.floor(second / 60)
    second = second - m * 60

    local s = second

    return d, h, m, s
end

local function FormatTime(_ls)
    local _d, _h, _m, _s = second2DHMS(_ls)
    local timedata = ""
    if _h < 10 then
        _h = "0".._h
    end
    if _m < 10 then
        _m = "0".._m
    end
    if _s < 10 then
        _s = "0".._s
    end
    if _d > 0 then
        timedata = _d.."天".._h..":".._m..":".._s
    else
        timedata = _h..":".._m..":".._s
    end
    return timedata
end

至此,终于把主界面的显示搞定了,讲得有点详细,具体到了每个小功能的实现。
界面显示完成了,不容易啊。接下来就是界面的点击时间,点击神殿跳转到挑战界面。

选择圣殿

function view.ClickPoint(go,index)
    if not isOpen[index] then
        --未开启
        print(“未开启)
        return
    end
    local data = {
   }
    data.type = index
    --当前已经通过的层数,测试数据
    local currLayer = 0
    data.layerNum = currLayer + 1
    --传数据给挑战界面并打开挑战界面
    relicschallenge:setdata(data)
    relicschallenge:open(nil,true)
end

说明:这两行代码是传数据并打开挑战界面。具体实现方法是由项目框架决定了,读者可以根据自己的实际项目调用自己的方法哦~

挑战界面

relicschallenge:setdata(data)
relicschallenge:open(nil,true)
挑战界面示意图如下:

功能第一版:使用循环列表来实现滑动列表,首先拼UI如下:

该界面为一个活动界面,显示每层的奖励信息及对应可操作按钮
(1)使用循环列表,需在content添加循环列表的计算脚本。如下图:如需使用循环列表脚本,可加群下载,csdn积分下载或者联系小编下载。
使用步骤如下:
1.创建Scroll View组件,在content上添加对应脚本。上下滑动:添加UILayoutVertical脚本;左右滑动:添加UILayoutHorizontal脚本

2.代码控制

    ui.list = base:findcom("bot/Viewport/Content", "UILayout")
    ui.list.onCreate = base.createrender
    ui.list.onUpdate = base.updaterender
    ui.list.ItemRenderer = Asset:LoadAsset(asseturi.getassetpath(base.module, "Item"))

    ui.list.DataCount = #data--item总个数
    ui.list:InvalidateData()

    --创建item
local itemRender ={
   }
function base.createrender(go)
    local render = {
   }
    render.num = utils.findtext(go,"num")--层
    itemRender[go] = render
end

--刷新item
function base.updaterender(go, index)
    local config = data[index] --data中放着每个item的数据
    local render = itemRender[go]
    render.num.text = index
end

功能第二版:使用滑动列表
1、创建Scroll View组件,在content上添加对应脚本组件。上下滑动:添加VerticalLayoutGroup脚本;左右滑动:添加HorizontalLayoutGroup脚本
2.代码控制:

ui.content = base:findobj("list/Viewport/Content")
ui.ItemRenderer = Asset:LoadAsset(asseturi.getassetpath(base.module, "Item"))

--生成之前先全部清空再生成
Util.DestroyAllChild(ui.content)
for i=1,#data do
    local go = utils.addchild(ui.content, ui.ItemRenderer)
    local dataInfo = data[i] 
    utils.findtext(go,"num").text = i
end


到此为止,列表滑动已经实现,接下来就是事件的点击了

local function ClickChalleng()
    -- TODO
    --打开布阵界面
end
utils.addclickevent(go,ClickChalleng,i)

后面的功能流程就是:点击挑战,打开布阵界面,布阵完毕,挑战结算等。

排行榜

最后来介绍一下主界面的排行榜功能:
首先拼接ui层级如下:两个按钮对应两个界面。第一个界面为排行榜,第二个界面是对应排名的奖励预览。

最终呈现给用户的效果如下:


界面搭建完了,就开始我们的功能开发吧。
由于排行榜数据瞬息万变,我们不能一上游戏或者是进入该系统时获取排行榜数据,而是在需要显示的时候拿去,这样才能保证以最少的获取次数取到最新的数据。
因此,我们在该系统主界面点击排行榜时,向服务器请求数据,拿到数据我们再显示排行榜界面。

network.request("rankData")

if 返回成功 then
    打开排行榜界面
end

打开排行榜时,除了需要传入排行榜数据,还需要传入一个下标index,标志着打开哪一个标签,传1则代表打开排行榜界面,传2代表打开奖励预览界面。

for k,v in ipairs(ui.tabs)do
    SetActive(ui.pages[k],index == k)
    SetActive(ui.pages[k],index == k)
end

接下来便是显示对应打开页签的数据了。注意,这里的列表,我是用的是前面介绍的循环列表,用法不再累叙

if index == 1 then
    ui.rankRoot.DataCount = #base.data.rankList
    ui.rankRoot:InvalidateData()
elseif index == 2 then
    ui.rewardRoot.DataCount = utils.tablelen(base.data.rewardList)
    ui.rewardRoot:InvalidateData()
end

转载:https://blog.csdn.net/shirln/article/details/109466637
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场