【パワスロ】コンテナー・ドロップシャドウを使ってボタンやレバーを表現する

はじめに

パチスロアプリでも使用している、コンテナー・ドロップシャドウを使った浮き出る感の実装や、ボタンを押したときの押し込み感などの実装を記事にしました。

パワスロシリーズの記事はこちらから

コンテナー・ドロップシャドウを使った実装は以下の記事でも紹介しています。

2023.07.09

コンテナーでドロップシャドウ ! ダイアログ・ボタン・アイコン・ギャラリーにも適用する！

はじめに NOTEこちらの記事は以前自社ブログへ掲載した記事のリライト版となります。※一部内容重複がございますがご容赦ください。 今回は最近（2023年5月頃？）のアップデートで追加された、コンテナーのドロップシャドウの活用について記事にいたしました。通常のコンテナー自体にドロップシャドウを...

実装動画

動画でイメージご覧ください。対象はリール部分の浮き出感、BEＴやストップボタン、レバーの押し込み感です。

実装ポイント

実装のポイントについて順に解説します。

リール部分のコンテナー

ギャラリーの親にコンテナーを使っています。スロットを表現するために大事な部分です。

TIPSこの部分はコンテナーの中にギャラリー（絵柄）を入れ込み、3つの絵柄分だけ見えるようにしています。
この辺（スロット部分の実装方法）は今後記事にしようと思います。

それと合わせて、立体感を出したいので3つのリールにドロップシャドウを付けてます。ExtraBoldで最大を指定
以下は1つ目がなし、２，３つめはExtraBold付けたままの比較です。あったほうが断然いいですね。

ボタンの押し込み感

BETボタンやストップボタンの部分です。

どちらも同じ構成ですのでBETボタンで説明します。
まずボタンを用意、それと同じサイズ・境界半径（角丸）のコンテナーを用意してボタンを入れ込んでます。
その下のコンテナーは台座部分です。若干下にずらしてボタンの立体感を演出してます。
どちらもドロップシャドウを入れてます。若干ですが立体感が出てます。
※併せて押した場合のFillやColorも調整したりしてます。

ボタンを押した際の押し込みはシンプルにY座標を調整してます。PressedがTrue（押された）場合は10として、コンテナー内での位置を10下げるように調整してます。

上記のようにすると、コンテナー表示エリアより下にはみ出るのですが、コンテナーの範囲しか表示されないので押されたような表現が出来ます。

Code// ボタンのYプロパティ
If(Self.Pressed, 10,0)

TIPSコンテナー内に配置されたコントロールはコンテナーが親となるので、そこからの相対的な位置（X、Y）となります。画面全体を意識しなくてよいのでわかりやすくなるのもコンテナーのメリットですね。
また表示・非表示設定もコンテナーに対してだけやればいいのでその辺もグループより断然に使いやすいです。

レバーの表現

レバーの部分です。ちょっとイメージがわかりずらいですが、ざっくりとは以下です。
※コントロール名変えてなくてわかりづらいですね。

1. 大枠のコンテナーを用意（Container2）
2. その中にコンテナーを追加（Container2_1）
3. その中にボタン：レバー（Button）
4. その上のボタン：光ってる部分（Button_1）
5. 一番下にレバーの棒の部分（Buttonbar）

コンテナーを2重にしているのは、光ってる部分とレバーの黒い部分を合わせて下に下げたいからです。
ですので今回は、レバーボタンが押された時は、コンテナーごとＹを調整しています。
②のコンテナーのYを以下にします。

Code//Container2_1のYプロパティ
If(Button.Pressed,40,20)

一番下の棒の部分は普段は隠れて見えないようにして、押されてレバーのYが下がったときにちらっと見えるようにしてます。これでレバーを叩いた感を演出してます。

おわりに

今回はパワスロシリーズとしてパチスロアプリで使った、ドロップシャドウでの浮き出し感や、ボタンやレバーの押し込み感をコンテナーで実装したサンプルとして記事を書きました。

ゲームアプリだと結構使えそうなテクニックかなと思いますが、業務アプリだとそれほど活用の場はないかもしれません(笑)。見た目にもこだわったアプリやちょっと趣向を変えたアプリなどであれば使えるかもしれませんね。
コンテナーはかなり便利に使えますので、上記のようなものや応用した実装で、アニメーション的な動きを結構簡単に作れますので是非チャレンジしてみてください。それでは。

TIPSコンテナーはとても便利です。従来まとめるために使っていたグループ機能よりも色々な面が優れていますのでオススメです。
・YやXが相対的な値で設定できる
・表示や非表示もコンテナーのVisibleに設定すれば全体に反映できる
・ドロップシャドウを付けたり、境界半径で角丸や丸にもできる
・応用してコンテナー範囲からはみ出す部分を見せない（移動して消えるとか押し込みとか）の表現が出来る