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
170
⌨️ 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
280
イラレの生成AI + Unity (VectorGraphics) で遊びたい! / Illustrator Generative AI and Unity Vector Graphics
lycoris102
0
600
[Unity] プレビュー版 Cinemachine 3.0 紹介
lycoris102
1
1.7k
Unityとキャリアとコミュニティの話 / Unity, Carrier, Community
lycoris102
1
180
GOOLF!のデザイン⛳️ / Design of GOOLF!
lycoris102
0
640
[Unity] Mobile3D(2D)テンプレートとモバイル向けパッケージ紹介 / Mobile templates and packages for mobile
lycoris102
0
9.4k
期待値と言語化の話 / Verbalize Expectations
lycoris102
1
4.8k
Sweet^2 Honey Hive
lycoris102
2
1.4k
unity1week でUFOキャッチャーのゲームを作ったときに考えたこと / Tips for creating casual game with unity1week
lycoris102
1
1k
Other Decks in Design
See All in Design
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
630
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
650
Les petites aventures de CSS, saison 2025
goetter
3
4k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.1k
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.6k
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
140
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.7k
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
580
Personal Story Sequence - Vendetta(WIP)
elrns88
0
420
デザイナーとPMの両ロール_3つのポイント
toy1618
1
170
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
720
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
The Invisible Side of Design
smashingmag
299
50k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Why Our Code Smells
bkeepers
PRO
336
57k
Code Reviewing Like a Champion
maltzj
521
39k
Designing for Performance
lara
604
68k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
How GitHub (no longer) Works
holman
314
140k
Facilitating Awesome Meetings
lara
52
6.2k
We Have a Design System, Now What?
morganepeng
51
7.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