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
GOOLF!のデザイン⛳️ / Design of GOOLF!
Search
lycoris102
May 29, 2021
Design
0
610
GOOLF!のデザイン⛳️ / Design of GOOLF!
unity1week online共有会 #5
https://youtu.be/7qeqimK0h2s
lycoris102
May 29, 2021
Tweet
Share
More Decks by lycoris102
See All by lycoris102
コンプリボドゲ2024 ジグザグザクザク 遊び方
lycoris102
0
90
イラレの生成AI + Unity (VectorGraphics) で遊びたい! / Illustrator Generative AI and Unity Vector Graphics
lycoris102
0
460
⌨️ a Key is Landmine 💣のデザイン / Design of "a Key is Landmine"
lycoris102
0
140
[Unity] プレビュー版 Cinemachine 3.0 紹介
lycoris102
1
1.4k
Unityとキャリアとコミュニティの話 / Unity, Carrier, Community
lycoris102
1
170
[Unity] Mobile3D(2D)テンプレートとモバイル向けパッケージ紹介 / Mobile templates and packages for mobile
lycoris102
0
8.9k
期待値と言語化の話 / Verbalize Expectations
lycoris102
1
4.7k
Sweet^2 Honey Hive
lycoris102
2
1.4k
unity1week でUFOキャッチャーのゲームを作ったときに考えたこと / Tips for creating casual game with unity1week
lycoris102
1
990
Other Decks in Design
See All in Design
Haruki_Konaka_Portforio.pdf
haruki556
0
650
Arborea Art Book
thebogheart
1
290
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
490
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
Night Shift concept 9/15/2024
cpineda57
0
740
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
260
Карта процесса-опыта. Презентация метода
ashapiro
0
330
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
170
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
410
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.2k
太田博三(@usagisan2020)
otanet
0
190
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
210
Featured
See All Featured
Unsuck your backbone
ammeep
668
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
How STYLIGHT went responsive
nonsquared
95
5.2k
A designer walks into a library…
pauljervisheath
204
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Scaling GitHub
holman
458
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Transcript
青木とと@lycoris102 unity1week online 共有会 #5 GOOLF! のデザイン!⛳
GOOLF!というゲームの デザインについて お話しします
GOOLF! お題「2」= 2つのボールを同時にショットするゴルフゲーム 片方がもう片方を邪魔したり、片方が片方を助ける 複数のボールを制御する理不尽さ、それをうまくできた時の達成感 今回のunity1weekで作ったゲーム
ゴルフゲーム ボールとステージ = 基本的には単純の図形で成り立つゲーム キャラクターが登場しないので、絵が苦手な自分でも作りやすいのでは
ゴルフはステージをデザインして成り立つゲーム いかに魅力的なレベルデザインやギミックを作れるか いかに魅力的なステージを複数個用意できるか ハードルが高い!
フリー素材を使おう! そうだ……!!
「KENNEY」 ポップでフラットな2D/3D素材 無償の素材もあれば、有償のバンドルパッケージもある パブリックドメインCC0ライセンスで提供されています ケニー
「Abstract Platformer」 2Dプラットフォーマーを作る上での良い感じの素材 飾り付けの素材や鍵/スイッチなどのギミックのための素材も含まれている https://www.kenney.nl/assets/abstract-platformer
試しに作ってみる UnityのTilemapの機能を使って配置していく Atlas化素材をSpriteEditorでSlice > TilemapのPaletteに配置 > SceneにTilemapを設置 今回はTilemapの詳細な使い方は割愛 / 3D素材を使う際はProGridsを使うと配置しやすい
良い感じ! レパートリーを作るビジョンが湧いてくるのが大事!
Tilemapの素材から色のバランスを取る 素材のメインカラーを見て、バランスを取るようにボール/予測線の色を決定
差別化する絵作りの話 フリー素材を使っても自分の作品らしさを残すために
背景を変更する 作品の解像度(リアルかシンプルか)に合わせることを前提にする 今回はポップ/フラットな背景に合わせパターン素材を使用し 「死んだ画面にしない」ためにShaderGraphでUVスクロール Bg-patterns 背景パターン配布&作成サイト: http://bg-patterns.com/
ちなみにレベルデザイン後に背景設定しました 最終ステージは情報量が多く、鍵など見つけてもらいたいパーツがある 背景をにぎやかにしすぎるとステージの存在感が薄れるので、暗くシンプルに
色のテイストを変更する Before After 気持ち明るく、温かみのある色調に
色のテイストを変更する PostProcessのColorLookupを使用する ルックアップテーブル画像(LUT)を用いて入力色と対応色を置き換えて雰囲気を作る アセットストアからLUT画像をインポートして使用 (既に配信停止してるやつでした……)
ライティングを工夫する 今回はURPの2DLightを使用して、ボールをほんのちょっと光らせるように これによりボールに目が行きやすくなったりならなかったり 実際のゲームよりも露骨に設定しています
UIと演出の話
1周目は打数を気にせずにプレイしてほしい 難しいステージも多く、思うように行かないので 打数が増えることをネガティブに捉えられたくない 世界観への没入/アート感の尊重 ポップかつシンプルな見た目が出来たので システムによってそれを崩したくない コンセプトの策定 × 必要最低限の情報開示 極力シンプルに!!
打数をプレイ画面には表示しないゴルフゲーム 暗黙的な「何回打っても大丈夫だよ」のメッセージ
結果画面にて表示する ランキングと共に表示することで「次はもっとやれるのでは?」 →2回目プレイを訴求を狙う (狙ったけど、正直そこまでリピートされなかった気がするので、ホール毎のハイスコアは推しても良かったかも)
ホールクリアはとにかく褒める紙吹雪🎉 少ない打数でも、多い打数でも褒める ステージの情報量も多いので文字情報は重ねず、派手に褒めるためにカラフルな紙吹雪を採択 ちなみにParticleSystemと正方形画像の素材で作ってます
ここまで来たら操作にも文字は使わない(意地) ドラッグの起点や方向が分かる / キャンセルできる / ドロップ時に戻して弾いてる感 表示非表示でショットの可不可を判断 / ステージにも使われている◉の模様を使用 (誰も褒めてくれなかったけど)
実は個人的に一番のこだわりポイント
ボールの軌跡もさりげなく アクションに対する賑やかし(すごいことしてる感)として機能する ステージ素材の花モチーフを利用し、ParticleSystemを使って実装 オブジェクトが移動したら出す系は「Emission」の「Rate over Distance」を使うと楽に実装できる
トランジションは基本カラーを使って統一感を出す 時間がなかったので、4つの矩形を順番に引き延ばし / 戻しただけ 黒フェードアウトは気分が沈むかも?と思って、今回はポップでカジュアルで勢いを尊重した
まとめ
GOOLF!のデザインは 「フリー素材を使いながら」も 「特徴付けにより差別化」し ポップでシンプルな素材デザインを活かすために 「UIや演出もシンプルにし統一感を持つ」 そんなことを目指しました 何か参考になりそうな部分が1つでもあったなら嬉しいです〜!
青木とと@lycoris102 unity1week online 共有会 #5 GOOLF! のデザイン⛳