【libgdx】血条的制作2nd

最近在网上看到用pixmap画一条红线当做血条的教程，其实那与实际项目差别很大，原理不尽相同。所以近期会写一些尽量接近现实应用的文章，希望能给有缘看到的人一点帮助吧。

接着上回脑洞↓↓ 完成下面的效果
(狗头的制作...略)

public class MyGdxGame implements ApplicationListener, InputProcessor {     private SpriteBatch batch;     private Texture textureFu, textureEp, tHead;     private Sprite sprite, spriteDoge;     TextureRegion region;     private int hpWidth = 344;     private int hpHeight = 24;     private int hpWidthC = hpWidth;     private float hpNum = 100;     private float hit = 80;     private float regDoge = 0;     BitmapFont font;     @Override     public void create() {       batch = new SpriteBatch();         // 载图         textureFu = new Texture(Gdx.files.internal("data/images/hp_full.png"));         // 抗锯齿              textureFu.setFilter(TextureFilter.Linear, TextureFilter.Linear);         textureEp = new Texture(Gdx.files.internal("data/images/hp_empty.png"));         textureEp.setFilter(TextureFilter.Linear, TextureFilter.Linear);         // doge头像                tHead = new Texture(Gdx.files.internal("data/images/head.png"));         spriteDoge = new Sprite(new TextureRegion(tHead, 0, 0, 107, 107));         spriteDoge.setBounds(90, 580, 107, 107);         //把彩条图转为可截取的TextureRegion，默认为从右向左截取；         region = new TextureRegion(textureFu, 0, 0, hpWidth, hpHeight);         // sprite有更强的图形控制，为了把彩条变红色                 sprite = new Sprite(region);         sprite.setBounds(200, 600, hpWidth, hpHeight);         //字体                     font = new BitmapFont(Gdx.files.internal("data/images/fnt.fnt"),             Gdx.files.internal("data/images/fnt.png"), false);         // 监听按钮         Gdx.input.setInputProcessor(this);     }     @Override     public void render() {         Gdx.gl.glClearColor(.4f, .4f, .4f, .4f);         Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);         batch.begin();         // textureEp 空血条不需要动                 batch.draw(textureEp, 200, 600, 344, 24);         //绘制红条  = 动画减血         sprite.setColor(1, 0, 0, 0.4f);         sprite.setSize(hpWidth, 24);         sprite.setRegionWidth(hpWidth);         sprite.draw(batch);         // 绘制彩色条 = 瞬间减血         region.setRegionWidth(hpWidthC);         batch.draw(region, 200, 600, hpWidthC, 24);         // 画静态头像         batch.draw(tHead, 90, 580, 107, 107);         // 通过修改alpha值达到动画效果                 spriteDoge.setColor(1, 0, 0, regDoge);         // 画动画头像                 spriteDoge.draw(batch);         // 数字血量                 font.draw(batch, (int) hpNum + " / 100", 430, 660);         font.draw(batch, "HP", 210, 660);         batch.end();         handelInput();     }     public void handelInput() {         //血条动画                if (hpWidth > hpWidthC && hpWidth > 0) {             hpWidth -= Gdx.graphics.getDeltaTime() * 100;         }         // 头像动画                 if (regDoge > 0.05f) {             regDoge -= 0.05f;         }     }     @Override     public boolean keyDown(int keycode) {         switch (keycode) {             case Input.Keys.A:                 if (hpWidthC > hit) {                     hpWidthC -= hit;                     // 计算数字血量                                       hpNum = hpNum - hit / 344 * 100;                     // 每次攻击重置动画头像alpha                                        regDoge = 0.8f;                 } else {                     // hit伤害大于血量的情况处理                                   hpWidthC = 0;                     hpNum = 0;                 }                 break;         }         return true;     } }

这回的血条动画其实就是上回的结合体，要绘制三层
因为libgdx是按照绘制的顺序来排列图片的，所以顺序不能错。

狗头的原理也是差不多，利用setColor来改变色相和透明度
因为要改变透明度，所以必须先画一个狗头垫底。
要绘制2个狗头，这很重要。
另外数字血量的计算因为取整问题? 不太准的样子

https://github.com/smaote/libgdx-demo