ティラノスクリプトでスライド式メニューバー・その2

Miz Gracia
·

前回の続きです。「CSSとクラス(HTMLのclassやKSファイルのname)を使えばボタンや画像の位置を変えることができる」ということだけ知っていれば、前回の記事を読まなくても大丈夫です。

↓前回

 

前回は、とりあえずCSSを使ってボタンを動かしました。

しかし、前回だとゲーム起動と同時にボタンが動いてしまうので、プレイヤーの意のままにボタンを動かすことができませんでした。

よって、今回は『プレイヤーがボタンを押したタイミング』で、ボタンや画像が動くようにします。

 

(ゲームは新規プロジェクトを作っていただいても、前回編集したデータを使い回してもOKです。)

  

まずは前回と同じようなことをする

まずは、data/scenario/title.ks を書き換えます。

[button x=135 y=230 graphic="title/button_start.png" enterimg="title/button_start2.png" target="gamestart"]の行を、以下のコードに書き換えてください。(昨日、色々書いた行と同じ行です)

  • data/scenario/title.ks

[button name="slide_btn,up" x=135 y=230 graphic="title/button_start.png" enterimg="title/button_start2.png" target="gamestart"]

前回と違って、「slide_up」ではなく、「slide_btn」と「up」という2つの名前をカンマ区切りでつけています。

 

次に、CSSを書きます。tyrano/css/animate.cssの最後に以下のコードを書いてください。

@keyframes slideUp {

0% {

transform: translateY(0);

}

100% {

transform: translateY(-200px);

}

}

.slide_btn.up {

animation: slideUp 2.5s forwards;

}

@keyframes slideUp〜のところは、前回の最初の方に書いた内容と同じです。

前回と違うのは、「.slide_up」ではなく、「.slide_btn.up」と書いているところです。これは、「slide_btnとupの両方の名前がついているものに対して使うスタイルですよ」という意味になります。

これで、ゲームをプレイしてみてください。前回と同様に、ボタンが上にスライドするはずです。

 

name(クラス)の一部を消してみる

さて、先ほどname="slide_btn,up"というnameを書きましたが、今度は以下のように書き換えてください。

  • data/scenario/title.ks

[button name="slide_btn" x=135 y=230 graphic="title/button_start.png" enterimg="title/button_start2.png" target="gamestart"]

先ほどは「slide_btn,up」でしたが、今度は「slide_btn」のみになりました。このままゲームをプレイしようとするとどうなるでしょう。

ボタンが動かなくなりました。

これは、CSSで「slide_btnとupの両方の名前がついているものに対して使うスタイルですよ」というのを書いたにも関わらず、STARTボタンには「slide_btn」の名前しかついていないので、STARTボタンにはスタイルを適用しないよ〜という状態になっています。

逆に言うと、「slide_btnっていう名前のボタンに、あと”up”って名前もついたら動くんだけどな〜( ˙ㅂ˙)”up”がないから動かせないな〜( ˙ㅂ˙)」という状態になっているということです。

なので、こうなったら『プレイヤーが自分の操作で、slide_btnっていう名前のボタンに「up」って名前もつけられる』という状態にしましょう。

下準備

まずは、テキトーなボタンを用意します。

data/scenario/title.ksに、以下のコードを付け加えます。

※ 解説通りの挙動にするため、[s]が書いてある行の上の行に書きましょう!

  • data/scenario/title.ks

[button x=635 y=320 fix=true target="*click" graphic="config/button_unread_on.png" enterimg="config/c_skipon.png" width=500 height=auto]

*click

ゲームをプレイしてみてください。デカすぎるボタンが追加されます。

このボタンをクリックしても、特に何も起こりません。(クリックすると画像が一部消えたりするかもしれませんが、最終的に表示されていれば、特に問題ありません)

今回、画像は最初から入っているデータをお借りしています。ご自身で用意した画像でもOKです。

 

JavaScript をかくぞ!

ティラノスクリプトの[button]タグには、”exp”というパラメータが存在します。expでは、ボタンをクリックした時に実行するJavaScriptを書くことができます。

先ほど追加したでっかいボタンのコードを、以下のコードに書き換えてください。

  • data/scenario/title.ks

[button x=635 y=320 fix=true target="*click" graphic="config/button_unread_on.png" enterimg="config/c_skipon.png" width=500 height=auto exp="document.querySelectorAll('.slide_btn').forEach(function(element) {element.classList.add('up');})"]

*click

なんだか、最後の方にえらく長い何かが追加されました。見てみましょう。

exp="document.querySelectorAll('.slide_btn').forEach(function(element) {element.classList.add('up');})"

expの中には、JavaScriptのコードが書かれています。このJavaScriptのコードは、「'slide_btn'というクラスを持つすべての画像やボタンに、'up'というクラスも追加してください」という意味になっています。(クラスとは、name のこと)

よって、このボタンをクリックすると、先ほどの「slide_btn」の名前しかついていないSTARTボタンに、「up」という名前も追加されます。これで、『プレイヤーが自分の操作で、slide_btnっていう名前のボタンに「up」って名前もつけられる』状態になったわけです。

と、なると。このボタンをクリックすると、どうなるでしょう。想像してから、ゲームをプレイしてみてください。

STARTボタン(はじめからのボタン)が、すーっと上に移動しましたか?

移動したら、これであなたもJavaScriptの使い手です。おめでとう!

今回解説したかったことは、これで終わりです。残る作業は、これを実用的な固定ボタンにしていくことだけです。

色々試そう

ついでに色々試してみましょう。

「slide_btn」というクラスは、どんなボタンや画像にもつけられます。それでは、タイトルに存在するすべてのボタンに「name=”slide_btn”」を追加すると……?

なんなら「slide_btn」というクラスは、今回用意したボタン自身にもつけることができます。

[button name="slide_btn" x=635 y=320 fix=true target="*click" graphic="config/button_unread_on.png" enterimg="config/c_skipon.png" width=500 height=auto exp="document.querySelectorAll('.slide_btn').forEach(function(element) {element.classList.add('up');})"]

これに書き換えて、ゲームをプレイし、ボタンをクリックしてみましょう。

今クリックしたボタンが、すーっと移動するはずです。

とりあえず、今回はここまで。

とにかくわかりやすく簡単に説明するため、説明は最小限にとどめています。もしかしたら、上記の説明を見て、熟練者の方々なら「jsファイルを別に用意した方が良くない?」や、「roleの割り当てとかやった方がいいんじゃない?」など思うかもしれませんが、私もその通りだと思います。

上記のことを実現する方法は、上記の通りだけではありません。思いついた色々な方法で試してみてください。

お次はこちら

@miz_gracia
文章の壁打ち場。 質問などはこちらに: marshmallow-qa.com/miz_vhb