レイアウトツールでUIを作る!【Bakinでゲーム開発】
Summary
TLDRこの動画では、RPG開発者がゲームのUIデザインと実装について話しています。特に主人公の表情とライフゲージ、バッテリーゲージの表示方法に焦点を当てています。ライフゲージは被ダメージを直感的に判断できるように数値ではなくゲージの減少だけを表示する仕様にしています。バッテリーゲージはゲームの重要な要素で、時間経過で減少し、ステータス異常にも影響します。UIの拡張性についても触れており、アイテムを集めることで最大値が増やせるなどの成長要素を今後追加する予定です。レイアウトツールの使い方やイベントの設定方法も説明しており、ゲームの完成に向けてのプロセスが分かります。
Takeaways
- 🎮 この動画は、RPG開発者がゲームのUIデザインについて進捗報告を行っている内容です。
- 🖼️ UIに主人公のイラストとヒットポイントゲージ、バッテリーゲージを配置し、プレイヤーの視覚的フィードバックを強化しています。
- 🐭 被ダメージ時のヒットポイントゲージの減少と主人公の表情の変化を実装し、プレイヤーに状況を直感的に伝えています。
- 🔋 バッテリゲージはゲームの重要な要素で、時間経過や特定のアクションによって減少するように設計されています。
- 🌐 ヒットポイントとバッテリーゲージには拡張性を持たせ、アイテムの集め方などによる最大値の増加を予定しています。
- 💰 所持金の表示は、獲得時にフェードアウトするようにして、プレイヤーに金銭の増減を視覚的に伝えています。
- 🛠️ UIのレイアウトは刃牙のレイアウトツールを使い、簡単に管理・編集が可能です。
- 🎨 ゲーム内のイベントや状態異常を視覚的に表現するアイコンやキャラクターの変化を細かく調整しています。
- 🔧 ゲームのUIデザインには、デフォルトのメーター画像をカスタマイズし、ゲームのテーマに合わせた画像を使用しています。
- 🌟 この動画では、UIデザインの柔軟性とカスタマイズの自由度を高めるためのレイアウトツールの強さを強調しています。
Q & A
どのようなゲームのUI開発について話されていますか?
-探索アドベンチャーゲームのUI開発について話されています。
UI開発で苦手と感じている部分は何ですか?
-主人公の考慮やゲーム制作において避けられないUIの設計が苦手と感じられています。
ゲーム内のヒットポイントはどのように表示されますか?
-赤いゲージで表示され、ネズミに襲われると減少し、マルタの表情が変わります。
バッテリーゲージは何を表していますか?
-ゲームの肝となるバッテリーゲージで、何もしなくても時間経過で減少します。
ヒットポイントとバッテリーにはどのような拡張性がありますか?
-特定のアイテムを集めることで最大値が増やせる拡張性が設けられています。
所持金の表示はどのように実装されていますか?
-お金を手に入れた数値だけプラスで表示され、そのままフェードアウトします。
レイアウトツールの機能についてどのように説明されていますか?
-レイアウトツールを使ってUIを管理し、移動中もHPとMPのゲージを表示できるように設定しています。
デフォルトメーターの背景画像はどのように使われていますか?
-ゲージの伸びる部分と変わらない部分を分けて使用され、画像の分割とスライスがウィンドウで行われています。
イベントのテンプレートを使用して何を実装しましたか?
-イベントのテンプレートを使用して所持金の表示を実装し、木箱を調べると所持金が増える処理を追加しました。
マルタの顔グラフィックはどのように管理されていますか?
-コモンイベントでイメージを使用して管理されており、メッセージウィンドウに直接顔グラフィックを表示する必要がなくなりました。
UIデザインの変更はどのような影響を与えていますか?
-UIデザインの変更により、メッセージウィンドウに顔グラフィックを表示する必要がなくなり、吹き出し式の表示が可能になりました。
Outlines
🎮 UIの実装とゲームの進捗
RPG開発の進捗報告を行い、特にUIの実装に苦労した点を説明。主人公のキャラクターデザインからゲーム内のヒットポイントとバッテリーのゲージの実装まで、1週間かけて完成させた。ヒットポイントは数値でなくゲージの減少感でプレイヤーにダメージを伝え、バッテリーはゲームの重要な要素として扱う。さらに、ヒットポイントとバッテリーには成長要素を加える予定で、特定のアイテムを集めることで最大値が増やす。
🛠 レイアウトツールの活用とカスタムUIの作成
刃牙のレイアウトツールを使ってUIを実装し、ゲームのイベントや状態変化を表示する方法を解説。ヒットポイントの減少やバッテリーの残量をUIに反映させる方法、さらには所持金の表示方法も説明。レイアウトツールを使ってカスタムUIを作成し、ゲームのさまざまな状態を視覚的に表現する。
🌟 UIの拡張性とデザインの柔軟性
ヒットポイントとバッテリーのUIが拡張性を持っていることを強調し、ゲームの進行に合わせて成長する要素を紹介。レイアウトツールを使って斜めのゲージやカスタムデザインを実装し、より自由なデザインが可能であることを示す。また、UIデザインの変更によりメッセージウィンドウに顔グラフィックを表示する必要がなくなり、吹き出し式のイベント演出が可能になった点を触れる。
Mindmap
Keywords
💡RPGデベロッパー
💡UI
💡ヒットポイント
💡バッテリー
💡成長要素
💡レイアウトツール
💡イベント
💡パーセンテージ
💡アイコン
💡コモンイベント
💡吹き出し
Highlights
RPG開発者による募金で作る探索アドベンチャーの進捗報告を行いました。
UIの設計は苦手だと公言しつつも、ゲーム制作で避けられないため、実装を頑張って進めています。
1週間かけて、左下に主人公のイラスト、左側に2つのゲージ、右下にお金の表示を実装しました。
ヒットポイントは数値ではなく、ゲージの減少と表情の変化で表現する仕様にしました。
バッテリーゲージはゲームの重要な要素で、時間経過で減少するようにしています。
ヒットポイントとバッテリーには成長要素を設け、特定のアイテムを集めることで最大値が増やすことができます。
所持金は手に入れた数値だけプラスで表示され、その後フェードアウトするように設定しました。
刃牙のレイアウトツールを使ってUIを管理し、移動中もHPとMPのゲージを表示するように設定しました。
イベントのテンプレートを使って所持金の表示を簡単に実装できました。
ヒットポイントバーの背景画像を調整し、デザインに合わせてカスタマイズしました。
デフォルトメーターの画像を編集して、斜めにデザインしたゲージに対応させました。
画像のスライスを正確に設定し、ゲージの表示を綺麗に見せる方法を学びました。
ヒットポイントとバッテリーのレイアウトを分けて用意し、それぞれに異なる成長要素を持たせています。
メッセージウィンドウに顔グラフィックを表示する必要がなくなり、吹き出し式に変更しました。
UIの実装が刃牙の魅力であり、強みの一つだと感じています。
次回の動画でお会いするという結びの言葉で終了しました。
Transcripts
RPGデベロッパー募金で作る探索
アドベンチャーその進捗報告をしていき
ます
突然ですが皆さんは
UIを考えるのはお好きでしょうか私は
めちゃくちゃ苦手です主人公を考える時も
相当悩んでたんですがゲーム制作において
避けては取れないので頑張って実装して
いこうと思います
はいというわけで実装してきましたこの形
になるまで1週間かかりました左下に
マルタのイラストを配置してその
隣に
ゲージを2つ並べてありますそして右下に
はこのゲームでお金を表示してあります
ライフって書いてある赤いゲージがヒット
ポイントです
試しにネズミに襲われてみると
ゲージが減ってマルタの表情が変わるよう
にしてみました
ヒットポイントは数値では表せない仕様に
してあります
理由はいろいろあるんですけど
プレイヤーには
被ダメージはね現在の状況っていうのを
数値的に判断するんじゃなくてヒット
ポイントが減っていくっていう感覚を
曖昧さを残しつつ直感的に判断して
欲しかったからですそして上のゲージは
バッテリーと書いてありますがこれがこの
ゲームの肝になる予定ですまだあまり
決まってませんバッテリーは何もしなくて
も時間経過で減るようにしてありますこれ
はゲージに加えてパーセントでも表示して
ありますまた毒なんかのステータス異常に
かかるとここにアイコンが表示されて
なおかつマルトの表示も変わります
耳がねペタってなってるのがこだわり
ポイントです
そしてこのゲームの成長要素としてヒット
ポイントとバッテリーには
拡張性を持たせてあります例えば特定の
アイテムを3つ集めると最大1メートルが
増えるといったね要素も今後入れようと
思っているのでこんな
具合にヒットポイントゲージが伸びて最大
値が増えたことがね一目でわかるようにし
てあります
ちなみに馬券的には
ゲージの長さは変えずにヒットポイントの
数値をね表示させてその数値が増えるよう
にねした方が作るのは楽なんですけど
RPGと違って今回みたいなねアクション
ゲームの類は直接ゲージが伸びてくれた方
が5月強くなったっていう感じがしてね私
は好きですねでバッテリーの方は1メモリ
が結構なボリュームを持っているので1
メモリずつ成長するようにしてみました
こんな感じですね
標準が100%で
110120とそんな感じで増えていくと
いうイメージを考えてます所持金の表示は
お金を手に入れるとはいこんな感じで手に
入れた数値だけプラスで表示されてその
ままフェードアウトするっていう感じにし
てみましたはいそれでは実際にバキンスの
実装方法を見てみましょう結構前の動画で
もねお話はしたんですが
刃牙にはこのレイアウトツールっていうね
便利なものがありますでこのバキンで使わ
れているUIってものは全てここで管理さ
れてるんですけど例えば
移動中もHPとMPのゲージを表示したい
と思ったらこのバトルを開いてバトル
ステータスっていくと
ここにねもうHPゲージとMPゲージある
じゃないですかこれを選ぶとあこれがHP
バーガーとでこっちが数値だというのが
わかるんででも例えばこれをねこう選んで
[音楽]
これかなということでコピーします
でゲーム内演出のイベント用フリー
レイアウトというところに
新規でレイアウトを追加をして
でまテストってつけて
でここで
貼り付けます
はいこんな感じで貼られましたでこれでも
OKをして
で今度はこのイベントで
追加で新規作成ですねでここで開始条件を
並列して繰り返し実行にしてから
画面演出の中のイベントでフリー
レイアウトの表示を選んだら
先ほど作ったねこのテストを選んで表示し
てありますOKこれでテストプレイをして
みるとはいこんな感じでねあっという間に
移動中をねゲージが表示されました
例えばこの木箱を調べたらヒットポイント
が減るっていう処理をね作ってみると
はいこんな感じでねもう勝手に反映されて
くれます
めちゃくちゃ簡単じゃないですかでコピペ
じゃなくて1から作りたいって人はこの
パーツをね選んで
パネルのこのスライダー操作用パネルこれ
を選んでやるとこんな感じで1から自分で
設定していくことができますで所持金の
表示に関してはこのイベントの
テンプレートにね元からここに所持金を
スコアとして表示ってのが入ってるんで
これをね選んでやれば
完成ですねあとこれだけで出てますね
例えば
木箱を調べたら100円増えるよっていう
命令を書いておくと
はいこんな感じで勝手に増えてきます
なんでこの所持金に関してはレイアウト
ツールすら使ってないんですよねでこの
レイアウトツール触っててパーキンすげえ
じゃんって思ったのがあってそれ何かって
言うとこのヒットポイントバーデフォルト
の背景画像を見てみるとこんな感じでね
すごいちっちゃいのが出てくるんですけど
ちょっと
拡大してこれ
わかんないと思うんですけどこの
デフォルトメーターっていうのをちょっと
開いてみましょうかこんな感じの画像に
なってるんですがこれが何かって言うと
このメーターのこの左端と右端とその
真ん中部分このゲージがいくら伸びても
変わらない部分っていうので3分割され
てるわけですねでなので先ほど開いたこれ
この画像見てみるとここに薄い線がね入っ
てるわけですねこれねここちょっとなんか
刃牙のしようかなと思うんですけど若干
ずれてるんですよね
若干ずれてるんですけどこの左側の丸い
部分と右の丸い部分とこの真ん中のいくら
伸びても変わらない不変の部分ですねこれ
ができるということは例えばこんな感じの
斜めにデザインした
ゲージでも対応してくれるということなん
ですよ今これ化けに取り込んだんですけど
ここの設定をデフォルトメーターとね同じ
ものにしていきますええ用途2Dにして
スライスがウィンドウですね
で
ここですねこのレフトとライトっていう
数値を何ピクするかっていうのを決めなく
ちゃいけません先ほどPhotoshop
で作ったやつで測ってみると横が10です
ね
でここも10ですねで真ん中も10と10
ずつで合計30の画像にしてるんですけど
本当だったらですよバキがすごい正確に
この画像を読み込んでくれてるんだったら
真ん中の無限に横に伸びる部分って1
ピクセルでいいはずなんですけどさっき
あのデフォルトメーターで見てもらった
通り若干ずれてるんでちょっと余裕を持た
せて作ってありますで一応ここが見ながら
やりますけど
まあ計算通りだったら1010ですよね
はい101で見た時にここねなんか若干
ずれてるんですよね
若干ずれててちょっと気持ち悪いんです
けどちょっとこれで行ってみましょうか
これでレイアウトツール戻って
ここですねこの背景画像のデフォルト
メーターという部分を書いていきます
テストメーターにして
読み込むとはいするとこんな感じでね
斜めの部分がちゃんと
透過されて表示されてるのが分かりますね
はいで合わせてスライダー画像の方も書い
ていきましょう
はいこれ冬はちょっと刃牙の塩っぽいん
ですけどあの
画像をねここの画像を変えると下の色がね
元戻っちゃうんですよさっきオレンジ色
だったんですけどなんか元に戻っちゃうん
でこれ自分で設定し直さないといけない
みたいですね今は
はい
こんな感じでやるとはいどうですかこのね
なんか汚いでしょここ
透過してくれるのはありがたいんですけど
微妙にこの
汚さが残ってますねでこれ元データ見て
みると高さが重要なんですよ
14なので
縦サイズここかこれで今8になってるので
まここが14が正しいですよと
はい
では自由にしたところで結局この汚い部分
残ってるんですけど
こんなことになるとで現状だとこういう
トリミングがされて
読み込まれちゃうのでじゃあどうすれば
いいのかと言うと最初からねピチピチに
作らない作業も言いましたけど結構余裕を
持たせて作ることが大事ですね
例えばこれも30ぐらいしちゃう
で横幅もなんならもっと広くしちゃう40
ぐらいしちゃうこれくらい空白を持たせて
元の素材をね作ってやるとどうなるかって
言うとこんな感じでかなり余裕を持たせて
作っているのでここのね値も少し書いて
やります
目分量でいくとこんなもんですかね15
でここも本当は15でいいはずなんです
けど
ここぐらいにした方が良さそうですよね
ちょっと気持ち悪いんですけどはいなんで
まぁここでこういう分割をしてやると
じゃあどうなるかというので見てみると
はいかなり綺麗に表示されましたねでここ
がなんぼやったっけ高さ30なんでこの
30にしてやる
はいでこれでOKをして
これで
箱を調べたら
減るっていうね処理をしてみた時にはいで
これねすごいなと思ったんですけどはい
こんな感じであのちゃんとねこう斜めに
カットされた
ゲージのままが減ってくれるんですねこれ
やるじゃんて思いましたねっていう感じで
レイアウトするだけでもね結構いろんな
デザインができるんじゃないかなと思い
ますしこのイベントを使ってこのイメージ
を表示っていうのね使っていけばもっと
自由度の高いデザインができるんじゃない
かなと思いますはいでえーと先ほどのお
見せした通りヒットポイントとバッテリー
には成長要素を持たせているのでこんな
感じでヒットポイントとねバッテリーの
レイアウトっていうのは分けて用意して
ありますこうすることでヒットポイント
だけね成長させてバッテリーは初期値の
ままっていう表現ができるわけですねこの
バッテリーのメモリの表現はこんな感じで
メモリだけの画像を用意してねそれを上に
重ねているだけですなのでその後ろでは
ヒットポイントと同じように
ゲージが減っているだけですねそして見て
の通りマルタの顔グラフィックは
レイアウトツールにはありません顔
グラフィックはコモンイベントでね
イメージを使って管理してあります以前お
見せしたイメージボードではメッセージ
ウィンドウにマルタの顔グラフィックを
表示してみましたがこのUIデザインにし
たことでメッセージウィンドウに顔
グラフィックを表示する必要がなくなり
ましたあっちもこっちも同じグラフィック
があるとね鬱陶しいですからねこれによっ
てメッセージウィンドウのタイプを上下に
表示するタイプではなくて話しかけた
イベントから直接出てくるいわゆる
吹き出し式にできるようになったのも
大きな収穫でした
吹き出し式の最大のメリットそれは顔
グラフィックを描かなくて済むということ
です前作では全ての僕に顔グラフィックを
書いてえらい目に遭いましたからねはいと
いうわけで今回はUIの実装についてお
話ししましたこんなレイアウトのUIも誰
でも簡単に実装できてしまうそれが刃牙の
魅力だと思いますしまた強みの一つなのか
なと思いますそれではまた次の動画でお
会いしましょうバイバイ
関連動画をさらに表示
ツムツムみたいなゲームを作ろう!【GDevelop】
LPサイトを自動生成するAI😆"概要"からWEBページを作成してくれる「AI Landing Page Generator」の使い方!ランディングページの制作もAIに手伝ってもらう時代に突入😎
科学的に正しい子育ての新常識 うちの子このままで大丈夫?がスーっと消える 優しい子に育てる方法
ChatGPT Tips and Tricks - Part 3: Timestamps and counters
テレビカメラマンが教えるカメラワークの基礎【フィックス・パン・チルト・ズーム・ドリー】
海外で800万回再生された「一度読んだら忘れない読書術」とは?
5.0 / 5 (0 votes)