投稿記事

ぴぽや 2020/10/18 20:37

【Tips】Effekseerでエフェクトプチ改造3


みなさん、こんばんは。
9月限定素材のEffekseerエフェクトプチ改造その3になります。
今回は実際のエフェクトファイル6点の簡単な改造例を紹介していきます。

ただ、今回は少し調整するパラメータ箇所が多いものもありますので、できそうな範囲でお試しください。
また、新しい編集パネルも出てきますので、Effekseer上にパネルが表示されていない場合は、上部メニューの「ウィンドウ」から探してください。


さらなら改造や自分で1からエフェクトを作成したい場合には、Effekseerの公式チュートリアルにトライして見ください。

Effekseer Help 日本語 — Effekseer Help ドキュメント
https://effekseer.github.io/Helps/15x/Tool/ja/index.html

音符


まずは、「pipofm-music01.efkefc」をEffekseerで読み込んでください。

エフェクトが再生されるたびにランダムになるようにしたい

このエフェクトに関しては、ランダムシードを固定し毎回同じ表示状態になるようにしています。
毎回ランダムな表示状態にするには、「全体」パネルの「ランダムシード」の値を初期値の「-1」に変更します。

音符やキラキラの色を変更したい

前回、スピード線の背景などで色を変更する際は、画像そのものを変更していましたが、今回はEffekseer上のパラメータを使って色を変更します。
まずは「ノードツリー」パネルで、「onpu」を選択します。キラキラを調整したい場合は「kirakira」になります。


「描画」パネルの「全体色」にある「カラーチップ」を左クリックすると、色と不透明度を編集することができます。
このエフェクトでは「ランダム」な色で表示されるようにしているため、ランダムな色の範囲を「最小」~「最大」として設定しています。


ちなみに右クリックをすると、色編集時カラーモデルを変更することができます。
RGBA(赤,緑,青,不透明度)、HSVA(色相,彩度,明度,不透明度)。

シャボン玉


「pipofm-bubble01.efkefc」をEffekseerで読み込んでください。

色を変更したい

これは音符のものと同じになります。
「ノードツリー」パネルから「bubble」か「kirakira」を選択してください。

シャボン玉の数を増やしたい

「ノードツリー」パネルで「bubble」を選択します。


「共通」パネルで「生成数」を変更してください。

動きを変更したい

このエフェクトは「乱流」と「重力」という効果を設定しており、そのパラメータを変更することで、面白い動きをつけることができます。
「ノードツリー」パネルで「bubble」を選択します。
「力場」パネルで「強や」や「重力」の値を変更してください。


花びら


「pipofm-leaf01.efkefc」をEffekseerで読み込んでください。

色を変更したい

音符のものと同じになります。
「ノードツリー」パネルから「leaf」か「boke」を選択してください。
「leaf」は色がランダムではないので、1色変更するのみです。
「boke」はランダムなので、同じ色で不透明度をランダムにしています。

動きを変更したい

シャボン玉と同じで、「乱流」と「重力」で設定してあります。
「ノードツリー」パネルで「leaf」を選択します。


「力場」パネルで「強や」や「重力」の値を変更してください。

パーティクルの表示範囲を変更したい

前のものの調整で、丸い光のボケ部分が中央のみに集中しているので、全体になるよう調整します。
「ノードツリー」パネルで「boke」を選択します。


「生成方法」パネルで「生成位置」の「振幅」の値を変更します。

流星


「pipofm-star01.efkefc」をEffekseerで読み込んでください。

流星の数を増やしたい

シャボン玉と同じになります。
「ノードツリー」パネルで「top」を選択し、「共通」パネルで「生成数」を変更してください。
ただ、「top」ノードで変更すると1変更するだけでも一気に数が増えるので、本来は「star parent」ノードで変更したほうがいいのですが、再生時間の調整なども必要で少し複雑になるため「top」ノードでの変更のみ紹介します。

流星の移動距離・角度を変更したい

「ノードツリー」パネルで「star」を選択します。


「位置」パネルで「終点」の値を変更してください。
「X」をマイナスの値にしていくと左側に、プラスの値で右側に移動します。
「Y」をマイナスの値にしていくと下側に、プラスの値で上に移動します。
「始点」の値に注意して設定してください。

流星の出現位置をもっとランダムにしたい

「ノードツリー」パネルで「star parent」を選択します。


「生成方法」パネルで「振幅」の値を増やします。

「流星の移動距離・角度を変更したい」と「流星の出現位置をもっとランダムにしたい」で変更したものがこちら。

魅了状態・気絶状態


使用しているテクスチャ画像が違うだけのものですので、一緒に扱います。
「pipofm-healthring01.efkefc」(魅了状態)か「pipofm-healthring02.efkefc」(気絶状態)をEffekseerで読み込んでください。
説明では「pipofm-healthring01.efkefc」(魅了状態)を使用します。

ハートの数を増やしたい

「ノードツリー」パネルで「heart parent」を選択します。


「生成方法」パネルで「分割数」の値を増やします。
数を増やすと、ハート同士の間隔が詰まってしまうので、「半径」も調整しましょう。
「共通」パネルで「生成数」を「分割数」と同じ値にします。

「glow heart parent」も同じように変更します。

ハートのリングをまとめて縦に増やしたい

ゲームでの使用時にキャラクター全体を囲うようなものにします。


「ノードツリー」パネルで「top」を選択します。

「生成方法」パネルでプルダウンメニューから「線」を選択します。
「終了位置」の「Y」を任意の値にします。
「共通」パネルで「生成数」を任意の値にします。

これはなかなかおもしろい改造なのですが、若干表示がおかしい部分があったので、どこかしら調整が必要かもしれません。問題がわかったら追記したいと思います。

おわり

今回のエフェクトはシンプルでわかりやすいものを選んでみましたが、シンプルなものほど改造でバリエーションを作りやすいので、今回説明した部分以外もパラメータをいじって改造してみてください。


ではでは、次回は7点(斬撃、ヒット系、ピラー系)を扱いたいと思います。

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

ぴぽや 2020/10/14 22:47

【進捗】SpriteStudioを使った素材その3


みなさん、こんばんは。
本日もSpriteStudioを使ってRPGツクールMV/MZ規格のサイドビューキャラを生成するキットの進捗です。
テンプレくんの衣装もできたので、SpriteStudioに組み込んでアニメーションを調整しました。
個々のポーズやアニメはまだ詰めたものではないですが、こんなかんじで動きます。

アニメのありなしはRPGツクールMV/MZに準拠しているので、どうしようか迷っているのですが、ひとまずこのまま仕上げて後々アニメに出来る部分は調整しようと思います。
「状態異常」と「瀕死」と「眠り」が表情違うだけでポーズが同じなので、「眠り」は首が揺れるぐらいのアニメはつけます。

今回のものは前の記事に書いたとおり、SpriteStudioのメッシュ変形で細かなパーツ変形をさせることができないのですが、なんかメッシュ使わない変形機能あったよなぁ?とずっと思っていたのですが、「頂点変形」というのがあるのを思い出しました。SpriteStudio触るの久々で色々わすれてましたね。これはウディタで言うと「自由変形」で、画像の4角の座標を移動させることができます。これであればイラストの内容に関わらず変形でアニメーションさせることができるので、あとで髪揺れなんかも付けていきます。

現状の使用パーツはこちらの画像のとおりです。


細かいですが、それほどパーツ数多くなく作れます。多いかな…?
下2段の服のパターンだけ、通常、裾が広がっているもの(脚を広げたとき)、立膝の時のものと微調整したものが必要になります。このあたりはメッシュ変形を使えればいらないものなので、パーツ数が増えてちょっと手間ですがイラストの微調整ぐらいなので大丈夫かなと。

あとは「表情」と「手のひら」を数パターン作ってデータとしては完成。
動きをブラッシュアップしたら、ドキュメント作ってアップしたいと思います。
SpriteStudio上での調整や、独自パーツを追加したい場合の手順なんかをまとめますので、ドキュメント作成にまた少し時間が掛かりそうです。


ではでは、また~。

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

ぴぽや 2020/10/13 20:15

【進捗】SpriteStudioを使った素材その2


みなさん、こんばんは。
SpriteStudioを使ってRPGツクールMV/MZ規格のサイドビューキャラを生成するキットの進捗です。長い……。

トップ画像のとおりテンプレート用のキャライラストを進め始めました。塗りはテンプレなのでフラットなまま、髪の毛は3つのパーツに分かれるので、わかりやすく色を変えています。
テンプレちゃんにしようかと思ってましたが、ちょっと中性的なテンプレくんになります。

あとはシンプルにブーツと手袋描いて出来上がり状態なのですが、こう衣装を作っていくと、こういう衣装の場合は重ね順変えないとダメだ、構造変えなきゃっていう問題が出てくるので、けっこう悩みながら進めています、というか悩むところに時間がかかっています。シンプルさを重視したいので、色々妥協せざる負えませんが。

髪の毛も服の前にくるお下げ髪やツインテールには対応できないので、このあたりは各自でSpriteStudioをある程度習得してもらって調整してくださいということになります。
髪の毛の揺れアニメも入れるのが難しくて悩んでいます。メッシュという機能を使うと自然に揺らすこともできるのですが、メッシュはイラストの形状に沿って生成されるもののため、イラストの差替を考慮した今回のものには使えず。

あと、こうやって髪と簡単な服を描いた状態で見てみると、手が大きすぎるかなぁ。というかんじ。RPGツクールMV/MZで使った場合に武器がちゃんと持てるようにと仕方ないのですが、RPGツクールMV/MZの呪縛をかんじてしまいます笑
一旦これを作ったら、武器画像自体も各自で描いたものを使えるタイプも作ってみようかと思います。
少し中途半端な素材になりますが、みなさんがほぼ無料になったSpriteStudioを活用して素材を作り作品を華やかにするきっかけにでもなれば十分かと思うところです。



久々にIllustratorで絵を描いて、やっぱイラレ楽しいなぁ。と思っているのですが、この間仕事で飲料水のラベルデザインみたいなのをやってたので、その反動もあるのかも。

そうだ、トップ画像で鏡像表示しているのはIllustratorにはクリスタなんかのようなバランス確認する反転表示機能がないので、鏡像表示するフリーソフトを使っています。どんなお絵かきソフトでも使えるのでなかなか便利。ドット絵描く時なんかでも使えていいかもですが、ドット絵の時は使ったことないかな。

こちらの『反転するノ』や『イメージミラー』を使っています。
ちょっと便利なソフトウェアをお届けします - S.S.Software
https://main-sssoftware.ssl-lolipop.jp/


ではでは~。

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

ぴぽや 2020/10/11 21:56

【Tips】Effekseerでエフェクトプチ改造2


みなさん、こんばんは。
9月限定素材のEffekseerエフェクトプチ改造その2ということで、今回は実際のエフェクトファイルを何点か選んで簡単な改造例を紹介していきます。

前回も書きましたが、Effekseerの公式チュートリアルをこなしてもらえれば、もっと色々改造できたり自分で1からエフェクトを作成することも可能ですので、興味ある方はぜひトライして見ください。

Effekseer Help 日本語 — Effekseer Help ドキュメント
https://effekseer.github.io/Helps/15x/Tool/ja/index.html

基本編補足

基本編で1つ忘れていたので、補足になります。

ランダムシードの設定

9月限定素材のEffekseerエフェクトは一部例外もありますが、再生されるごとにランダムなアニメーションになるように設定されています。
Effekseerファイルのまま使用するのであれば問題ありませんが、2D画像として出力する場合になるべく理想のランダム加減でアニメーションするようにしたいところです。その場合にはランダムシードに数値を設定するとランダム加減を固定できます。
「全体」パネルの「ランダムシード」に0以上の数値を入力していき、いいかんじに再生される数値を探っていきます。
デフォルトは「-1」となっており、この場合は再生ごとに自動でランダムな表示になります。


ただ、Effekseerのバージョン1.6(現在1.52)からこのランダムシードの扱いが変わってしまうようです。

流れるコメント


まずは、「pipofm-comment01.efkefc」をEffekseerで読み込んでください。

流れるコメントの数を変更したい

「ノードツリー」パネルで「comment」を選択した状態で、「共通」パネルの「生成数」を変更します。

コメントの内容を変更したい

これは簡単で画像ファイルを描き変えるだけです。
「Texture」フォルダにある「pipo-esm_comment001.png」をお手持ちの画像編集ソフトで読み込んで、編集してください。下の画像のように1マス256×256ピクセル内に1つのコメントが配置されていますので、お好きな文章を同じ用に配置してください。
文章以外にコメント職人的なものやアスキーアートでも256×256ピクセル内で配置可能です。


画像ファイル名を別名保存した場合は「ノードツリー」パネルで「comment」を選択し、「描画共通」パネルの「色/歪み画像」の「読込」ボタンを押して、画像ファイルを読み込んでください。

スピード線


「pipofm-speedline01.efkefc」をEffekseerで読み込んでください。
スピード線は無料の友達プラン向けのセットにも収録してあります。

キラキラを消したい

「ノードツリー」パネルで「star」を非表示にするか、右クリックメニューから削除してください。

他のエフェクトでも適当なノードを非表示にしてみて、自分の使いたい状態に調整してみてください。

背景画像の色を変えたい

Effekseer上でも色を変えることが出来るのですが調整が難しい部分があるので、画像ファイルを変更した方が楽です。
「Texture」フォルダにある「pipo-esm_bg001.png」をお手持ちの画像編集ソフトで読み込んで、編集してください。


画像ファイル名を別名保存した場合は、「流れるコメント」の時を同じ用に「ノードツリー」パネルで「bg」を選択し、「描画共通」パネルの「色/歪み画像」の「読込」ボタンを押して、画像ファイルを読み込んでください。

集中線


「pipofm-focusline01.efkefc」をEffekseerで読み込んでください。

キラキラを消したい

スピード線と同じです。

背景画像の色を変えたい

これもスピード線と同じで、「Texture」フォルダにある「pipo-esm_bg002.png」をお手持ちの画像編集ソフトで読み込んで、編集してください。


画像ファイル名を別名保存した場合は「ノードツリー」パネルで「bg」を選択し、「描画共通」パネルの「色/歪み画像」の「読込」ボタンを押して、画像ファイルを読み込んでください。

中央の光をもっと強くしたい&弱くしたい

「ノードツリー」パネルで「line long」か「line short」を選択し、「生成方法」パネルの「生成位置」の「中心 X座標」の数値を変更します。



画像は強くしてみました。

おわり

今回の3点を2D画像として出力する際は、「視点操作」パネルで「View」フォルダから「スピード線&集中線録画用カメラ.view」を読み込んで、「距離」を調整して出力してください。
「視点操作」パネルについては「基本編」の記事をご覧ください。
【Tips】Effekseerでエフェクトプチ改造1~基本編~
https://ci-en.net/creator/118/article/380043

ではで、また次回も3~5点ぐらいを扱いたいと思います。

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

ぴぽや 2020/10/10 15:14

【Tips】Effekseerでエフェクトプチ改造1~基本編~


みなさん、こんにちは。
9月の限定素材のEffekseer製エフェクトのプチ改造記事を、これから何回かにわけてアップしていきます。まとまったら、ぴぽや倉庫の方にもアップするかもしれません。

プチ改造なので、なるべく簡単な操作で済む部分のみを扱っていきます。

Effekseerは無料でダウンロードできますし、Effekseer自体をある程度習得すれば細かい部分も改造できるようになりますので、興味と時間がありましたら、Effekseerのマニュアル・チュートリアルを見てみてください。

Effekseer Help 日本語 — Effekseer Help ドキュメント
https://effekseer.github.io/Helps/15x/Tool/ja/index.html


今回の記事ではEffekseerのバージョン1.52mを使用しています。


基本編

パネル(ウインドウ)表示

Effekseerには色々な操作パネルがあり、デフォルトで表示されるもの以外にも重要なパネルがあるので、記事中で使っているもので、もしEffekseerの画面上に見つからない場合は、上部メニューの「ウィンドウ」から探してみてください。

ビュワー上での視点操作

エフェクトが表示される「ビュワー」上での視点操作(カメラ)がまずは一番のポイントになります。
3D空間上での操作になるので、慣れるまではなかなかたいへんです。


「ビュワー」上での基本操作はこちら。マニュアルからの抜粋になります。
  • 回転:マウスの右ボタンを押しながら、マウスを移動
  • 平行移動:マウスホイール、もしくは右ボタン+Shiftを押しながら、マウスを移動
  • 拡大:マウスホイールを回転、もしくは右ボタン+Control

また、「視点操作」パネルを使うと、数値で「ビュワー」の表示状態を操作することもできます。次に説明する2D画像として出力する際には「視点操作」パネルを使って表示状態を調整した方が正確な角度や距離で出力することができます。

ちなみにアニメーションの再生や停止は画面下部に表示される「ビュワー操作」パネルで行うことができますが、キーボードの「スペースキー」でも再生・停止を行うこともできますので、覚えておくと便利です。

2D画像としての出力する手順

Effekseerのエフェクトは3Dで作成されますが、ビュワーの表示状態のままにアニメーションを録画してPNG(スプライトシート画像,連番画像)、GIFアニメとして出力することができますので、Effekseerのエフェクトファイルに対応していないゲーム制作ソフトなどでも活用することができます。

「録画」パネルを操作して、出力設定をしアニメーションの録画をすることができます。


「録画範囲」で画像1コマあたりのサイズを指定します。
「録画範囲を表示」をチェックしておくと、指定サイズで「ビュワー」に枠が表示されます。

「出力フレーム」で出力する範囲を指定します。
フレーム番号は「ビュワー操作」パネル上で確認することができます。
下記の画像だと、5が現在表示中のフレーム番号、2が開始フレーム番号、18が終了フレーム番号となっています。


「出力頻度」はEffekseerのアニメーションをそのまま画像出力してしまうと画像枚数が膨大になるため、出力するコマを間引いて画像枚数を少なくする設定になります。

「出力形式」はゲーム制作用に使用する場合にはPNG画像として保存される「1枚にまとめて出力」(スプライトシート)か「連番画像として出力」を選択します。

「背景透明化の方法」は透過PNGにしたい場合は「生成」を選択します。ただし、エフェクトに暗い色を使っているとその部分が透明になってしまうため注意が必要です。
暗い色を使っているもには「生成(ブレンド+加算)」を選択する必要がありますが、2種類の画像が出力されて、その2種類の画像を画像編集ソフトで合成する手間があります。
また、黒背景にしたい場合は「なし」とし、GIFアニメで出力する場合に最適です。

「録画」ボタンを押すと、保存先を選択し画像出力が実行されます。

詳しくはマニュアルを参照してください。
録画 — Effekseer Help ドキュメント
https://effekseer.github.io/Helps/15x/Tool/ja/ToolReference/record.html


9月限定素材のファイルには2D画像として出力するための視点(カメラ)設定ファイルを収録しています。
これを読み込めば、RPGなどの戦闘画面である少し斜め上視点に設定されますので、ここから微調整してもらうと便利です。
読み込むには、「視点操作」パネルの「読込」ボタンを押します。
「View」フォルダ内に「2D録画用カメラ.view」と「スピード線&集中線録画用カメラ.view」の2種類のファイルがありますので、通常は「2D録画用カメラ.view」を使ってください。

微調整する際の主な調整箇所はこちらになります。

  • 焦点:中心となる位置を調整します。縦に長いエフェクトなどは中心点のY座標を調整して、録画範囲に収まるように調整しましょう。
  • X軸回転:角度を調整します。エフェクトを使用したいシーンに合った角度を指定できます。
  • 視点への距離:ズームイン・ズームアウトですね。エフェクトが録画範囲にうまく収まるように調整しましょう。

エフェクトの基本編集

9月限定素材のEffekseerファイルでは、エフェクト全体を一括して拡大縮小・回転・位置変更ができるように作ってあります。
これは主に2D録画の補助調整として設定してあるものなので、そのままEffekseerファイルを使用できる場合にはゲームエンジン側で拡大縮小などが可能なものだと思います。

「ノードツリー」パネルで、「top」を選んで「位置」「角度」「拡大」パネルを操作します。おそらく「拡大」ぐらいしか使わないとは思います。


おわり

基本編だけでそこそこのボリュームになってしまいましたので、このくらいで。
次回は「コメント」「スピード線」「集中線」のプチ改造を紹介したいと思います。
ではでは~。

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

月別アーカイブ

記事を検索