⌨️ a Key is Landmine 💣のデザイン / Design of "a Key is Landmine"

📝 unity1week online 共有会 #13 のデザイン！💣 青木とと@lycoris102

@lycoris102 青木ととかぞく: 妻 / 息子氏 / 娘氏・ゆるふわゲームクリエイター・ゆるふわイベントオーガナイザー

今回で19回目のunity1weekの参加

1キーだけランダムで地雷が混ざっている「地雷系タイピングゲーム」前半は地雷キーを推理する要素後半は地雷を踏まないような慎重さで従来のタイピングゲームとの差別化を測る ⌨ a Key is Landmine 💣
📝 Unity1週間ゲームジャムお題「1ボタン」提出作品

のデザインや演出に纏わるTipsや実装方法をいくつか紹介します 💡細かいスクリプトのスクショがありますが、後ほど資料を共有するのでそちらを見てください🙏

画面デザイン

初日はIllustratorでモックの作成 UI配置用の画像の書き出しコードを書く前に必要な要素を洗い出して必要なクラスを検討モックの作成 💭 無料のツールだと個人的にはFigmaがオススメ

モック時の背景画像は Haikei を利用プリミティブなイメージによく合う背景を生成できるモック背景の作成 🔗 https://app.haikei.app/

「推理」にフォーカスして履歴の領域を大きく取っているのが特徴「緑」「ピンク」を強調色として各所に配置、統一感のある作りに UIの設計履歴領域強調色の統一

キーボードと背景をそのまま残すアプローチ体験を途切れさせないシームレスで気持ちの良い体験を目指すシーンの構成逆に言えばメリハリはない → ここに一気にトーンを変える演出を挟むとコントラストで印象に残りやすい

演出

文字タイプの演出 MagicTweenを使用 TextMeshProの文字単位で色の変更処理 📝 MagicTween は Annulus Games さんの開発したOSSのハイパフォーマンストゥイーンライブラリ 🔗
https://github.com/AnnulusGames/MagicTween

ミスタイプの演出同じくMagicTweenを使用して、文字をX軸(左右)にシェイクする処理を記載ミスタイプを明示的にする

地雷の演出カメラシェイク + フラッシュ + 色収差の合わせ技画面の変化量を大きくしてメリハリを付ける

地雷の演出カメラシェイク Unity公式のカメラ制御ライブラリ「Cinemachine」の機能の一つコリジョン or スクリプトからカメラの振動を呼び出すことができる振動の通知 💭UIは基本カメラに張り付くので Canvas の
RenderMode を World Space にしてゴリ押し

地雷の演出フラッシュ画面全体を覆う白画像を用意地雷時にアルファを1→0にアニメーション画面全体を白くして徐々に戻す

地雷の演出色収差 URP標準のPostProcessにて色収差 (Chromatic Aberration) をVolumeに設定強さ (Intensity) を0に設定し、地雷時に1→0のアニメーション色収差を最大値で適用
徐々に戻す

背景(波)の演出死んだ画面にしないように   仮置きした背景イメージを動かす

背景(波)の演出 ShaderGraphを使って Sprite の頂点を変形適用したスクエア画像をTileで引き伸ばす (繋げる) 💭かもそばさん @rn49rn49 の「Unity ShaderGraph
CookBook vol.1」におせわになりました 🔗 https://zenn.dev/r_ngtm/books/shadergraph-cookbook 頂点情報を更新オブジェクト頂点に加算高さを調整 Sin波とノイズを合成ワールド座標のX方向にスクロールテクスチャ描画

背景(パーティクル)の出現ユーザの動きに合わせたインタラクティブな挙動を付けたいタイプ時には小さい• / 成功時には大きな•のParticleをEmitするタイプされる程に画面は賑やかになっていく達成感

背景(パーティクル)の破壊積み上げたものが地雷で一気に破壊される喪失感とともに爽快感が得られるように破裂するようなエフェクト実装的には SubEmitter モジュールを利用して各パーティクルを起点に発火 Null代入で既存のパーティクルを削除 SubEmitterを発火

開始/終了の演出 Timelineを使って制御カウントダウンは任意の文字をアニメーションする処理を用意しておき Marker (Timelineで任意のメソッドを叩く機能) で呼び出す

開始/終了の演出文字を広げる演出がお気に入り TextMeshProのCharacter (文字間) をアニメーションさせる

リザルトの演出 Timelineを使って順番に要素の表示スコアのカウントアップだけMagicTweenで実装しSignalで呼び出し Signalで呼び出し

その他

最初に「ゲーム中にリトライする動作」を考えたときに「タイプを阻害しない」かつ「マウスを使わずキーボードだけで完結させる」という条件から自然とタイプ以外の処理実行は「長押し」に統一、一貫性を持たせる操作のデザイン 💭 (ゲーム上必要性がなければ) マウス/キーボードの動作はどちらかに統一すると喜ばれがち

ちょうどゲームの制限時間と同じ2分で終わるように曲を作成周回時には曲の展開で残り時間をイメージさせる仕掛け BGMのデザイン

まとめ

で意識したことデザインやシーン遷移、挙動に「一貫性」を持たせ自然で気持ち良いユーザ体験を目指すユーザの挙動や成果に合わせた演出で没入感を持たせる 💭参考になる内容が少しでもあったのなら幸いです🙇

📝 unity1week online 共有会 #13 のデザイン！💣 青木とと@lycoris102

⌨️ a Key is Landmine 💣のデザイン / Design of "a Key...

⌨️ a Key is Landmine 💣のデザイン / Design of "a Key is Landmine"

lycoris102

More Decks by lycoris102

Other Decks in Design

Featured

Transcript

📝 unity1week online 共有会 #13 のデザイン！💣 青木とと@lycoris102

@lycoris102 青木ととかぞく: 妻 / 息子氏 / 娘氏・ゆるふわゲームクリエイター・ゆるふわイベントオーガナイザー

今回で19回目のunity1weekの参加

1キーだけランダムで地雷が混ざっている「地雷系タイピングゲーム」前半は地雷キーを推理する要素後半は地雷を踏まないような慎重さで従来のタイピングゲームとの差別化を測る ⌨ a Key is Landmine 💣

のデザインや演出に纏わるTipsや実装方法をいくつか紹介します 💡細かいスクリプトのスクショがありますが、後ほど資料を共有するのでそちらを見てください🙏

画面デザイン

初日はIllustratorでモックの作成 UI配置用の画像の書き出しコードを書く前に必要な要素を洗い出して必要なクラスを検討モックの作成 💭 無料のツールだと個人的にはFigmaがオススメ

モック時の背景画像は Haikei を利用プリミティブなイメージによく合う背景を生成できるモック背景の作成 🔗 https://app.haikei.app/

「推理」にフォーカスして履歴の領域を大きく取っているのが特徴「緑」「ピンク」を強調色として各所に配置、統一感のある作りに UIの設計履歴領域強調色の統一

演出

文字タイプの演出 MagicTweenを使用 TextMeshProの文字単位で色の変更処理 📝 MagicTween は Annulus Games さんの開発したOSSのハイパフォーマンストゥイーンライブラリ 🔗

ミスタイプの演出同じくMagicTweenを使用して、文字をX軸(左右)にシェイクする処理を記載ミスタイプを明示的にする

地雷の演出カメラシェイク + フラッシュ + 色収差の合わせ技画面の変化量を大きくしてメリハリを付ける

地雷の演出カメラシェイク Unity公式のカメラ制御ライブラリ「Cinemachine」の機能の一つコリジョン or スクリプトからカメラの振動を呼び出すことができる振動の通知 💭UIは基本カメラに張り付くので Canvas の

地雷の演出フラッシュ画面全体を覆う白画像を用意地雷時にアルファを1→0にアニメーション画面全体を白くして徐々に戻す

地雷の演出色収差 URP標準のPostProcessにて色収差 (Chromatic Aberration) をVolumeに設定強さ (Intensity) を0に設定し、地雷時に1→0のアニメーション色収差を最大値で適用

背景(波)の演出死んだ画面にしないように   仮置きした背景イメージを動かす

背景(波)の演出 ShaderGraphを使って Sprite の頂点を変形適用したスクエア画像をTileで引き伸ばす (繋げる) 💭かもそばさん @rn49rn49 の「Unity ShaderGraph

背景(パーティクル)の出現ユーザの動きに合わせたインタラクティブな挙動を付けたいタイプ時には小さい• / 成功時には大きな•のParticleをEmitするタイプされる程に画面は賑やかになっていく達成感

開始/終了の演出 Timelineを使って制御カウントダウンは任意の文字をアニメーションする処理を用意しておき Marker (Timelineで任意のメソッドを叩く機能) で呼び出す

開始/終了の演出文字を広げる演出がお気に入り TextMeshProのCharacter (文字間) をアニメーションさせる

リザルトの演出 Timelineを使って順番に要素の表示スコアのカウントアップだけMagicTweenで実装しSignalで呼び出し Signalで呼び出し

その他

ちょうどゲームの制限時間と同じ2分で終わるように曲を作成周回時には曲の展開で残り時間をイメージさせる仕掛け BGMのデザイン

まとめ

で意識したことデザインやシーン遷移、挙動に「一貫性」を持たせ自然で気持ち良いユーザ体験を目指すユーザの挙動や成果に合わせた演出で没入感を持たせる 💭参考になる内容が少しでもあったのなら幸いです🙇

📝 unity1week online 共有会 #13 のデザイン！💣 青木とと@lycoris102