2ページ目から基礎講座用にまとめ直してあります。
1ページは残します。いろんな場所にリンクしてあるため。
☆改造は公式サポート外です。自己責任でお願いします。この記事によってゲーム画面がバラバラになったとしても責任は負いません。勉強あるのみ。
スクリプト側で要素の変更(2ページ目) 項目
- 【loadjs】の使い方
- ティラノスクリプトのjQueryで指定できるDOM構成を見るには。おさらいツールバーの表示
- ティラノスクリプト iscript で使える変数指定
- ティラノスクリプトのjQueryで要素を指定。
- ティラノスクリプトの要素の主なクラス名
- jQuery メソッド他
- 指定した要素のHTMLに指定値をセットする。書き換えるhtml
- 指定した要素のテキストを書き換えるtext
- 指定したコンテンツを要素の末尾に挿入append
- 指定したコンテンツを各要素の先頭に挿入するprepend
- 要素の中身を他の要素の先頭に挿入する。prependto
挿入系はV450のバージョンでは不具合が出るようです。v455では問題ありませんでした。
- 要素の属性を変更、追加(idをつけたいとき)
- 要素にCSSクラス名をつける
<<スクリプト側で要素の変更 (1ページ目)にもどる
スクリプト側で要素の変更(3ページ目) へお願いします。
【loadjs】
jsファイル、プラグイン呼び出し、または一般のjqueryプラグイン<script>で呼び出す代わりに
詳細をみる
;シナリオ上で呼び出したいときに下記を書く
[loadjs storage="sample.js" ]
;【loadjs storage="ファイル名" 】ファイル名は指定してください
ファイルはotherのフォルダに保存
独自に作った場合、拡張子は、.jsで保存
(場合によっては、)動かすには[s]で一度とめる必要がある
シナリオで[s]でとめた場合
$('.0_fore').click(function () {
alert('こんにちは!');
TG.kag.stat.is_stop = false;
});
クリックしたら[s]を無効にする記述を書く
CSV操作参照
ティラノスクリプトのjQueryで指定できるDOM構成を見るには?/おさらい ツールバーの表示
詳細をみる
◎デベロッパーツールという
windows
ティラノライダーで表示したときにゲーム画面の右上にこの様なボタンが表示されます。
またはネット上でみた場合はF12ボタンを押してください
この画面が表示されます。
デフォルトはコンソールが表示されている
見た目の改造には、エレメントを表示が必要です。切り替えますと
このような表示になります。
見て理解するには、HTMLとCSSの最低限の知識が必要です。
☆ポイント 豆知識:クラスは複数つけることができる
詳細をみる
バージョンについての差異は確認してません。
よく使うもの
TG.kag.ftag.startTag("skipstop");
TG.kag.ftag.startTag("jump",{target:"*next",storage:"file.ks"}) ジャンプ
ティラノスクリプトの要素の主なクラス名
詳細をみる
キャラクターのクラス tyrano_chara
class="img1 tyrano_chara"
img1は固有クラス名
レイヤークラス layer layer_fore layer_back
0_fore /0_back
1_fore /1_back
2_fore /2_back
0~2は固有クラス名
tyrano_base
$(".tyrano_base").append(obj);
foreは前にでてるレイヤー backはトランジションにつかうレイヤーで普段前に表示されていない
この他にもnameで指定したものが使える、
layer_event_click (画面をクリックしたらシナリオが進む要素)もあるがイベント処理以外では、動かす必要はないはず。
layer_menu class セーブロード画面など
ティラノスクリプトのjQueryで要素を指定。
※本格的に学びたい人は、きちんとした書籍をご購入ください。軽い説明です。
詳細をみる
ティラノスクリプトで基本的に使うjquery記述
$(".nameで決定した名前").△△("変更内容");
$(".Elementでみたclass名").△△("変更内容");
. の部分はお約束です。
(idが指定してある場合は#ですが、ティラノスクリプトにおいては、あまりないので割愛)
△△の部分は色々あるのでこれから覚えていきましょう
name属性を指定しておくと、スクリプトから、 $(".変数名") という形でアクセスできるので値を変更できます。
Q.name属性って何? .nameで決定した名前って何?
タグを記述するときに使う name という部分 個別に名前を割り当てる部分です。
[chara mod
name="youko" ~~]
[ptext layer=0
name="time1"~~]
name="**" の**という部分
実際にやってみましょう 文字 ptextの変更
[layopt layer=0 visible=true]
[ptext layer=0 name="time1" x=200 y=200 text="変更前の文字" ]
[iscript]
$('.time1').text("テキストの変更後です");
[endscript]
[s]
例えば、 を変更するなら上記のようにname属性を指定しておくと
スクリプトから、 $(".変数名") という形でアクセスできるので値を変更できます。
注意: ptextは認識するまで時間がかかるので、練習時は、シナリオはじめに書かないでください。
[p]二回目あたりでスクリプトをためしてください。
~結果~
jQuery メソッド他
メソッドはオブジェクトを操作する命令文を指します。
※本格的に学びたい人は、きちんとした書籍をご購入ください。軽い説明です。
"詳細をみる"
◎テキストの書き換えなど
【例】$(".test").html("hello world!");
html(val)
指定した要素のHTMLに指定値をセットする。書き換える
レイヤーを指定しないように
何度やってもテキストの書き換えが起こらない場合
[ptext]の下に[wait time=50]を入れる。(数値は適当です)
作成されていないときにスクリプトが読み込まれていない場合がある。
"詳細をみる"
[ptext name="test" text="書き換え前" (~各自の位置指定)]
【例】$(".test").text("hello world!");
text(val)
html(val)に似ているが、これはあくまでテキストなので、”<“や”>“などはエスケープされてHTMLエンティティとして追加される。
$("p.test").text("hello world!");だと完全にテキストのみを指定
何度やってもテキストの書き換えが起こらない場合
[ptext]の下に[wait time=50]を入れる。(数値は適当です)
作成されていないときにスクリプトが読み込まれていない場合がある。
"詳細をみる"
◎要素の挿入など
【例】$(".1_fore").append('<img src="data/image/img.png" style="position: absolute; top: 200px; left: 300px;" width="128" height="128">');
指定したコンテンツを要素の末尾に指定のものを追加する。
ラジオボタン レイヤー表示していないと見れません 左上に作成されるだけ。
[iscript]
function func1(){
var $input = $('<input type="radio" name="radio1,radio" value="0" />').attr("checked", true );
var $label = $('<label name="radio">labeltest1</label>')
$(".3_fore").html($input).append($label);
var $input = $('<input type="radio" name="radio2,radio" value="1" />').attr("checked", false );
var $label = $('<label name="radio">labeltest2</label>')
$(".3_fore").append($input).append($label);
}
func1();
[endscript]
【例】は、場合によっては、@layopt layer=0 visible=true が必要
"詳細をみる"
【例】$('.0_fore').prepend('<img src="data/image/img.png" style="position: absolute; top: 200px; left: 300px;" width="128" height="128">');
指定したコンテンツを各要素の先頭に挿入する。例だとレイヤー0foreに追加
【例】は、場合によっては、@layopt layer=0 visible=true が必要
画像表示だけなら
[iscript]
TG.kag.ftag.startTag("image",{storage:f.day+".png:"fore",layer:"2"});
[endscript]
の方法を確認する
詳細をみる
【例】$('.test').prependto('');
$(A).appendTo(B) BにAが追加される。
一般のjpueryを使用したいときにidが必要な場合など
$('.text1').attr('id', 'idname');
要素にCSSクラス名を追加する