ティラノライダーの使い方、発展編(というかほぼ開発者ツールの話)
というか前述の記事はこの記事のために書いたまである
まずはティラノライダーでゲームを開始して、画像赤丸の部分をクリックしましょう。
https://gyazo.com/1c1a772312edd5634b6aa8f50e66ba0a
すると、こんな感じのウィンドウが表示されます。こいつが開発者ツールです。
https://gyazo.com/4b7e70e47251784b86e5d84158b5c0b1
UIは英語ですが、メインで使う機能についてはなんとなくわかると思います。
タブ(虫眼鏡アイコンの横のメニュー)を順番に見ていきましょう。
順番に見ていきますが、使うのはだいたいElementsとConsoleです。
Elements
ティラノスクリプトのゲームはDOM(html要素のこと)で構成されている…そしてElementsタブはDOMを操作できる…つまりElementsタブではティラノスクリプトの画面が直接いじれる!!!
https://gyazo.com/4b7e70e47251784b86e5d84158b5c0b1
画像では左側に現在画面に表示されているhtml要素が、右側に各要素に適用されているスタイル(cssで書くやつ)が表示されています。
このhtmlもcssも、開発者ツールの画面上で直接編集することができます。
https://gyazo.com/1bb2dd4c572fc094ae245417fd88068c
このようにhtml要素にフォーカスを当てた状態で
https://gyazo.com/b5dd7ab997bcae2f0a8bd29949a9f35a
css側のtopとかの値をクリックすると編集できるようになります。
https://gyazo.com/6246d51265a583ae42888ab8379956a7
で、値を変更すると、このように即座にゲーム画面にも反映されます。
ティラノスクリプトの[image]タグなど、top/leftを指定できるものについては、ゲーム画面上では各要素のcssのtop/leftがそれぞれ対応しているので、開発者ツール側で細かい数値の調整をして、実際のタグ記述に落とし込む、といったことができます。
とはいえ、そもそもティラノスクリプトのDOM構成がわかってないとどこに何の要素があるのかわからんちんということになるんですが、そのへんはあとでティラノスクリプトのDOM構成まとめとかの記事を書くかもしれない、書かないかもしれない Network
読み込んだリソース(画像とか音声とかjsとかcssとか全て)の一覧と読み込み時間が表示される。
パスが違ってたりして読み込めなかったファイルは赤く表示されるので、画像が表示されないとか音声が聞こえないときはここもチェック
https://gyazo.com/4b62cac1afe1504faf388a75103dc284
↑いちばん左に書いてあるファイルパスが赤く表示されていたら、そのファイルは読み込めていない。
Sources
Consoleタブから飛んでくる画面
エラーが発生している箇所がわかったりする。わからないこともある。がんばれ
Timeline
重い処理があったときに原因究明のために使ったり使わなかったりする。
私はあんまり使わない
Profiles
これもなんか…webサイトのアクセシビリティとかそのへんの分析に使うやつ…
ゲーム作る上ではそんなに重要じゃないと思う、たぶんおそらくきっと
Resources
ティラノライダーのブラウザ(nw.js)内に保存されているストレージの管理
localStorageの中身を消すと実質セーブデータの全消去ができるよ
Audists
PCからモバイルでページを見たときのシミュレーションとかするやつだったと思う、たぶん
使ったことがないでござるよ
Console
tyrano.plugin.kagオブジェクトの中身を表示している様子
https://gyazo.com/4381a0308962bd2748da35ff16113359
[iscript]〜[endscript]に記述したjavascriptとかにエラーがあるとここに詳しく表示されます。ヤッタネ
ところが[loadjs]で読み込んだjavascriptのエラーは、js内でエラー処理してない限り表示されません。マイッタネ
エラーメッセージは基本英語ですが、そのままGoogle先生にぶち込めばだいたい対処方が出てきます。
あと、Consoleタブ内で直接javascriptを実行することもできます。
ちょっとjQueryのセレクタ試したいときとかに便利
まとめ
ティラノライダーの開発者ツールは、Google Chromeの開発者ツールとだいたい同じなので、もっと詳しく知りたい方はChromeの開発者ツールについて書かれたものも読んでみるといいと思います。
各機能ごとに本が一冊書けるレベルで奥深いので
参考