英姿颯爽

日々の気づきや、技術的なお話です。

【映像】AfterEffectsのエフェクト紹介(シャター)

今日も1日お疲れ様です。


今日は、AfterEffectsのエフェクト紹介です。
「シャター」というエフェクト

プロジェクションマッピングを作っている時にすごくお世話になったエフェクトのため、紹介させていただきます。


どんなエフェクト?

「砕ける」をシュミレートするエフェクトです。

f:id:kurischool:20151026234418p:plain


このように壁の向こう側から何かが飛び出してくるような表現ができます。


実際に使ってみる

平面を作ってそこにエフェクトを適用していきます。
平面は、タイムラインから左クリック→新規平面から色を指定して作ってください。


エフェクト > シミュレーション > シャター で適用していきましょう。



そうすると、画面が
f:id:kurischool:20151026234851p:plain

このようになります。
処理が大変重くなる場合があるので、自動的に線だけの表示に切り替えてくれます。

いじってみよう

f:id:kurischool:20151026235022p:plain

メニューの中身はこんな感じになっています。

  • シェイプ
  • フォース
  • グラデーション
  • 物理的性質
  • カメラ位置
  • コーナーピン
  • 照明
  • マテリアル


簡単に掘り下げていくと

砕け散ったあと1つ1つのかけらについての形状や飛び散る数についてがシェイプ
飛び散る範囲や飛び散る速さなどを調整するのがフォース(2段階で調整できます。)
爆発の規模や速さをさらに自分の思い通りにできるのがグラデーション
(グラデーションでは、白から黒へと爆発が変化していきます。なので、広がっていく円を書いて、それを適用させればその範囲で爆発が広がっていくという表現になります。)
砕けたあとのかけらの挙動を設定するのが物理的性質
初期から設定されているカメラの向きや角度を調整するカメラ位置
向きや角度の詳細な設定ができるのがコーナーピン
光の強さや色・位置・角度を調整するのが照明
物質の光のあたり方や強さを調整するマテリアル



かなり駆け足の設定となってしまいましたが、実際の使い方としてはこの通りです。
明日はこれを用いて少し映像を作ってみようと思います。

【プログラム】UnityでGUI Textを画面の中央にする方法

今日も1日お疲れ様です。

いつぶりのプログラムだ。というツッコミが飛び交いそうですが、今回から恐らくプログラムの更新が多くなると思います。
宜しくお願いいたします。


GUI Textとは

Unityには標準装備されている「GUI Text」
GUI(Graphical User Interface)という名称で
ユーザーの目に届く物ととらえていただければと思います。

今回の場合は「Text」つまり、ユーザーがゲーム中に目にするテキストのデザインを幅広くできるようにしたものがGUI Text」ということになります。


GUI Textの作り方

作り方はいろいろあるのですが、今回は自分が普段からやっているGameObjectから作る方法を試してみます。
f:id:kurischool:20151014032510p:plain

空白のGameObjectを作ります。

f:id:kurischool:20151014032650p:plain

「Add Compornent」から GUI Textを設定していきます。
以上で、GUI Textの作成は終了です。

「Inspector」で自由にテキストを加えて準備完了です。


画面の中央に配置してみよう

それでは、このGUI Textを思い通りに操るために画面の中央に配置してみます。

まずは、先ほど入力した文字の位置を確かめてみましょう。
f:id:kurischool:20151014032929p:plain


…文字が表示されていないです


と思いきや、文字のサイズが0になっていました。
これを20に変更しておきます。

f:id:kurischool:20151014032815p:plain


さて、これで文字が

f:id:kurischool:20151014032929p:plain


…表示されないですね



さらに原因を発見。
文字の位置が「Upper Left」になっています。
つまり
「Upper = 上」
「Left = 左」

なので、画面の左上に配置されていたことになります。
そのため、画面から見きれていたようです。



「Middle Center」に変更しました。
f:id:kurischool:20151014033351p:plain


これで文字が…
f:id:kurischool:20151014032929p:plain


やはり表示されないです。


ちょっと調べてみると…
GUI Text」はScene内では表示されないとのこと

なるほど。
ユーザーに届く物のため、ユーザー視点から確認することができるようです。
早速、Gameタブに変更して見ていきましょう。


f:id:kurischool:20151014033652p:plain


見えましたが、とんでもなく左下にいます。



それでは、位置を調整していきましょう。
f:id:kurischool:20151014033825p:plain
「Transform」内の「position」の値を変更することで、位置の調整ができるようです。

早速右に少し動かしてみます。
f:id:kurischool:20151014034051p:plain

Xの値を0から1にしてみます。
f:id:kurischool:20151014034116p:plain

一気に右端まで動きました。
とんでもなく移動するので調整が難しそうです。

ちょっと調べてみたら…
画面全体の幅が0〜1しかないようです。

つまり、真ん中にするためには「0.5」で設定してみましょう。

f:id:kurischool:20151014034632p:plain


f:id:kurischool:20151014034641p:plain
苦節約10分、ついに真ん中に配置できました。


先が思いやられますね…
これから頑張っていきましょう。
失礼します。

【デザイン】ブラシパターンを作ってみよう②

今日も一日お疲れ様です。

<余談>

9/21に「あの日見た花の名前を僕たちはまだ知らない」のスペシャルドラマが放映されました。

同作品は、漫画の時からファンだったので実写化に抵抗があったのですが…
すごくよかったです…!

キャストの選択が秀逸でしたね。
本当に漫画の世界から出てきたようなそっくりっぷりでした
(ちょっと大人メンマだけは違和感がありましたが…)


主題歌も、原曲を潰さずアレンジされていてこれもまた…www.youtube.com

夏の終わりにどうしても見たくなります。
今年もしっかり泣いておきました。


ブラシパターン

kurischool.hatenablog.com

前回ブラシパターンを作成したものの、イメージと違うものができてしまったためその続編です。
どうやら、重大な過ちをしていたようです。

アートブラシとブラシパターン

Illustratorには、ブラシパターンというものの他に「アートブラシ」というものが存在します。

直線等で製作する場合には、こちらの「アートブラシ」の方が使いやすそうです。
実際に試してみましょう。


素材を読み込む

f:id:kurischool:20150924235427p:plain

作成した、直線のパターンを全て選択した状態で、新規ブラシの作成をクリックします。


f:id:kurischool:20150924235504p:plain
オプションからアートブラシを選択して、OK をクリック。

手順としては、以上になります。



f:id:kurischool:20150924235535p:plain
ご覧のように、ただの直線を引いただけですが先程のブラシを適用することで
先程登録した、図形の羅列が表示されましたね。


総括

ですが、引き伸ばされて長くなってしまっていた、本音をいうとループをさせてみたいなー…と…
もう少し研究が必要そうです!
それでは失礼します。

【デザイン】ブラシパターンを作ってみよう

今日も一日お疲れ様です。

アクセス数2600突破

今回も無事達成できました。
今後ともよろしくお願い致します。


パターンブラシとは

Illustratorには、「パターンブラシ」というものが存在します。

f:id:kurischool:20150922233752p:plain

この4本は、全く同じ直線なのですが
筆で書いたようにしたり、点線にしたりと線に幅を持たせることができます。


Illustratorには、多数のパターンブラシが標準搭載されています。


では、このパターンブラシを自由に作ってみようと思います。

今回の参考はこちら
http://dezin.jp/lesson/illustrator111219/

それでは作っていきましょう!


素材を準備する

今回は、こちらを使っていきます。
f:id:kurischool:20150922234422p:plain

簡単な図形を並べただけですが…


素材を読み込む

読み込みはスウォッチを使っていきます。
スウォッチパネルに図形を順番に突っ込んでいきましょう。
f:id:kurischool:20150922234550p:plain


ブラシの作成

f:id:kurischool:20150922235216p:plain

新規ブラシから「パターンブラシ」を選択していきます。

f:id:kurischool:20150922235256p:plain

そうしたら、図形のところに先程のスウォッチを選択して準備完了です。


実際に書いてみる


直線を書いて、ブラシを選択していきます。
いざ…

f:id:kurischool:20150922235347p:plain


おや?
イメージと違うものが出来上がりましたね。


ちょっと曲げてみましょう。
f:id:kurischool:20150922235425p:plain

そうくるか…


直線上に好きなパターンを表示するには、少し工夫が必要なようですね。
次回はそこらへんを考えていきましょう。
失礼します。

【ゲーム】株式会社ポケモン発表「Pokemon GO」について

今日も1日お疲れ様です。

アクセス数2300突破

前回のご報告が遅れてしまったため、連日のご報告となってしまいましたが…
無事アクセス数2300を突破することができました。
今後ともよろしくお願いいたします。


余談

任天堂から「スーパーマリオメーカー」が発売されて、話題になっていますね。

マリオシリーズ」のステージが自分の手で作り、インターネットを通じて公開することができるゲームです。
Youtube」や「ニコニコ動画」といった動画配信サイトなどを通じて、ブームが起きています。

(そろそろ本当にWiiuを買わねば…)



Pokemon GO

www.youtube.com

9/9に「Pokemon company」から衝撃の映像が公開されました。
Pokemon Go」というタイトルの新規事業の映像です。
(さすがにイメージ映像ということで拡大解釈の映像にはなっていますが)


内容からすると
「ついにポケモンが現実世界へ」


映像を見るだけで、興奮が冷めないですね。
子供の頃からポケモンという作品に触れてきて、実際にいたらいいのに。
なんてことをずーっと思っていた者としては、本当に嬉しいニュースです。


2016年のリリースとなっているので、続報を待ちましょう…!
気になったことなので記事にさせていただきました。
失礼します。

【デザイン】テキストデザインの枠線について

今日も1日おつかれさまです。

数日、更新が空いてしまい申し訳ありません。
引き続き、更新していきたいと思います。よろしくお願いいたします。

アクセス数2200突破

今回もありがとうございます。
みに来てくださる方がいることが一番のモチベーションにつながっております。
今後ともよろしくお願いいたします。


枠線を付ける

画像に文字を付ける際に
f:id:kurischool:20150910235425p:plain


普通に付けるとこのようになります。
背景の絵と同化してしまい、くっきり見える部分と少し見にくくなってしまう部分に差異が生じてしまいます。
そこで今回は、枠線を付けることでくっきりと見せるテクニックの紹介です。


f:id:kurischool:20150910235538p:plain
それぞれの文字に対して、反対の色で枠を付けるとよりしっかりと文字を出すことができます。
他にも、背景と差がある色を使うなどのテクニックがありますが、今回は黒文字に白枠をつけていきます。


サイズは、状況によって変わってしまうので自身の用途に合わせて使い分けてください。
実際に枠線をつけてみたのがこちら
f:id:kurischool:20150910235710p:plain

比べて見ると文字の部分がくっきりと見えるかと思います。
出来上がった画像に文字を乗せてみて、思ったようにいかなかった場合などはぜひ試してみてください。


簡易更新となり失礼します。

【映像】After Effectsのエフェクト「Ball Action」を使ってみる

今日も1日お疲れ様です。



今日は、AfterEffectsの「BallAction」というエフェクトを使ってみたいと思います。

www.youtube.com


サンプルはこちらです。
細かいボールになって、それらがはじけていくというアクションを行ってくれるエフェクトになります。

f:id:kurischool:20150902234750p:plain

エフェクトを適用すると、このようにメニューが展開するので少し紐解いていきましょう。



よく使うメニューがこちらです。

Scatter

ここの値でボールの散乱度を調整できます。
数値が大きくなるほど、広い範囲にボールが広がり
小さいほど、元のレイヤーの形状に近づきます。

(大きくしてから小さくすると、ボールが集まってきて元のレイヤーの画像や文字を表示するなどのテクニックに応用できます。)



Rotiation

レイヤーの回転を行うことができます。



Grid Spacing

ボールの密度が設定できます。
値が大きいほど、密度が高いものになります。


Ball Size

個々のボールのサイズを調整できます。
大きくすると、隣り合ったボール同士が結合します。
大きすぎると画面いっぱいにところ狭しと展開してしまうので、少し抑えめに設定していきましょう。

Instability State

はじけたボール達、個々の回転を調整することができます。



簡単にですが、まとめてみました。
処理が大変重いため、あまり複雑にはできませんが短い時間のものなら映像にアクセントがつくと思います。
ぜひ、試してみてください。
失礼します。