こんにちは、ななづこです。
先日、はこにわのみこで実装しているメニューのアニメーションについて
ご質問をいただいたので、私がやっているカスタマイズ方法をご紹介します。
わかりやすいように、サンプルゲームを改変していきます。
こんな感じのものを作ります。
以下、ティラノスクリプトのバージョンはVer510hを使用しています。
記事内のコードをそのまま使用していただいて構いませんが、
独学で改変しているため、実装は自己責任でお願いいたします。
▼もくじ
１．メニューの構成ファイルについて
２．HTMLを編集する
３．cssを編集する
４．メニューに機能を追加する
１．メニューの構成ファイルについて
メニューは主に下記のファイルで動作しています。
①tyrano/html/menu.html（HTML）
画像やボタンの表示、その位置の指定などが行われています。
②tyrano/tyrano.css（css）
メニューエリアそのもののサイズ・位置の指定など、
メニューを表示するために必要なものが記述されています。
今回は新しくcssファイルを追加するため、このファイルは編集しません。
③tyrano/plugins/kag/kag.menu.js（js）
メニューの機能の設定、表示・非表示の切り替えなどが行われています。
ここでフェードイン表示の指定がされています。
今回は「４．メニューに機能を追加する」でのみ編集します。
２．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側の準備は完了です。
３．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;
}
メニューボタン１つ１つにタイミングを指定して、
ちょっとずらしつつ右から左に移動しながら表示させてます。
※ちなみに「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;
}
背景を画面全体に敷いて、背景色と透明度を指定しています。
以上で完成になります。
４．メニューに機能を追加する
上級者向けになりますが、こちらもご紹介しておきます。
システムは「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>
以上が、私のメニュー改変方法でした！
ご参考になりましたら幸いです。
もし記事内に誤りなどありましたら、
恐れ入りますがこちらなどからご連絡いただけると幸いです…！
ありがとうございました。
