原カバンは鞄のお店ではありません。スマートフォン用の表示で見る原カバンは鞄のお店ではありません。Unityを使ったゲーム制作のあれこれを綴っていきます。2020-01-14【Unity】DOTweenを使ったuGUIアニメーションUnityピリピリ「本当はやりたいんでしょ?ポケモン」とか「素直になりましょうよ。」とか余計なお世話に感じる今日この頃、「変わらずあなたを待ってますよ。」いやいや、誰もがポケモンで遊んだ事がある前提で話さないで下さい。こっちはメガドラ派なんで、ゲームギア派なんで。そんな感じで、今週から突如やってきた寒波の影響か肌も心もピリつく日々を過ごしている皆さんこんにちは。私は一刻も早く潤いが欲しいです。みんな大好きDOTWeenさて、DOTweenというアセットは無料版が存在することもあってUnity界隈では広く使われているアセットだと思います。名前の通りTween系のアセットなので主にSpriteや3Dオブジェクトを移動・アニメ動作させる為に使用されますが、用意されている関数は非常に多くてイメージ画像やボタンなどのuGUIについての関数も用意されています。dotween.demigiant.comパネルのスライドIN/OUTやボタンをクリックした時のアニメ動作もDOTweenを使うことで比較的シンプルなコードで実装することができ、シーケンスと組み合わせればインパクトのあるUIを実現できる・・・かもしれません。してuGUIを動かす場合はRectTransformに対してTweenを指定します。この為、DOTweenを使う前にGetComponentでRectTransformを取り出しておく必要があります。ImageObj.GetComponent<RectTransform>();別にDOTweenを使用する毎にGetComponentを行ってもよいのですが、性能を考えると上のように事前に動かしたいuGUIのRectTransformをキャッシュしておくのが良いかと思います。DOAnchorPosRectTransformを平行移動させるTweenにはDOAnchorPosを使用します。動作時間)ここで目的位置に指定するPositionはInspectorのRectTransform欄にある[PosX][PosY]を指します今回はマスクとその子オブジェクトの画像を平行移動させることでボタンの画像が変わるアニメを作ります。Hierarchy上の定義はこんな感じ、変わる前の画像が「NonSelectIamge」、変わった後の画像が「SelectImage」でMaskImageでマスクされています。Game空間上の配置はボタンの上に「NonSelectIamge」と「SelectImage」を重ねて置いてMaskImageをボタンの横に配置します。この状態でDOAnchorPosを使ってマスクを右にスライドさせるのと同時に、マスクの子画像であるSelectImageを逆方向(左)にスライドさせます。SelectImageを逆方向にスライドさせるのは、これによりSelectImageのWorld空間での位置は変わらないので、マスクと重なった部分だけが浮かび上がってくるようなアニメになるためです。元の位置(X=162)からX=0の位置へこれを実行させるとこんな感じのアニメになります。DOSizeDeltaSelectImageはMaskImageの子オブジェクトなのでMaskImageのScaleを変えると当然影響を受けてSelectImageもScaleが変化します。RectTransformのsizeDeltaを変えた場合はその限りではありません。sizeDeltaはInspectorのRectTransform欄にある[Width][Height]を指します。よって、MaskImageのHeightやWidthを変えることでもSelectImagが浮かび上がってくるようなアニメを作ることができます。動作時間)今回はHeightの値を0から本来の値へ変化させています。DORotate/DOLocalRotateuGUIを回転をさせる場合は3Dオブジェクトと同じようにDORotate/DOLocalRotateを使用します。こちらも上と同じようにRectTransformに対してTweenを使用します。動作時間)今回はZ軸に対して180度回転させています。DOColoruGUIのColorもTweenさせることができます。この場合はRectTransformではなくImageコンポーネントに対してTweenさせるので事前にImageコンポーネントを取り出す必要があります。動作時間)今回は六角形のフレーム画像と中央の三角アイコン画像の色を入れ替えるように変化させています。通常、ボタンを動かす場合はボタンコンポーネントに用意されているTransitionの設定やAnimationを使うことが多いかと思うのですがDOTweenを使用しても意外に簡単に実装することができます。DOTweenのPro版(有料版)になるとInspectorで値を入力してリアルタイムに動作を確認できるエディタも用意されているので、より簡単に複雑なアニメ動作を作ることができます。年末年始の休暇が明けて、「家族で旅行に行って・・・」とか「帰省先で久しぶりに同級生とあって・・・」とか「コミケでボーナス吹き飛んだ・・・」などと、そこかしこから聞こえる土産話に一切加われずに受け流す一方の皆さんこんにちは。部屋に閉じこもり過ぎて休暇明けに声が出るか不安だった皆さんこんにちは。休暇期間中、コンビニで「温めますか?」の問いに「いいえ」と答える時しか声を発していなかったことに気づいた皆さんこんにちは。お仲間ですね、今年もよろしくお願いいたします。例年通り年末年始は80%ぐらいはダラダラと無気力に過ごしていたのですが、残り20%を振り絞ってなんとかゲーム制作に試行錯誤した結果、いつの間にかこんな感じのシーンが出来ていました。Shaderを使って作っています。Shaderはテクスチャなしでモデルに色付けできるシェーダで、モデルの6方面(前後左右上下)それぞれに違う色を指定でき、フラットでカラフルな表現をしたい場合に有用なアセットです。Shaderで単一色のマテリアルに変更してみます。これが・・・こうなります。オブジェクト全てが同じ色で塗りつぶされているのでOutlineが強調されて線画(漫画)っぽくなったと思います。ShaderではSkyBox用のマテリアルも作ることができるので、背景となるSkyBoxもオブジェクトと同じ色にするとさらに漫画風味が増します。これを利用してちょっと動きのある動画を作ってみました。カメラが動いてもそれに合わせてOutlineも変更してくれるので違和感はありません。工夫すればインパクトのある画面が作れそうですね。今回のお題さて気を取り直して、今回はこんな感じのギミックを作ります穴の空いた壁に文字が貼り付ているように見えませんか?通常、こういうオブジェクトを作ろうと思うと"デカール"という手法を使うので、Unityの場合はそれ専用のアセットを使ったりするのですが、今回はその"デカール"は使用せず、文字の画像を3Dオブジェクトに映して・・・いるように見せています。窓シェーダーまず以前紹介した窓シェーダーを使用します。窓シェーダーとは「窓越しに見たときだけオブジェクトが現れる」シェーダーで、それ以外の範囲ではマスク(非表示化)されるため、ちょっと驚くような演出に使えます。styly.cc上記のサイトでは窓のギミックは「窓」と「窓の向こうに置くオブジェクト」のそれぞれに専用のシェーダーをアタッチすることで成立しています。その中で「窓の向こうに置くSprite用のシェーダー」が記載されていますが、どうやらこのシェーダーはUnity標準のImage用マスクでもマスク(非表示化)されるようで、窓オブジェクトから覗き込んでもImage用マスクが見える範囲ではその部分が非表示化されます。「窓」と「マスク」で挟み込む「Image用マスクが見える範囲」と書いたのはその文字通りで、例えば3Dオブジェクトで遮られるとその部分はマスクされません、つまりその部分だけ表示されて見えます。この性質を利用してオブジェクトをこんな風に配置しました。「窓」と「Image用マスク」でSprite画像と3Dオブジェクトを挟み込むように配置しています。Camera"を指定)この配置を取ると、カメラは窓越しにSprite画像を映しますが、「Image用マスク」は3Dオブジェクトによって一部が遮られる形となります。そのため3Dオブジェクトの形でSprite画像はくり抜かれて表示され、一番最初に紹介したように3DオブジェクトにSprite画像が貼り付て見える映像となります。"デカール"のように実際は貼り付てはいないので、よく見ると壁オブジェクトの形状に沿っていなかったり、壁のオブジェクトを回転させたりすると見た目が変わってしまうのですが、利点としてSpriteを使用するので映し出す画像の方を簡単に動かすことができます。Spriteを移動させることで、壁に貼り付ている文字がスクロールしているように見せることも簡単にできます。いうギミックもゲーム内の演出の一つとして使えるのではないでしょうか。できるかなメニュー画面を作ろう何故かこの時期になると何かに追われているような感覚になる皆さんこんにちは。私はやることが多すぎて現実逃避中です。この週末の目標は「メニュー画面を作ろう」だったはず、、、なのですが、何故か途中から「あれ?これで単眼立体視できそうじゃない?」に目標が変わり、全く予定になかった作業で時間を潰すという週末でした。ええ、りっぱな現実逃避です。単眼立体視とはGoogle先生に尋ねてみると色々と難しい理論を教えてくれるのですが、単純言えば「片目を閉じたら立体的に見える」現象を指します。具体的な例を挙げると、ORESAMAというバンドのMVの殆どがこの単眼立体視を利用したMVとなっています。www.youtube.comwww.youtube.comパッと見は80年代アニメ風なMVですが、片目を閉じたらあら不思議、文字やキャラクターが浮き上がって見えます。いった要因があるのですが、要は「遠くにある物=小さく、ゆっくり動く」「近くにある物=大きく、早く動く」という法則に乗っ取ることが大事らしい。そこでこんな感じのシーンを作ってみました宙を漂う六角形のオブジェクトは先程の法則に従う形で配置して動かしています。片目を閉じて見ると立体的に見えなくもない。立体感をより強調させるためにより立体感を出す技法としてはSplitDepthGIFsと技法が有名です。(出典:img.youtube.com)平面画像を分割し、それを疑似的な深度の違いに利用することで立体感を強調します。これを利用して先程のシーンに縦線を追加、オブジェクトは右側の線の上を通過して、左の線の下へ通過するようにします。先程よりは立体感が増した気がしますね。縦線の位置を逆にして、オブジェクトは右側の線の下から左の線の上へ通過するようにしたらどうでしょう?こちらの方が立体視し易いと思います。他にも距離によって陰影を変えたりするのも効果的らしいのですが、それはまた別の機会に。満員電車なのに何故か自分の横の席だけ空いていると不安になる皆さんこんにちは。いってデブのオッサンが座ってくると憂鬱になります。早いのか遅いのか分かりませんが、当ブログはこの記事で100記事目になるみたいです。自作ゲームの進捗とUnity関連の記事だけで2年間も続けられた事に我ながら驚いているのですが、ネタが無くなりそうで無くならないUnityの奥深さに感嘆するばかりです。最近ではUnityを2019.3.0にバージョンアップしたらOdinのタグを使った設定がInspectorから全く変更できなくなる、というトラップに見事に引っ掛かって、これで一体何度目だ、てめぇどうしてくれよう、とか怒りに震える経験をしたり、本当にUnity関連についてはネタが付きません。ありがとうございます。assetstore.unity.comなので今回はUnityカテゴリの記事100本目を記念して、ブログを開設してから今までの2年間を振り返ってみたいと思います。開設したばかりなのでモチベーションも高くて、力を入れて書いている記事が多いです。SpriteMask」で検索すると3番目ぐらいに出てきます。Project"第一弾のCutieCircuitをリリースしました。Life(→Android、→iOS)開発中だったので、開発中に調べた技術についての報告記事が多いですね。AssetStoreまとめさんに何度か取り上げられてもらったりして、本当にありがとうございました。Life](→Android、→iOS)をリリースしてダウンロード数は伸びないのに問題ばかり起こって心が折れかけた時期ですね。GooglePlayにBanされたり、本当に碌なことがなかった。・下半期の記事(抜粋)締め切りに追われた一週間ゲームジャムParticleにポリゴンを使ってもいいじゃない。範囲内の時間を制御・・・してるっぽく見せる今更ながらLineRendererで線を引く上半期に負った心の傷が癒えないまま2.5D-STGの開発を始めて、全く進捗が進まないために記事の内容も薄くなってますね、反省します。いえ、気づいた方もいるかもしれませんが、この2年間で初めてUnityのアップデート関連で問題が発生することがなかった時期でした。仕事も恋愛もアプリ開発も、全ての事が思うように行かなかった2019年でしたが、これだけは光明に思える事で、これを支えに来年も頑張ろうと思っていたのですが、、、ええ、冒頭の出来事が起こるまではね。・・・一体どうしてくれよう。ちなみにInspectorの設定はOdinを更新したらあっさり直りました。Unityさん、来年もよろしくお願いいたします。22:44【雑記】ブログ100記事を記念して振り返るTweetコメントを書くもっと読む2019-12-03【Unity】LineRenderにスクリプトからBoxColliderを設置するUnity2019年もあと少し今年も早いもので残り一か月を切りました。毎年この時期になると健康診断へ強制的に行かされて、毎度のように「少しは痩せないといけませんねぇ・・」と医者に告げられる皆さんこんにちは。いやいや、それができれば苦労しないんですが。LineRendererで線を引くさて、幾つか前の記事でLineRendererを使ってゲーム空間に線を引けるようになったので、最近は調子に乗って特定のオブジェクト間に線を引く処理を作り込んでいました。紫色のビームは全てLineRendererとなっています。ラインが結んでいるオブジェクトの位置を変更すると、スクリプトで自動的に引き直すので好きな位置にラインを描けるようになりました。いえ・・・あれ?自機がビームを素通りしてしまう。LineRendererは線を引くだけでColliderは設置されないので当然と言えば当然ですが。今回はスクリプトからオブジェクトにCollider(BoxCollider)を設定する処理に取り組んでみました。設置するだけなら簡単LineRendererはLineRendererコンポーネントを設定したオブジェクトをシーンに設置することで線を描きます。このオブジェクトにBoxColliderコンポーネントを追加すれば良い・・・はず。Colliderの設置bm.AddComponent<BoxCollider>();LineRendererのPrefabをInstaniateで生成後、直ぐにColliderの設置してみます。すると・・・むうぅ、、ずいぶんと離れた位置にできてしまう。Colliderの設置beam.AddComponent<BoxCollider>();LineRendererに座標を設定した時点で画面に描画されるので、その直後ならColliderはきれいに設定されるはず。試行錯誤の上BoxColliderにはRotationの指定はできないので、BoxColliderを設置するオブジェクト自体を回転させる必要があります。最初に描画するLineの角度を計算してオブジェクトを回転させた後に、Line描画⇒Colliderの設置を行う。加えてColliderの太さ(XY平面サイズ)は固定になるようにサイズを設定する、ように変更しました。colSize.z);で、これらの工夫をした結果、やっと・・・LineRendererに沿ったColliderが設定できるようになりました!!パチパチちょっと分かりずらいと思うので、横から見た図も載せますね。連絡を取っていない友人にメールを送信したら、「送信先のメールアドレスが見つかりませんでした。メールアドレスをご確認ください。」と返信された皆さんこんにちは。二か月前に会社を辞めていて、送別会もちゃんと行われたらしい、と知らされた皆さんこんにちは。おっかしいなぁ~、私の携帯にはそんな連絡一切入ってないんですが。そんなことは昔から慣れっこで、高校時代に文化祭の打ち上げだとかでクラス全員でボーリング大会が企画されていたのに、何故か当日になって「ごめん、中止になった」と聞かされ、仕方なく帰宅していたらボーリング場へ向かうクラスメイトとすれ違う、とか、十年ぶりにあったクラスメイトに「あれ?どうしてこの前の同窓会来なかったの?」と聞かれて、いや、だからそんな連絡一切入ってないんですが、とか、そんなことは多々あるので、、、大丈夫です、私は強く生きています。進捗報告そんな訳で全くモチベーションが上がらないし上げるような出来事もないしで、鬱な感情を引きづったまま開発を進めていたら、この一週間の間にこんなギミックを作っていました。STGなのに電車が出てくるの?とか聞かないで下さい、私にだって分からないんですから。あと、偶にモアイ像も出て来ます。STGにはとりあえずモアイ像は必要ってことで。当ブログでは、メールでのお問い合わせ、メールマガジンへの登録などの際に、名前(ハンドルネーム)、メールアドレス等の個人情報をご登録いただく場合がございます。これらの個人情報は質問に対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。ご希望の場合には、ご本人であることを確認させていただいた上、速やかに対応させていただきます。アクセス解析ツールについて当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。●プライバシーポリシーの変更について当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。修正された最新のプライバシーポリシーは常に本ページにて開示されます。スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。