カードゲームの手札部分の実装

手札がモリっと飛び出る演出

いいですよね。DTCGではおなじみだと思います。それをシコシコ作っていました。
また飛び出たカードをクリックすることで、そのカードをプレイすることができます。非常に直感的で受け入れやすいUI/UXだと思います。

手札は最初に３０枚引いています。もっと早く引くこともできますが、このあたりは分かりやすさとテンポのバランスを見て決めたいと思います。
で、３０枚もカードがあると、プレイするカードを選択させるのも一苦労なので、マウスオーバーしたカードが一番上に表示されるようにして、クリック可能な領域が他のカードで潰されないようにしました。

クリックすると手札がプレイされ、プレイされたカードは手札から別の領域へ移動し、１枚
減ります。減った後は位置を再調整します。以前お見せした人狼と同じようなことを内部ではしています。

ティラノスクリプトでの実装

結構苦労しました。
マウスオーバーして膨らませたりするのは、ティラノスクリプトの仕組みを使うことは諦め、javascript(JQuery)を使っています。キャラクター(カード)が持つ実体を直接弄っているので本当はあんまりよろしくないのですが、演出の良さには代えられません。

$(document).ready(function() {
    $(document).on('mouseenter', `.${mp.cardobj.get_char_name()}`, function() {
        var chara = $(this);
        // キャラクターのスタイルを変更
        chara.css({
            "z-index": "100",
            "transform": "scale(1.1) translateY(-10px)",
            "transition": "transform 0.15s"
        });
        // クリックイベントを追加
        chara.on('click.customEvent', function() {
            // ティラノスクリプトのタグへジャンプ
            tf.deck.play(mp.cardobj.get_char_name());
            TYRANO.kag.ftag.startTag("jump", {target: "*clicked"});
        });
    });
    $(document).on('mouseleave', `.${mp.cardobj.get_char_name()}`, function() {
        var chara = $(this);

        // キャラクターのスタイルを元に戻す
        chara.css({
            "z-index": "1",
            "transform": "scale(1) translateY(0)",
            "transition": "transform 0.15s"
        });

        // クリックイベントを解除
        chara.off('click.customEvent');
    });
});

それと、ティラノスクリプトでは、buttonタグやglinkタグなどを使うと、キャラクタのレイヤにボタン用のレイヤが透明なシートみたいに完全に覆いかぶさってしまって、マウスオーバーイベントが動かなくなります。

この方式を使う場合は、buttonやglinkの使用は諦め、イベントトリガーとなるボタンは、同じ(キャラクタのレイヤ)に集中させる必要があります。

という自分向けの備忘録でした。ここまで読んで頂いてありがとうございます！