マスクを使ってゲージを作る

変わったゲージ

今回はPIXIのマスクの機能を使って変わったゲージを作りたいと思います。
こういうゲージです。

完成図

デザインはともかく、ちょっと特殊な形のゲージです。

画像の用意

画像を2つ用意します。まず、ゲージの枠。
ゲージの枠

そして、ゲージの中身
ゲージの中身

想像のとおり、この2つを重ねるゲージが満タンの状態になります。

マスクを作る

扇形のマスクを使って、ゲージの中身を部分的に描画します。
例えば下図のようにするとマスクをすると下半分の白い部分だけが描画されます。
マスク
なので、ゲージが100%のときは360度の円、ゲージが50%なら180度の円のマスクを設定すれば、パーセンテージに応じたゲージが出来上がります。
ソースコードはこんな感じになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//ウィンドウとしてゲージを作ります
Window_Gauge.prototype.initialize = function() {
Window_Base.prototype.initialize.call(this, 0, 0, 300, 300);
this.opacity = 0; //ウィンドウ部分を消すため

//ゲージの枠を読み込み
var base = new Sprite(ImageManager.loadPicture('Base'));

//ゲージの中身を読み込み
var gauge = new Sprite(ImageManager.loadPicture('Gauge'));

//マスクを作る
var mask = new PIXI.Graphics();
mask.beginFill(0xffffff, 1); //白画像で塗りつぶす設定

//扇を描く。(144, 151)を中心に半径150で0度の角度からπ[rad]の角度で描画
//ここで角度を変数などに格納して描画するようにすれば、値に応じたゲージが出来ます
mask.arc(144, 151, 150, 0, 3.14);
mask.endFill();

gauge.mask = mask; //ゲージの中身にマスクを設定
base.addChild(gauge); //ゲージの枠にゲージの中身をaddChild

this.addChild(base); //できたゲージをウィンドウにaddChild
};
RPGツクールMVカテゴリの記事
アイコンセットの画像が大きすぎると黒い四角が表示される
ゲームループの話
マップのリフレッシュの話
最近制作した細かいプラグイン
ツクールのピクチャ番号の扱いについて
容量の大きい音声ファイルをロードするとクラッシュする
テストのレポートを作るプラグイン
フィルタをかけると画面全体が拡大されてしまう
並列実行中のコモンを最初から実行するプラグイン
メニューとマップのスクリーンショットについて
イベントのテストでエラーになるプラグインのケース
ロードした結果が異なる場合がある
プラグインの使用状況を出すプラグイン
装備を記憶、ロードするプラグイン
ピクチャの色あいを変えるプラグイン
ピクチャの色相を変えるプラグイン
デバッグ画面にショートカットキーを追加するプラグイン
BGSを保存・再開するプラグイン
敵キャラにデフォルトのステートを付与するプラグイン
ゲーム画面外演出を考える
ニコニコっぽいテキストを表示するプラグイン
一括入力がしやすいテキストエディタプラグインの紹介
ウィンドウをたくさん出すプラグイン
複雑な計算式はプラグインで記述する
シーンからマップに場所移動
シーンに引数を渡す
ウィンドウに画像を表示する
スプレッドシートからjsonにしてツクールに取り込む
ランダムにアイテムを取得するプラグイン(MV版)
ASCIIアートフィルターを試す
TweenプラグインのTorigoya_Tween.jsが便利
全てのアイテムを取得するプラグイン
独自のデータをセーブする
loadBitmapを使うときはsmoothに注意する
簡易メッセージプラグイン