Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
⌨️ a Key is Landmine 💣のデザイン / Design of "a Key...
Search
lycoris102
October 14, 2023
Design
0
200
⌨️ a Key is Landmine 💣のデザイン / Design of "a Key is Landmine"
unity1week online共有会 #13
https://youtu.be/COFWY3BrDEw
lycoris102
October 14, 2023
Tweet
Share
More Decks by lycoris102
See All by lycoris102
コンプリボドゲ2024 ジグザグザクザク 遊び方
lycoris102
0
340
イラレの生成AI + Unity (VectorGraphics) で遊びたい! / Illustrator Generative AI and Unity Vector Graphics
lycoris102
0
760
[Unity] プレビュー版 Cinemachine 3.0 紹介
lycoris102
1
2k
Unityとキャリアとコミュニティの話 / Unity, Carrier, Community
lycoris102
1
210
GOOLF!のデザイン⛳️ / Design of GOOLF!
lycoris102
0
690
[Unity] Mobile3D(2D)テンプレートとモバイル向けパッケージ紹介 / Mobile templates and packages for mobile
lycoris102
0
10k
期待値と言語化の話 / Verbalize Expectations
lycoris102
2
4.9k
Sweet^2 Honey Hive
lycoris102
2
1.5k
unity1week でUFOキャッチャーのゲームを作ったときに考えたこと / Tips for creating casual game with unity1week
lycoris102
1
1.1k
Other Decks in Design
See All in Design
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
520
decksh object reference
ajstarks
2
1.3k
「UXとUIの違い」v2
shirasu3
0
230
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
550
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
130
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
130
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
110
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.1k
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
130
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.2k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Writing Fast Ruby
sferik
628
62k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
For a Future-Friendly Web
brad_frost
180
9.9k
Gamification - CAS2011
davidbonilla
81
5.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Six Lessons from altMBA
skipperchong
28
4k
Transcript
📝 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