文档章节

Libgdx学习笔记:UI之技能冷却按钮

flyoahc
 flyoahc
发布于 2015/12/03 16:52
字数 1149
阅读 245
收藏 3


直接看下效果图。最外层为半透明蒙版,下面就是技能图片。

实现思路:

通过Pixmap来绘制蒙版三角形,然后把Pixmap放到Texture上绘制即可。

我们假定整个蒙版为一个圆形区域,划分为100个小扇形块,单个小块的角度为3.6。共有100个点。

例:

技能冷却时长:3s

那么我们每过0.03s更新1次进度值,大于进度值的小扇形块我们进行绘制,小于的不用绘制。


使用方法:

 // 传入图片路径,冷却时长(单位:秒),类型:圆形或矩形
 CHCircleProgressBar chCircleProgressBar = new CHCircleProgressBar("skill.jpg", 2,PType.CIRCLE);
 // 加入舞台
 addActor(chCircleProgressBar);
 // 调用开始方法
 chCircleProgressBar.start();
 // 你也可设置进度监听器,监听开始和结束状态。在下面代码中可以参考。

代码展示:

package com.oahcfly.chgame.core.ui;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.files.FileHandle;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.Pixmap;
import com.badlogic.gdx.graphics.Pixmap.Filter;
import com.badlogic.gdx.graphics.Pixmap.Format;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Batch;
import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.scenes.scene2d.actions.Actions;
import com.badlogic.gdx.utils.Array;
import com.oahcfly.chgame.core.listener.CHProgressBarListener;
import com.oahcfly.chgame.core.mvc.CHActor;

/**
 * 
 * 
 * 圆形Loading冷却:
 * 先采用Pixmap生成黑色纹理,然后绘制时使用半透明处理,达到蒙版的效果。
 * 
 * @author haocao
 *
 */
public class CHCircleProgressBar extends CHActor {

	private FileHandle fileHandle;
	// 圆的半径
	private float radius;
	// 总时长
	private float duration;
	// 三角形数量
	private final int MAX = 100;

	public enum PType {
		/**圆形冷却**/
		CIRCLE, 
		/**矩形冷却**/
		RECANGLE
	}

	private Texture pngTexture;

	public CHCircleProgressBar (String pngName, float duration, PType type) {
		fileHandle = Gdx.files.internal(pngName);
		pngTexture = new Texture(fileHandle);
		this.duration = duration;
		Pixmap.setFilter(Filter.NearestNeighbour);
		onProgress();

		if (type == PType.CIRCLE) {
			// 内切圆
			radius = Math.max(getWidth() / 2, getHeight() / 2);
		} else if (type == PType.RECANGLE) {
			// 外切圆
			radius = (float)Math.sqrt(Math.pow(getWidth() / 2, 2) + Math.pow(getHeight() / 2, 2));
		}
	}

	// 进度标识:范围【0~MAX】
	private int proIdx = 0;

	private Array<CirclePoint> pointsArray = new Array<CHCircleProgressBar.CirclePoint>();

	/**
	 * 开始进度
	 */
	public void startProgress () {
		if (pointsArray.size == 0) {
			// 角度
			float singleDegree = 360f / MAX;
			// 计算所有的点
			pointsArray.add(new CirclePoint((int)(getWidth() / 2), (int)(getHeight() / 2 - radius)));
			for (int i = proIdx + 1; i <= MAX; i++) {
				int x = (int)(getWidth() / 2 + radius * MathUtils.sinDeg(i * singleDegree));
				int y = (int)(getWidth() / 2 - radius * MathUtils.sinDeg(90 - i * singleDegree));
				pointsArray.add(new CirclePoint(x, y));
			}
		}
		// 单步时长
		float singleDuration = duration / MAX;
		addAction(Actions.repeat(MAX + 1, Actions.delay(singleDuration, Actions.run(new Runnable() {

			@Override
			public void run () {
				// 进度
				onProgress();
				proIdx++;
				proIdx = proIdx > MAX ? MAX : proIdx;
			}
		}))));
	}

	/**
	 * 每间隔1走1次进度
	 */
	private void onProgress () {
		if (proIdx == 0 && progressBarListener != null) {
			progressBarListener.onStart();
		}

		boolean isEnd = proIdx == MAX;
		if (isEnd && progressBarListener != null) {
			progressBarListener.onFinish();
		}

		Pixmap pixmap = new Pixmap(pngTexture.getWidth(), pngTexture.getHeight(), Format.RGBA4444);

		if (isEnd) {
			// 结束
			resetProgress();
		}
		pixmap.setColor(Color.BLACK);

		for (int i = proIdx, size = pointsArray.size; i < size; i++) {
			CirclePoint curPoint = pointsArray.get(i);
			if (i < size - 1) {
				CirclePoint nextPoint = pointsArray.get(i + 1);
				// 圆心
				int x1 = pixmap.getWidth() / 2;
				int y1 = pixmap.getHeight() / 2;
				int x2 = curPoint.x;
				int y2 = curPoint.y;
				int x3 = nextPoint.x;
				int y3 = nextPoint.y;
				y2 = y2 < 0 ? 0 : y2;
				y3 = y3 < 0 ? 0 : y3;
				pixmap.fillTriangle(x1, y1, x2, y2, x3, y3);
			}
		}
		Texture bgTexture = new Texture(pixmap);
		pixmap.dispose();

		Color bColor = new Color(Color.BLACK);
		bColor.a = isEnd ? 0 : 0.6f;
		setColor(bColor);
		setBgTexture(bgTexture);
	}

	@Override
	public void draw (Batch batch, float parentAlpha) {
		if (pngTexture != null) {
			batch.draw(pngTexture, getX(), getY(), getOriginX(), getOriginY(), getWidth(), getHeight(), getScaleX(), getScaleY(),
				getRotation(), 0, 0, (int)getWidth(), (int)getHeight(), false, false);
		}
		super.draw(batch, parentAlpha);
	}

	/**
	 * 重置进度
	 */
	private void resetProgress () {
		clearActions();
		proIdx = 0;
		stoped = false;
	}

	/**
	 * 正在执行进度中
	 * @return
	 */
	public boolean isProgressing () {
		return proIdx > 2;
	}

	private boolean stoped;

	public void stopProgress () {
		if (isProgressing()) stoped = true;
	}

	public void resumeProgress () {
		stoped = false;
	}

	/**
	 * 暂停与否
	 * @return
	 */
	public boolean isStoped () {
		return stoped;
	}

	@Override
	public void act (float delta) {
		if (stoped) return;
		super.act(delta);
	}

	private CHProgressBarListener progressBarListener;

	public void setProgressBarListener (CHProgressBarListener progressBarListener) {
		this.progressBarListener = progressBarListener;
	}

	@Override
	public boolean remove () {
		if (getBgTexture() != null) {
			getBgTexture().dispose();
		}
		return super.remove();
	}

	public class CirclePoint {
		public int x, y;

		public CirclePoint (int cx, int cy) {
			x = cx;
			y = cy;
		}
	}

	@Override
	public void drawAfterBg (Batch batch) {
		// TODO Auto-generated method stub

	}
}
package com.oahcfly.chgame.core.listener;

public interface CHProgressBarListener {

	public void onStart ();

	public void onFinish ();
}
package com.oahcfly.chgame.core.mvc;

import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Batch;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.TextureAtlas.AtlasRegion;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.scenes.scene2d.Actor;
import com.badlogic.gdx.utils.Align;
import com.badlogic.gdx.utils.Pool;
import com.badlogic.gdx.utils.Pool.Poolable;
import com.badlogic.gdx.utils.Pools;
import com.oahcfly.chgame.core.Chao;

/** <pre>
 * 二次封装的actor
 * 
 * date: 2014-12-11
 * </pre>
 * 
 * @author caohao */
public class CHActor extends Actor implements Poolable {
	private int tag;

	private Texture bgTexture;

	private TextureRegion bgTextureRegion;

	public CHActor () {
	}

	@Override
	public void draw (Batch batch, float parentAlpha) {
		Color color = getColor();
		batch.setColor(color.r, color.g, color.b, color.a);

		float x = getX();
		float y = getY();
		float scaleX = getScaleX();
		float scaleY = getScaleY();

		float width = getWidth();
		float height = getHeight();

		if (bgTexture != null) {
			batch.draw(bgTexture, x, y, getOriginX(), getOriginY(), getWidth(), getHeight(), scaleX, scaleY, getRotation(), 0, 0,
				(int)width, (int)height, false, false);
		}

		if (bgTextureRegion != null) {
			if (bgTextureRegion instanceof Sprite) {
				Sprite sprite = (Sprite)bgTextureRegion;
				sprite.setColor(batch.getColor());
				sprite.setOrigin(getOriginX(), getOriginY());
				sprite.setPosition(x, y);
				sprite.setScale(scaleX, scaleY);
				sprite.setSize(width, height);
				sprite.setRotation(getRotation());
				sprite.draw(batch);
			} else {
				batch.draw(bgTextureRegion, x, y, getOriginX(), getOriginY(), width, height, scaleX, scaleY, getRotation());
			}
		}
	}

	public void setBgTexture (Texture bgTexture) {
		this.bgTexture = bgTexture;
		if (bgTexture != null) {
			setSize(bgTexture.getWidth(), bgTexture.getHeight());
		}
		setOrigin(Align.center);
	}

	/** <pre>
	 * 使用缓存池
	 * 
	 * date: 2015-1-3
	 * </pre>
	 * 
	 * @author caohao
	 * @return */
	@SuppressWarnings("unchecked")
	public static <T extends CHActor> T obtain (Class<T> type) {
		Pool<CHActor> pool = (Pool<CHActor>)Pools.get(type);
		CHActor actor = pool.obtain();
		actor.setBgTexture(null);
		return (T)actor;
	}

	public static CHActor obtain () {
		return obtain(CHActor.class);
	}

	@Override
	public void reset () {
		this.bgTexture = null;
		this.bgTextureRegion = null;
		setScale(1);
		setRotation(0);
		clear();
		setUserObject(null);
		this.setColor(new Color(1, 1, 1, 1));
		setStage(null);
		setParent(null);
		setVisible(true);
		setName(null);
		setOrigin(Align.center);
		setPosition(0, 0);
	}

	public Texture getBgTexture () {
		return bgTexture;
	}

	public TextureRegion getBgTextureRegion () {
		return bgTextureRegion;
	}

	public void setBgTextureRegion (TextureRegion textureRegion) {
		this.bgTextureRegion = textureRegion;
		if (bgTextureRegion != null) {
			if (bgTextureRegion instanceof Sprite) {
				Sprite sprite = (Sprite)bgTextureRegion;
				setSize(sprite.getWidth(), sprite.getHeight());
			} else if (bgTextureRegion instanceof AtlasRegion) {
				AtlasRegion atlasRegion = (AtlasRegion)bgTextureRegion;
				bgTextureRegion = Chao.plistCenter.createSprite(atlasRegion);
				Sprite sprite = (Sprite)bgTextureRegion;
				setSize(sprite.getWidth(), sprite.getHeight());
			} else {
				setSize(bgTextureRegion.getRegionWidth(), bgTextureRegion.getRegionHeight());
			}
		}

		setOrigin(Align.center);
	}

	@Override
	public boolean remove () {
		boolean remove = super.remove();
		if (remove) {
			Pools.free(this);
		}
		return remove;
	}

	public int getTag () {
		return tag;
	}

	public void setTag (int tag) {
		this.tag = tag;
	}

}

欢迎关注CHGame框架(基于Libgdx二次封装快速开发框架):

https://git.oschina.net/oahcfly/CHGame.git


© 著作权归作者所有

flyoahc
粉丝 12
博文 37
码字总数 15728
作品 0
南京
程序员
私信 提问
Libgdx学习笔记:UI之技能冷却按钮(新版)

效果展示: 图片素材: 1.涉及知识点:Mesh,纹理坐标UV 2.核心思路: 将图片1的外围矩形区域,划分为24个三角形,共26个Mesh顶点。然后根据进度,绘制相应的区域即可。 3.Mesh简述: public...

flyoahc
2015/12/22
160
1
LibGDX 跨平台游戏开发基础教程(总目录)

本文链接: http://blog.csdn.net/xietansheng/article/details/50185655 前言 本套教程讲解了 LibGDX 的基础开发,从环境搭建,到基础 API 的使用,最后再到 2048 和 Flappy Bird 两个游戏的...

xietansheng
2015/12/09
0
0
PJ可能会用到的动态规划选讲-学习笔记

PJ可能会用到的动态规划选讲-学习笔记 by Pleiades_Antares 难度和速度全部都是按照普及组来定的咯 数位状压啥就先不讲了 这里主要提到的都是比较简单的DP 先看一道外文题目: (简单翻译稍微...

Pleiades_Antares
2018/10/03
0
0
android游戏开发框架libgdx的使用(二十二)—利用TABLELAYOUT进行布局

前面有一篇文章介绍了用TWL进行布局,最近做其他java的东西接触到了table-layout,用着很不错,仔细看来一下文档,原来还支持libgdx。 简单试用了一下,比TWL好使多了。 TABLELAYOUT简介 TA...

长平狐
2013/11/25
699
0
Libgdx学习笔记:UI之评分组件

评分组件。 使用方法: // 星星上限,亮图,背景图CHRatingBar chRatingBar = new CHRatingBar(5, CHRes.asset.starsppng, CHRes.asset.starspgraypng);addActor(chRatingBar);// 星星进度c......

flyoahc
2015/12/30
65
0

没有更多内容

加载失败,请刷新页面

加载更多

“旧城改造”的背后——银泰新零售阿里云解决方案(上)

相关免费课程《银泰新零售上云解决方案精讲》上线中 立足实战 讲透经典案例 助你快速理解新零售 第一节学习地址 第二节学习地址 传统线下商业体上云的案例 与其说银泰上云,倒不如说银泰“旧...

阿里云官方博客
8分钟前
0
0
记一次升级Oracle驱动引发的死锁

问题描述 近期项目需要从虚拟机环境迁移到容器环境,其中有一个项目在迁移到容器环境之后的两天之内出现了2次“死锁(deadlock)”的问题,部分关键日志如下: Found one Java-level deadlock:...

ksfzhaohui
10分钟前
2
0
MySQL 中的 information_schema 数据库

欢迎查看原文 - 本博客仅记录 https://blog.csdn.net/kikajack/article/details/80065753 -- 是否开启bin_log日志: off为关闭-- show variables like 'log_%'; show variables like '......

莫库什勒
17分钟前
0
0
Random在高并发下的缺陷以及JUC对其的优化

Random可以说是每个开发都知道,而且都用的很6的类,如果你说,你没有用过Random,也不知道Random是什么鬼,那么你也不会来到这个技术类型的社区,也看不到我的博客了。但并不是每个人都知道...

编程SHA
22分钟前
0
0
T5大牛带你解析:如何实现分布式技术

1.分布式事务 2. 分布式锁 Java 原生 API 虽然有并发锁,但并没有提供分布式锁的能力,所以针对分布式场景中的锁需要解决的方案。 分布式锁的解决方案大致有以下几种: 基于数据库实现 基于缓...

李红欧巴
34分钟前
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部