Alpaca Soft Blog

ゲーム作る系 草食動物の備忘録

【Unity】積み上げ物理ゲーム制作に挑戦

f:id:alpacatech:20171212211908p:plain

 

作った物

こんな感じの積み上げゲームです。

積み上げた後に、パンを挟んで3秒耐えればスコア化される

チキンレース感も盛り込んだゲーム。

 

経緯

・前から物理ゲームに挑戦してみたかった

・物理ゲームは初めてなのでシンプルな物に挑戦

(風呂敷広げすぎない事もテーマ)

 

・よくある積み重ねゲームですが、
肉だけ挟んだ絵を見てみたいので作成開始。

 

制作について

意外と難しかった物理ゲーム

プロトタイプ

適当に物理設定つけて落とせば何とかなるやろと思って作ったのですが、
そのままだとすぐにどこか飛んでいきます。

 

3Dから2D 

3Dで判定付けるのをやめ、
素材は3D、計算はRigidBody2Dで制御するようにしました。
(当たり判定はUnityが自動的に作ってくれたので楽でした)

 

設定

・摩擦係数などを調整した

・下のパンを移動させる時、単純に移動するだけでは

上の肉が置いて行かれるのでパンと肉で親子関係を構築したりしました。

・クリア時の停止も、timeScaleをいじると全体が止まるのでスクリプト制御しました。

 

インターネットランキング対応

対応しました


使用アセット

モデル 

今回の主役ハンバーガ

 

エフェクト

画面にブラーやカラーバランス等様々な効果をあてることができる

 

 Post Processing Stackの何種類か設定済みファイルです。

Post Processing Stackの設定よくわからないって人はそのまま使ったり、

値見て勉強になるんじゃないでしょうか。

UE4風とかあります

 

 テキストアニメーションを簡単に実装できます。

 

拡大しても綺麗に表示されるテキスト描画です。

 

  様々な数値の補間をコードで制御できます。

 

様々な数値の補間をコードなしエディターだけでも制御できます。便利。

 

 

どこかで見たことあるようなコインと紙吹雪のエフェクトです。

紙吹雪利用しました。

 

音楽

Game Music Pack - SUITE

BGMやジングルたくさん入ったアセット。

 

Universal Sound FX

 

3500種類以上の効果音アセット。

8bitやデフォルメされた音もありますが、リアルな音が多めです。

 

スカイボックス

山や森の上のスカイボックスです。

 

UI

139 Vector Icons

 

アイコンたくさんあります。

素材は白いので色設定で表示色変更することが可能です。

 

拡張アセット

UnityEditorを便利にするアセット群です

フォルダアイコンを変更できます。

利用するフォルダを変えておけばフォルダが多くなった時便利

 

Cut and Paste  Projectビューでアセットのカット&ペーストできます。

フォルダ間の移動がちょっとやりにくいのであったら便利。

コピペは出来ないっぽい(コピペもしたかった...)

 

 

今後の予定

時間があればスマホでアプリ化したいです。

課題は、
Twitterで完成を共有させたい
・デザインを整えたい
・ゲームバランスの調整
(現状みんな似た点数になりそう。テストプレイしてもらって要調整)
Android/iOSのサービスを利用したスコアランキングや実績

スマホの傾きセンサーを利用した操作

等です。

 

 

 

作成したゲームはここで遊べます。

無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

#unity1week 作品をアセットでクオリティアップ

最初に

unity1weekのテーマ「夏」で作っていたやつ

作っていたのですが、他の物作りたくて開発途中で止めていました。

今回、勉強中の

・PostProcess

・TextMeshPro

・TextFx

等を利用してクオリティアップしアップロードしてみました。

 

 

クオリティアップ内容

Post Processing Stack

表示される画像にポストエフェクトをかけるアセットです。

このように変わりました。

説明長くなったので別記事

alpacatech.hateblo.jp

タイトルテキスト

TextMeshPro+TextFxによるタイトルの文字演出を行いました。

 

演出と、表示時間差を指定するだけですぐに作れます。

 

説明長くなったので別記事

alpacatech.hateblo.jp

 

スイカ

スイカは自作です。

スイカ〜テクスチャ&パターン作成

ここを参考にテクスチャを作り

sphereのマテリアルに設定

 

オンラインランキング

対応しました

 

使用アセット紹介

画面演出

Post Processing Stack画面に様々な効果をつけます。

 TextFXテキストアニメーションを楽に対応できます。

TextMesh Pro拡大しても綺麗に描画できるテキスト

 Pixel Arsenal ピクセル風パーティクルエフェクトです。

最初から光っているのでブルームと組み合わせにくい。

 

キャラクター

SDこはくちゃんズ・小碓学園夏&冬制服モデル - ダウンロード - UNITY-CHAN! OFFICIAL WEBSITE

おなじみSDユニティちゃん。

Optimize, SD Kohaku-Chanz! AssetStoreには最適化されたバージョンがあります。 

ポリゴン数は半分以下。 

 

HQ Fighting Animation FREEパンチなどのモーション

 

背景

Island Assets 背景に利用

Grass Road Race ランナー系ゲームに使えそう。今回はスカイボックスを利用

 

その他

 139 Vector Icons 無料の139種のアイコンです。便利!

 

 

 

 

 

以上。

 

作品はこちらで遊べます。 

無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

 

【Unity】TextFxを使ってテキストアニメーション

 

アセット説明

テキストの演出を行うアセットです。

↓PV

www.youtube.com

 

実際に使ってみた。

 

WebGLのデモ版

Text FX Unity Plugin Documentation

↑クリックでドキュメント&WebGLデモ

f:id:alpacatech:20171130125059p:plain

Intro テキストが出現した時の演出

Main 常駐している時の演出

Outro 終了時の演出

 

使い方

Unity上での設定

 Unity上でのツールもサンプルと同じ感じです

(FullEditorで細かいカスタマイズも可能)

 f:id:alpacatech:20171130144305p:plain

PlayOnStart チェックを入れると実行時に再生。

Delay 実行する時間差。

 

Intro / Main / Outro は演出です。

開始、ループ時、終了時

たくさんあるのでデモページで確認してください。

 

今回の件だと
UNITYCHAN!の文字 Delay = 0

真拳の文字 Delay = 1.5

すいか割りの文字 Delay = 3.0

クリックで~の文字 Delay = 4
で勝手にポンポンポンと出てくれました。

 

スクリプト

uGUI版の場合

public TextFX.TextFxUGUI textFx;
 再生
    textFx.AnimationManager.PlayAnimation(); 

 

再生中か
 if(textFx.AnimationManager.Playing){
// 再生中
}

 

 

 

 

TextMeshPro/NGUI に対応する

TextMeshProにも対応していると書いてあるのですが

アセットインポート後すぐ使えるのでなく、 

TextMeshProもインポートし、

 

 TextFx/3rd Party Asset Support 内にpackageがあるので、

それをまたインポート(ダブルクリックでいいと思います)

 f:id:alpacatech:20171130142350p:plain

 

すると、

メニューにTextMeshProのTextFxバージョンが追加されていました。

f:id:alpacatech:20171130142821p:plain

 

NGUIは持っていないのですが、同じようにpackageインポートで行けると思います。

 

 

最後に

TextFxは、UIだけでなく、

3Dにも対応しているので、

ゲーム内の演出にも利用できそうです。

 

 

 

 

 

【Unity】 Post Processing Stackを色々設定してみた

はじめに

今回はこのアセットを利用しました。

 

画面に効果がかけられます。

適当に設定するだけで、こんなに変わりました。

  

使い方

docs.unity3d.com


今回の設定はこんな感じ。

f:id:alpacatech:20171129021835p:plain

 Antialiasing

ジャギジャギ感をなくします。全体の絵がなじみます。

AmbientOcclusion

周辺光が届かないところを暗くする?

Doc:JA/2.6/Manual/Lighting/Ambient Occlusion - BlenderWiki

陰が引き締まる感じです。

Depth Of Field

指定の距離以外をぼかします。カメラのフォーカスみたいな。

手前と奥をぼやけさせる設定です。

Bloom

明るいところを輝かせるような効果です。

f:id:alpacatech:20171129021955p:plain

ColorGrading 

画面全体の色補正です。

今回は暗いところと明るいところをくっきりさせました。

 

f:id:alpacatech:20171129022028p:plain

Vignette

 画面の周りを暗くする

 

Bloomが人気ですが、

それ以外にも雰囲気出せるものがいっぱいありました。

 

Unity Gameウィンドウの中央に線が出る

 

f:id:alpacatech:20171130015632p:plain

 

結論から先に言うとGizmosが有効になっているだけでした。

 

経緯

線を描くオブジェクトなんて置いていないのに、

気が付いたらGameウィンドウ中央に線が出てました。

Canvasを非アクティブにすると消えたりする。

バグ?

 

よく見るとGameウィンドウのGizmosが有効になってました。

いつの間に押されたのか分からない。

 

十数分時間取られたよ。

つらい

 

UnityのUI周りのアセット調べてみた

UI関連のアセットをあんまり持っていなかったので調べました。

  

UI(レイアウトサンプル付き)

UI-Builder 

www.youtube.com

 

UNITY AWARDS2015 FINALISTのアセット。

 

 UIパーツを組み合わせて作成するアセットです。

豊富なサンプルがあります。

 サンプルは、一枚絵でなく配置されているので

よくあるアイコンアセットと違い配置する手間も省けます。

 

 

 

 Gamestrap UI

www.youtube.com

 

こちらも、組み合わせてUI作成するアセットです。

評価は★5で高いです。

 f:id:alpacatech:20180816181245p:plain

このようなレイアウトサンプルは13種類ありました(2018/08/16現在)

 

このアセットは素材だけでなく、

ボタンにグラデーションつけたり、

パレット管理で一括で色変更等ができるスクリプトもあるようです。

 

実際に使ってみました。

alpacatech.hateblo.jp

  

 

 

アニメーションエフェクト

TextFx 

www.youtube.com

テキストを色々なアニメーションで出したり下げたりするアセット。

タイトルや、ステージスタート、レザルト画面の文字が躍ると楽しいですよね。

DOTween等で実装するのもアリですが、

最初から数パターン用意されているのを選んで使える状態にあると楽ですね。

uGUI/NGUIはもちろんTextureMeshProにも対応しているみたいです。

 

※2017/12/06 追記。購入して試してみました↓

alpacatech.hateblo.jp

 

 

 

UI品質向上

TextMeshPro

www.youtube.com

通常のuGUIのTextを利用する場合、

拡大するとボケた画像になりますが、

TextMeshProの場合は距離情報に置き換えているので拡大してもぼけません。

また事前に準備している画像を利用しているので、通常のフォント描画より高速です。

 

 

 SDF Toolkit

www.youtube.com

 

自作の画像でSDFする場合は、こちら。

アイコン等の画像を拡大してもボケなしで描画できるようになります。

有料と無料があります。

無料は飾りなし、有料はメタリックなどの装飾が付けられます。

 

 

 

 

ゲージ

 Energy Bar Toolkit

www.youtube.com

 体力ゲージなどのグラフ形式を作成するキットです。

横だけでなく円等の他の形にも対応しています。

 

 

配置

Curvy Text

www.youtube.com

 

こちらは、テキストを曲線の上に配置するアセットです。

曲線なので、円状もできそうです

 

 

 

UI素材(FREE)

無料素材も最近増えてきたのでピックアップ(2018/08/16現在無料)

Asset Store GUI(FREE)

 

Modern UI Pack(Free) 

 www.youtube.com

 f:id:alpacatech:20180816181017p:plain f:id:alpacatech:20180816181052p:plain

無料でシンプルでかっこいいUI素材やサンプルがいろいろあります。

2018/4/24現在 namespaceが無いので他のUIとぶつかる可能性があるのが難点

 

参考

www.asset-sale.net

 

 139 Vector Icons 

無料で139種類のアイコンがあります。

デフォルトのボタンにこれを乗せるだけでも見栄えが違います。

アイコンは、文字と違い、世界共通情報なので

アイコンに差し替えるだけでもターゲット層が広がります

 

 SimpleVectorIcons

 こちらは200個

 白い素材はColorを変更して別の色に変更可能です。

 

  RPG Unitframes(ゲーム用ライフバー)

 RPG Unitframes #1 â POWERFUL METAL

3種類の外枠。

Healthbar等のFillAmountを0.0~1.0に変更するとゲージが操作できます。

 

 

 

ゲーム用ウィンドウ 

宝の地図みたいな紙の素材ウィンドウ

 

 

アイコン

Modern & Clean GUI

 Modern & Clean GUI

かっこいい。シンプル、SF的な 

 

Clean & Minimalist GUI Pack

 Clean & Minimalist GUI Pack

かっこいい。スタイリッシュ、フラット

 

Match 3 Candies Icon Pack

 Match 3 Candies Icon Pack

かわいい。ポップ。

 

4500 GUI Elements Pack

 4500 GUI Elements Pack

 かわいい。ファンシー

 

 

 

 

 

 

 

 

 

TextMeshPro - Font Atlasが作成されない

TextMeshProのFont Asset Creator

「Generate Font Atlas」を押しても何も反応がなかったので、

f:id:alpacatech:20171124195610p:plain

いろいろ試したところ、

フォント名が日本語だと発生する模様。

 

フォント名を英語名に変更したら無事出力されました。

f:id:alpacatech:20171124195557p:plain

 

利用したバージョン

・UnityVersion 2017.2.0f3

・Windows10 64bit

・TextMeshPro Beta 0.1.44

 

 

利用したフォント

www.fontna.com