前回の続きです。「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の割り当てとかやった方がいいんじゃない？」など思うかもしれませんが、私もその通りだと思います。
上記のことを実現する方法は、上記の通りだけではありません。思いついた色々な方法で試してみてください。
お次はこちら