Raspberlyのブログ

Raspberlyのブログ

Unityネタをメインとした技術系ブログです。にゃんこ大戦争や日常なども。そろそろブログタイトル決めたい

【Unityネタ】サイズを変えても比率が変化しない「ふきだし」を作る

今回はUnityネタをやっていきます。
9スライスを使ってサイズが変化してもカクカクにならない「ふきだし」を作っていきます。

f:id:Raspberly:20210411232925p:plain

 

はじめに

この記事を書こうと思ったきっかけはこちらです。
Twitterでも話題のバーチャル・ジャパン・プラットフォームの紹介動画
とても印象的な場面がたくさん出てきます。

www.youtube.com


みなさんも気になる所があるかと思いますが、個人的に一番気になったのがこのシーン!

f:id:Raspberly:20210411183709p:plain

このふきだしの部分です
左右に引っ張っているせいなのか比率が変化してカクカクになっています。
これは見栄えがよくないですね。

 

 

そこで今回は、9スライスを使ってサイズが変化してもカクカクにならないふきだしを作ってみます。
これに関する解説記事はたくさんありますが、さわったことがない領域なのでまとめておきます。

 

 

開発環境

Unity 2020.3.0f1

 
吹き出しの素材はこちらを使わせていただきました

カスタマイズ可能!フリーアイコン

 

 

Imageをそのまま大きくするとどうなるか

まずはダメな例としてImageをそのまま大きくしてみます。
ImageにSpriteを割り当てWidthを大きくしてみると、左右の黒枠や下の出っ張りが引き延ばされカクカクになります。

f:id:Raspberly:20210411220624g:plain

これはImageに割り当てられているSpriteの比率が変化し、引き伸ばされているためおこります。

 

 

Spriteの9スライス

これを回避するためにはSpriteの9スライスを行います。
9スライスは、Spriteを9分割しサイズが変更されてもアスペクト比が維持されるようにする2D手法です。
Sprite Editorから分割できます。

2D Spriteパッケージのインストール

Sprite Editorを使うには、Unity Package Managerから2D Spriteパッケージをインストールする必要があります。

f:id:Raspberly:20210411213847p:plain

 

テクスチャのImportSettings

ふきだしテクスチャのImportSettingsを変更します。
Texture TypeをSpriteに、MeshTypeをFull Rectに変えます。変更後はApplyを忘れないように。

f:id:Raspberly:20210411223316p:plain

 

Sprite Editorからスライス

そのままImport SettingsからSprite Editorを起動します。

f:id:Raspberly:20210411225041p:plain

 

ここでSpriteを分割する境界(緑色の線)を設定します。
ふきだしの尖っている部分や角が引き延ばされないよう↓のようにします。

f:id:Raspberly:20210411225216p:plain

境界設定後はApplyを忘れないように

ImageのImage Typeを変更

SpriteをCanvas内のImageに設定したら、Image TypeをSliced*1に変更します。

f:id:Raspberly:20210411225603p:plain

 

これで完成です。
サイズを変更しても角や尖っている部分は引き延ばされないようになりました。

f:id:Raspberly:20210411230900g:plain

 

 

まとめ

・Spriteを9スライスすることで、サイズが変化しても比率を保つことができる
・9スライスはSprite Editorから行う
・Image TypeはSlicedかTiledにする

f:id:Raspberly:20210411233308g:plain

 この辺はあまり詳しくないので間違っている所や改善点があればコメントなどによろしくお願いします。

 

 

 

 

 

 

参考資料

docs.unity3d.com

 

shikaku-sh.hatenablog.com

 

 

テキストに合わせてサイズを可変させるにはこちらがオススメ

tech.pfq.jp

 

 

*1:Tiledでもよい、違いはこちらスプライトの 9 スライス - Unity マニュアル

【Unityネタ】Project PLATEAUを使って東京の3Dモデルを表示する

今回はUnityネタをやっていきます。
Twitterで話題の3D都市モデル「PLATEAU」をUnityに取り込んで表示するところまでやってみます。

f:id:Raspberly:20210402041110p:plain

f:id:Raspberly:20210402041552p:plain

(例として本当は新宿区を全て表示したかったけどマシンパワーが足りないので一部のみ)

実行環境

Unity 2020.3.0f1

3D都市モデル(Project PLATEAU)東京都23区(FBX 2020年度) バージョン1.0.0

 

 

PLATEAUとは

PLATEAU(プラトー)は3D都市モデルのオープンデータ化プロジェクトです。
現在は東京23区のみですが、今後増えるようです。

PLATEAU は、国土交通省が進める3D都市モデル整備のリーディングプロジェクトである。都市活動のプラットフォームデータとして3D都市モデルを整備し、オープンデータとして公開することで、誰もが自由に都市のデータを引き出し、活用できるようになる。

www.mlit.go.jp

 

 

PLATEAU VIEW

PLATEAUの3Dモデルをブラウザ上で確認できるWebアプリです。
どういう感じのモデルなのかが大体わかると思います。

www.mlit.go.jp

www.youtube.com

 

 

利用規約

規約に従っている限り、複製、公衆送信、翻訳、変形の翻訳が自由にできます。商用利用もできます。

・コンテンツを利用する場合は出典を、加工する場合は加工している旨を記載すること
コンテンツ内に第三者著作権やその他の権利を有している場合があり、それらは利用者が許諾を得ること

建築物の中には看板企業ロゴが入っている場合があり、
それらを使う場合は個別に許諾を得ないといけないようです。
どれがセーフでどれがアウトなのか利用者側で判断するのが難しそうではあります。

f:id:Raspberly:20210402040326p:plain

 

原文はこちら

www.mlit.go.jp

 

 

 

PLATEAUのダウンロード

こちらのページからダウンロードできます。

www.geospatial.jp

現在はCityGML形式3D Tiles形式(建物)、FBX形式の3種類がダウンロードできます。
※3D Tiles形式(道路)、OBJ形式は近日公開予定

 

Unityでそのまま使えるFBX形式をダウンロードします。
CityGMLと3D Tilesは3D都市・地理用データフォーマットです。そのままUnityで扱うことはできません。

www.geospatial.jp

 

範囲図データとFBXデータの2つが置いてあります。

f:id:Raspberly:20210402152511p:plain

FBXデータの名前にある数値は範囲図データと結びついています。
例えば、新宿あたりのデータは533945になる。

f:id:Raspberly:20210401191445p:plain

今回は533945を使います。

 

ダウンロード後はファイルを解凍。その中にさらに圧縮ファイルがあるのでこれも解凍。
それぞれ種類ごとに分かれています。

f:id:Raspberly:20210402021716p:plain

 

 

 

Unityへの配置

UnityのAssets配下にそのままD&Dしてインポートする。容量がすさまじいので時間がかかる場合があります。
PCのスペックに不安があるのなら、小分けにインポートした方がいいです。
インポートが完了したらシーンに配置してみます。無事表示されればOK。

brid

調べてもよくわかりませんでした、橋とか高架とかのモデルっぽい?

f:id:Raspberly:20210402041645p:plain


dem

地形のデータです。(厳密には標高データのことらしい)

f:id:Raspberly:20210402041852p:plain

 

LOD1

テクスチャのないモデル群です。↓のスクショはプレハブ1つ分です。

f:id:Raspberly:20210402024802p:plain

これだけでもかなりの負荷です。

f:id:Raspberly:20210402024918p:plain


LOD2

LOD1よりも細かく分割されたモデル群でテクスチャ付きのものが多いのです。
ただしその分負荷は高め。

f:id:Raspberly:20210402025324p:plain

f:id:Raspberly:20210402025413p:plain
負荷がとてつもなく高いためつよつよマシンでない場合なんらかの軽量化が必須です。

 

 

インポート中にUnityが止まった場合

タスクキルなどで強制終了してUnityを開きなおすと正常にインポートできていない場合があります。
その時はProjectビューからFBXファイルを右クリックしReimportを選ぶと再度インポートが開始されます。

f:id:Raspberly:20210402030925p:plain

 

 

 

 

軽量化

Mesh Bakerやこちらの記事を参考に軽量化することをオススメします。

zenn.dev

上のLOD2の所で紹介したものを軽量化してみましたがドローコールがかなり減りました。

f:id:Raspberly:20210402031817p:plain

f:id:Raspberly:20210402031853p:plain

 


こっちの方法もよさそう

 

qiita.com



 

まとめ

・PLATEAUから東京23区の3DモデルがUnityで使える
・プロジェクトにインポートしてシーンに配置するだけ
・容量が大きく負荷も高いため軽量化した方がよい
TwitterでPLATEAUをキーワードに検索するとさまざまな知見が得られるのでオススメ

PLATEAU - Twitter Search

 

 

 

参考資料

www.moguravr.com

www.hcc.co.jp

qiita.com

 

www.gsi.go.jp

 

 

※出典:3D都市モデル(Project PLATEAU)東京都23区 (https://www.geospatial.jp/ckan/dataset/plateau-tokyo23ku)
※Project PLATEAUのリンク先は国土交通省が運営しているWebサイトです。

【アセット紹介】Color Studioでカラーパレットを作成しよう【Unity】

今回はアセットの紹介をしていきます。
紹介するのはColor Studio。
カラーパレットを作成できるエディタ拡張アセットです。

有料アセットですが、現在無料で入手できる特別キャンペーンが開催中!
購入画面でクーポンコード「KRONNECT2021」を入力すると100%OFFです!

 

 

お得なセール情報!

現在アセットストアではパブリッシャー丸ごとセールが開催中!
Beautifyで有名なアセットパブリッシャーKronnectの全アセットが50%OFF!
詳細とアセットの一覧はこちらのバナーからどうぞ

f:id:Raspberly:20210329120820p:plain

どんなアセット?

カラーパレットを作成できるエディタ拡張アセットです。
ピクセルアートを作成できるツールと、オブジェクトやスプライトの色を変更できるコンポーネントも付属しています。

f:id:Raspberly:20210329195827p:plain

COLOR STUDIOは、素晴らしいカラーパレットを作成し、オブジェクト、スプライト、シーンを再着色することができるエディタ拡張機能です。
エディタやランタイムで簡単に作成できます。すべてのレンダリングパイプラインに対応しています。
インタラクティブなカラーホイールエディタと、カラーパレットをLUTとしてエクスポートするためのツール一式が付属しています。
また、カラーパレットをLUTとしてエクスポートしたり、既存のテクスチャやオブジェクトマテリアルの特定の色を変換することもできます。

パレットツールPalette Studioと、ピクセル描画ツールPixel Painterの2つが入っています。

 

Palette StudioはUnity標準のカラーパレットよりも高機能なパレットツールです。

f:id:Raspberly:20210329121605p:plain

 

 

Pixel PainterはTextureやSpriteをすぐに作成・編集できるツールです。

f:id:Raspberly:20210329191314p:plain

なにこれ

 

 

 

開発環境

Unity2020.3.0f1

 

 

 

クイックスタートと機能紹介

Color StudioはWindow/Color Studioから2つのツールを起動できます。

f:id:Raspberly:20210329115934p:plain

 

Palette Studio

カラーパレットを作成するツールです。タブごとに機能が分かれています。

f:id:Raspberly:20210329181457p:plain

Color Wheel

あらかじめ用意された配色パターンを使って簡単にパレットを作成できます。
ホイール上でCtr+左クリックでドットが押されパレットに色が追加されます。ドットをダブルクリックすると削除。

f:id:Raspberly:20210329121605p:plain

ホイールの下側には現在のパレットが表示されます。

Palette

現在のパレットが表示されます。色相数、濃淡、明るさ、色温度ケルビン)など細かい調整が行えます。
ここからパレットの保存、読み込み、エクスポートなどができます。
パレットの保存先はAssets/Color Studio/Palettesです。

f:id:Raspberly:20210329191746p:plain

Tools

オブジェクトやテクスチャにパレットの色を適応します。
オブジェクトの場合、対象のRendererにRecolorコンポーネントをアタッチする必要があります。
詳細は後述。

f:id:Raspberly:20210329191808p:plain

Compact View

パレットを小さく表示します。
他のタブと一緒にパレットを表示したい時用。

f:id:Raspberly:20210329191825p:plain

Project Palettes

プロジェクトに含まれているパレットを表示、管理します。
パレットの検索、複製、削除ができます。

f:id:Raspberly:20210329192638p:plain

パレットの名前を押すと即座にそのパレットが反映されます。

 

 

 

Pixel Painter

ピクセルアートを作成したり、既存のテクスチャやスプライトを編集できるツールです。

f:id:Raspberly:20210329191314p:plain

ピクセルの作成

新規作成する場合は最初にピクセルアートのグリッドサイズを選びます。4~64までの5種類です。

f:id:Raspberly:20210329193019p:plain
既存のものを編集する場合はSelectから選択します。

f:id:Raspberly:20210329193054p:plain

ブラシのカラー、大きさ、形状の選択

Brush Colorの左側を押すとPalette Studioが自動的に立ち上がるため、ここで色を選択。
Brush WidthとShapeではブラシの大きさと形状が選べます。

f:id:Raspberly:20210329193157p:plain

 

ツールボックス

画面左側のBrushesはペンや消しゴム、塗りつぶしなどの各種ツール一覧になっています。

f:id:Raspberly:20210329193234p:plain

Canvas

Canvasは描いたピクセルアート全体の削除や移動ができます

f:id:Raspberly:20210329193254p:plain

Mirror

左右や上下対称に描けるようになります

f:id:Raspberly:20210329193330p:plain

ピクセルアートの保存

フロッピーディスクのボタンを押すと保存されます。
保存先はAssets/Color Studio/Textureです。

f:id:Raspberly:20210329193419p:plain

 

 

 

 

 

実際に試してみる

Palette Studioでカラーパレットを作成し、オブジェクトに適応する所までやってみます。
今回はユニティちゃんのカチューシャにカラーパレットを適応し色を変えてみます。

f:id:Raspberly:20210329231850p:plain

 

まずはカラーパレットを作成します。
Window/Color Studio/Palette ManagerからPalette Studioを開きます。

f:id:Raspberly:20210329115934p:plain

 

カラーパターンをGradientにし、ベースの色を青にします。
これだけで青を基準としたグラデュエーションのカラーパレットが簡単に作成できます。

f:id:Raspberly:20210329231309p:plain


作成したカラーパレットを保存します。
paletteタブに移動し、新規保存したいのでSave As Newボタンを押します。

f:id:Raspberly:20210329231711p:plain

保存されたカラーパレットはAssets/Color Studio/Palettesフォルダに格納されます。

f:id:Raspberly:20210329231944p:plain



作成したカラーパレットをカチューシャに適応します。
unitychan/mesh_root/hairbandを選びます。

f:id:Raspberly:20210329232057p:plain

 

Recolorコンポーネントをアタッチします。
このコンポーネントは何らかのRendererがアタッチされているオブジェクトでないと動作しません。

f:id:Raspberly:20210329233318p:plain

ここにPaletteに先ほど作成したカラーパレットを紐づけます。

f:id:Raspberly:20210329233636p:plain



これで終わりです。
外部ツールを使わずUnityだけでオブジェクトの色を調整できました。それも数回クリックするだけです。

f:id:Raspberly:20210329233904p:plain

Palette Studioからカラーパレットを編集することで簡単に調整できます。
(そのたびにカラーパレットの保存をする必要があります)

 

 

まとめ

・Palette Studioを使うと簡単にカラーパレットを作成できる
・Pixel Painterを使うとピクセルアートをテクスチャやスプライト用に作成できる
・Recolorコンポーネントを使うと、オブジェクトやスプライトの色をランタイムに変更できる

冒頭の通り、今なら無料で購入できるので使う予定がない方も今すぐに購入処理をしておきましょう。

 

 

 

参考資料

公式ビデオです

www.youtube.com

 

www.youtube.com

 

 

 

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

 

 

※本記事にはAssetStoreアフィリエイトリンクが含まれています。

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。

【勉強会レポ】: 📣 unity1week online共有会 #4

勉強会のレポート(メモ)です。
参加したのはこちら「📣 unity1week online共有会 #4」

meetup.unity3d.jp

ハッシュタグ : #u1w共有会

アーカイブはこちら

www.youtube.com

 

前回はこちら

raspberly.hateblo.jp

unity1week共有会って何?

unity1weekでいろんなゲームを遊んでいると
「どういう実装をしているんだろう」「どんな人が作っているのか」など気になることがいっぱい!

それら気になることを直接聞けばいいじゃん!というのがunity1week共有会の始まりで、
みんなで学んで成長することが趣旨です。

 

unity1weekについてはこちら

Unity 1週間ゲームジャム | フリーゲーム投稿サイト unityroom

 

 

 

 

 

 

#1 疑似グループ開発の結果を1人で振り返る

作ったゲーム :

ゆうしゃおねがいしなないで! | フリーゲーム投稿サイト unityroom

デザート探偵 奄美一郎 〜魅惑の回ールケーキ〜 | フリーゲーム投稿サイト unityroom

きみに夢中(タイピングゲーム) | フリーゲーム投稿サイト unityroom

 

チーム開発がしたいが心理的ハードルが高い(難しい、迷惑をかけちゃう、めんどくさい )

→一人でチーム開発すればいいと考えました
担当数人にプロジェクトマネージャー全て自分です。

メリット

・ゲーム開発から逃れられない状況を自分で作り出せる
・いろんなゲーム作りが経験できる(新しい技術に挑戦できる)
・プロジェクトマネージャー(自分)に負担をかけないよう、自分同士の責任感が生まれる

デメリット

クオリティが犠牲になる、クオリティに凝る部分は重視できなくなる
手段が決まっているので、自分が達成したいことを取捨選択するのが大切

なんで3つもゲームを作ったのか

「回」文をテーマに3つのタイトルがつながるように作りました

 

 

 

 

 

#2 Notionを使ってUnity1Weekを完走した感想

作ったゲーム : RollingDrive | フリーゲーム投稿サイト unityroom

今回のゲームを作るにあたってNotionというサービスを使いました

Notionって?

いろいろできるメモサービスです、できることが多いので紹介しきれません

情報が整理されて俯瞰して確認できる

階層的にメモができるのでメモした所を忘れない、いい感じのレイアウトにしてくれる

看板っぽいやつが使える

Trelloみたいなのが使える
タスクのメモ、ゲームのボリュームを洗い出せ進捗の判断ができる

見返してニヤニヤできる

やってきたタスク、完了したカードを眺めてモチベーションを保てる

チームでも使える

ストアカウントを使うことで共有できる

タイムライン

ガントチャート的なもの、作業にかけた時間が可視化できる 
将来的に似たような作業が発生した場合に目安にできる

 

個人開発でもチーム開発でもNotionはいいぞ

 

 

 

 

#3 ドット絵描けない人がドット絵ゲームを作る

作ったゲーム :  Cyberpunk: VICE RUNNER | フリーゲーム投稿サイト unityroom

背景

街のアセットとProPixelizerというドット化シェーダーアセットを使いました。
これでドット絵みたいな質感になります

動きをつくるコツ

ドット絵っぽく見せる場合、1ドットが何unitに相当するか把握しposition/wotation反映時に丸める
細かいことを考えなくても大き目な数字で丸めればそれっぽくなる

UIアセット

ドット絵アセットを使いました

足りないUIは自分で描きました、UIはキャラクターと違う普通のUI作成と基本は同じ

顧客の顔

いちいち描いてられない
AIが自動生成した顔を集めてProPixelizerでドット化する

まとめ

・既存アセット+ProPixelizerで無限の可能性がある
・人物に関してはAIの力を使う
・ドット描ける人は最強なので捕まえて逃がすな

 

 

 

 

#4 実績ゼロから始めるunity1week

作ったゲーム :  Any% Glitched | フリーゲーム投稿サイト unityroom

イデアの作り方

ゲームを考える習慣をつける
頭の中で「普段の生活で目に入ったものをゲーム化する」習慣をつけました
イデアのストックの中から組み合わせた結果として今回のゲームになりました

まとめ

普段から意識してアイデアの種をストックしておく
関連させて覚えておく
イデアを組み合わせつつ納得感のあるまとめ方をする


u1wを通して成長する方法

u1wに参加して1年、評価を高めるためにしてきたことは、とにかく他の人のゲームを遊ぶこと
・どう作っているのか、自分で再現するとしたらどうするか
・気に入ったら再現する→自分に足りていない技術や身に着けたい技術が明確になる

 

 

 

 

#5 ドット絵で色々表現チャレンジ

作ったゲーム :  KAIJU | フリーゲーム投稿サイト unityroom

今回作ったゲームの細かい表現などをお話します

色の決め方

unity1week online共有会#2のRyosukeさんの発表を見よう

raspberly.hateblo.jp

表情差分

本体のスプライトと別のスプライトを重ねて置き、切り替えて対応
これなら新規の表情パターンの追加とAnimatorの連携が用意
アニメーションはAnimatorを使いました

ゲージアニメーション

SpriteMaskとDOTweenを組み合わせて実装
マスクの大きさと位置をズラす

UIアニメーション

3枚の画像で構成
手書きで書くよりも直線ツールやスプレーで雑に引いた方が手書きっぽい表現になる

UIの文字

TMPとAnimatorを組み合わせて落書き風の文字を再現
ゆらぎはスクリプトとAnimatorで切り替えています

まとめ

作成したゲームの表現方法を紹介しました
Animatorが思っていたより万能でした

 

 

 

 

#6 作り込みのための引き出し by NOAちゃんファンクラブ

作ったゲーム :  NOA's Project | フリーゲーム投稿サイト unityroom

NOAちゃんファンクラブというチームで参加しました
今回はこの開発の流れと学んだことについてお話します

開発

Miroでチームビルド、目標や下準備を打ち合わせ
1日目と2日目にクラス図を作成し、インターフェースを作ってそこから実装を行う
毎日テストができるようCloud Buildで自動ビルド

仕様変更

テストプレイから仕様変更
いろんなゲームをプレイされていて引き出しの広いnattuhanさんからご意見をいただきました

SilCilSystemの検証

導入が楽に進んだので短期開発には使ってみてもいいのかも
サンプルやドキュメントから試した方がよい

まとめ

引き出しって大切、いろんなゲームをすることが大事
チーム開発をするうえで意識の統一が大事
開発中はチーム全員で楽しむ

 

Steam公開に向けて開発中です

 

 

 

 

#7 知らない人とunity1weekした話

作ったゲーム :  ゲンバネコミミショウジョ | フリーゲーム投稿サイト unityroom

今回伝えたいことは「知らない人とu1wして将来の仲間を見つけよう」
自作ゲームを作るうえで将来のチームメンバーを探すためにu1wを再開しました

良い所

・たった1週間で相手のことが知れる
・自分のアピールにもなる
・失敗しても大丈夫(断られても大丈夫、積極的に声をかけていこう)

集団制作するうえでやったほうがいいこと

・事前にできることはやっておく
 コンセプトのすり合わせ、Unityの使い方
・毎日通話
 2往復以上かかるなら通話する、何を話すかは事前に決めておこう
・共同制作者の長所を活かす
・タスクの切り分けは明確に行う

悩みポイント

・自分の作りたいゲームにするのは難しい
・共同制作者がガッカリしないよう評価やプレイ数は意識せざるを得ないので攻めた企画は難しい
・ただし気にしすぎもよくない

まとめ

知らない人とunity1weekして将来の仲間を見つけよう

 

 

 

 

#8 コミュニケーションから逆算するゲームデザイン

作ったゲーム :  回覧!ヒダリ先輩を探せ! | フリーゲーム投稿サイト unityroom

ゲームとコミュニケーションは切っても切れない仲
コミュニケーションありきでゲームの企画を考えた方がいいのではと考えるようになった

ゲームジャムのコミュニケーション

u1wの良い固有要素は相互評価。自分のゲームを遊んだ人を見に行けるコミュニケーション。
もう一つがコメント欄で今回はこちらに着目しました。
最初はゲームからコメントを取りに行くことを考えましたが大変そうなので断念。

他のゲームのコメント欄に答えがある謎解き

わりとよかったが、作品数が多いのでもっとコメントを書けばよかった
なんなら全部にコメントするくらいの気概があればもっと面白かったかも

 

 

 

 

#9 2Dゲーム背景時短レシピ

作ったゲーム :  廻虫 | フリーゲーム投稿サイト unityroom

初めての2Dゲームをした時の時短テクニックの紹介
写真を絵に見せるテクニックと、3Dモデルを2D背景を作るテクニックが紹介されています。

デモがふくまれているので動画でどうぞ。のちほどNoteでまとめられます。
投稿されました。

note.com

 

一番言いたいことは、
「正攻法でなくとも時短のため自分だけの方法を見つけよう」

 

 

 

 

#10 モチベーションとモーションの話

作ったゲーム :  Press Button | フリーゲーム投稿サイト unityroom

モチベーションの話

今回の目標

Twitterでバズるネタゲームをつくる
・timelineをさわる
・新しい技術にふれる

気づいたこと

・バズる人にあこがれていただけで、ネタゲームを作ることは好きではなかった
・「さわる」という目標はすぐに達成してしまう

反省

・作りたいゲームかを考えるべき
 モチベーションが保てなくなる
・完成まで継続する目標を立てる
 

モーションの話

※ここでのモーションとはUIのアニメーションのことです

モーションを身に着けるために多くのインプットとアウトプットをしました

インプット

Twitterでモーション制作者をフォローし上げられている動画を見る
・unityroomでモーションを観察する
モーション周期表を見る

自分の中の引き出しを増やせる。参考にしたり真似したり組み合わせることは悪いことではない。

アウトプット

実現する力は慣れが9割、たくさん作るしかない
DOTweenだけでなくAnimationやTimelineでもよい

まとめ

・好きなゲームを作るのは楽しかった
・インプットとアウトプットはとても大事
・あれこれ考えるよりも簡単なところからインプットアウトプット 

 

 

 

 

 

 

以上です。
発表者のみなさんお疲れさまでした。👏👏👏

 

他の方の感想ブログ

note.com

note.com

 

 

 

間違っている箇所、消してほしいツイートがありましたらコメントにお願いします。

【勉強会レポ】: Gotanda.unity #17

勉強会のレポート(メモ)です。
参加したのはこちら「Gotanda.unity #17」

meetup.unity3d.jp

ハッシュタグ : #gotandaunity

五反田発祥のUnityに関するLT会です。

 f:id:Raspberly:20210114033040p:plain

アーカイブはこちら

www.youtube.com

 

togetterまとめはこちら

togetter.com

 

 

 

LT#1 (スポンサー枠) もんりぃ先生: Unityプロジェクトの基盤・設計まわりでしくじってしまった話

今回は、ごっこランドを開発運営してきて「ミスったなぁ」っていうようなモノ、
それがどうすべきなのか、どう対応したのかについてお話します。

Unityのバージョン

長いこと5.3で固定していた、2017の後半でアプデが必要になりめちゃめちゃ苦労した。
こまめにUnityのバージョンを上げましょう。キッズスターでは年号単位で上げていっています。

プロジェクトのサイズ

どんどん肥大化しアセットのインポート時間やコンパイルの時間が長くなった。
(特殊な事例ですが)リポジトリを分割し、製品版のビルドにはスクリプトのみ入るようにし他は全部AssetBundleで提供。

パッケージ管理

自社ライブラリを細かく分割して管理。UPMがなかったためnpmを使ってインストール
→ライブラリ間の依存関係が複雑に

モノレポ化で解消。Unity2018以降を使っている場合はUPMを使った方がいい

ライブラリの選定

流行に飛びつくことをしてしまった→使えなくなったりアプデできなくなったりした
本当に必要か考えましょう

リソースの管理

オレオレAssetBundleを作ったけどパフォーマンスが微妙だった。元に戻すのも苦労した。
公式の機能を使いましょう。現時点であればAddressablesでいい。

アーキテクチャ

過去にClean ArtchitectureについてLTなりしてきましたが、独自解釈をしすぎていてあまり信用しない方がいい
ここに関してはとりすーぷさんのこちらがオススメ

learning.unity3d.jp

本当にプロダクトにあっているアーキテクチャなり設計を選定してライブラリを管理するのがいい
ここに正解・最適解はないので、プロダクトやチームによって話し合って見つけるのが肝要

まとめ

・Unityの公式の機能にどんどん乗っかれるようにしておくのがよい
・設計やアーキテクチャはプロダクトやチームにあったものを採択する

 

 

 

 

LT#2 かこ: もう泣かない,UIの自動レイアウト活用

Unityのアスペクト比を変えたときにUIがおかしくなると泣いちゃいますよね。それを共有します。
今回のゴールはFreeAspectでも正常にスクロールするメニューをLTを見るだけで作れるようにすることです。

 

Gif付の解説がメインのため、動画をごらんください。

 

 

 

 

LT#3 Kuniwak: Unity の meta ファイルの過不足の merge を防止しよう

.metaファイルの過不足をストレスなく見つけるツールを作ったお話

 

.metaファイルに過不足があると

.meraファイルをcommitし忘れる

.metaファイルがないと新たに.metaファイルが生成される。(GUIDが再割り当てされる)
GUIDの参照が切れてマテリアルなどがバグる

.metaファイルを消し忘れる

毎回関係ない差分が出てきてうざい

 

このツールを使うと、コミット時にcommitされていないファイル・消されていないファイルを表示してくれる。
Githubの機能を使うとマージできないようになります。
ただし検査に時間がかかるとストレスになるのでストレスがないように開発しています。

Jenkinsは甘くはない

Jenkins上で生成されたアセットに.metaファイルがない、
そうなるとJenkinsが勝手に差分をマージされ、.metaファイルが欠けたりしてしまう
→簡易的にautofix機能を入れて解決

運用してわかったこと

.meta過不足問題は誰も悪くなかった
UnityやGitの仕様に翻弄されているだけ

 

今回紹介したツールはDeNAOSSとして公開しています

github.com

 

 

 

 

 

LT#4 40: Unityでアクションゲームのあれこれを実装してみる

プロジェクトはこちら

github.com

 

こんなのを作りました。

ヒットストップとカメラシェイクの二つをのせています。

ヒットストップ

攻撃を与えたものと与えた対象を一定時間止めること

画面全体を止めない事。
完全に止めないこと(処理落ちっぽくなるため)

Unityで実装する場合

攻撃ヒット時にAnimatorのSpeedを0.02にして遅くします。

カメラシェイク

攻撃がヒットした時にカメラが揺れること
・カメラと視点両方を揺らす
・縦横両方に揺らす
・揺らしすぎない

Unityで実装する場合

CinemachineとAnimatorを使います。
CinemachineのFollowとLookAtを設定します。(Followの子にLookAtを設定)
あらかじめ均等詰めびランダムな動きをするAnimationClipを作成しておきます。
AnimatorにTriggerを設定し、攻撃ヒット時再生するようにします。

まとめ

・ヒットストップ実装のコツは画面を止めない事と完全に止めない事
・カメラシェイク実装のコツは、カメラと視点両方を揺らすこと、縦横両方に揺らすこと、揺らしすぎない事

 

 

 

 

 

LT#5 いも: どこのご家庭にもある自作シーンマネージャーの話

毎回作るのに全然情報がでないシーンマネージャーに関するお話。
スライドが多いので動画をごらんください。

 

 

 

 

 

LT#6 (スポンサー枠) やまたく: ごっこランドでみかける2Dアニメーション

今回はキッズスターのこだわりでもある、子どもに寄り添った絵作りアニメーションについてお話します。

ごっこランドのアニメーション

キッズスターのアニメーターチームはこどもxあそびxまなびを意識しています。

あそび:動いているものと反応
まなび:わかりやすい展開と表現
こども:あそびとまなびを体験してお仕事自体を楽しんでもらう

さわることで起こる、移動/変形/エフェクト/音など、これらはUnityと相性がよい

ごっこランドのガイドの意識

大人の考えるチュートリアルは使えない
・動いているものに興味をもってもらいガイドで導く、画面は止めない
・画像やガイドも統一

始点と終点がインタラクティブに変化するガイド

Constraintで対応しました。
始点と終点をConstraintで高速して、Weight値で引っ張るようにしました。
Constraintについては過去にも登壇したことがあります。

learning.unity3d.jp

 

 

ところが敵はまだまだ出現する
キッズスターでは常に人材を募集しています

www.wantedly.com

 

 

 

 

LT#7 うどん: Unity+Airtest入門 ~Unityでお手軽実機の自動テスト~

今回はAirtestとPocoの紹介をします。

Airtestとは

NetEase社のモバイルゲーム向け自動テスト用フレームワーク
タップやスワイプなどのUI操作や画像ベースのUI操作を簡単にできる
IDEも公式で用意されていてAPIもとてもシンプル

Pocoとは

NetEase社のUI自動テスト用フレームワーク
Unity、COCOSなどに対応
ヒエラルキー解析によるUI処理ができる(HierarchyのGameObjectを取得しタップするなど)

 

AirTestの使い方についてはスライドをどうぞ

 

まとめ

めちゃくちゃ便利です。UIのテストが直感的に実装できます。
ヒエラルキーベースのテストが優秀。

 

会社ではチュートリアルの自動テストや多人数が必要な機能のテストに使用しています。

ドキュメント

Airtest

Poco

 

Qiitaも書いています

qiita.com

 

 

 

 

LT#8 きゅぶんず: Adobe XDを使うと、こんなに効率よくゲームUIが作れちゃうの!?

頭に思い浮かんだUIを素早くUnity上で表示させる方法だったり、UIを変更するサイクルを高速化する方法についてお話します。

Adobe XDとは

Adobe製のUI/UXデザインツールです。UIを作るためだけに作られた専用のツール。
無料プランもありWindowsでもmacOSでも動きます。

www.adobe.com

AkyuiUnity.Xd

あわせて紹介するのがAkyuiUnity.Xdというライブラリ
MITライセンスで使えるXDからUnityに変換してくれるライブラリです。

github.com

 

ここで動作デモ
動画をご覧ください

 

AnKuchen

生成されたPrefabを扱うオススメライブラリ
Scriptから文字列指定でGameObject、Componentを取ってこれる。

github.com

まとめ

今日発表した仕組みを使うことで、画面を素早く作って素早く試せる
変更したい箇所が出てもXD上で編集してボタンで反映、開発サイクルを高速化できる

 

もっと知りたい方向けに解説動画を上げています

www.youtube.com

 

 

 

 

LT#9 ゆーじ: 知らなかった!DOTween便利Tips集

便利だけど知らない人がいそうなDOTweenの機能をパパっと7つ紹介します

Tips 1: 秒数に0を指定する→DOMoveの引数にそのまま0を渡す
Tips 2:相対的な値を指定する→オプションにSetRelative(true)をつなげる
Tips 3:timescaleを無視する→オプションにSetUpdate(true)をつなげる
Tips 4:開始時の値を指定する→オプションにFrom()をつけると開始時の値を指定できる
Tips 5:一定時間後に処理実行する→DOVirtual.DelayCall()で実現できる
Tips 6:共通のパラメータを使う
 TweenParams型の変数にオプションをメソッドチェーンでつなげることで、
パラメータのプリセットのようなものが作れるSetAsでTweenに適用できる
Tips 7:往復アニメーション→SetLoops(2, LoopType.Yoyo)を指定することで
行って戻ってくるアニメーションができる

まとめ

DOTweenは便利な使い方がたくさんあります
公式ドキュメントを見るだけでも新たな発見があるかも

dotween.demigiant.com

 

 

 

 

 

スポンサー紹介

キッズスター

ごっこランドを作成しています。

biz.kidsstar.co.jp

お陰様で大好評です。エンジニア絶賛大募集中なのでWantedly@monryまでどうぞ

www.wantedly.com

 

ワンダープラネット

シンプルだけど奥深い事業をしています。
グローバル展開を行う専用のスタジオがあります。
エンジニア募集中なので興味のあるかたはこちらからどうぞ。

www.wantedly.com

 

 

 

次回予告 

次回は5月開催を予定しているとのこと

 

 

 

以上です

 

間違っている箇所、消してほしいツイートがありましたらコメントにお願いします。

【初めてのアセットストア】デビュー応援キャンペーンのススメ【応援記事】

現在アセットストアでは、アセットを購入したことがない方向けの応援キャンペーンを開催中!

このキャンペーンに興味のある方、初めてアセットストアでアセットを購入する方に向けた記事です。

f:id:Raspberly:20210318235430p:plain

 

 

大前提として、

この記事は私の主観で書かれた記事です。
他の方の意見も取り入れてどのアセットを購入するか決めましょう!

 

デビュー応援キャンペーンとは

アセットストアでアセットを購入したことがない方向けのキャンペーンです。
厳選された30アセットの中から1つだけ9.99ドルで購入できます
決済画面でクーポンコード「MARCHWELCOME」を入力することで反映されます。
↓こちらのバナーからどうぞ

f:id:Raspberly:20210318235430p:plain

 

 

 

キャンペーン対象のアセット

対象アセットは30種類あります。多いので画像でまとめたものを貼っておきます。
詳細はイベントページをご覧ください。

f:id:Raspberly:20210318212653p:plain

f:id:Raspberly:20210318212718p:plain

f:id:Raspberly:20210318212759p:plain

f:id:Raspberly:20210318212815p:plain

f:id:Raspberly:20210318212835p:plain

f:id:Raspberly:20210318212910p:plain

f:id:Raspberly:20210318212929p:plain

f:id:Raspberly:20210318212954p:plain

 

過去に紹介記事を書いたアセットもあります。

raspberly.hateblo.jp

raspberly.hateblo.jp

raspberly.hateblo.jp

raspberly.hateblo.jp

 

 

 

 

どのアセットがオススメか

この記事を読んでいるあなたの状態によりますが、
使いたいアセットがあるのならそれを選ぶべきです!

この3Dモデルが好きだから、このエフェクトがかっこいいからなど直観で選んで問題ありません。

 

どのアセットもすぐに使う予定はないけど何か欲しい方向けに2つ紹介します。 
どちらもプロジェクトを選ばず使いやすいものです。

Odin Inspector

Unityエディターの拡張アセットです。
開発をする上で多用するInspectorビューを使いやすくしてくれます。
このアセットの一番の魅力はその汎用性です。プロジェクトを選ぶことなく活用できます
さらに利用者がかなり多く、検索すると使い方に関する情報がたくさんでてくるのもポイント。

 

DOTween Pro

UIやオブジェクトの移動、回転、拡大などをコントロールできるアセットです。
一番のオススメですが、他に欲しいアセットがあるならそちらを優先した方がいいです
理由は2つあります。

元々定価が安い

このキャンペーンは、対象のアセットがどれでも9.99ドルで購入できるというものです。
そのため定価が高ければ高いほどお得なため、定価が15ドルのDOTween Proを購入するのなら別のものがいいといえます。

セール対象に選ばれやすい

アセットストアでは定期・不定期にセールが行われますが、セールに選ばれやすいアセットが存在します。
DOTween Proはその1つで頻繁に50%OFFの対象になっています
セール期間中はより安く購入できます。直近ですとGGJセールで50%OFFでした(2021/1/26~2/1)

 

 

 

定価が非常に安いためセールを待たずとそのまま購入していいと思います。それだけ便利なアセットです。
アセットの中でも特に使用者が(体感)多く、解説記事や関連するLTも豊富にあります
使い方がわからなくて積むことはまずないです。

ものすごく参考になる解説動画があるので最初はこちらをどうぞ

www.youtube.com

 

無料版もあるので気になったらお試しください

 

 

 

 

アセットの購入方法

アセットストアを初めて使う方のために、アセットの購入方法を紹介します。

Asset Storeを開いてログイン

Asset StoreのWebページを開いてログインします。
UnityアカウントはUnity Hubインストール後に作成しているはずですが、まだの方は作成してください。

f:id:Raspberly:20210318200400p:plain

 

セール会場のページから、購入したいアセットを選び詳細ページに行きます。

f:id:Raspberly:20210318201706p:plain

青い今すぐ購入ボタンを押します

f:id:Raspberly:20210318201808p:plain

 

決済画面に遷移するので各種情報を入力します

f:id:Raspberly:20210318202616p:plain

支払い方法を入力します。クレジットカードとペイパルが使用できます。

f:id:Raspberly:20210318202946p:plain

クーポンコード「MARCHWELCOME」を入力し適応します。

f:id:Raspberly:20210318203309p:plain

小計が9.99ドルに更新されることを確認します。

f:id:Raspberly:20210318203448p:plain

最後に、アセットのエンドユーザー使用許諾契約を同意し、次へボタンを押して完了です。

f:id:Raspberly:20210318204200p:plain

購入後の注文明細画面から「Unityで開く」を押すとすぐにUnityでインポートできます。

 

 

 

まとめ

・アセットストアデビュー応援キャンペーンの紹介とおすすめアセットの紹介を行いました
・最初に書いた通り、Twitterで他の方の考えを取り入れたり、アセット名で検索して情報を集めて考えましょう

・今回紹介したOdinDOTweenはゲーム・非ゲームを問わず活躍できるので胸を張ってオススメします

 

 

ちなみに私が初めて買ったアセットは「Mystic Arsenal」というエフェクトアセットです。
ストアページの動画を見て直観で選び、当時作成中のゲーム用に購入しました。

f:id:Raspberly:20210318195628p:plain
汎用性の高いもの、人気のあるものを選べば失敗はしませんが、自分の欲しいものを買うのが一番です。

 

 

 

 

このキャンペーンに関する他の方の知見とか

highmix-w.net

 

 

 

フォローしておくべきアカウント

最後に、快適なアセットストアライフを送るためにフォローしておくべきアカウントを2つ紹介します。
どちらもアセットストアに特化したアカウントです。

Unity AssetStore Japan

Unity AssetStore Japan公式アカウントです。

twitter.comセールやキャンペーンの情報を発信しています。
さらにYoutubeチャンネルでは開催中のセールのおすすめアセット紹介動画を投稿しています。

プレイリストはこちらUnity AssetStore Japan - YouTube

Noteもあります

note.com

 

汗人柱

twitter.comおそらく日本で一番有名なアセットストアに特化したブログUnity AssetStoreまとめ」を運営している方です。

www.asset-sale.netセールの情報や、アセットに関するイベントを開催しています。

 

 

 

以上です。

 

当ブログも不定期ですがアセット紹介記事を投稿しています。
フォローや読者登録してくれるとうれしいです。

 

過去にアセットストアに関するLTをしました。
やや情報が古いですが、アセット選定の考え方や積みアセット問題を取り上げています。

learning.unity3d.jp

【アセット紹介】Nature Rendererできれいで高速な草を描画する【Unity】

今回はアセットの紹介をしていきます。
紹介するのはNature Renderer。
Terrainの植生グラフィックを向上させるアセットです。

 

 

お得なセール情報!

現在アセットストアではアセットパスポートセールが開催中! 終了しました
ワールド作成に最適なアセットが50%OFF!

詳細とアセットの一覧はこちらのバナーからどうぞ

f:id:Raspberly:20210311224247p:plain
今回紹介するNature Rendererも50%OFF対象アセットです。

 

 

どんなアセット?

Terrainの植生をきれいに高速に描画するアセットです。
つまり草です。草のグラフィックを向上しパフォーマンスを改善してくれます。(木はそのままです)
全プラットフォーム全レンダーパイプライン対応です。

f:id:Raspberly:20210311195918p:plain

 

なんと日本語対応のドキュメントが用意されています。
無料のトライアル版もあるので気になる方は購入前に試してみるのもいいでしょう。

 ゲームの速度を落とさずに、大量の植生をレンダリングします。

Nature Rendererは、Unityのデフォルトの地形詳細システムを置き換えることにより、植生レンダリングの品質を向上させます。すべてが既存のデータで機能します。同じ草、植生、樹木を使用し、既存の地形を維持します。レンダラーをレベルアップするだけです。

 

25,000人以上の開発者から信頼されています。豊富なドキュメントを備えた、洗練された最適化されたプラグインが期待できます。

GaiaやMapMagicなどワールド作りでよく使われるアセットと互換性があるのもうれしいポイント。

他のアセット
GaiaMap MagicMicroSplatCTSTerrain ComposerMegaSplatMegascansThe Vegetation EngineAmplify ShaderEditorなどと互換性があります。 Nature Rendererは、地形システムを使用するほぼすべてのアセットと互換性があります。Nature ManufacturingSynty Studios

 

 

ちなみにライセンスが2種類あり、
個人向けのPersonal Licenseと、開発スタジオ向けのStudio Licenseがあります。
Studio Licenseは一つのスタジオに所属する全員に割り振れるライセンスです。

 

また、独自のパッケージマネージャがあるのも特徴で、更新のチェックや最新バージョンのアップデートがすぐに行えます。

f:id:Raspberly:20210309190513p:plain

 

 

実は過去にアセットストアで販売されていたメガバンドルに含まれていたアセットです。
バンドルを購入していた方はすぐに遊べます

www.asset-sale.net

 

 

 

実行環境

Unity2020.1.0f1

Nature Renderer: Personal License ver1.4.3

 

 

 

インポートの確認

アセットインポート時はこんな感じです。
コアとなるアセットのインポートと、各RP用アセットのインポートで2回インポートが行われます。

f:id:Raspberly:20210309231010p:plain

1回目の後すぐにプロジェクトに合わせたunitypackageが自動的にインポートされます。

f:id:Raspberly:20210311015733p:plain

インポート後は、ドキュメントが自動的にブラウザで開かれます。

ネイチャー・レンダラー – Visual Design Cafe Support

 

 

デモシーンの確認

デモシーンはこちら
プロジェクトのRPによってフォルダ名が変わります。

f:id:Raspberly:20210311191115p:plain

草や木が生えているTerrainがあるシーンです。Wind Zoneもあるため風で揺れます。

f:id:Raspberly:20210311195918p:plain

 

 

 

 

実際に試してみる

実際にTerrainの作成からやってみます。手順はものすごく簡単です。

Terrainの作成

Terrainを作成し、草をたくさん生やしてみます。
草はNature rendererデモで使われているものをそのまま使います。

f:id:Raspberly:20210310192520p:plain

見栄えのためGlobal Windも設置しています。

 

 

Nature Rendererのアタッチ

TerrainにNature Rendererコンポーネントをアタッチします。

f:id:Raspberly:20210310195712p:plain

設定はこれだけです。コンポーネントをアタッチするだけ!

 

コンポーネントの無効化あるいは削除すれば元に戻ります。

 

違いを確認

実際に違いを見ていきます。
コンポーネントのオンオフをしてみた場合こうなりました。
影が自動的についてくれるのでこれだけでリッチに見えますね。

f:id:Raspberly:20210311201625g:plain

 

 

次にパフォーマンスを比べてみます。
上がNature Renderer無効時、下がNature Renderer有効時です。

f:id:Raspberly:20210310192813p:plain

 

f:id:Raspberly:20210310192845p:plain

ドローコールが496から33へ、三角形数が9.0Mから61.4kへ、頂点数が10.4Mから71.7kへと大幅に軽量化できています。

プロファイラーで見てみると各種値が一気に下がっているのがわかります。
ただしCPUに関してはあまり変化がありませんでした。

f:id:Raspberly:20210310203236p:plain

メモリを見るとMesh Memoryが1.52GBから2.0MBへと大幅に減っていますね。

  

以上です。

 

まとめ

・Nature Rendererを使うと植物を高速にきれいに描画できる
・Terrainにコンポーネントをアタッチするだけ
・今回紹介しませんでしたが、カスタムシェーダのサポートやストリーミングでの読み込みもできます。

 

このアセットはUnity標準のTerrainの機能を置き換えて処理をしています。
そのため完全オリジナルの地形作成ツールを使っている場合は動作しないのでご注意ください。

 

 

 

 

 

他のアセットの紹介記事はこちら↓

raspberly.hateblo.jp

 

 

 

※本記事にはAssetStoreアフィリエイトリンクが含まれています。

他、間違っている箇所、わかりにくい所がありましたらコメントにお願いします。