creator小功能----头像框计时器TimeBar的增加和减少，代码获取和组件绑定的多种实现

最新推荐文章于 2024-08-13 17:20:24 发布
原创 最新推荐文章于 2024-08-13 17:20:24 发布 · 801 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#creator #TimeBar #头像框进度条 #正反变化 #增加或减少变化

本文介绍了如何在游戏开发中使用creator创建头像框周围的倒计时TimeBar，详细讲解了Filled模式的配置，包括Fill Type、Fill Start和Fill Range的设置，以及代码实现头像框进度条的增加或减少变化。

在游戏开发中经常会遇到这样一个需求：就是在玩家头像框周围，又个倒计时的TimeBar。

如下面：

 

那么这个功能，使用creator是怎么实现的呢？

seat_normal_bk是头像底框；

seat_time_bar是进度条框；Type选择filled填充模式，Fill Type选择radial扇形模式，fill center设置成中心0.5，fill start是控制起始点位置的，通过改变fill range来改变进度。

 

下面简单介绍下Filled模式：

1:  配置Filled模式

2: 配置Filled模式, 设置为Radius参数;

3: 配置Radius的参数模式,

            中心: 位置坐标(0, 1小数), (0, 0)左下脚, (1, 1) 右上角 (0.5, 0.5) 中

最低0.47元/天 解锁文章
Cocos Creator引擎开发：角色技能与战斗系统_战斗界面与UI设计
chenlz2007的博客
11-12 1004
在动作游戏中，战斗界面和UI设计是玩家体验的重要组成部分。一个直观、美观且功能强大的UI系统可以极大地提升游戏的可玩性和吸引力。本节将详细介绍如何在Cocos Creator引擎中设计和实现战斗界面与UI元素。 在设计战斗界面时，我们需要考虑以下几个关键原则：简洁性：界面应该简洁明了，避免过多的信息干扰玩家。直观性：玩家应该能够快速理解界面中的各个元素及其功能。动态性：战斗界面需要能够实时反映游戏状态的变化。美观性：界面的美观性对于提升玩家的沉浸感非常重要。可扩展性：界面设计应该具备一定的可扩展性，以便未来
Qt开发经验总结
热门推荐
草上爬的博客
12-02 1万+
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
JS时间滑条控件（timeSlider）
08-02
本应用在TigraSlider滑条控件的基础上，扩展了时间滑条的功能。 扩展了两个JS方法： （1）任一整数转换成时间格式字符串函数：intToTime() （2）将时间格式字符串转换成整数函数：timeToInt() TigraSlider示例请参照：demo.html 时间滑条控件示例请参照：timeSlider.html
timebar:显示时间段落的js控件
06-03
timebar 显示时间段落的jQuery插件
计时器（CocosCreator）
爱上游戏开发
03-26 3978
推荐阅读：  我的优快云  我的博客园  QQ群：704621321       在游戏中，经常会涉及到计时的功能，主要是倒计时。倒计时通常用在某项活动距离结束的剩余时间以及距离开始某项活动开始的时间。对于不同的游戏引擎，提供的计时方法也有所差异。最近正在使用CocosCreator开发项目，恰...
LeetCode 12 — Integer to Roman(整数转罗马数字)
卓尔货币的博客
05-26 411
Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 V 5 X 10 L 50 C 100 D ...
js用滚动条模拟横向时间轴
HuangsTing的博客
08-12 4654
原理是通过设置时间轴盒子overflow-x: scroll;横向溢出的时候出现滚动条；（同理，制作纵向时间轴则设置overflow-y: scroll） 在时间轴盒子外层再包裹一个固定大小的div，该盒子高度要比时间轴的盒子高度小20px，设置overflow:hidden，则可以隐藏掉时间轴盒子出现的滚动条; css代码： .car-time-bar{ width: 885px; ...
cocos creator入门教程（八）—— Sprite组件的使用详解
标题
10-09 3364
cc.Sprite使用 cc.Sprite 1: 游戏中显示一个图片，通常我们把这个叫做”精灵” sprite 2: cocos creator如果需要显示一个图片，那么需要在节点上挂一个精灵组件,为这个组件指定要显示的图片(SpriteFrame) 3: 显示一个图片的步骤: (1) 创建一个节点; (2) 添加一个组件; (3) 要显示的图片(S...
IT学习笔记--Flink
xudasong123的博客
06-03 1613
Data Sources 就字面意思其实就可以知道：数据来源。Flink做为一款流式计算框架，它可用来做批处理，即处理静态的数据集、历史的数据集；也可以用来做流处理，即实时的处理些实时数据流，实时的产生数据流结果，只要数据源源不断的过来，Flink 就能够一直计算下去，这个 Data Sources 就是数据的来源地。Flink 中你可以使用 StreamExecutionEnvironment.addSource(sourceFunction) 来为你的程序添加数据来源。
倒计时（CocosCreator）
爱上游戏开发
06-10 4495
推荐阅读：  我的优快云  我的博客园  QQ群：704621321       在游戏中，还有一个经常使用的功能就是倒计时。比如：距离活动开奖时间；当前活动的剩余时间等，都会用到倒计时，下面给大家讲讲根据当服务器发送的数据，实现倒计时功能。 1.服务器发送剩余时间戳（毫秒） count...
cocosCreator日历插件
01-14
cocosCreator日历插件，。。
Jquery时间滑块TimeSlider增强显示（精简优化，有刻度，有调用方法）
10-12
Jquery时间滑块TimeSlider增强显示。 有刻度，可用CSS设置长短，可以隐藏中间部分刻度的标签。 调用方法： $("#timeBarSlider") .slider({ min: 0, max: 1440, range: false, value: 0, slide: function (event, ui) { //滑动过程中显示实时的值（时间） $("#days").val(intToTimeStr(ui.value)); } }) .slider("pips", { rest: "label" }) .slider("float"); $("#timeBarSlider").on("slidechange", function (e, ui) { //滑动/点击标签结束后的值（时间） $("#days").val("结果：" + intToTimeStr(ui.value)); //alert("结果：" + intToTimeStr(ui.value)); }); function setValue() { //设定值 $("#timeBarSlider").slider('option', 'value', 720); ; } //数字（分钟）转时间格式（时:分）的字符串 function intToTimeStr(num) { var myhour = Math.floor(num / 60); var myMinute = num % 60; if (myhour < 10) { myhour = "0" + myhour; } if (myMinute < 10) { myMinute = "0" + myMinute; } return myhour + ":" + myMinute; }
TimeBar-一个仿照印象笔记的TimeBar.zip
09-24
一个仿照印象笔记的TimeBar。项目地址：https://github.com/wuapnjie/TimeBar 效果图：如何使用：获得当前时间：mTimeBar = (TimeBar) findViewById(R.id.timeBar);int hour = mTimeBar.getHour();     int minute = mTimeBar.getMinute();     String time = mTimeBar.getTime();
Cocos Creator倒计时
qq_62520130的博客
08-13 836
调度一个自定义的回调函数。如果回调函数已调度，那么将不会重复调度它，只会更新时间间隔参数。然后在Start中调用cocos的计时器方法即可。需求：给定一个时间戳，计算剩余时间并进行倒计时。
js计时时分秒
Fly的博客
12-17 1091
js计时时分秒 1.js var TimeBar = { timer: 0, hour: 0, minute: 0, second: 0, dateContent: "00:00:00", creatHtml: function() { var content = '<p class="timeBar">' + TimeBar.dateContent + '&lt...
19 CoCos Creator-控件库
苏法迪的专栏
01-13 954
0. 原文 https://docs.cocos.com/creator/manual/zh/getting-started/basics/editor-panels/node-library.html 1. 控件库 控件库 是一个非常简单直接的可视化控件仓库，您可以将这里列出的控件拖拽到 场景编辑器 或 层级管理器 中，快速完成预设控件的创建。 使用默认窗口布局时，控件库会默认显示在编辑器中，...
Cocos Creator制作倒计时显示的优化
liuzhimu2018的博客
01-07 5585
使用新的方式来实现倒计时的显示 在进行倒计的时候只需要记录几个变量 1，总的倒计时时间， 2，倒计时开始的时候的时间戳 3，是否进行新的一轮倒计时的标志 实现方法 新建一个脚本管理数据脚本如下 var dataOperate = require("dataOperateFunc"); var StoreData = { // 数据发在内部，提供接口访问 _totalCountd...
cocos creator 倒计时代码 （5秒倒计时）
qq_27793067的博客
10-25 5939
第一步：现在场景中 放一个 label 取个名字叫： daojishi ; 第二步：把以下代码复制到脚本添加给这个 叫 daojishi 名字的 label 。（倒计时5秒） 第三步：如图 以下是代码： //脚本名字为：Daojishi cc.Class({ extends: cc.Component, properties: { time: cc.Label, d...
超简单的Cocos Creator个性化时间进度条实现，你知道吗？
voidinit的专栏
07-24 989
前言 在Cocos Creator游戏开发中，经常需要使用个性化时间进度条，下面，我们就一起来封装下自己的个性化时间进度条组件。 一、个性化时间进度条 1: 编写脚本, 来使用sprite的扇形来显示当前的进度: 属性: time_sec: 定时器的时间 clockwise: 是否为顺时针或逆时针; reverse: 是否反转 startClockAction: 开始累积时间，看时间过去的百分比,来改变精灵显示的百分比; stopClockAction: 停止计时累积; 二、计时器控制组件 1. `@.
cocos制作小游戏点击运行出现首页，首页有一张图片和一个开始游戏按钮。点击游戏开始后，从上方掉下小猫和水滴，中间有一个20秒倒计时和记录收集小猫的分数，玩家鼠标左右移动控制底部的纸箱收集随机出现不同种类小猫咪，收集一只小猫咪加1分。如果收集到水滴则出现一个面板里面显示“箱子坏掉，猫咪跑了”，下方有一个重新开始的按钮。如果在20秒内收集20只小猫咪则进入下一关，会跳出一个面板显示“请找出相同的小猫咪”停顿3秒。界面上面有30秒倒计时和分数记录，下面有9个纸箱，里面有5种不一样的小猫，每个箱子都会随机出现一只小猫咪，9只小猫咪会全部出现3秒然后又躲回箱子里。中间箱子会随机出现9只里面的其中一种小猫咪，玩家要去点击其余对应品种猫咪的箱子，点击对了会一声喵叫并且加5分，点击错误则直接扣5分。时间到后跳出面板显示最终分数和一个重新开始的按钮。请你用cocos制作这个小游戏，将每一步都详细一点，我是一个零基础的大学生，并且给每个步骤和代码加上解析。并且我需要给游戏配背景音乐及给给每个猫咪和箱子配置图片也请你把把教程写在里面
最新发布
05-09
好的，用户想用Cocos Creator开发一个包含多个功能的小游戏，需要零基础的详细教程。我得先理清用户的需求，他提到的功能包括点击按钮、倒计时、分数计算、随机生成物体、关卡切换，还有添加背景音乐和图片资源。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值