本篇随笔记录如何制作一个技能冷却的图标。抛砖引玉了，如需实际应用还得好好整理代码。
表示技能冷却，计时等无非就两种吧，一是长条状，参照/扩展progressbar即可，另外一个就是方形或者圆形的了吧。
很多有技能条的游戏UI一般都是用的是方形技能图标，如魔兽世界，暗黑三，War3.....
在这里我们试着做一个出来，先看看效果图吧（很次，见尿了，以后可以在指针和边框上加上动画或粒子效果）
该组件分为4层，从下往上依次为：技能原图标ground，裁剪效果层，指针层，外边框。当然也可以加入更多，或者只有两层（ground和裁剪效果）。
上代码：
1 public class ColdDownIcon extends Image { 2 3 4 private TextureRegion texture;//裁剪画的纹理 5 private TextureRegion ground;//背景纹理，裁剪镂空后要露出来的，也就是原始技能图标 6 private TextureRegion outerRing;//图标外圈 7 private Image handEffect;//指针效果，本来打算使用粒子效果的 8 9 private PolygonSpriteBatch polyBatch;//画多边形的 10 11 private Vector2 center; 12 private Vector2 centerTop;//从上面中间开始 13 private Vector2 leftTop; 14 private Vector2 leftBottom; 15 private Vector2 rightBottom; 16 private Vector2 rightTop; 17 private Vector2 progressPoint; 18 private float[] fv;//裁剪画图使用的点阵{point1.x,point1.y,point2.x,point2.y ......} 19 private Vector2 intersectPoint;//当前切割在边上的点 20 21 //当前正在切割的位置 22 private IntersectAt intersectAt; 23 private float liveTime;//本次cd已执行时间 24 private float coldDownTime;//cd一次所需时间 25 private boolean startColdDown; 26 27 //当前切割位置的枚举 28 public enum IntersectAt { 29 NONE, TOP, BOTTOM, LEFT, RIGHT; 30 } 31 32 public ColdDownIcon(TextureRegion ground,TextureRegion outerRing, PolygonSpriteBatch polyBatch,Image handEffect,float coldDownTime) 33 { 34 super(ground); 35 this.ground = ground; 36 this.texture = ground; 37 this.outerRing = outerRing; 38 this.polyBatch = polyBatch; 39 this.handEffect = handEffect; 40 this.handEffect.setVisible(false); 41 42 handEffect.setOrigin(this.getWidth()/2,this.getHeight()/2); 43 this.coldDownTime = coldDownTime; 44 //计算各点内部坐标 45 center = new Vector2(this.getWidth()/2, this.getHeight()/2); 46 centerTop = new Vector2(this.getWidth()/2, this.getHeight()); 47 leftTop = new Vector2(0, this.getHeight()); 48 leftBottom = new Vector2(0, 0); 49 rightBottom = new Vector2(this.getWidth(), 0); 50 rightTop = new Vector2(this.getWidth(), this.getHeight()); 51 progressPoint = new Vector2(this.getWidth()/2, this.getHeight()/2); 52 53 setColor(Color.RED); 54 55 setPercentage(0); 56 } 57 58 public void startColdDown(){ 59 this.startColdDown = true; 60 this.liveTime = 0; 61 this.setPercentage(0); 62 this.handEffect.setVisible(true); 63 } 64 65 public void endColdDown(){ 66 this.startColdDown = false; 67 this.liveTime = 0; 68 this.setPercentage(0); 69 this.handEffect.setVisible(false); 70 } 71 72 //计算切线的最远点 73 private Vector2 IntersectPoint(Vector2 line) 74 { 75 Vector2 v = new Vector2(); 76 boolean isIntersect; 77 78 //check top 79 isIntersect = Intersector.intersectSegments(leftTop, rightTop, center, line, v);//切割线和上边的交点v 80 81 //check bottom 82 if (isIntersect) { intersectAt = IntersectAt.TOP; return v; } 83 else isIntersect = Intersector.intersectSegments(leftBottom, rightBottom, center, line, v); 84 85 //check left 86 if (isIntersect) { intersectAt = IntersectAt.BOTTOM; return v; } 87 else isIntersect = Intersector.intersectSegments(leftTop, leftBottom, center, line, v); 88 89 //check bottom 90 if (isIntersect) { intersectAt = IntersectAt.LEFT; return v; } 91 else isIntersect = Intersector.intersectSegments(rightTop, rightBottom, center, line, v); 92 93 if (isIntersect) { intersectAt = IntersectAt.RIGHT; return v; } 94 else 95 { 96 intersectAt = IntersectAt.NONE; 97 return null; 98 } 99 } 100 101 //设置百分比，顺时针 102 private void setPercentage(float percent) 103 { 104 //100 % = 360 degree 105 //==> percent % => (percent * 360 / 100) degree 106 107 float angle = convertToRadians(90); //percent = 0 => angle = -90 108 angle -= convertToRadians(percent * 360 / 100); 109 110 float len = this.getWidth() > this.getHeight() ? this.getWidth() : this.getHeight(); 111 float dy = (float) (Math.sin(angle) * len); 112 float dx = (float) (Math.cos(angle) * len); 113 Vector2 line = new Vector2(center.x + dx, center.y + dy); 114 115 intersectPoint = IntersectPoint(line); 116 // 117 float l = intersectPoint.dst(center.x,center.y); 118 float sy = 2*l/getHeight(); 119 120 handEffect.setScaleY(sy); 121 122 123 if (intersectAt == IntersectAt.TOP) 124 { 125 if (intersectPoint.x >= this.getWidth()/2) // 126 { 127 // 128 fv = new float[] { 129 center.x, 130 center.y, 131 centerTop.x, 132 centerTop.y, 133 leftTop.x, 134 leftTop.y, 135 leftBottom.x, 136 leftBottom.y, 137 rightBottom.x, 138 rightBottom.y, 139 rightTop.x, 140 rightTop.y, 141 intersectPoint.x, 142 intersectPoint.y 143 }; 144 } 145 else 146 { 147 fv = new float[] { // cắt bên trái cạnh 148 center.x, 149 center.y, 150 centerTop.x, 151 centerTop.y, 152 intersectPoint.x, 153 intersectPoint.y 154 }; 155 156 } 157 } 158 else if (intersectAt == IntersectAt.BOTTOM) 159 { 160 fv = new float[] { 161 center.x, 162 center.y, 163 centerTop.x, 164 centerTop.y, 165 leftTop.x, 166 leftTop.y, 167 leftBottom.x, 168 leftBottom.y, 169 intersectPoint.x, 170 intersectPoint.y 171 }; 172 173 } 174 else if (intersectAt == IntersectAt.LEFT) 175 { 176 fv = new float[] { 177 center.x, 178 center.y, 179 centerTop.x, 180 centerTop.y, 181 leftTop.x, 182 leftTop.y, 183 intersectPoint.x, 184 intersectPoint.y 185 }; 186 187 } 188 else if (intersectAt == IntersectAt.RIGHT) 189 { 190 fv = new float[] { 191 center.x, 192 center.y, 193 centerTop.x, 194 centerTop.y, 195 leftTop.x, 196 leftTop.y, 197 leftBottom.x, 198 leftBottom.y, 199 rightBottom.x, 200 rightBottom.y, 201 intersectPoint.x, 202 intersectPoint.y 203 }; 204 } 205 else // if (intersectAt == IntersectAt.NONE) 206 { 207 //不绘制 208 fv = null; 209 } 210 } 211 212 //重新绘制函数 213 @Override 214 public void draw(Batch batch, float parentAlpha) { 215 // super.draw(batch, parentAlpha); 216 batch.draw(ground,this.getX(),this.getY()); 217 218 if (fv != null&&this.startColdDown) {//画裁剪了的图 219 batch.end(); //注意这里！！！先把原来的停掉 220 drawMe(); 221 batch.begin(); //注意这里！！再开始！ 222 } 223 if(handEffect.isVisible()){ 224 handEffect.setX(this.getX()); 225 handEffect.setY(this.getY()); 226 handEffect.draw(batch,parentAlpha); 227 } 228 229 batch.draw(outerRing,this.getX(),this.getY()); 230 } 231 232 @Override 233 public void act(float delta) { 234 super.act(delta); 235 if(this.startColdDown){//开始冷却了，计时 236 this.liveTime = this.liveTime+delta; 237 if(this.liveTime>this.coldDownTime){//超出停止 238 this.endColdDown(); 239 }else{ 240 float percent = this.liveTime*100/this.coldDownTime; 241 this.setPercentage(percent); 242 handEffect.setVisible(true); 243 handEffect.setRotation(-percent * 360 / 100); 244 } 245 } 246 } 247 248 //按点阵列区域绘制图像 249 public void drawMe() 250 { 251 //裁剪 252 EarClippingTriangulator e = new EarClippingTriangulator(); 253 ShortArray sv = e.computeTriangles(fv); 254 255 //创建 polygonRegion. 256 PolygonRegion polyReg = new PolygonRegion( texture, fv, sv.toArray()); 257 258 //创建 polySprite. 259 PolygonSprite poly = new PolygonSprite(polyReg); 260 261 //(position, origin, rotation, color) 262 poly.setOrigin(this.getOriginX(), this.getOriginY()); 263 poly.setPosition(this.getX(), this.getY()); 264 poly.setRotation(this.getRotation()); 265 poly.setColor(this.getColor()); 266 267 //绘制 268 polyBatch.begin(); 269 poly.draw(polyBatch); 270 polyBatch.end(); 271 } 272 273 274 275 //----------------------------------------------------------------- 276 277 278 float convertToDegrees(float angleInRadians) 279 { 280 float angleInDegrees = angleInRadians * 57.2957795f; 281 return angleInDegrees; 282 } 283 284 float convertToRadians(float angleInDegrees) 285 { 286 float angleInRadians = angleInDegrees * 0.0174532925f; 287 return angleInRadians; 288 } 289 290 }
public class ColdDownTester2 extends ApplicationAdapter implements InputProcessor { private Stage stage; private static final Logger LOGGER = new Logger(ColdDownTester2.class.getName(),Application.LOG_DEBUG); private Texture ground; private Texture hand; private Texture outerRing; private ColdDownIcon icon; @Override public void create () { Gdx.app.setLogLevel(Application.LOG_DEBUG); stage = new Stage(); Gdx.input.setInputProcessor(this); ground = new Texture(Gdx.files.internal("frostbolt-1.png")); hand = new Texture(Gdx.files.internal("frostbolt-3.png")); outerRing = new Texture(Gdx.files.internal("frostbolt-4.png")); icon = new ColdDownIcon(new TextureRegion(ground),new TextureRegion(outerRing),new PolygonSpriteBatch(),new Image(hand),3.0f); stage.addActor(icon); } @Override public void render () { Gdx.gl.glClearColor(0.2f, 0.2f, 0.2f, 1); Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); stage.act(); stage.draw(); } @Override public void dispose() { stage.dispose(); super.dispose(); } @Override public void resize(int width, int height) { stage.getViewport().update(width,height); super.resize(width, height); } @Override public boolean keyDown(int keycode) { if(keycode == Input.Keys.J){ icon.startColdDown(); } return false; } @Override public boolean keyUp(int keycode) { return false; } @Override public boolean keyTyped(char character) { return false; } @Override public boolean touchDown(int screenX, int screenY, int pointer, int button) { return false; } @Override public boolean touchUp(int screenX, int screenY, int pointer, int button) { return false; } @Override public boolean touchDragged(int screenX, int screenY, int pointer) { return false; } @Override public boolean mouseMoved(int screenX, int screenY) { return false; } @Override public boolean scrolled(int amount) { return false; } }
裁剪计算代码参考了越南人的代码，从哪来的找不到了，官网应该也有。
以上代码只为了显示看看效果，并未关心dispose等。icon代码仍需完善，缩放旋转现在应该是有问题的，自行解决，无关本文了。
1178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
