Language

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

Translated by machine

投稿記事

2021年 09月の記事 (2)

ななづこ/水温25℃ Sep/26/2021 20:32

9月の活動報告

こんにちは、ななづこです。
月末になりましたので、今月の活動まとめです!

合作企画に参加します!

https://twitter.com/MorisakiSasa7/status/1438428768670928902 森崎さささん主催の合作乙女ゲーム「ふぁいんど・らぶ」にて、
同級生ルートで参加させていただくことになりました!
キャラクターとシナリオをまるっと書かせていただきます。
素敵な制作者さんばかりで緊張してますが、楽しく頑張ります!

シナリオ優先で作業を進めていたので、無事に第一稿が書き終わりました。
一旦寝かせて他の作業を進めて、気になったところがあれば修正、
という感じの流れで進めて行こうと思ってます!
キャラクターデザインもほぼ固まっているので、近々立ち絵を描く予定です。

これから進捗報告して行ければと思いますので、
応援していただけると幸いです!

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

https://twitter.com/nanaduko/status/1440996459432738818 以前、メニューのアニメーションについてご質問いただいたので、
備忘録として紹介記事を書きました。
お役に立てれば幸いです~

今月の絵

https://twitter.com/nanaduko/status/1439414729168941058 久しぶりにしっかりめの絵を描きました。結構気に入ってます。
でももっと頻繁に描いて行きたいね……

リベヒロのティラノスクリプトV5移植作業

今月中になんとかしたいなと思いちまちまと進めていたのですが、
思いの外修正内容が多くて時間がかかってます…
他にもやることが増えて来たので、合間を見て進めて行こうと思います。


以上です!
来月は合作ゲームの作業を中心に進めて行きたいなーと思ってます。
久しぶりの合作でとてもわくわくしてます。既に楽しい!
他の方の方のルートもとても楽しみです。

引き続き頑張ります!

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

ななづこ/水温25℃ Sep/23/2021 20:07

【備忘録】ティラノスクリプトのメニューをカスタマイズする(※Ver510h時点での内容です)

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

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

こんな感じのものを作ります。
以下、ティラノスクリプトのバージョンは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>

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

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

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

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

月別アーカイブ

限定特典から探す

記事を検索