rn.log

備忘録など

【Photoshop CC】画像を半透明にする

f:id:r-ngtm:20171109132639p:plain

はじめに

画像を半透明にしたい」というシチュエーションはよくあると思います。

今回はPhotoshop CCのレイヤーマスク機能を使ってレイヤーを半透明にする方法をご紹介いたします。

使用する画像

今回はPhotoshopアイコンのpngを使います。

f:id:r-ngtm:20171109124229p:plain:w120

STEP 0. Photoshopを開く

背景レイヤーは削除してPhotoshopアイコンだけの状態にしておきます。

f:id:r-ngtm:20171109132005p:plain

STEP 1. レイヤーマスクの追加

レイヤーパネルの下のほうにある四角いアイコンをクリックしてレイヤーマスクを追加。
f:id:r-ngtm:20171109125428p:plain


レイヤーマスクが追加されます。
f:id:r-ngtm:20171109125655p:plain

STEP 2. レイヤーマスクの選択 (Windows)

Altキーを押しながらレイヤーマスクを左クリックするとレイヤーマスクが選択されて編集可能な状態になります。

f:id:r-ngtm:20171109130233g:plain:w530



↓ 鉛筆ツールで試し描き
f:id:r-ngtm:20171109133510g:plain:w280

STEP 3. レイヤーを半透明にしてみる

このレイヤーマスクを編集することでレイヤーの不透明度を変えることができます。

例えば、明度50%のグレーで塗った部分は不透明度50%になり、 明度0%の黒で塗った部分は不透明度0%(完全な透明)になります。


例えば、以下のようにレイヤーマスクを塗ると、

f:id:r-ngtm:20171109131215p:plain:w300

グレーで塗った部分だけ半透明になります。

f:id:r-ngtm:20171109131257p:plain:w300


Unityに取り込んで表示させてみるとこんな感じ

f:id:r-ngtm:20171109131714p:plain


ファイルの書き出しは Ctrl + Alt + WCtrl + Alt + S が便利です。

【UE4】サンプルSTGを改造して5-Way弾を打たせてみる

UE4はじめました。

自身のUE4学習もかねて、今回はサンプルSTGを改造して5-Way弾を撃たせるまでの手順を記事として書き残したいと思います。

f:id:r-ngtm:20170726182737g:plain

環境

Windows 10
UE4のバージョン: 4.12.5

0. プロジェクト作成

Twin Stick Shooter を選択して新規プロジェクトを作成します。

f:id:r-ngtm:20170726182947p:plain

ASDWで移動、矢印キーで1-way弾の発射ができるSTGが作成されます。 (Alt + Pでゲーム再生)

f:id:r-ngtm:20170726183310g:plain

今回はこのSTGを改造して、5-Way弾を発射できるようにしていきたいと思います。

1. 自機のブループリントを開く

アウトライナの TwinStickPawnを編集 と青字で書かれている部分をクリックしてブループリントを開きます。

f:id:r-ngtm:20170726211033p:plain

f:id:r-ngtm:20170726183934p:plain

弾の生成処理

弾を生成している処理は、FireShot 関数内の以下の黄色で囲った部分になります。

f:id:r-ngtm:20170726184822p:plain

ここを編集して5-Way弾を実装していきます。

STEP2. 弾の向きの変更

CombineRotatorsノードの配置.

CombineRotatorノードを配置します。

f:id:r-ngtm:20170726190005g:plain

CombineRotatorsノード は回転情報であるRotatorに別のRotatorを加算するときに使用するノードです。

今回はこのノードを利用して、弾の回転を実装します。

CombineRotatorsノードの接続

CombineRotatorsの青色のリンクを以下のように繋ぎます。

f:id:r-ngtm:20170726192006p:plain

補足: ピンの分割

ピンを右クリックして Split Struct Pinを選択するとピンを分割することができます。

f:id:r-ngtm:20170726190452p:plain:h200

f:id:r-ngtm:20170726202320p:plain

以上で弾の向きを変更する準備が整いました。

回転が変わることを確認してみる。

ここで、試しにYawへ15を入力してみましょう。

f:id:r-ngtm:20170726202554p:plain

弾が15°ずれた方向へ飛ぶようになります。

f:id:r-ngtm:20170726203821p:plain

Yawの入力値が弾の回転の加算値となるのです。

Forループを使って弾を複数生成する

次に、弾の生成処理にForループをかませて弾の生成処理が複数回呼ばれるようにしていきます。


弾の生成を行っているノードは SpawnActor ノードです。

f:id:r-ngtm:20170726215041p:plain:h250

ForLoopノードの配置

ForLoopノードを配置します。

f:id:r-ngtm:20170726191221p:plain

ブランチノードの出力ピンをドラッグアンドロップするとノードの配置と繋ぎなおしを同時にやってくれるので楽です。

f:id:r-ngtm:20170726191128g:plain

今回は弾を5個撃ちたいので、First Index を -2, Last Index を 2に設定します。

f:id:r-ngtm:20170726191415p:plain

CanFireフラグの設定タイミングの変更

サンプルでは、弾を1回撃った直後に Can Fire フラグ(弾の発射可能フラグ)をOFFにする処理が入っており、弾が1つしか発射できないようになっています。

f:id:r-ngtm:20170726210101p:plain

セットノードの実行フローをForLoopノードのCompletedピンに繋ぎ、 5つの弾すべてが発射されてからフラグがOFFになるようにします。

f:id:r-ngtm:20170726193044g:plain

リンクの切断は Alt + 左クリック で行うと楽ちんです。


ForLoopノードの配置は以上で完了となります。

45°間隔で弾が発射されるようにする

次に、Forループのインデックスを利用して弾の回転を設定していきます。

Forループのインデックスに45をかけたものをYaw(弾の回転)に設定するようなノードを組んでいきます。

(弾の回転) = 45 * (インデックス)

まず、ForLoopノードのIndexピンに int*floatノードを接続します。

f:id:r-ngtm:20170726194142g:plain

そしてfloatに45を入力し、CombineRotatorsノードの Yawに接続します。

f:id:r-ngtm:20170726194332p:plain

以上で5-Way弾を発射する準備は完了となります。

2. 確認してみる

ゲームを再生して、矢印キーを押すと弾が5方向へ発射されることが確認できます。

f:id:r-ngtm:20170726194726g:plain

3. 角度を狭くしてみる

45°間隔で弾が発射されることが確認できました。

次はこれを間隔で発射されるようにしてみたいと思います。

先ほどのint*floatノードで45を入力していたところを5に変更します。

f:id:r-ngtm:20170726195136p:plain

弾が1つしか出ない

この状態で弾を撃っても、1つの方向にしか発射されません。

f:id:r-ngtm:20170726195236p:plain

これは、弾同士が接触することによって消滅を起こしてしまっているのが原因です。

なので、弾のコリジョン設定を変更して弾が消えないようにしてみます。

弾のコリジョンの設定

コンテンツブラウザでTwinStickProjectileをダブルクリックしてブループリントを開きます。

f:id:r-ngtm:20170726195713p:plain

ビューポートタブで弾をクリックし、詳細タブからCollisionを設定します。

f:id:r-ngtm:20170726200123p:plain

今回は弾同士のコリジョンを無効にしたいので、Projectile の無視チェックボックスをONにします。

f:id:r-ngtm:20170726200627p:plain

確認してみる

コリジョンが正しく設定できていると、弾が5個発射されることが確認できます。

f:id:r-ngtm:20170726200753p:plain

【Substance Designer】ノードを小さくする

以下のような小さいノードを作る方法について調べてみました。

f:id:r-ngtm:20170630161117p:plain

Substance Designerのバージョンは2017.1.0です。

Dキーを押すと小さくできる

ノードを選択した状態でキーボードのDキーを押すとノードが小さく、もう一度Dを押すとノードが元の大きさにもどります。

f:id:r-ngtm:20170630161317g:plain

ちなみに、小さくなっている状態のノードのことを Docked node と呼ぶらしいです。


入力ピン・出力ピンが2つ以上あるノードは小さくできないみたいです。

f:id:r-ngtm:20170630162608p:plain

参考URL

https://forum.allegorithmic.com/index.php?topic=266.0

【Substance Designer】Step関数を使ってみる

はじめに

Steamセールでテクスチャ作成ツールSubstance Desiner 6が安くなっていたので購入してみました。

今回の記事では以下のようなGLSLコードをSubstanceDesiner上で再現してみます。

float output = step(a, b);


Substance DesignerでStep関数(階段関数)を使おうというのが今回の記事の趣旨です

階段関数 - Wikipedia


Substance Designerについて

Substance Designerの基本的な使い方については以下を読むとわかると思います。

基本のワークフロー - Substance Designer wiki


本記事のSubstance Designerのバージョンは6.0.4です

Step0. ノードの準備

まずは入力用のテクスチャと出力用のノードを用意します。

f:id:r-ngtm:20170628125623p:plain:w300

今回は入力としてBnW Spots 1

出力としてBase Colorノードを使用します。

STEP1. Pixel Processorノードを追加

Pixel Processorノードを追加します。

f:id:r-ngtm:20170628125855p:plain:w300

STEP2. Pixel Processorノードの編集

Pixel Processorノードの固有のパラメータ欄にある編集ボタンをクリックして編集画面を開きます。

f:id:r-ngtm:20170628130305p:plain


f:id:r-ngtm:20170628130503p:plain:w300

最初からあるConstant/Floatノードはいらないので削除しておきます。

サンプラーノードの追加

まずは右クリックメニューからサンプラーを追加します。

f:id:r-ngtm:20170628130644p:plain:w300

f:id:r-ngtm:20170628130842p:plain:w300

Float2変数ノードの追加

次にFloat2変数ノードを追加します。

f:id:r-ngtm:20170628130959p:plain:w300

変数ノードへ $pos と入力します。

f:id:r-ngtm:20170628131300p:plain:w300

変数ノードとサンプラーはつなげておきます。

f:id:r-ngtm:20170628133753p:plain:w300

Stepノードの追加

ライブラリーからStepノードを追加します。

f:id:r-ngtm:20170628131631p:plain:w300

サンプラーノードの出力をSTEPノードの入力へつなげておきます。

f:id:r-ngtm:20170628131819p:plain:w300

こうすることでサンプラーの出力をstepの第1引数として渡すことができます。

Float定数ノードの追加

右クリックメニューからFloat定数ノードを追加します。

f:id:r-ngtm:20170628131920p:plain:w300

Float定数ノードとStepノードを接続します。

f:id:r-ngtm:20170628132029p:plain:w300

こうすることで定数値をstepの第2引数として渡すことができます。

Stepノードを出力ノードとして設定する

Stepノードを右クリックして、「出力ノードとして設定」を選択します。

f:id:r-ngtm:20170628132144p:plain:w300

Stepノードがオレンジ色になり、Stepノードの出力がPixel Processorノードの最終的な出力になります。

f:id:r-ngtm:20170628132249p:plain:w300

STEP3. 動作の確認

Float定数ノードの値を変化させると、出力も変化することが確認できます。

f:id:r-ngtm:20170628132820g:plain

【Illustrator CC】正三角形から六芒星を作る

f:id:r-ngtm:20170627112453p:plain:w200

はじめに

正三角形を回転ツールで回転させると、バウンディングボックスの中心を軸として回転してしまいます。

f:id:r-ngtm:20170627111442g:plain:w350


今回はこの三角形を中央で回転させて、以下のような六芒星を作る方法について簡単に解説します。

f:id:r-ngtm:20170627112453p:plain:w300

STEP 0. 三角形の用意

多角形ツールで頂点数を3にして正三角形を作成します。

f:id:r-ngtm:20170627111904p:plain:w250

STEP 1. 三角形にぴったり合う正円を作成する

楕円形ツールを使って正三角形にピッタリ合うような正円を作成します。

f:id:r-ngtm:20170627112042p:plain:w250

三角形の各頂点と円をピッタリ合わせるのがポイントです。 ここがずれているときれいな六芒星になりません

f:id:r-ngtm:20170627115017p:plain:w250

STEP 2. 180度回転させる

円と三角形の両方を選択している状態で、回転ツールを開きます。

f:id:r-ngtm:20170627113249p:plain

角度を180度に設定し、コピーボタンを押します。

f:id:r-ngtm:20170627112250p:plain

以下のような六芒星が出来上がります。

f:id:r-ngtm:20170627112355p:plain:w250

STEP 3 円を削除して完成。

正円を削除して完成です。

f:id:r-ngtm:20170627112453p:plain:w250

Unity1週間ゲームジャム「積む」に参加しました。

f:id:r-ngtm:20170625225037p:plain:w350

前回の1週間ゲームジャムに引き続き、今回も参加してみました。

Unity 1週間ゲームジャム | ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう



目次

作ったゲームについて。

今回は 積み将棋 というゲームを作りました。 

将棋のコマを積んでいってステージクリアを目指すシンプルなゲームです。

今回のゲームで意識したポイント

今回のゲームジャムでは、ちゃんとしたゲームを一本完成させよう ということを意識しました。

今回のゲームでは主にデザインと演出へ力を入れたので、本記事ではデザインや演出について書き起こしたいと思います。

ちなみに筆者はデザインについては素人なので、大目に見ていただけると助かります。

最初の一歩 ~コマを積むゲームを作ってみる~

ゲームジャムの「積む」というテーマを見て、「将棋の駒を積むゲームを作ろう」と最初に思いつきました。

最初に作ったものが以下になります。

ゲームとしては成り立っているものの、微妙な出来栄えです。

そこで、ゲームの見た目のクオリティを上げることにしました。

床を畳にしてみる

床がグリッドなのはさすがに無いなぁ、と思って床を畳にすることを思いつきました。

床に畳テクスチャを張り付けたものが以下になります。

ライティングもついでに調整しています。


だいぶ和風な雰囲気が出せたなというのが個人的な評価です。

ここで、「ゲームの全体の雰囲気を和で統一しよう」 と考えつきました。

ロゴの作成

基本的なゲームサイクルはすでに出来上がっていたので、ゲームの顔とも言えるロゴを作成することにしました。

意識したポイント

今回はロゴを作成するにあたって以下の2点を意識しました。

・和の雰囲気に合うロゴであるということ

・将棋を積むという内容が伝わるものであるということ

ラフの作成

以下はロゴを作成するあたって描いたラフスケッチです。(字がきたない

f:id:r-ngtm:20170625213221p:plain:w256

ラフの清書

ラフをもとに清書したロゴが以下になります。

f:id:r-ngtm:20170625213445p:plain:w256

使用したフォントは ゴシックMB101U と 851レトロゴ です。

ロゴをゲームに入れてみる

ロゴをゲームに入れてみたものが以下になります。

タイトル画面を作りこむ

ゲームスタートの文字を巻物にしてみました。

ロゴを入れるついでに、部屋の中央に将棋のコマを落としつづけるデモを入れてにぎやかな感じを入れてみました。

ゲームっぽい雰囲気を作ることができたのかなというのが個人的な評価です

ステージ選択画面を作る

ラフの作成

1週間という制限時間もあって素材を作る時間があまりとれなかったので、タイトル画面の巻物を流用して仮のステージ選択画面を作成しました。

Photoshopで作成した仮画面が以下になります。

f:id:r-ngtm:20170625215642p:plain:w350

実装する

これを実装したものが以下になります。

f:id:r-ngtm:20170625221202g:plain:w350

ボタンに出現アニメーションをつけることででにぎやかな感じを出すことを意識しました。

また、アニメーションが主張しすぎると目ざわりになってしまうと思うので、さりげなくササッっと入ってくるようなイメージでアニメーションを作成しました。

ゲームオーバー画面

ゲームオーバー画面についても書き起こしたいと思います。

今回は以下のようなゲームオーバー画面を作成しました。

f:id:r-ngtm:20170625223319p:plain:w350

アニメーション

これにアニメーションを入れたものが以下になります。

f:id:r-ngtm:20170625223845g:plain:w350

意識したポイント

最初に失敗の文字を出し、そのあとにボタンを表示させることで何が起きているのかを分かりやすく伝えるということを意識しました。

また、失敗の文字が出てからボタン出現までの尺が長すぎるとこれもまたイラっと来ると思うので、さりげなくボタンが出てくるようなイメージでアニメーションを調整しました。

URL

畳のテクスチャは以下のリンク先のものを利用させていただきました。

Vol.19 畳・琉球畳のテクスチャ | 建築パース素材無料ダウンロード | 建築パース.com

感想

今回のゲームジャムを通して、デザイン素材を短期間で大急ぎで作るいう貴重な経験を得ることができました。

それと同時に、デザインを考えるのって大変なんだなぁということが身に染みてわかりました。


イラレ扱うのとか、フォントを選ぶのとか、配色考えるのとか、その他いろいろ苦労しました。

デザインの引き出し増やしたい…

【Houdini FX】煙を出してみる

f:id:r-ngtm:20170621133405p:plain:h280

VFXを作ってみたいなぁと思ってHoudiniを始めてみました。


以下のチュートリアル動画をみて煙を出す方法を覚えたので、簡単なメモとして書き起こしたいと思います。

www.youtube.com


環境

Windows 10

Houdini FX Version 16.0.633 非商用版

STEP0. Houdiniを開く

まずはHoudiniを開きます。 f:id:r-ngtm:20170621130237p:plain

STEP1. 球体を設置する

画面左上からSphereを選択し、シーンビュー上で左クリックして球体を設置します。

f:id:r-ngtm:20170621132259g:plain

STEP2. 球体を煙に変える

次にこの球体を煙に変えます。

画面右上のPyroFXタブのBillowy Smokeを選択します。

そして先ほどの球体を左クリックして選択した状態でEnterキーを押します。

f:id:r-ngtm:20170621132545g:plain

球体が煙に変わります。

STEP3. 煙を再生してみる

画面の左下にある、再生ボタンをクリックすると煙の再生が始まります。 スペックが低いPCだとカクつくかもしれません。

f:id:r-ngtm:20170621132846g:plain

上矢印キーでも再生できます。