はじめに
前にタイムラインに投稿が出てきた時に気になり、情報をメモしていた「TextureCreate」に関する記事です。
上記のポストを見た当時にメモはしていたものの、試さないままになっていました。そのような中で、直近でタイムラインに以下のポストが出てきたのをきっかけに、今回試してみました。
今回試すサイト
今回試すサイトは、以下になります。
●TextureCreate
https://gameanimation.info/texture-create/
【余談】 過去にテクスチャ関連でやったことについて
「TextureCreate」を試す前に、過去にテクスチャを作ったり活用したことがあった話を少し書いてみます。今回のテクスチャ作成を試す前に、テクスチャを使ってできること（※ ただし、自分が試した 1つの方向性での話）の一部を紹介する意図です。
自分が過去にやってきたことの中で、テクスチャを使ってやってみていたことの一部の事例紹介になりますが、本記事では余談になる部分です。「TextureCreate」を試した話を見たいという方は、この余談の部分はとばして進んでください。
テクスチャを自作
過去に「p5.jp ＋ シェーダー」の組み合わせや「p5.js でのアニメーション」を色々と試していく中で、「シェーダーで作ったアニメーション・p5.js で作った画像」をテクスチャにする、ということをやったことがありました。例えば以下のものです。
また、以下は既存のテクスチャ画像素材で見たことがあるようなものを、p5.js で描画してみたものです。
既存のテクスチャを利用
以下は、テクスチャ自体は既存のものを使って、それを使ったアニメーションなどを試してものになります。
テクスチャ画像を活用した内容（最初は、パーティクルを使ったアニメーション関連）を試し始めたのは、以下を試したあたりだった気がします。
TextureCreate の公式情報の確認とお試し
それでは、以下の TextureCreate を試してみます。
●TextureCreate
https://gameanimation.info/texture-create/
試してみるにあたって、公式情報を少し見ておきます。
TextureCreate のマニュアル
マニュアルは以下のページのようです。
●テクスチャクリエイト – TextureCreate | ゲームUI演出
https://gameanimation.info/archives/5138
マニュアルには、「画面の基本レイアウト」や、「画面内の左パネル・右パネル部分でできること」などが書かれています。また、「ポストエフェクト」の項目では「おすすめのエフェクトの紹介」もあったりします。
TextureCreate を試す前にマニュアルを一通り見てみると、概要をつかめて良さそうです。
利用規約について
TextureCreate で作成した素材利用について、以下の利用規約のページがあるので、こちらも TextureCreate を使うにあたって見ておくと良さそうです。
●ShaderCreate / TextureCreate 利用規約 | ゲームUI演出
https://gameanimation.info/archives/5200
記事執筆時点では以下となりますが、最新情報は上記でご確認ください。
TextureCreate を試してみる
TextureCreate のサイトにアクセスして、少しテクスチャ作成を試してみます。
テクスチャタイプを変更する
テクスチャタイプを変更してみます。デフォルトの円のものから、以下の「Fire」に変更します。
選択後は、以下のようになりました。
色を付けてみる
先ほどのテクスチャに、色をつけてみます。
右側にある「グラジエントランプ機能」のチェックボックスを ON にします。さらに、その下の「Preset」にある「Fire」を選びます。
そうすると、テクスチャに良い感じに色がつきました。
アニメーションや極座標変換を試す
画面右上のアニメーションも少し試してみました。そのために、以下からメニューを開きます。
さらに以下のチェックボックスを ON にすると、テクスチャが静止画の状態からアニメーションになります。
それと、極座標変換も試してみました。画面左にある「極座標変換」のチェックボックスを ON にしてみると、面白い見た目になりました。
極座標変換は、以下のように元が直線的なテクスチャで使うほうが、使いやすいかもしれません。
テクスチャをエクスポートする
最後にテクスチャをエクスポートします。画面上部の「Save Export」をクリックし、さらにその下のメニューを選びます。
例えば、PNG保存は以下のようになりました。TextureCreate のサイト上で背景が見えていた部分は、透過処理がされた画像になっています。
また、GIF保存の場合は以下のようになりました。TextureCreate のサイト上で背景が見えていた部分は、黒色になっています。
PNG と異なり透過になっていないですが、画像処理の「加算合成」をする場合には便利な素材です。
それと、アニメーションさせたものを GIF にすると、アニメーションGIF でエクスポートできるようです。
その他
CGWORLD.jp の紹介記事
冒頭に掲載していた X のポストで出てきていましたが、CGWORLD.jp での TextureCreate の紹介記事があるようなので、リンクを掲載しておきます。
●たかゆ氏、無料のプロシージャルテクスチャ素材生成サイト「TextureCreate」公開！ 商用利用可
https://cgworld.jp/flashnews/01-202603-TextureCreate.html
ShaderCreate
今回、TextureCreate の利用規約のページを見たところ、「ShaderCreate」というのが出てきていて、これが気になりました。
別途、この ShaderCreate も少し試せればと思っています。
●ShaderCreate - ゲームUIエフェクト作成ツール
https://gameanimation.info/shader-create/
