Language

  • 日本語
  • English
  • 简体中文
  • 繁體中文
  • 한국어

Translated by machine

投稿記事

2021年 01月の記事(2)

ななづこ/水温25℃ 2021年01月29日 21:38

【備忘録】ティラノスクリプトでHTMLを使う(3/8 更新)

こんにちは。HTMLが大好き、ななづこです。

今回は、ティラノスクリプトでHTML(とcssとjs)を使おうというお話です。
基本的な内容なので、既にいろんな方がまとめていると思うのですが、
自分の備忘録も兼ねてまとめました。

HTML(とcssとjs)があれば何でもできる!

----------------------------------------
【2021.03.08 更新】
・jsの記述方法の解説が不足していたので、追記しました。
・誤表記修正しました。

----------------------------------------

▼もくじ
1.使用するタグ【3/8 更新】
2.[html]が活躍するところ
3.コードの例【3/8 更新】
4.[html]とティラノスクリプトタグの併用について
5.さいごに

1.使用するタグ【3/8 更新】

※3/8 [loadjs]の誤表記を修正しました。[iscript]の解説を更新しました。

[html]~[endhtml]

この中にhtmlタグを記述していきます。
表示させたいタイミングで、シナリオファイルに記述します。
特徴としては、
・ゲーム画面の一番手前に表示される
・ティラノスクリプトのタグも併用できる(詳しくは後記)
・消したい時は[cm]で消せる
という感じになります。
詳しいことは公式のタグリファレンスをご参照ください。

[html name="test"]
	<p>test</p>
[endhtml]

分かる方向けに説明しておくと、このタグが実行されると
index.htmlの下記の位置(layer_freeの中)に<div>が挿入されます。
※ティラノスクリプトVer506a現在


(デバッグの「Elements」タブで確認できます)

nameを指定すると、上記のように親要素に同名のclass名がつきます。
指定しなくても大丈夫です。

[loadcss]

外部cssファイルを読み込むタグです。
first.ksなど、最初の方に記述しておきます。
cssファイルは「data/others」の中に置いてください。

[loadcss file="./data/others/myStyle.css"]

[loadjs]

外部jsファイルを読み込むタグです。
first.ksなど、最初の方に記述しておきます。
jsファイルは「data/others」の中に置いてください。

[loadjs storage="myScript.js"]

※3/8 「loadcss」と表記してしまっていましたが、正しくは「loadjs」です。

[iscript]~[endscript]

ティラノスクリプトでjsを埋め込むタグです。
外部jsの関数を呼び出したり (詳しくは「3.コードの例」)
「一か所でしか使わないしコードも短いな…」なんて時に使います。

[iscript]
	console.log("テスト");
[endscript]

2.[html]が活躍するところ


『リベリオン・ヒーローズ』より)

例えばこの画面の表情パーツのボタンは、htmlベースで作りました。
ボタンの文字・色・配置などなど、htmlとcssで実装しています。
これは「画像でいちいち書き出して座標ちまちま指定するのめんどくさい」
と思ったので、htmlで組んだ記憶があります。
画像が減るのでゲームの容量もちょっと軽くできます。

『リベリオン・ヒーローズ』より。開発当時のキャプチャです)

この画面もhtmlを使っています。
スマホ画像のアニメーションはティラノスクリプトの[anim]ですが、
アイコンと台詞のところはhtmlとcssで配置して、動きはjsで作ってます。
これは、下からすいすい上がって行くアニメーション演出がやりたくて、
「ティラノスクリプトわからん…!jsでなら確実にできるのに…!」
と思ったので、htmlベースで実装しました。web脳です。

3.コードの例【3/8 更新】

※3/8 外部jsの説明を追記しました。

htmlで作ったボタンで、他のラベルにジャンプさせるサンプルです。

html

[html]
	<div class="test-btn">ボタンです</div>
[endhtml]

css

/* ボタンのデザイン */
.test-btn {
  color: #000;
  background: #fff;
  transition: .3s;
}

/* マウスが乗っている時のデザイン */
.test-btn:hover {
  color: #fff;
  background: #000;
}

js(埋め込む場合)

[iscript]
	// 「.test-btn」がクリックされた時の動作
	$(".test-btn").click(function(){
		// jumpタグを実行
		tyrano.plugin.kag.ftag.startTag("jump", {storage:"title.ks", target:"*start"});
	});
[endscript]

「tyrano.plugin.kag.ftag.startTag」を使えば、
jsからもティラノスクリプトのタグを実行することが可能です。
今回の例では、jumpタグを実行させてみました。

js(外部jsを使う場合) ※3/8 追記

外部jsを使う時は、ちょっと書き方が変わります。
htmlをクリックしてjsを動かす…という動作をさせたい場合、
htmlが記述された後にjsを記述しないと動いてくれません。
なので外部jsには、任意のタイミング(htmlを記述したあと)で
jsの機能を設定できるように記述します。

▼外部jsでの記述

function btnTest(){
  // ↓埋め込みjsと同じ記述
  $(".test-btn").click(function(){
    tyrano.plugin.kag.ftag.startTag("jump", {storage:"title.ks", target:"*start"});
  });
  // ↑埋め込みjsと同じ記述
};

「btnTest」という関数に、呼び出したい機能をセットします。
この時点では、まだボタンを押しても反応しません。

▼ティラノスクリプトでの記述

[iscript]
	btnTest();
[endscript]

ボタンになるhtmlを表示したあとに記述して
外部jsに登録した内容を呼び出します。
これで「click」の動作が付いて、ボタンを押すと反応するようになります。

「btnTest」は好きな言葉に変えていただて大丈夫です(半角英字)

4.[html]とティラノスクリプトタグの併用について

公式のタグリファレンスにもある通り、
[html]~[endhtml]の中にはティラノスクリプトのタグも記述できるため、
変数やif文を使うことができます。
例えば、クリア状況によって出し分けたい時は…

[html] 
	[if exp="sf.gameclear == true"]
		<p class="hogehoge">ゲームクリアしたよ</p>
	[else]
		<p class="hogehoge">ゲームクリアしてないよ</p>
	[endif] 
[endhtml]

こんな感じで記述できます。

5.さいごに

ティラノスクリプトを触る時、私は吉里吉里という前世の記憶と
htmlという相棒で戦っているので、ティラノスクリプトそのもののことは
実のところまだよくわかっていなかったりします。
あれこれ試行錯誤しながら組んでいくのがとても楽しいです。

ざっくりとまとめてみましたが、もし分からない点などあれば
お気軽にツイッターお題箱からご質問いただければと思います!

\いいね・ツイートで記事ランキングアップ!/
ツイート

ななづこ/水温25℃ 2021年01月01日 22:38

あけましておめでとうございます!

新年あけましておめでとうございます!
おせちを買いすぎて、来週いっぱいくらいまで毎食おせちになりそうです。
今年もよろしくお願いします!

今年はゲーム制作と絵の練習を頑張ろうと思っています。
というわけで、早速練習も兼ねて描き初めしました。とてもえらい。
できれば月に1つは背景つきのがっつりしたイラストを描いて行きたい…
できれば…

ゲーム制作の方は、次回作が恐らくリベヒロと同等かそれ以上の長さに
なりそうなので、順調に進んでも1年制作コースかなと感じています。
なので今年は、できればシナリオ・立ち絵まで完成させて
スクリプトまで進められればノルマ達成かな~と思っています!
できれば…

そんな感じで今年も頑張って行きますので、どうぞよろしくお願いします!

\いいね・ツイートで記事ランキングアップ!/
ツイート

月別アーカイブ

限定特典から探す

記事を検索