開発日記:TIMATK

2025-08-29 10:08:00 #TIMATK

TIMATK:もろもろ調整

外れた道路のテクスチャを解決しよう。

インスペクターを見たら、テクスチャ自体は設定されてた。表示されてたってことはこれをどっかで指定してんやろなと、色々いじる。分かった。

ChannelのUVsのMaterial IDsにチェックを入れて、Target ID(マテリアルのID)を指定せなあかんのやな。未設定の場合は最期にセットしたマテリアル「Gray」がデフォルトで選択されてたんやな。道路のChannelに「Road」のID「0」、裏側と橋脚のChannelに「Gray」のID「1」を設定して無事道路のテクスチャが復活。(セットした時にちゃんと設定してくれ(;´Д`))

やっぱ色があった方がええな。
*この時は3D版BABサイト内のゲームジョブとして、急患を迎えに行って病院に運ぶという設定やったんで救急車にしてた。

コース全景。ギズモがスタート位置。

アプリ化

3D版BABサイト用の実験やったけど、このまま「TIMATK(タイムアタック)」でゲーセン用アプリとしてまとめよう。
個人アセットを組み込んでUIを実装。

画面横向き最大化でボタンを最適化してスマホで実際にプレイしてみたら、操作ボタンが全然小さかった。位置と大きさ調整。
徐々にまとまってきて救急車のサイレン鳴らしたい衝動w。

プレイしてると、操作がシンプルなせいかあんまタイム差が出にくい感じで、色々工夫せんとタイムアタックにはあんま向いてないような気がしてきた。
要請に応じて街中走って、他の車や歩行者に気を付けたり、事故や乱暴な運転で賠償負わされたり、修理費嵩んで苦労したりとかせんとやな。

取りあえずハンドルがタイトすぎる。この辺は個人の好みもありそうなんで、感度設定を追加。

開始ウィンドウに付けたけど、プレイ中に変えたくなったんで、終了(再ゲーム)ウィンドウにも付けんとやな。てかそも終了ウィンドウ要らんかな?と思ってウィンドウ表示を含んだ開始処理をメソッド化、終了時で廻すように変更した。ハンドル感度はPlayerPrefsで記録。

もうちょっと細かく車の制御できんかなとパラメータとか調べたけど、あんま説明が無かった。ソース見なあかんな。
同じブランド(?)のSim-Cade Vehicle Physicsも持ってて、アセットページを見るとこっちが上位っぽいんで、入れてみた。
デモシーンの色味が気になって照明をベイクしたら滅茶苦茶時間掛かった。(;´Д`)

次回、「Sim-Cade Vehicle対応」につづく。


2025-08-27 09:35:00 #TIMATK

TIMATK:ゲームっぽくする

コースが高架なんで直ぐ落ちる。コースの端を地面に下ろしてみたけどそのまんま回ってた方が面白いんで、落ちたらコース上に戻るようにしよう。

開始時のtransformを記録して、現在のy座標が1以下になったら落ちたと判定して、最初の位置に戻るようにしたら、落下時の勢いそのままで開始時に再現されてしまう。
勢いをゼロにしたらええんかなって思ったけど、どうせならスタート位置を任意にセットできて、車輌モデルも複数あるから差し替えられるようにしよう。
スタート位置に空のオブジェクトを置いて、スクリプトでセットした車プレファブをInstantiateして、落ちたらDestroyするようにする。

そしてDestroyした時にダイアログを出して、「もう1回」ボタンで再プレイできるようにUIを追加。

ゲームっぽくなってきた。

スマホUI追加

WebGLなので、当然スマホUIも必要。

画面UIにハンドルの左右とアクセルブレーキとサイドを付ける。今唯一やってるゲームがスマホのレーマスでボタン操作なので、ハンドルとかジョイスティックにせず安直に準拠w。

Affinity Designerで描いて、PNG出力して、プロジェクトに取り込んで、UIに並べる。
ボタンそれぞれにEventTriggerコンポーネントを付けて、車プレファブの操作スクリプトのメソッドにアタッチすると完了。

と思ったけど、車はスタート時にインスタンス作るし、モデルも差し替え前提やからアタッチできへんな。(;´Д`)

車プレファブは入力が「InputManager」、制御が「ArcadeVehicleController」で分けられてたんで、「InputManager」をインスタンス作るスクリプトに移植して、PC用とスマホ用メソッドを作成して対応した。構造が分かり易くて助かる。

--- title: Default --- graph BT subgraph 車プレファブ ia("InputManager_ArcadeVP.cs") avc("ArcadeVehicleController.cs") end ia--ProvideInputs(Horizontal, Vertical, Jump)-->avc
--- title: TIMATK --- graph TD subgraph UI btn("Button") end subgraph StartPoint ipk("Input.Key") ca("CarSettings.cs") end subgraph 車プレファブ avc("ArcadeVehicleController.cs") end ipk-->ca btn-->ca ca--ProvideInputs(Horizontal, Vertical, Jump)-->avc

*図はMermaidで書いてたのを転記したが、なぜかDefaultの方だけ「graph TD」が横並びになる。
 「graph BT」で縦並びになった。バグ?(;´Д`) こういう事で地味に時間が削れていくよなあ(;´Д`)

ビルド

スマホで確認する為にビルド(ぐるっと1周のタイムアタックなんで名前を「TIMATK」と決定)。
新規プロジェクトで作ったから、圧縮設定忘れ、HTMLテンプレート無し、最大画面化処理無し、横向けたらタッチ効かない、操作値の調整、と問題だらけやった。(;´Д`)
WebGLのテンプレートプロジェクト作らんとやな。

次回、「もろもろ調整」につづく。


2025-08-25 10:04:00 #TIMATK

TIMATK:コース作成

解説動画を試して、Arcade Vehicle Physicsのデモシーンを走らせて、ちょっとコース作ってみるかと、Dreamteck Splineでコースを適当にうねうねと描く。適当なポイントで高低差を付けたら、SimplePoly Cityの道路パーツのメッシュをSplineMeshで延ばして、Mesh Collider付けたら即席コースの完成。なっかなかええやん。

Dreamteck Spline

Dreamteck Splineはスプラインを描いて色々できる多機能ツールアセットで、一番お世話になってるアセットかも知れない。
今のUnityは標準のスプラインツールが付いてて、今後はそっちに移行した方が色々都合がいい気もするけど、使いやすい上に高機能、多機能で、何より枯れて安定してるんで、あれもこれもに使えてなかなか手放せない。しかもUnity標準のスプラインツールができたからか、現在は無料アセット(!)になっててブラボー。オヌヌメ。
高機能、多機能な分、マニュアルも長大で、難解な文章は和訳が意味不明で、長年使ってるけど理解度はそれほど高くない。(;´Д`)

道路パーツが平面でショボかったんで、道路の厚みと橋脚をProBuilderで作って追加したら、道路のテクスチャが外れてしまった。「Material IDs」にチェックを入れて、Materialesのインデックスを「Target ID」に入れたらいいという事を後に知るが、この時は対策が分からずで放置。(;´Д`)
製作の8割方は何か調べてる時間やったりするなあ。

次回、「ゲームっぽくする」につづく。


2025-08-23 08:58:00 #TIMATK

TIMATK:開発の経緯

6月半ば頃に3D版BABサイトに遊園地を設置して、遊園地の入場にコインとか要るようにしようかな→コインの入手はどうしようかな→ゲームでなんかクリアしたら貰えるとか?→なんかゲーム作るか、という流れ(コインで入場は気が変わってどうしようかなと考え中)。
手持ちアセットに車輌操作系がいくつかあって、前から「車のゲーム作りたいなあ」と思ってたんで、これ幸いと。

Unityアセット

Unityで開発するゲームやコンテンツ用に、3DモデルやUI画像、各種ツール類を「アセット」と呼んで、UnityのAssetStoreやその他のサイトでフリーで配られたり販売されてたりしてる。

開発層を広げるためやチャリティ企画なんかで、そうしたアセットをいくつかパックにしたものが格安で度々販売されてて、アセット一つ分の価格で10や、時には20のアセットが手に入るんで、買おうと思ってたアセットがある場合はもちろん、将来使いそうなアセットが含まれてる度に買ってたら、手持ちのアセットが恐ろしい数になったw。

まあしかし、そうそううまくは行かんもんで、VRやWebGLしかやってないせいもあって、高品質系オブジェクトや負荷が高いツール類はまあ使えんし、シェーダー関連も環境制限に引っかかりまくりで粗方使えんし、ここ数年は開発環境がMacなんで、GPU関係やWindows依存の拡張機能やツール類も使えない、と結構使えんもんがある。そういうことはアセットページや分かり易いところに結構書いてない事が多くて(書いとけ!)、買って試してみるまで分からんかったりするんで、当てにしたまま使い時が来て使ってみたらダメでしたってパターンはホンマ枚挙にいとまが無い。(;´Д`)

その上に、作り方や使い方が制作者によってバラバラで、結構碌な説明も付いてなかったりするし(最近はかなりマシになったなあ)、解説や資料が付いてても、ほぼほぼ英語オンリーなんで、先ずはGoogle翻訳で翻訳作業からが常態で、翻訳しても英語がスラングやったりブロークンやったりで意味が分からんかったり、表記が専門用語なのかメニュー項目なのかパラメータ名なのかを英文や画面と突き合わせて読み解いていくという苦行が前庭になるんで、ホンマ英語辛い。(;´Д`)

それでも使えるアセットに当たると作業効率やクオリティは素晴らしく上がるし、自分のスキルでは到底実現出来ないレベルが手に入ったりもするんで、そういう時に全て報われる。

Arcade Vehicle Physics

ということで、そうした手持ちのアセットから、今回はWebGL用に軽めの操作系で凝った演出(スモークやスキッドマーク)が標準装備で、AIのアセットもあるArcade Vehicle Physicsをチョイス。
Arcade Vehicle Physicsは車のモデルに4 Low Poly Toon Carsが必要と最初気付かず、「え?車のメッシュ入って無いがな!」と別のポリ系車輌アセットをアサインしたりして面倒くさかったが、後でアセットページに書いてたと気付く。(;´Д`)
そもマニュアルがハズレで、Youtubeの動画を最初に見るべきやった。最近動画の解説増えたけど、検索できんし一定時間見なあかんし、内容が込み入ると色々使い辛いんよなあ。なので最近はObsidianで動画埋め込みにメモ書きするのがもっぱらのパターン。

次回、「コース作成」につづく。


2025-08-21 17:20:00 #TIMATK

TIMATKアップデート

TIMATKをアップデートしました。

車やコースはと同じです。メニュー構成を変えたり、コーナーにガード付けたり、走行距離(%)表示を追加したり、広告を設置(まだ未稼働)したりしてます。

ガードに使用したアセットは「Barrier & Traffic Cone Pack」(既に販売終了)。
購入済みアセットはマイアセットから入手出来るけど、アセットページは閉鎖されて調べにくいし(ちなみに「Barrier & Traffic Cone Pack」の現在のアセットページはこれ)、最近は大人の事情か知らんがマイページから消えてる場合もあるんで困る。