Canvas上のデータを動的デバッグ(LWF + Vue.js)

オーサリングツールで作成した物はパラメーターを変えると、再パブリッシュ(書き出し)が必要になる。


細かい調整段階に入ってから何回も書き出すのは手間も掛かるし、担当者が居ないと変更も確認も出来ない。


実際にブラウザゲームの開発環境では、デバッグモードで動的にパラメーターを変えてテスト出来るようにエンジニアがツールを作っていたので、(例えば出現率の低いボスのエンカウント率を一時的にテスト者が100%にしたり)オーサリングツールから書き出した物でも同じ事が出来るかテスト。


ツールはLWFを使用し、Canvasアニメーションの紙ふぶき数を動的に変更させてみる。


データのバインディングはVue.jsを使用。フォームのINPUTタグの属性(ディレクティブ)の形で、値変更を検知して対応する処理を書く。

アニメーションは画面上から下に紙ふぶきが舞って行って、全部画面外に出るとループ、その段階で入力値が反映される。

テストは紙ふぶきのデフォルト数が100なので、500や10にすると違いが分かり易い。

 

サンプル確認用URL:https://evofan.github.io/lwf_vuejs/


コード(GitHub):https://github.com/evofan/lwf_vuejs

 

バリデーション表示

 

参考:

フリー画像素材 – BEIZ Graphics ※背景に使用https://www.beiz.jp/web/download/japanese-style/00001.html


Vue.js入門 基礎から実践アプリケーション開発までhttps://www.amazon.co.jp/dp/4297100916/

コメントをどうぞ

メールアドレスが公開されることはありません。 が付いている欄は必須項目です