2020-03-17

Unityで簡単に音量調整機能を付けることが出来る「AudioConfigure」の紹介

Unity

※この記事内で使用しているUnityのバージョンはUnity 2019.2.17f1 Personalです。

これからUnityで音を鳴らそうとしているそこのあなた。

「AudioConfigure」を使えば音を鳴らすだけでなく、簡単に音量調整することもできますよ。
これを入れるだけでユーザーフレンドリなゲームになること間違いなし!!!

...ちょっと胡散臭すぎました。

今回は kankikuchi 様が公開している誰でも簡単に使えるAudioManagerに、少し手を加えて音量調整機能をくっつけました。是非ご一読あれ。

はじめに

このようになっている箇所は、クリックすると隠れている画像などが表示されます。

画像などはここに隠している箇所が多いです。

1. 導入方法
 2. 使い方
　 2-1. BGM ・ SEを再生する場合
　 2-2. 音量を調節する
 3. オプション画面
 4. サンプル
 5. おさらい
　 5-1. 音量を調節する
　 5-2. オプション画面を開く
 6. トラブルシューティング
 7. まとめ
 8. 最後に

1.導入方法について

以下のURLから「Clone or Download」→ 「Download Zip」を選択します。
https://github.com/mugitea7/AudioConfigure

詳しい説明

ダウンロードした.zipファイルを解凍します。
解凍したフォルダの中にある.unitypackageファイルをUnityにインポートします。

Assets内にドラッグアンドドロップ。 — Assets内にドラッグアンドドロップしてインポート。

これで準備は完了です!

2.使い方

2-1.BGM・SEを再生する場合

ここは kankikuchi 様作成のもので、以下の記事にて詳しく解説されています。
誰でも簡単に使える最強のAudio(BGM, SE)Manager【Unity】

2-2.音量を調節する

AudioConfigure → Option_Mugitea → Prefabs と進み、VolumeManagerをヒエラルキーへドラッグアンドドロップします。

VolumeManagerをD&D — VolumeManagerをヒエラルキーにD&D

次に、音量を調節するためのスライドバーが必要です。が、これもデフォルトで付いてきます。

ヒエラルキー内で右クリックし、UI → Canvasを選択。ついでに Canvas Scaler 内の UI Scale Mode を Scale With Screen Size にしておきましょう。

(AudioConfigure → Option_Mugitea → Prefabs) → UIObjects から、"BGMVolumeSlider" と "BGMVolumeText" を Canvas の子に設定し、適当に位置を調整します。

これでBGMの音量を調整する準備は整いました。

試しにBGMを再生してみましょう。

ゲームを再生してみると...

音量調節が完了しました。

スライダーを調整すると、右のテキストの数字と共に音量も調整されます。

しかも、この値はゲームを終了しても保存されています。

ゲーム終了の度に音量調整する必要はありません!!

SEの音量も同様にして設定することが出来ます。
なお、音量は最大音量に対する割合を出しています。デフォルトは最大80に設定しているので、音量を100にしても内部での実際の音量は80となっています。

VolumeManagerの各種設定項目について

これは表としてまとめておきます。

名前	機能
BGM(SE) Volume Key	PlayerPrefsに登録するKeyの名称です。今後の開発においてPlayerPrefsを扱う際、このKeyと同じ名称のKeyを作成しないように注意してください。
Default BGM(SE) Volume	最初にゲームを起動した際に適用される各種音量です。
Max BGM(SE) Volume	BGM ・ SE の音量の最大値です。音量を80以上に設定すると音割れが発生する可能性があるため、上限を設けています。
Dont Destroy On Load	Scene遷移を行っても VolumeManager を破棄しないかの設定です。true推奨。

「使用方法はわかった、じゃあオプションをつくr...」

※カスタマイズ可能なオプション画面もついてきます。

3.オプション画面

AudioConfigure → Option_Mugitea → Prefabs から、"OptionManager"と"VolumeManager"、そしてヒエラルキー上から"EventSystem"の3つをヒエラルキーに配置します。

スクリプトを書きます。
記述するのは、"using Mugitea.Option"(①)。
呼び出したいタイミングで"OptionManager.Instance.OpenOptionWindow()"と記述するだけ(②)。
閉じるときは"OptionManager.Instance.CloseOptionWindow()"と記述するだけ。(OptionWindowにはデフォルトで閉じるボタンが実装されています)

今回はEnterキーを押すとOption画面が開かれることにします。
これを適当なオブジェクトにアタッチします。

最後に、 AudioConfigure → Option_Mugitea → Scene の中にある"Option"シーンを Scenes In Build に追加します。

実行してみます。

(上記で記述したスクリプトでは)Enterキーを押すと、Option画面が開かれました。
Back ボタンを押すと画面を閉じることが出来ます。

もちろんOption画面はカスタマイズ可能です。

AudioConfigure → Option_Mugitea → Scene の中にある"Option"シーンをダブルクリックして開きます。

これが呼び出されるOption画面です。制作中のゲームの雰囲気に合わせた画面にアレンジしましょう。

4.もちろん、サンプルもついています

AudioConfigure → Option_Mugitea → Sample に、2つのサンプルを用意しました。

ボタンを押すとOption画面が表示されるサンプル(OptionSample)

タイトル画面にBGM・SE調整用のスライダーが用意されているサンプル(TitleSample)

5.おさらい

5-1.音量調整を行う場合

VolumeManagerをヒエラルキーに配置
Canvasを生成
BGM(SE) Volume SliderなどをCanvasの子として配置

5-2.オプション画面を表示する場合

VolumeManager、OptionManagerをヒエラルキーに配置
"Option"シーンを Scenes In Build に配置
スクリプトを記述
Option画面のカスタマイズは"Option"シーンを開いて行う

6.トラブルシューティング

Scene 'Option' couldn't be loaded because it has not been added to the build settings or the AssetBundle has not been loaded.

"Option"シーンが Scenes In Build の項目に入っていません。
ここの手順に従い、"Option"シーンを Scenes In Build に追加してください。

7.まとめ

いかがでしょうか。
AudioConfigure をインポートするだけで音に関しては困らない...筈です!
皆様にご活用いただければ幸いです。

8.最後に

今回、kankikuchi 様制作の AudioManager をMITライセンスに従い使用・同梱させていただきました。
また、今回作製した AudioConfigure も同様、MITライセンスに従っております。詳しくは同梱の LICENSE をお読みください。

2020-03-15

【Unity】#3　Unity1week(逆)に参加した話

Unity

f:id:mugitea_drink:20200315010617p:plain ※実際のイラストとは異なります

※注意※

※この記事の作者は全ランキング圏外です!!

見出し

前置き
本文
振り返り
- 1日目
- 2日目~4日目
- 5日目
- 6日目
- 最終日
反省
まとめ

前置き

ブログ久しぶりに書いた。

　折角Unity1week参加したので、アウトプットです。前回は書いてないんですけどね...
　Unity1week終了後1週間経ってるのは許して下さい!!

本文

　さて、今回は僕は4回目の参加です。お題「つながる」から参加しています。
　今回は「BOUNDS」というゲームを投稿しました。簡単に紹介すると、ブロック崩しとシューティングの要素を混ぜたゲームです。
　一応URL張っておきます
　今回もランキング圏外でした。悔しい...
　ですが今回の評価は過去最高で、

#unity1week
評価期間終了! お疲れさまでした!!
今回もランクイン出来ませんでしたっっ
でも、今回出した作品の評価のバランスは今までで一番良かった! pic.twitter.com/e6Qu728KhL
— 麦tea (@tea59595959) March 8, 2020

　こんな感じでした。過去最高なのはうれしい!

振り返り

　今回のUnity1weekの振り返りをします。まず開発の振り返りから。

1日目(月曜日)

　今回は寝てからお題を見ました。全然思いつかないままボウリングに行ってました。(は?)

2日目~4日目(火曜日~木曜日)

　~~全然思いつかないので、「今回は見送ろうかな～」なんて思ってました。~~
　一応作ってはいたのですが、「逆サイドにいる味方と視点を切り替えて戦うシューティング」というもの。少なくともあの段階では面白くはなかった。

5日目(金曜日)

　夜中、「これはいかんだろ...」って思っていると、突然こんなのを思いつきました↓

#unity1week
今日までの構想は全部消して、一から作り直し!
ゲームとしては、ブロック崩し×シューティングにしたい
とりあえずタイトル画面だけ作った pic.twitter.com/0jaFhwBvQe
— 麦tea (@tea59595959) February 27, 2020

　個人的にはこれで納得したので考える間もなく変更。せめて水曜日くらいに思いついてくれ
　なんやかんや、この日はこんな感じに。

#unity1week
今のところこんな感じに
明日でいいところ終わらせないといけないんだけど、終わる...? pic.twitter.com/K5fvQEGHCG
— 麦tea (@tea59595959) February 28, 2020

6日目(土曜日)

　もちろんまだタイトル画面からもう一度タイトル画面に戻るまでの遷移が完成していないので、GameOverとClearの判定を追加します。
　Clearの条件は「到達フェーズ数」と「ボス撃破までのタイムアタック」の2択だったのですが、到達フェーズ数だと「クリアしたら終わり」なので「ボス撃破までのタイムアタック」を選択。タイム付けちゃってたし...
　フェーズ数はなんとなくで10フェーズと決定。(こんなんでいいの?)
　そしてここで嫌というほど感じたのは、レベルデザインがとんでもなく難しいということ。
　夜、友人3人にテストプレイしてもらったのですが1時間プレイしてクリアできたのが1人。なんちゅう難易度...

　この時入った調整は、

各フェーズの敵のHP
各フェーズの敵の配置
弾を場外に落としたときのデメリット(コンボ0 → 1つ前の倍率)

ほぼすべてですね(笑)

　友人と相談しながらゲームバランスを調整し、この日(午前3時なので日曜日突入してますが)の進捗はこんな感じに。

#unity1week
オプション、ゲームオーバー、ゲームクリア追加!
あとはBGM、SE! pic.twitter.com/FYy77SnjqB
— 麦tea (@tea59595959) February 29, 2020

最終日(日曜日)

　BGM・SEをつけていなかったのでまずはそこから。勿論オプションでBGM・SEの音量調整も付けます。(毎回ここ手書きしているんですけど、いい加減使いまわせるもの書いた方がいいかも)
　そして投稿約2時間前、隠し要素を追加しよう!!と思いつきます。思い付きってこえー(こうしてタイトルを撃ち続けるとタイトルが襲ってくるようになりました)
　プレイ画面から適当にgif画像を生成(こんなんでいいの?)し、無事期限内に投稿。

#unity1week
投稿間に合いました!!!
今日20時から公開されるので、遊んでください!!https://t.co/AubDURq6e2
— 麦tea (@tea59595959) March 1, 2020

　頑張った。

反省

良い面

　以前から「やってみたい」と思っていたことに手を出せました。具体的には、

カメラのシェイク
タイトル画面でのキャラ操作
- そのままゲーム画面に移行
背景真っ暗にPostProcessingをかける
シューティング
隠し要素
テキストにアクションを加えられる

です。個人的には最初の2つが特にやってみたかったです。満足。
　シューティングを作るのは初めてで、「フェーズ毎の敵の出現方法」がちょっと難しかったです。
　今回は1つのフェーズの敵の集まりを1つのPrefabにし、Instanceすることで解決しました。これ合ってますかね...
　「テキストにアクションを加えられる」は、今回は「テキストに弾を当てられる」として実装。この頃からずっと取り入れたかった↓

こういう、テキストもゲームに混ぜ合わせるのいいなあ
花が咲いた https://t.co/er5SnYbjkQ https://t.co/XzfO7FJdEa #unityroom #unity1week #VLOWER
— 麦tea (@tea59595959) July 7, 2019

悪い面

まだ難しい(タイムアタックどころではない)
- チュートリアルが無い
- 説明長すぎ
操作性

　まだ難しかったです。RANKINGをご覧ください。4人しかいません(1人は僕なので実質3人)

　これに関しては、チュートリアルを実装しましょう。今回、説明欄に全てぶち込んだのですが、長すぎて誰が見るんだ状態です。

　「コンボを繋げるとダメージ増加する」ということを知らないと、以下のような負の連鎖になります。

弾連射
コンボ倍率がリセット
1ダメージしか与えられず、なかなか次に進めない

　一目見てわかるルールだと良いのですが、今回の場合、コンボ倍率が採用されていることがわからなければ絶対連射します。僕もすると思います。
　アクション性があればあるほど、チュートリアルがないときつい...というのが今回知れてよかったです。

　操作性ですが、今回、弾の反射をランダムにしました。これは当時はワンパターン防止で...って思っていたのですが、要らなかったですね。普通の反射方法で良かったです。

微妙だったもの

　感覚で、若しくは適当に決めているものが

配色
サムネのgif画像
UIの配置
演出
BGM・SE

　そもそも決めていないのが

世界観
設計

　デザイン系全般が微妙。
　設計は...していたら時間なくなりそうです。が、プログラムがぐっちゃぐちゃ。
　この辺りは改善の余地がありますね。というか、今のところ決め方が全然わかってません。勉強の必要あり。

まとめ

　今回も多くの学びがありました。良かった。次回も参加すると思いますので、お手柔らかにお願いします。
　参加された皆様、お疲れさまでした!

2019-09-06

【blender2.8】#2　テクスチャを張る

Blender

f:id:mugitea_drink:20190906233254j:plain

見出し。

前置き。
本文。

前置き。

まとめ。
参考。

前置き。

ちょっと間が空きました。今回はBlenderです。

Materialで色を付けるのはわかったんですけど、Textureはどう張るんだろう?と思い、少し調べてみました。

本文。

流れとしては、以下の通りです(今回のような簡単なモノの場合に限ります)。

形を作る
テクスチャを張りたい面をEditModeで選択
Uキーを押し、unwrapを選択
画像ファイルを作製(適当なソフトで)
UV Editingタブで、Openを選択
作製した画像ファイルを選択
画像を合わせる
Materialを選択し、BaseColorをImage Textureにする
作製した画像ファイルを選択
RenderModeをRenderedにしてみる

以上になります。結構細かく分けたので手間がかかるように見えますが、割とすぐできます。簡単なものならね。

複雑なものの場合、切り口を指定して、かつ複数箇所をunwrapしないといけない(らしい)ので、大変そうです...(間違ってるかも)

今回はとりあえず定規を作ったので、それの張り方を解説していきます。

形を作る

こんな感じで作りました。

f:id:mugitea_drink:20190906223801j:plain

テクスチャを張りたい面をEditModeで選択

一番上のみを選択します。

f:id:mugitea_drink:20190906224200j:plain

Uキーを押し、unwrapを選択

Uキーを押すと下のような項目が出ます。unwrapを選択。

f:id:mugitea_drink:20190906224437p:plain

画像ファイルを作製(適当なソフトで)

今回はペイントを使用しました。だから適当に見えるのかもね!!!ペンタブとか液タブなんて持っていません。欲しい。絵描けないですけど

f:id:mugitea_drink:20190906224735j:plain

UV Editingタブで、Openを選択

タブをUV Editingに切り替え、画像ファイルを開きます。

Openがない場合は、ウィンドウの間にマウスを持って行って、ちょっと右側にウィンドウを動かせばいいです。

f:id:mugitea_drink:20190906225249j:plain

作製した画像ファイルを選択

これは普通に選択すればいいです。

f:id:mugitea_drink:20190906225729j:plain

画像を合わせる

表示する箇所を合わせます。Gキーで移動、Sキーで拡大・縮小です。ドラッグだけでは無理っぽい?

また、拡大縮小・移動をする場合は、今回は面を選択してから実行した方が良いです。

f:id:mugitea_drink:20190906230319j:plain

Materialを選択し、BaseColorをImage Textureにする

タブをLayoutかModelingにしてからの方がやりやすいです。

ObjectModeで良いので、Materialを選択、BaseColorをImage Textureにします。

f:id:mugitea_drink:20190906230856j:plain

作製した画像ファイルを選択

Openを選択して、同じ画像ファイルを選択します。

f:id:mugitea_drink:20190906231150j:plain

RenderModeをRenderedにしてみる

あとはRenderModeをRenderedにするだけです。

f:id:mugitea_drink:20190906231408j:plain

と思ったら、縦と横が逆だったようです(おい!!!!)。

もう一度UV Editorに戻り、縦と横を変えます。

Rキーで回転できます。また、面選択などはEditor Modeでしか行えないので注意。

ちなみに、UV Editorタブでも、Zキーを押してRendered Modeにしながら行うと変更がリアルタイムで見れて楽です。

f:id:mugitea_drink:20190906232558p:plain

ということで、こんな感じになりました!↓

f:id:mugitea_drink:20190906232448j:plain

まとめ。

今回はモデリングの勉強というよりはテクスチャを張る練習だったので、ただのBoxじゃんとかいうツッコミは無しで...

参考。

Blender2.8でテクスチャを張る

2019-09-03

【CSS】#2　animationとkeyframesが便利すぎた

HTML css

f:id:mugitea_drink:20190903233925p:plain

見出し。

前置き。
本文。

transform
animationとkayframes
使ってみる。

まとめ。

前置き。

こんにちは。今回はCSSの話なんですけど、前回は「CSSだけでも意外と動かせるよー」とか言って、transitionとか疑似要素を紹介しました。

今回はその続きなんですけど、なんと進行率を指定して逐次動きを決めれたりします。ポヨンっていう感じとかもつくれちゃいます。やばいね。

本文。

まずは、プロパティを紹介していきます。

transform

これは、サイズを変更したり回転したりできるプロパティになります。以下に具体的に示します。使用する場合はtransitionと併用した方が良さげです(一瞬で変わってしまうため)。

プロパティ名(使用例)	機能
scale(X軸の大きさ,Y軸の大きさ) (transform: scale(1.2))	要素の大きさを変更します。第二引数を書かない場合は、第一引数の値と同様になります (例の場合はX,Yの両方とも1.2倍)。
rotate(角度) (transform: rotate(360deg))	引数で指定した角度まで回転します。
translate(X軸方向,Y軸方向) transform: translate(50px)	要素の位置を変更します。第二引数を書かない場合は、第一引数の値と同様になります (例の場合はX,Yの両方とも50px)。

他にも、行列(matrix)や、傾斜(skew)、遠近効果(perspective)というものがありました。今回は割愛します。役割としては、変形などが出来るみたい。

animationとkeyframes

こちらは、animationで「どうアニメーションするか」を決め、keyframesで、現在の進行度に応じて「何をするか」を決めることが出来ます。

まずは書式から示します。

/*書式*/

.test_class{

        animation: アニメーションの名前 秒数 遷移方法;

}



@keyframes アニメーションの名前{

        0%{

                命令;

        }



        100%{

                命令;

        }

}



/* 例 */

.class{

        animation: anim .5s ease;

}



@keyframes anim{

    0%{ transform: scale(1); }

    50%{ transform: scale(1.2) }

    100%{ transform: scale(1.1); }

}

こんな感じです。以下に、animationの遷移方法の一部を示します(animation-timing-function プロパティというらしいです)。

プロパティ名	機能
ease	中間が一番早いです。
ease-in	徐々に早くなります。
ease-out	徐々に遅くなります。
liner	一定間隔で移動します。

では、実際に使ってみます!!

使ってみる。

その前に、疑似要素って何??って方は、前回の記事をご覧ください。

以下のように記述してみます。

<!DOCTYPE html>

<html>

    <head>

        <meta lang="ja">

        <meta charset="utf-8">



        <style>



            .box{

                background-color: blue;

                width: 100px;

                height: 100px;

            }



            .box:hover{

                animation: anim .5s ease;

            }



            @keyframes anim{

                0%{ transform: scale(1); }

                50%{ transform: scale(2); }

                100%{ transform: scale(1.5); }

            }



        </style>

    </head>



    <body>

        <div class="box"></div>

    </body>



</html>

動作としては、以下の通り。マウスを四角の上にしてやると動作します。

これだけでポヨンっていう感じにできそうです。ですが、これだけだとscaleが維持されませんね。

ですが、これ、なんとtransitionと被せても動作します。恐ろしい。

<!DOCTYPE html>

<html>

    <head>

        <meta lang="ja">

        <meta charset="utf-8">



        <style>



            .box{

                background-color: red;

                width: 100px;

                height: 100px;

                transition: .5s;

            }



            .box:hover{

                transform: scale(2);

                animation: anim .7s ease;

            }



            @keyframes anim{

                0%{ transform: scale(1); }

                60%{ transform: scale(2); }

                70%{ transform: scale(1.7); }

                80%{ transform: scale(2.2); }

                90%{ transform: scale(1.9); }

                100%{ transform: scale(2); }

            }



        </style>

    </head>



    <body>

        <div class="box"></div>

    </body>



</html>

これでマウスオーバーしている最中はscaleが維持されます。また、マウスを外にやった時のアニメーションも付いています。強い。

他にもopacityというものがあって、透明度を変更できるようです。1が不透明、0が透明。使ってみます。

<!DOCTYPE html>

<html>

    <head>

        <meta lang="ja">

        <meta charset="utf-8">



        <style>



            body{

                margin: 0;

            }



            .box{

                background-color: green;

                width: 100px;

                height: 100px;

                transition: .5s;

            }



            .box:hover{

                opacity: 0;

                width: 100vw;

                height: 100vh;

                animation: anim 1s ease;

            }



            @keyframes anim{

                0%{ opacity: 1; }

                50%{ opacity: 1; }

                100%{ opacity: 0; }

            }



        </style>

    </head>



    <body>

        <div class="box"></div>

    </body>



</html>

はてなブログ内では全然できていませんけど、簡易的なシーンチェンジに使えるのではないでしょうか?...無理そう?

おまけ程度に、translateとrotateを使用した例を示します。

<!DOCTYPE html>

<html>

    <head>

        <meta lang="ja">

        <meta charset="utf-8">



        <style>



            .box_translate{

                background-color: pink;

                width: 100px;

                height: 100px;

                transition: .5s;

            }



            .box_translate:hover{

                transform: translate(25px);

                animation: anim_t 1s ease;

            }



            @keyframes anim_t{

                0%{ transform: translate(0px); }

                70%{ transform: translate(50px); }

                100%{ transform: translate(25px); }

            }



            .box_rotate{

                background-color: gray;

                width: 100px;

                height: 100px;

                transition: .5s;

            }



            .box_rotate:hover{

                transform: rotate(-90deg);

                animation: anim_r 1s ease;

            }



            @keyframes anim_r{

                0%{ transform: rotate(0deg); }

                80%{ transform: rotate(90deg); }

                100%{ transform: rotate(-90deg); }

            }



        </style>

    </head>



    <body>

        <div class="box_translate"></div>

        <div class="box_rotate"></div>

    </body>



</html>

まとめ。

transformを使えば移動やサイズの変更、keyframesを使えば複雑なアニメーションを使えるようです。

これとJavaScriptを用いれば、表現の幅がかなり広がりそうですね!!今度やってみます。

参考。

【CSS3】@keyframes と animation 関連のまとめ
 CSS3アニメーションで心地良いモーションを作る

2019-09-02

【blender】#1　Blender2.8をダウンロードしたし、適当にモデルを作ってみる

Blender

f:id:mugitea_drink:20190902191031j:plain

見出し。

前置き。
本文。

今回使用する?ショートカットキー一覧
作る。

まとめ。

前置き。

タイトル通り、最近Blender2.8をダウンロードしました。UIが全然違いますよね。

というわけで、今回は操作方法をおさらいというか、もう一度覚えなおそうという気持ちでBlender2.8でモデルを作っていきたいと思います。

本文。

まず何を作るかっていうところからなんですが、今回は街灯を作っていきたいと思います。早速やっていきましょう。

今回使用する?ショートカットキー一覧

今回使用したショートカットキーとその役割一覧です。

ショートカットキー	機能
Shift + A	オブジェクトの追加
Shift + W	(カーソルを基準に)オブジェクトを曲げる
(テンキーの)0	カメラビュー
(Edit Modeで)C	(左クリックで)メッシュの選択
(Edit ModeでCを押してメッシュの選択状態で)Shiftを押しながら左クリック	選択の解除
A	全選択
(オブジェクトを選択した状態で)X	オブジェクトの削除
(オブジェクトを選択した状態で)S	拡大・縮小
(オブジェクトを選択した状態で)G	移動
(オブジェクトを選択した状態でSやG等を押した後)X or Y or Z	X軸やY軸やZ軸に対して操作を行う
(オブジェクトを選択した状態でSやG等を押した後)Shift + (X or Y or Z)	押したキー以外の2軸に対して操作を行う
(オブジェクトを選択した状態でSやG等を押した後)Ctrlを押しながらマウス操作	整数値で操作を行う(1.4332など、中途半端な値にならない)
(テンキーの)3	真上がZ、真横がXとなる位置へ視点移動

とりあえずこれです。

作る。

ではやっていきましょう。まずはPlaneを敷き、Cylinderを追加します。その後、Shift + Zを押して細長くします。

それから、Sを押してからZを押し、縦長にします。このくらいの数値にします。

f:id:mugitea_drink:20190902174239j:plain

EditModeに切り替え、右側のLoop Cutを選択します。分割数は40です。

f:id:mugitea_drink:20190902174757j:plain

次に、右側でSelect Boxを選択してからオブジェクトのないところで左クリックし、選択を解除してからCを押し、曲げる場所を選択していきます。

間違ったらShiftを押しながら左クリック、裏側に回りたいときなどは一度右クリックします。選択は解除されません。

こんな感じで選択します。

f:id:mugitea_drink:20190902181928j:plain

そうしたら、右側でCursorを選択し、曲げたい場所のすぐ下に設定してからShift + Wで曲げます。マウスを遠くへやれば曲がる場所が遠くに、近いと根元から曲がります。なお、この時はテンキーを使って真横から見て作業をした方が、変な方向に曲がらなくなります。

また、Shift + Wを押したときのマウスカーソルの位置によっても曲がり具合が違うようです。注意。あと、一番上の丸い部分も選択しないように注意。

f:id:mugitea_drink:20190902182547j:plain

こんな感じにします。

f:id:mugitea_drink:20190902182213j:plain

そうしたら、次はObject ModeでUV Sphereを作製し、大きさと位置を調整します。

f:id:mugitea_drink:20190902183230j:plain

オブジェクトを結合します。Shiftを押しながらCylinderとUV Sphereをクリック、右クリックしてjoinを選択。

f:id:mugitea_drink:20190902183730p:plain

色を塗ります。下側は光を発し、それ以外はグレーにします。右下のここをクリック、Newを押し、Base Colorをグレーに。

f:id:mugitea_drink:20190902184123j:plain

Edit Modeにし、下側を選択した後、右側の+ボタンを押し、SurfaceをEmissionに。Assignをクリック。

その下のStrengthの数値を大きくすると、光が強くなります。今は15にしています。

f:id:mugitea_drink:20190902184624j:plain

ShadingをRenderedにし、カメラマークのところからBloomにチェック(それ以外は今は意味なし)、Object ModeにしてLightを消すと、完成!

f:id:mugitea_drink:20190902185233j:plain

まとめ。

めちゃくちゃ早足になりました。制作物に関しては、自力だと、これくらいが限界...?色々作って、Unityで必要になった時に使ったりサクッと調達できるようになりたいですね。

今回はここまでです。ご閲覧ありがとうございました!

2019-09-01

【CSS】#1　CSSだけでも割とアニメーション出来るっていう話

css HTML

f:id:mugitea_drink:20190901164614p:plain

見出し。

前置き。
本文。

疑似要素?
transition?
使ってみる。

まとめ。
参考。

前置き。

久しぶりの投稿でございます。

すいません、またちょっとリアルで用事があって...って、最初に「自分のペースで」って言ったのに、短い間隔で更新しようとするっていう。ちょっと焦っている気持ちもあるかも。

あ、あと今回のブログは短くなりそうです。

本文。

というわけで今回は、「JavaScriptを使わなくても、CSSだけでも意外とアニメーションっぽいことが出来る!」ということを発見したので、それについて軽くまとめようかと思います。疑似要素というものと、transitionというものを使います。

疑似要素?

疑似要素とは、CSS内で要素を指定した後に「:」を付けるものです。言葉で説明するのは難しいので、以下に例を示します。


/*こっちは普通に要素を指定*/
#sample{
    background-color: #000;
    width: 300px;
    height: 300px;
}

/*こっちは疑似要素*/
/*hoverは、その要素にカーソルを当てたときを指します。*/
#sample:hover{
    background-color: #666;
    width: 500px;
    height: 500px;
}

コード中にもコメントしていますが、上は普通に要素、下が疑似要素になります。hoverを指定すると、マウスカーソルを当てたときに疑似要素内の処理が実行されます。

注意点として、要素名と「:」の間にはスペースなどを挿入しないでください。読み込まれなくなります。

transition?

transitionとは、どのくらいの時間で遷移を行うかを設定するものです。実際に使用例を見た方が早いかも。

使ってみる。

以下のように書いてみます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta lang="ja">

    <style>
        #box{
            background-color: blue;
            width: 100px;
            height: 100px;
            transition: .5s;
        }

        #box:hover{
            background-color: blueviolet;
            width: 120px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

これならはてなブログ内でも実装できるので、以下に示します。

こんな感じ。transitionは、前述の通り、変化する秒数を指定できます。これのおかげでじわーっとサイズが変わってるんですね。

他にも、以下のコードを書けば、ボタンのアニメーションっぽいものも出来ます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta lang="ja">

    <style>
        #center{
            /*ボタンを中央に寄せる(好みの問題)*/
            text-align: center;
        }

        #button{
            /*フォントの設定*/
            font-family: sans-serif;
            font-size: 25px;
            font-weight: bold;
            color: white;

            /*サイズ・幅の設定*/
            width: 500px;
            margin: 0;
            padding: 10px;

            /*背景色の設定*/
            background-color: rgb(54, 100, 252);

            /*角丸に*/
            border-radius: 8px;

            /*枠内に入ったらマウスポインタを変更*/
            cursor: pointer;

            /*変化秒数は0.2秒*/
            transition: .2s;

            /*ボタンの枠を消す*/
            border: none;

            /*影を付ける(横に0px、下に5px、1pxぼかし、1px広がる、色はblue)*/
            box-shadow: 0px 5px 1px 1px blue;

            /*相対座標を使用*/
            position: relative;

            /*上から0pxに配置(hoverで変更するため、設定)*/
            top: 0px;
        }

        /*ボタンにカーソルを当てたとき*/
        #button:hover{
            /*上から3pxに配置(少し下にずれる)*/
            top: 3px;

            /*影を付ける(下側を2pxに変更)*/
            box-shadow: 0px 2px 1px 1px blue;
        }
    </style>
</head>
<body>
    <div id="center">
        <button type="button" id="button">カーソルを当ててみてね</button>
    </div>
</body>
</html>

リンクは設定していないので気軽に押してください。

ポイントは、cssでbuttonとbutton:hover内のtopの値の変化の値と、box-shadowの下側への影の変化の値が一緒のことです。こうすると多分位置がずれません。

まとめ。

今回はhoverという疑似要素と、transitionなどを紹介しました。疑似要素についてはこれ以外にも色々あるので、便利そうなものが見つかり次第、またブログに書いていこうと思います。

ここまでのご閲覧、ありがとうございました!

参考。

CSSの疑似要素とは？beforeとafterの使い方まとめ
 CSSのbox-shadowで要素に影をつける方法を徹底解説

2019-08-24

【AviUtl】#1　AviUtlで3Dモデルを表示したい!(OBJ Reader)

AviUtl OBJ Reader

f:id:mugitea_drink:20190824231348p:plain

見出し。

前置き。
本文。

出来た。
使い方など。
3Dオブジェクトのインポート。
回転。
注意点。

まとめ。

前置き。

今回はWebページ制作の話ではありません。

なんでこんな話になったかというと、先日このような動画を拝見して、3Dオブジェクトを動画内でバリバリ使う表現が凄いなぁと思って、僕もやってみたくなったからです。羨ましいんじゃー!!

本文。

僕は動画編集ソフトはAviUtlを使っているんですけど、これで3Dオブジェクトの描画はできるのか...?というより、何のソフトを使えばできるんだ!!?

というわけで、調べます。

出来た。

Respectrum93様が公開していました。こちらを参照。

使い方など。

基本的には同封している.txtを参照すれば使い方が書いています。

ですが、どう設定するのか?などの説明が端折られていたのでメモ。

(前提として、scriptフォルダにダウンロードしたファイルを置いていることとします)

3Dオブジェクトのインポート。

f:id:mugitea_drink:20190824210719p:plain

適当にオブジェクトを置き(画像オブジェクトなど)、アニメーション効果を追加(オブジェクト自体は非表示ではダメ?)。

「objファイル読込み@OBJ Reader」を選択、参照をクリックして参照する「objファイル」を選択。

もう1つオブジェクトを置き、アニメーション効果を追加して「描画@OBJ Reader」を選択。

f:id:mugitea_drink:20190824210524p:plain

すると、3Dモデルがインポートされるはずです。

参照を変更したり、追加した場合はファイル読み込み側のサイズを変更したりすると、参照パスの変更が適用されるみたいです。

回転。

拡張描画を有効にして、X軸回転などをしてみると平面ではないことが確認できます。

カメラ制御まで使えばこんな感じ。

f:id:mugitea_drink:20190824220403g:plain

注意点。

まず、制作ソフト側で設定したマテリアルは適用されません。説明書にも書いてありますが、画像オブジェクトの画像を使用するか、同名のpngファイルが必要なようです。

また、インポートしたオブジェクトにはそれ以外の効果(グローなど)を付けれないようです。そのため、インポートしたオブジェクトをランダム配置、などは出来なさそうです。

また、一度保存してプロジェクトを開きなおすとidに対するファイルの参照が切れている?ので、再度読み込み側のオブジェクトのサイズを変更するなどしてファイルの参照を上書きしなければならないみたいです。

まとめ。

AviUtlで3Dモデル(objファイル)を使用してみました。

マテリアルを張るのであれば、方法の1つとしてAfterEffectのプラグインであるElement3Dというものを購入する必要があるようです。有料で、しかもめっちゃ高い(2万↑)。しかもAEでしか使えないから、AEもライセンスを購入しなければなりません。僕には無理。というかその前に僕の場合はデスクトップPCを手に入れなきゃ。

今回はここまでです。ご閲覧ありがとうございました!