Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

lycoris102
October 14, 2023

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

unity1week online共有会 #13
https://youtu.be/COFWY3BrDEw

lycoris102

October 14, 2023
Tweet

More Decks by lycoris102

Other Decks in Design

Transcript

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

    View full-size slide

  2. @lycoris102


    青木とと


    かぞく: 妻 / 息子氏 / 娘氏


    ・ゆるふわゲームクリエイター


    ・ゆるふわイベントオーガナイザー

    View full-size slide

  3. 今回で19回目のunity1weekの参加

    View full-size slide

  4. 1キーだけランダムで地雷が混ざっている「地雷系タイピングゲーム」


    前半は地雷キーを推理する要素


    後半は地雷を踏まないような慎重さで


    従来のタイピングゲームとの差別化を測る
    ⌨ a Key is Landmine 💣
    📝 Unity1週間ゲームジャム お題「1ボタン」提出作品

    View full-size slide

  5. のデザインや演出に纏わるTipsや実装方法を


    いくつか紹介します
    💡細かいスクリプトのスクショがありますが、後ほど資料を共有するのでそちらを見てください🙏

    View full-size slide

  6. 画面デザイン

    View full-size slide

  7. 初日はIllustratorでモックの作成


    UI配置用の画像の書き出し


    コードを書く前に必要な要素を洗い出して必要なクラスを検討
    モックの作成
    💭 無料のツールだと個人的にはFigmaがオススメ

    View full-size slide

  8. モック時の背景画像は Haikei を利用


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

    View full-size slide

  9. 「推理」にフォーカスして履歴の領域を大きく取っているのが特徴


    「緑」「ピンク」を強調色として各所に配置、統一感のある作りに
    UIの設計
    履歴領域
    強調色の統一

    View full-size slide

  10. キーボードと背景をそのまま残すアプローチ


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

    View full-size slide

  11. 演出

    View full-size slide

  12. 文字タイプの演出
    MagicTweenを使用


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


    🔗 https://github.com/AnnulusGames/MagicTween

    View full-size slide

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


    ミスタイプを明示的にする

    View full-size slide

  14. 地雷の演出
    カメラシェイク + フラッシュ + 色収差の合わせ技


    画面の変化量を大きくしてメリハリを付ける

    View full-size slide

  15. 地雷の演出


    カメラシェイク
    Unity公式のカメラ制御ライブラリ「Cinemachine」の機能の一つ


    コリジョン or スクリプトからカメラの振動を呼び出すことができる
    振動の通知
    💭UIは基本カメラに張り付くので Canvas の RenderMode を World Space にしてゴリ押し

    View full-size slide

  16. 地雷の演出


    フラッシュ
    画面全体を覆う白画像を用意


    地雷時にアルファを1→0にアニメーション
    画面全体を白くして
    徐々に戻す

    View full-size slide

  17. 地雷の演出


    色収差
    URP標準のPostProcessにて色収差 (Chromatic Aberration) をVolumeに設定


    強さ (Intensity) を0に設定し、地雷時に1→0のアニメーション
    色収差を最大値で適用
    徐々に戻す

    View full-size slide

  18. 背景(波)の演出
    死んだ画面にしないように
    

    仮置きした背景イメージを動かす

    View full-size slide

  19. 背景(波)の演出
    ShaderGraphを使って Sprite の頂点を変形


    適用したスクエア画像をTileで引き伸ばす (繋げる)
    💭かもそばさん @rn49rn49 の「Unity ShaderGraph CookBook vol.1」におせわになりました


    🔗 https://zenn.dev/r_ngtm/books/shadergraph-cookbook
    頂点情報を更新
    オブジェクト頂点に加算
    高さを調整
    Sin波とノイズを合成
    ワールド座標のX方向にスクロール
    テクスチャ描画

    View full-size slide

  20. 背景(パーティクル)の出現
    ユーザの動きに合わせたインタラクティブな挙動を付けたい


    タイプ時には小さい● / 成功時には大きな●のParticleをEmitする


    タイプされる程に画面は賑やかになっていく達成感

    View full-size slide

  21. 背景(パーティクル)の破壊
    積み上げたものが地雷で一気に破壊される


    喪失感とともに爽快感が得られるように破裂するようなエフェクト


    実装的には SubEmitter モジュールを利用して各パーティクルを起点に発火
    Null代入で既存のパーティクルを削除
    SubEmitterを発火

    View full-size slide

  22. 開始/終了の演出
    Timelineを使って制御


    カウントダウンは任意の文字をアニメーションする処理を用意しておき


    Marker (Timelineで任意のメソッドを叩く機能) で呼び出す

    View full-size slide

  23. 開始/終了の演出
    文字を広げる演出がお気に入り


    TextMeshProのCharacter (文字間) をアニメーションさせる

    View full-size slide

  24. リザルトの演出
    Timelineを使って順番に要素の表示


    スコアのカウントアップだけMagicTweenで実装しSignalで呼び出し
    Signalで呼び出し

    View full-size slide

  25. その他

    View full-size slide

  26. 最初に「ゲーム中にリトライする動作」を考えたときに


    「タイプを阻害しない」かつ「マウスを使わずキーボードだけで完結させる」


    という条件から自然とタイプ以外の処理実行は「長押し」に統一、一貫性を持たせる
    操作のデザイン
    💭 (ゲーム上必要性がなければ) マウス/キーボードの動作はどちらかに統一すると喜ばれがち

    View full-size slide

  27. ちょうどゲームの制限時間と同じ2分で終わるように曲を作成


    周回時には曲の展開で残り時間をイメージさせる仕掛け
    BGMのデザイン

    View full-size slide

  28. まとめ

    View full-size slide

  29. で意識したこと
    デザインやシーン遷移、挙動に「一貫性」を持たせ


    自然で気持ち良いユーザ体験を目指す
    ユーザの挙動や成果に合わせた演出で


    没入感を持たせる
    💭参考になる内容が少しでもあったのなら幸いです🙇

    View full-size slide

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

    View full-size slide