Language

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

Translated by machine

投稿記事

ティラノスクリプトの記事(3)

ななづこ/水温25℃ 2021年11月14日 11:28

【ティラノスクリプト】スキップ中は演出をカットする

こんにちは、ななづこです。
今回は「スキップ中の待ち時間を減らして、スキップをさくさく快適にしてみよう!」のお話です。
周回プレイが快適になるので、テストプレイの時も助かります。

※下記コードの動作確認は、ティラノスクリプトVer511bで行いました。

スキップ中かどうかの判定

スキップ中は「TG.stat.is_skip」がtrueになるので、それを使ってスキップ中かどうかを判定します。

; スキップの状態を変数に記録
[eval exp="tf.is_skip = TG.stat.is_skip"]

; 処理の出し分け
[if exp="tf.is_skip != true"]
	通常時

; スキップ中の処理
[else]
	スキップ中

[endif]

このように、スキップをしている時・していない時で処理の出し分けをすることができます。
(TG.stat.is_skipをifに入れても動かなかったので、変数に値を渡してます)

condでも同じです。

; スキップの状態を変数に記録
[eval exp="tf.is_skip = TG.stat.is_skip"]

; スキップしてない時は実行
[wait cond="tf.is_skip != true" time="1000"]

wait・mask・カメラ操作など待ち時間が発生するものや、効果音などはスキップ中に実行されないようにすると、スキップが快適になるかなと思います。

マクロにしておくと便利です。

[macro name="wait_s"]
	; スキップの状態を変数に記録
	[eval exp="tf.is_skip = TG.stat.is_skip"]
	
	; スキップしてない時は実行
	[wait cond="tf.is_skip != true" time="%time"]
[endmacro]

[wait_s time="1000"]

応用

上記の応用ですが、「スキップ中は待ち時間を減らす」という考え方もあります。
処理の出し分けでは不都合がある場合(処理を分けるのがめんどくさい時とか…)に使えます。

; スキップの状態を変数に記録
[eval exp="tf.is_skip = TG.stat.is_skip"]

; 通常時の待ち時間
[eval exp="tf.time = 1000"]

; スキップ中の待ち時間
; ※「time="0"」にすると稀に進行停止することがあるので、10推奨です。
[eval cond="tf.is_skip == true" exp="tf.time = 10"]

; 実行したいタグに変数で待ち時間指定
; ※「&」をつけることで、tf.timeの中にある数値が使われます。
[wait time="&tf.time"]

↓マクロにするとこうなります。

[macro name="wait_s"]
	; スキップの状態を変数に記録
	[eval exp="tf.is_skip = TG.stat.is_skip"]
	
	; 通常時の待ち時間
	; ※「mp」はマクロの中でだけ使える一時変数です。
	[eval exp="tf.time = mp.time"]
	
	; スキップ中の待ち時間
	[eval cond="tf.is_skip == true" exp="tf.time = 10"]
	
	; 実行したいタグに変数で待ち時間指定
	[wait time="&tf.time"]
[endmacro]

[wait_s time="1000"]

以上です!

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

ななづこ/水温25℃ 2021年09月23日 20:07

【備忘録】ティラノスクリプトのメニューをカスタマイズする

こんにちは、ななづこです。

先日、はこにわのみこで実装しているメニューのアニメーションについて
ご質問をいただいたので、私がやっているカスタマイズ方法をご紹介します。
わかりやすいように、サンプルゲームを改変していきます。

こんな感じのものを作ります。
以下、ティラノスクリプトのバージョンはVer510hを使用しています。

記事内のコードをそのまま使用していただいて構いませんが、
独学で改変しているため、実装は自己責任でお願いいたします。

▼もくじ
1.メニューの構成ファイルについて
2.HTMLを編集する
3.cssを編集する
4.メニューに機能を追加する

1.メニューの構成ファイルについて

メニューは主に下記のファイルで動作しています。

①tyrano/html/menu.html(HTML)
画像やボタンの表示、その位置の指定などが行われています。

②tyrano/tyrano.css(css)
メニューエリアそのもののサイズ・位置の指定など、
メニューを表示するために必要なものが記述されています。
今回は新しくcssファイルを追加するため、このファイルは編集しません。

③tyrano/plugins/kag/kag.menu.js(js)
メニューの機能の設定、表示・非表示の切り替えなどが行われています。
ここでフェードイン表示の指定がされています。
今回は「4.メニューに機能を追加する」でのみ編集します。

2.HTMLを編集する

ひとまず綺麗にする

まずは「tyrano/html/menu.html」を編集します。
一旦、デフォルトのデザインから一番シンプルな状態にします。

<div>
	<div class="display_menu block_menu">
		<div class="menu_close">閉じるボタン</div>

		<div class="menu_save">セーブ</div>
		<div class="menu_load">ロード</div>
		<div class="menu_window_close">台詞枠非表示</div>
		<div class="menu_skip">スキップ</div>
		<div class="menu_back_title">タイトルに戻る</div>
	</div>
</div>

ゲームを起動してメニューを開いてみると、このようになります。

ほぼ何もデザインがない、一番シンプルな状態ですね。
これでもメニューとしての機能は動作しています。

「menu_〇〇」のクラスがついているものをクリックすると、
jsを通じて作動する仕組みになっています。

メニューを囲っている「<div class="display_menu block_menu">」が
メニューの表示・非表示に関わるクラスになっているため、
その内側でdivを足したりしてデザインを作っていきます。
(外側に作ると、メニューの表示・非表示に連動されなくなってしまうため)

デザインをつくる準備をする

冒頭でお見せしたデザインにするために、ちょっと追加・変更します。

<div>
	<div class="display_menu block_menu">
		<div class="custom_menu_bg">
		</div>
    
		<div class="custom_menu">
			<div class="custom_menu_inner">
				<div class="menu_close">
					<img src="tyrano/images/system/menu_close.png">
				</div>

				<div class="menu_btn">
					<div class="menu_save">SAVE</div>
					<div class="menu_load">LOAD</div>
					<div class="menu_window_close">WINDOW HIDE</div>
					<div class="menu_skip">SKIP</div>
					<div class="menu_back_title">TITLE</div>
				</div>
			</div>
		</div>
	</div>
</div>

変更箇所の解説

①divの追加
<div class="custom_menu_bg">
</div>

<div class="custom_menu">
	<div class="custom_menu_inner">
		~
	</div>
</div>

上記のdivを追加しました。
全体の背景に色をつけるためのdiv要素と、
画面外から現れるアニメーションにするための枠を作りました。

②閉じるボタンを画像に変更
<div class="menu_close">
	<img src="tyrano/images/system/menu_close.png">
</div>

デザインの調整です。
画像の場所は「tyrano/images/system」です。
念のため画像も置いておきますので、必要でしたらご活用ください。

menu_close.png (1.09kB)

ダウンロード
③メニューのテキストを英字に変更

「SAVE」「LOAD」など。これもデザインの調整です。
こちらはお好みに合わせて変更してください。
もちろん、デフォルトのメニューのように画像にしても大丈夫です。

これでHTML側の準備は完了です。

3.CSSを編集する

cssファイルを準備する

cssファイルを作成して、ゲームに読み込みましょう。

①「data/others」の中にcssファイル「style.css」を作成する。
 ※cssのファイル名はお好きなもので大丈夫です。

②「first.ks」または「title_screen.ks」でcssを読み込む。

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

※既存のtyrano.cssに記述を追加しても実装できますが、
ティラノスクリプトがアップデートされた際に
差し替えが必要になったりするかもしれないので、
既存のファイルはできるだけ弄らずに新しく用意する方が安全です。

cssを記述する

▼style.css

/* メニューの土台 */
.custom_menu {
	width: 300px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #252942;
	animation: menuSlideIn .3s 0s forwards;
}

@keyframes menuSlideIn {
    0% { transform: translateX(300px); }
    100% { transform: translateX(0); }
}

.custom_menu .custom_menu_inner {
	width: 100%;
	height: 100%;
	position: relative;
}

/* 閉じるボタン */
.custom_menu .menu_close {
	width: 50px;
	height: 50px;
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
}

/* メニューボタンの表示エリア */
.custom_menu .menu_btn {
	padding-top: 170px;
}

/* メニューボタン */
.custom_menu .menu_btn div {
	width: 70%;
	margin: 25px auto 0;
	padding: 8px 15px;
	border-radius: 30px;
	color: #252942;
	background: #fff;
	font-size: 22px;
	font-weight: normal;
	cursor: pointer;
	opacity: 0;
}

/* メニューボタンのアニメーション */
@keyframes menuItemSlideIn {
  0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}

.custom_menu .menu_btn div:nth-child(1) {
	animation: menuItemSlideIn .5s .1s forwards;
}
.custom_menu .menu_btn div:nth-child(2) {
	animation: menuItemSlideIn .5s .15s forwards;
}
.custom_menu .menu_btn div:nth-child(3) {
	animation: menuItemSlideIn .5s .2s forwards;
}
.custom_menu .menu_btn div:nth-child(4) {
	animation: menuItemSlideIn .5s .25s forwards;
}
.custom_menu .menu_btn div:nth-child(5) {
	animation: menuItemSlideIn .5s .3s forwards;
}

/* メニューの背景 */
.custom_menu_bg {
	background: #fff;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.4;
}

ざっくり解説

custom_menu

.custom_menu {
	width: 300px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #252942;
	animation: menuSlideIn .3s 0s forwards;
}
@keyframes menuSlideIn {
    0% { transform: translateX(300px); }
    100% { transform: translateX(0); }
}

メニューエリアのサイズ・位置を指定しています。紺色の部分ですね。
「animation」と「@keyframes」が表示アニメーションの記述になります。
0%(アニメーション開始)地点でメニューを画面外に追いやっておいて、
100%(アニメーション終了)にかけて位置補正を0に戻す(画面内に戻す)
という挙動になっています。

cssアニメーションについてはこの辺りの記事がわかりやすかったです。
CSSアニメーションで動きを指定しよう | 動くWebデザインアイディア帳
CSSアニメーション 入門 - Qiita

custom_menu_inner

.custom_menu .custom_menu_inner {
	width: 100%;
	height: 100%;
	position: relative;
}

「position: relative;」(要素の配置基準)を指定するために用意しました。
閉じるボタンを「position: absolute;」で相対的に配置するため、
「.custom_menu_inner」を基準(relative)に指定してます。

positionについてはちょっとややこしい話になるので省略しますが、
下記の記事が分かりやすかったです。
positionプロパティを身に着けよう!基本的な知識と使い方を解説!(基礎編) : ビジネスとIT活用に役立つ情報

menu_close

.custom_menu .menu_close {
	width: 50px;
	height: 50px;
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
}

閉じるボタンの位置を指定しています。
上記「.custom_menu_inner」を基準に、右上に配置されます。

menu_btn

.custom_menu .menu_btn {
	padding-top: 170px;
}

メニューボタン全体の位置を調整しています。
簡易的に、縦の中央揃えに見えるように、上に余白を作っている状態です。

menu_btn div

.custom_menu .menu_btn div {
	width: 70%;
	margin: 25px auto 0;
	padding: 8px 15px;
	border-radius: 30px;
	color: #252942;
	background: #fff;
	font-size: 22px;
	font-weight: normal;
	cursor: pointer;
    opacity: 0;
}

メニューボタンのデザインです。
背景色を指定したり角丸にしたりしています。
アニメーションで表示させるために「opacity: 0;」で透明にしておきます。

@keyframes menuItemSlideIn {
  0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}

.custom_menu .menu_btn div:nth-child(1) {
	animation: menuItemSlideIn .5s .1s forwards;
}
.custom_menu .menu_btn div:nth-child(2) {
	animation: menuItemSlideIn .5s .15s forwards;
}
.custom_menu .menu_btn div:nth-child(3) {
	animation: menuItemSlideIn .5s .2s forwards;
}
.custom_menu .menu_btn div:nth-child(4) {
	animation: menuItemSlideIn .5s .25s forwards;
}
.custom_menu .menu_btn div:nth-child(5) {
	animation: menuItemSlideIn .5s .3s forwards;
}

メニューボタン1つ1つにタイミングを指定して、
ちょっとずらしつつ右から左に移動しながら表示させてます。

※ちなみに「div:nth-child(〇)」は、〇番目のdivという意味の指定です。
もしメニューにボタンを追加した場合は、初期状態だと透明になるので
div:nth-child(6)、div:nth-child(7)…と追加して表示させてください。

custom_menu_bg

.custom_menu_bg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: #fff;
	opacity: 0.4;
}

背景を画面全体に敷いて、背景色と透明度を指定しています。

以上で完成になります。

4.メニューに機能を追加する

上級者向けになりますが、こちらもご紹介しておきます。
システムは「tyrano/plugins/kag/kag.menu.js」に記述されています。
こちらに記述を追加して、メニューの機能を追加していきます。

試しにセーブボタンのクラス「.menu_save」で検索すると、
下記のコードがヒットします。

layer_menu.find(".menu_save").click((function(e){
	if(1!=button_clicked){
		button_clicked=!0;
		that.displaySave();
		e.stopPropagation()
	}
}));

近辺を見ると「layer_menu.find(".menu_〇〇")」が並んでいますよね。
この辺りでメニューの機能が定義されています。

なので新しく機能を追加したい場合は、この並びに

layer_menu.find("クラス名").click((function(e){
	内容
}));

を追加することで、メニューの機能を追加することができます。

バックログボタンをつくる

「.menu_save」を参考に追加します。

▼kag.menu.js
layer_menu.find(".menu_log").click((function(e){
	if(1!=button_clicked){
		button_clicked=!0;
		that.displayLog();
		e.stopPropagation()
	}
}));
▼menu.html
<div class="menu_log">LOG</div>

オートボタンをつくる

「.menu_skip」を参考に追加します。

▼kag.menu.js
layer_menu.find(".menu_auto").click((function(e){
	layer_menu.html("");
	layer_menu.hide();
	1==that.kag.stat.visible_menu_button&&$(".button_menu").show();
	that.kag.stat.is_auto=!0;
	"none"==that.kag.layer.layer_event.css("display")||that.kag.ftag.nextOrder();
	e.stopPropagation()
}));
▼menu.html
<div class="menu_auto">AUTO</div>

以上が、私のメニュー改変方法でした!
ご参考になりましたら幸いです。

もし記事内に誤りなどありましたら、
恐れ入りますがこちらなどからご連絡いただけると幸いです…!

ありがとうございました。

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

ななづこ/水温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という相棒で戦っているので、ティラノスクリプトそのもののことは
実のところまだよくわかっていなかったりします。
あれこれ試行錯誤しながら組んでいくのがとても楽しいです。

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

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

月別アーカイブ

限定特典から探す

記事を検索