PG日誌

読者です 読者をやめる 読者になる 読者になる

PG日誌

主にc#の事を書いています

Cocos2d-xでHPゲージを実装する


f:id:Takachan:20170207232430j:plain

何番煎じかわからないですが、Cocos2d-xでHPゲージを実装してみます。

仕様

今回は、ドット絵風のゲージ表現をしたいので、ProgressTimer使わずに、Spriteのみでいきたいと思います。

HPゲージの仕様ですが、

  • HPが減少すると右から左にバーが減っていく
  • HPに応じてバーの色が変わる
    • HPが50%以上の時は緑色
    • HPが25%以上の時は赤色
    • HPが10%以下は赤色

とします。

仕様リソース

リソースがくっそ小さくてすいません。

HPゲージの枠 : hp_frame.png 24x24で、周囲1ドットが枠になってます。

f:id:Takachan:20170207232937p:plain

緑色のバー : hp_bar_green.png

f:id:Takachan:20170207233054p:plain

黄色のバー : hp_bar_yellow.png

f:id:Takachan:20170207233112p:plain

赤色のバー : hp_bar_red.png

f:id:Takachan:20170207233119p:plain

実装

先に結果を載せておきます。

緑色の時

f:id:Takachan:20170207233735p:plain

黄色の時

f:id:Takachan:20170207233739p:plain

赤い時

f:id:Takachan:20170207233742p:plain

説明

枠の拡大をScale9Spriteで行う

いきなりコードを載せる前に概念的な説明です。

今回枠を拡大するのにSpriteの4隅を残してそれ以外を拡大するために、Scale9Spriteを使用しています。

Scale9SrpiteはSpriteを9等分して4隅を残してそれ以外を拡大する方式です。

こんな感じです。

f:id:Takachan:20170207235443p:plain

なんだか昔と使い方が変わってるみたいでヘッダは以下をincludeして

#include "ui\UIScale9Sprite.h"

インスタンス化する時は以下のように使います。

auto frame = Scale9Sprite::create("画像の名前", $Spriteの全体サイズ, $内側の矩形サイズ);

$全体サイズと$内側の矩形サイズの関係性ですが図にするとこんな感じです。

また、サイズの指定は、setContentSizeで行います。setScaleは使いません。一緒に指定するととんでもないサイズになるのでご注意を。

クラス構成

  • HpBar.h
  • HpBar.cpp
    • HPゲージの実態
      • 枠と3色のゲージのSpriteを包含している
      • setCurrentでゲージの表示を更新
  • BarState.h
    • HPゲージの表示状態(色)を表します。

f:id:Takachan:20170208000120p:plain

createで作って、getBarSprite()を好きなところへaddChildして、setCurrent(100)などするとバーが増減します。

コード

肝心のコードは以下の通りです。

大したことしていないのに尋常じゃなく長いので醜ければ最下段からGistで参照してください。

gist.github.com