UI | katakuriko https://katakuriko.site Thu, 17 Jul 2025 01:47:08 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://katakuriko.site/wp-content/uploads/cropped-HlaHRV-32x32.png UI | katakuriko https://katakuriko.site 32 32 TowerDefenceでよくあるUI https://katakuriko.site/tower-defence-ui/ Sun, 17 Apr 2022 02:05:17 +0000 https://katakuriko.site/?p=421 よくありますよね。TowerDefenceじゃなくても使うと思いますので参考にしてもらえればです。
今回は3つのパターンを紹介します。1から順に説明しますので1から見ていってください。

1.キャラクターのみ

完成イメージなります。

まずは、オブジェクト、オブジェクトグループを作成します。
キャラクターを3つ「アセットストアを検索」で追加してください。”GreenBar”以降は2、3で使います。オブジェクトグループ“Characters”を作成、”KnightMale”、”ElfMale”、”WizardMale”を追加します。
そして、画面左上にキャラクターを3つ配置してください。

次は、キャラクター3つにオブジェクト変数を下記の通りに設定します。

画面上に配置したオブジェクトのインスタンス変数を変更します。
“CostはKnightMale=50、ElfMale=100、WizardMale=150
“UI”

イベントエディターは、下記の2行だけです。すごい簡単ですね。
1行目:クリックされたキャラクターのオブジェクト名を使って、「名前からオブジェクトを生成する」アクションを使うところがポイントです。
2行目:キャラクターを移動させます。ポイントは、UI変数が偽のキャラクターを絞り込み、キャラクターをX方向に移動させます。UIの条件を入れないと画面上の全キャラクターが移動するのた試してみてください。

2.キャラクター、Cooldownバー

2の完成イメージです。

画面上に”GreenBar”を配置し、全ての幅を同サイズにしてください。私は31にしました。
ポイント:キャラクタオブジェクトの当たり判定領域に重なるようにしてください。
:”GreenBar”のビヘイビアに”Tween”を追加してください。

イベントエディターはこんな感じです。赤枠部分が今回の追加箇所です。
ポイント:先ほど作成したイベントをイベントグループでまとめていたら、コピーしコピー元のイベントグループをコメントアウト(有効/無効を切替)しておくとバックアップになります。

1行目:キャラクターとGreenBarをオブジェクトクンクさせるための処理になります。
ポイント:「インスタンスごとに繰り返す」を使うことです。
2行目(条件):キャラクタが生成されたあと一定時間生成不可能にしています。
ポイント:”GreenBar”の幅でキャラクタが生成されたのか判断しているので最大幅値を設定する。
2行目(アクション):クリックされた時に、GreenBarを徐々に短くする処理になります。
ポイント:「インクされた全ての””を考慮」を使う。GreenBarのTweenビヘイビアで幅を0にする。Tweenの””ミリ秒かけての値を変更することで、キャラクター生成のCooldown時間を制御できます。私は、2000ミリ秒(2秒)にしました。
4行目:GreenBarのCooldownが完了したら元に戻す処理です。ここで幅31に戻すことでキャラクターが生成可能になります。

3.キャラクター、Cooldownバー、コスト

画面にゴールドとコスト表示のBBテキストを配置します。
ポイント:TextCostはキャラクターの当たり判定と重なるように配置します。オブジェクトインク対応です。

TextGoldのオブジェクト変数に、”Gold”を作成し300と設定します。

イベントエディターです。

1行目:TextCostをキャラクターとオブジェクトリンクさせ、各キャラクターのコストをテキストに表示しています。
2行目(条件):Goldが足りない場合に、キャラクター生成させないための条件を追加。
2行目(アクション):キャラクター生成した際に、Goldからコストを減算します。
5行目:各キャラクターが生成できるか、Goldとコストをチェックしています。生成できない場合は、”Sale”を偽にして、TextCostを赤字にします。
6行目:Goldテキストを自身のGoldオブジェクト変数で上書きします。
7行目:これはなくても良いのですが、CoinをクリックするとGoldが加算されます。動作検証ようですね。

これで以上です。どうだったでしょうか?
全体のポイントとしては、「オブジェクトリンク」だと思います。オブジェクトリンクを使わなくても実装できると思いますが、イベントエディターの行数がかなり増えると思います。
このやり方を覚えてしまえば、アクションの「イベントリ」を使うことでアイテムを選択し使用するUIも実装できます。また今後書きたいと思います。

]]>
スライドインするメニューUIを簡単に作成!! https://katakuriko.site/slide-in-menu/ Mon, 04 Apr 2022 19:49:33 +0000 https://katakuriko.site/?p=103 いきなりですが、今回のポイントは下記の2点です。
1、Tween終了条件を使う。
2、Buttonオブジェクトが表示されている条件を使う。

オブジェクトはスプライトオブジェクト5つです。
Textオブジェクトはなくても良いです。
メニューは画面外に配置します。”MenuButtons”オブジェクトグループを作成しメニューに表示するボタンを登録します。(CloseButton、AButton、BButton)
MenuOutlineのビヘイビアにTweenを追加します。
各オブジェクトの「ポイントを編集」を調整してください。

イベントはこんな感じです。最終行はメニューボタンのクリック処理なので無視してもらって良いです。

では、解説です。

1行目は、メニューを画面外からスライドインさせます。TweenでX座標を移動します。ポイントは「MenuButtonは表示されている」条件です。これはMenuButtonが非表示でも「MouseX、YがMenuButton内部にある」と条件が反応してしまうため追加します。

2行目は、メニューを画面外にスライドアウトさせます。1行目とほぼ同じでCloseButtonは画面外に移動するので表示したままにします。

3行目は、MenuButtonを表示させます。ポイントはスラウドアウト(Close)させてるTweenが終了したらMenuButtonを表示させることです。

4行目は、MenuOutline上にあるオブジェクトを追従させる処理です。MenuOutlineの中心座標に追従させます。

どうでしょうか?簡単ですよね。毎回ですが解説になってないんじゃないかと思います。イベントを見ただけで何をしているかすぐわかるのもGDevelopの良さですよね。

]]>
カッコイイUI-Part1 https://katakuriko.site/cool-ui-part1/ Wed, 30 Mar 2022 12:51:21 +0000 https://katakuriko.site/?p=278 今回はプレイヤーの周りに武器を回転させながら表示させます!!ただ回転して表示するだけですが、これだけでワクワクしますよね。実装は簡単なので是非試してください。


イベント全体で、5行になります。ポイントは武器をオブジェクトグループ”Weapon”にまとめ、TimeDelta()で角度、移動距離をジワジワ加算してるとこです。

まず、スプライトオブジェクトをアセットストアの「16X16 Dungeon Tileset」の「Weapons」カテゴリーから好きなものを8個選んでください。オブジェクトグループに「Weapon」を追加し、武器オブジェクトを全て追加します。そして、画面に適当に配置してください。これだけでもワクワクが・・・

それぞれの武器のオブジェクト変数の編集から「DispAngle」を追加し-45、45、90、135、180、225、270、360と値を設定してください。

KninghtMaleオブジェクトにTopDownMovementビヘイビアを追加し、「オブジェクトを回転する」のチェックを外します。

いよいよ、イベントです。
まずは兵士、武器を整えますが、事前にオブジェクトの大きさ、武器を非表示に設定しておけばこれは不要です。私は後々調整できるようにイベントでやっています。本当は8個の武器を調整するのが面倒なので・・・

ここがメインです。Weaponオブジェクトグループを「指定オブジェクトを基準に配置する」アクションで回転させながら移動させます。角度と距離は、TimeDelta()で少しずつ加算していきます。100、200は好きなように調整してください。解説しないでもわかりますよね。
角度 Weapon.Variable(DispAngle)+Weapon.Variable(AddAngle)
距離 KnightMale.Variable(WeaponDistance)

最後は、wキーを放した時に各オブジェクト変数を初期化し、武器オブジェクトを非表示にします。

これで、完成です。プレビューしてみてください。どうですか?表示されましたか?
矢印キーで兵士を動かしながら表示してください。武器がついてきますよね!!テンション上がったでしょうか?
今回はここまでです。これにエフェクトをつけたり、wキーを1回押した時に表示するとか色々改良できるのでまた書きたいと思います。

]]>