ナブラ&#12539;コルタンの研究所

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。

http://3d-memo.blog.jp/archives/1026242407.html

2020年1月26日日曜日

[Blender2.81]Clothシミュレーションでクッションを手軽につくる

はい、こんにちは。
@CortanMathです。

Blenderでクッションみたいなものを作りたいなあ、と思って、簡単に作れる方法を調べていたら、このような記事を見つけました。

で、真似してみようと思ったわけです。

ただ、この記事のBlenderのバージョンにはあった「プリセット」の項目が、今僕が使っているBlender2.81には見当たりませんでした。

無くなってしまったんですかねえ。

実は、プリセットの選択はここにあったようです。
すみません。

ということで、他のプロパティを適当にいじって調節することにしたので、ここにメモします。

Clothシミュレーションでクッションをつくる

では、実際に作っていきます。

結構手軽にできると思います。

まず、最初からあるCubeのサイズを変えてクッションの形にします。

次に、編集モードで細分化します。

こんな感じになると思います。

そうしたら、オブジェクトモードに戻り、Smoothをかけます。

あと、Subdivision Surfaceモディファイヤも追加します。

では、クロスシミュレーションを追加しましょう。

この設定画面の下の方にある「重力」を0にします。

次に、このクッションの真ん中あたりに、Forceを追加します。

強さは50くらいにしました。
各自微調整してください。

クロスの方の設定ですが、僕はこんな感じにしました。
正直、値を変えても劇的な変化は見られませんでした。

もっと大幅にいじれば、動きも変わるんでしょうけどね。

これで準備が整いましたので、シミュレーションを実行します。

自分の好きな形になったら、アニメーションを一時停止して下さい。

モディファイヤとシミュレーションを適用して、形を固定します。

注意することとしては、上から順番に適用してください。

最後にマテリアルを設定して完成です。

ベースカラーは緑にしました。

あと、布なので、粗さを1にしました。

以上で完成です。

ちょっと毛を生やしてみたのがこちらです。

まあ、やり方はほぼ参考サイトのままなんですけどね。

ではさようなら。
またお会いしましょう。

もしよければ、LINEスタンプの方もよろしくお願いします。

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。

http://spring-fragrance.mints.ne.jp/aviutl/

2020年1月23日木曜日

[Linux Mint 19]wineを使ってAviutlをインストールする方法～AuoSetupではうまくいかなかったけど手動でインストールしたらうまくいった話～

はい、こんにちは。
@CortanMathです。

YouTubeも急成長してきていて、パソコンで動画編集している方も徐々に増えていると思ます。

では、動画編集ソフトといえば、どんなものがあるでしょうか。

有名なものだと、Adobe Premiere Proとか、 Video Studio、iMovieなどがあります。

どれも高機能な動画編集ソフトです。

ただ、いずれも価格が高かったり、iMovieはWindowsで使えなかったりなどいった点もあり、初心者が手を出しにくいのも事実です。

そんな人の味方なのが、Aviutlですよね。

プラグインや拡張機能編集によってどんどん高機能にできる、すばらしい無料の動画編集ソフトです。

ネットでは非常に有名なソフトだと思います。

で、このAviutlですが、Windows用のソフトソフトになります。

世界のパソコンの多くがWindowsが占めているので、基本的にそのまま使えると思います。

ただ、Mac OSやLinuxを使ってる人もいますよね。

僕もこないだ自作PCを組み立て、Linux Mint 19をインストールしたので、こちらではAviutlが使えないことになってしまいます。

Windows 10を買っていれば、普通に使えたんですけどね。

価格の問題と、Linuxの勉強もしたいといった理由で、Windows 10は買っていないです。

じゃあ、本当にLinuxやMacではAviutlが使えないのか。

いや、使えるんです。
wineがあれば。

wineっていう、Windowsソフトのエミュレータみたいなものがあって、それを使えば、Mac や LinuxでもWindowsソフトが使える（ものもある）らしいです。

注意しないといけないのは、wineを使えばすべてのWindowsソフトが動作するというわけではない、ということです。

Aviutlはwine上での動作が確認されていますが、他のソフトはわからないです。

動いたけど、不具合が...なんてこともあるようです。

少し前置きが長くなってしまいましたが、今回はwineを使ってLinux Mint19にwineをインストールしてみます。

他のディストリビューション、または、Macでも動くと思いますが、やり方は多少異なるかもしれないのでご了承ください。

今回はLinux Mint19でやります。

それから、「Linux wine aviutl インストール」などと検索すると、auo_setupを実行して、プラグイン出力（x264guiEx）を自動インストールする記事が見つかります。

僕も最初はこれを試したんですが、いくらやってもうまくできませんでした。

「インストールに失敗しました」とか
「○○をダウンロードできません」とか

出てくるんですよね。

バージョンを変えたりいろいろ試みましたがダメでした。

ところが、手動インストールしてみた結果、すんなり入り、動作も確認できました。

少し手順が増えますが、同じエラーが出ている方は、手動インストールを試してみてください。

ちなみに、この記事でいうのもアレなんですが、Linuxにも動画編集ソフトらしきものはあったので、そっちに挑戦してみてもいいかもしれないです。

wine本体（とwinetricks）のインストール

まずは、wineの方をインストールしていきます。

winehqのサイトから、ダウンロードして、インストールすることで、最新版のwineが手に入ります。


sudo dpkg --add-architecture i386
sudo apt-get update
sudo apt-get upgrade

wget -nc https://dl.winehq.org/wine-builds/Release.key
sudo apt-key add Release.key
sudo apt-add-repository 'deb https://dl.winehq.org/wine-builds/ubuntu/ bionic main'
sudo add-apt-repository ppa:cybermax-dexter/sdl2-backport

sudo apt-get install --install-recommends winehq-stable -y

一応wine本体のインストール自体はこれで終わりです。

wineを32bit用の環境に設定します。
これをしないと、32bitソフトであるAviutlはうまく動作しないらしいです。


WINEARCH=win32 WINEPREFIX=$HOME/wine32 winecfg
export WINEPREFIX=$HOME/wine32
export WINEARCH=win32

最後に、winetricksというパッケージをインストールしましょう。

winetricksはwineに必要なライブラリとかをダウンロード・インストールしてくれる優れものです。


sudo apt-get install winetricks

では、次のステップに進みましょう。

Aviutlが使えるようにするために

wineのインストールができたので、早速Aviutlをインストール

したいところですが、まだ、準備が必要です。

標準だとwineは文字化けしていて、wineの設定や、実際にインストールしたソフトが使いにくい状態にあります。

そこで、wineを日本語対応にしておきます。
あと、.NET Framework4.0もインストールします。


winetricks fakejapanese_ipamona
winetricks dotnet40

次に.NET Framework4.5をインストールします。
調べたところによると、さっきのdotnet40を土台にして、4.5などはインストールするのだとか。


WINEARCH=win32 WINEPREFIX=$HOME/wine32 winetricks dotnet45

最初から4.5をインストールすることもできるのかもしれませんが、やっていないのでわかりません。

Aviutlでは、.NET Framework4.5が必要なのですね。

僕が参考にした記事では、.NET Framework4.5のexeインストーラーをダウンロード&実行し、GUI形式でインストールしていました。

が、僕はそれができませんでした。

ぐるぐる待ちマークが回ったまま、いくら待ってもインストールが進まなかったんですね。

コマンドでインストールして成功したので、同じ症状の方がいれば、CUIでインストールしてみてください。

後それから、


winecfg

を実行するとwineの設定画面が立ち上がります。

Windows XPとかになっている部分をWindows 10にしておきましょう。

では、次に進みます。

Aviutl及びプラグイン出力（x264guiEx）を動作させるのに必要なものとして、以下の3つがあります。

・VC++ 2015 runtime
・.NET Framework 4.5
・QuickTime　もしくは　iTunes

.NET Framework 4.5は先ほどすでにインストールしたので、今から入れる必要はないです。

音声エンコーダ（qaac）が依存する関係で、AppleのQuickTime、もしくはiTunesのインストールが必要になります。

これをしないと、動画のエンコード時に、「音声エンコーダが見つかりません」、的なエラーが発生します。

僕は今回、QuickTimeをインストールしました。

が、QuickTime（win版）のサポートが切れてしまっているみたいで、セキュリティ上の問題からiTunesの方が良いかもしれません。

ちなみに、こういったソフト自体をインストールするのではなく、必要なライブラリだけ取り出してインストールする方法もあるみたいですが、少し手間が増えるので今回はやりません。

パソコンのドライブ容量が少ない人は、試してみてください。

下のリンクからそれぞれexeインストーラーがダウンロードできます。

ここで気を付けなければならないのは、OSが64bitであっても32bit版(x86版)をダウンロードしなければならないということです。

Aviutlが32bitのソフトで、x264guiExも32bitだからだそうです。
公式サイトにそう書いてありました。

・VC++ 2015 runtime
https://www.microsoft.com/ja-jp/download/details.aspx?id=48145

・QuickTime
https://support.apple.com/kb/DL837?locale=ja_JP

wineをすでにインストールしていますので、exeインストーラーをダブルクリックで起動して、指示に従うだけでインストールできます。

windowsとほぼ同じ感覚でインストールできるんですね。

Aviutlとx264guiExをインストール

Aviutlをwineにインストールする準備が整いました。
早速LinuxでAviutlとプラグイン出力が使えるようにしていきましょう。

そのためには、ファイルをいくつかダウンロードして、フォルダに設置...

みたいなことをやつ必要があります。

Auo_Setupでx264guiExの自動インストールができればよかったんですけれどね。

エラーがでて、できないのはなぜなのでしょうか。

Aviutl本体と拡張編集

まずは、KENくん様のサイトから、Aviutl本体と拡張編集プラグインをダウンロードしてきます。

今回僕は、Aviutl 1.10であるaviutl110というファイルをダウンロードしました。

ダウンロードできたらそれぞれ解凍し、exedit（拡張編集プラグイン）の中身を、aviutlフォルダ直下に全部移動します。

入力プラグイン「L-SMASH Works」

次に入力プラグインを導入します。

Aviutlは初期状態だと、.aviなどの限られたファイルしか読み込むことができません。

ですので、mp4やmp3、他いろいろなファイルを読み込めるようにするために、「L-SMASH Works」というプラグインを導入します。

最初に、aviutl110フォルダ内に、「Plugins」というフォルダを作っておきましょう。

https://pop.4-bit.jp/?page_id=7929

上のリンクから、ダウンロードできます。

ダウントード後は解凍し、「lwcolor.auc」「lwdumper.auf」「lwinput.aui」「lwmuxer.auf」という4つのファイルを、先ほどつくった「Plugins」フォルダに移動させます。

あと必須ではないですが、僕は「カスタムフレア・プリセット」や「スクリプト」も入れておきました。

さらに高度な編集ができるようなプラグインをwindowsの方でいままで使ってましたので、そのフォルダーをコピーしてきました。

出力プラグイン「x264guiEx」

最後に出力プラグイン（x264guiEx）の導入を行います。

手動で行いますので、ダウンロードするファイルも今までより少し多めです。

https://rigaya34589.blog.fc2.com/

こちらのサイトから、x264guiEx本体をダウンロードしてきます。

ダウンロードするバージョンですが、作者様によると「x264guiEx_2.04」あたりが良いようです。

最新版でも動くのかは、試していないので良くわかりません。

解凍しましたら、auoフォルダ内にある「x264guiEx.auo」、「x264guiEx.ini」、「x264guiEx_stgフォルダ」の3つをaviutl110のPluginsフォルダに移動してください。

残ったファイルは必要ないです。

次に、以下の3つをダウンロードします。

・x264
https://drive.google.com/drive/folders/0BzA4dIFteM2db1VJclc2S0VtQlU

・qaac
https://sites.google.com/site/qaacpage/cabinet

・L-SMASH
https://onedrive.live.com/?id=6BDD4375AC8933C6%21404&cid=6BDD4375AC8933C6

qaacに関しては、ページの下の方にあるqaac 〇〇.zipの数字が新しい最新版を選んでください。

これらを展開したら、中にあるexeファイルをすべて、aviutl110フォルダ内に移動します。

注意点としては、たとえosが64bitであっても、qaacは32bit版（x86）を使用してください。

僕は最初64bit版をコピーし、エラーがでて動きませんでした。

一応導入は終わりました。

今まで準備してきたaviutl110のフォルダを丸ごと、「$HOME/wine32/drive_c/Program Files/」の中に移動しておきましょう。

wineでの32bit環境用フォルダです。

ここで、ターミナルに


cd $HOME/wine32/drive_c/"Program Files"/aviutl110
wine aviutl

と打てば、aviutlが起動します。

Aviutl及びx264guiExの設定

Aviutlを無事、起動させることができました。

動画編集自体は、もうできると思います。

ですが、まだ、x264guiExの設定が終わっておらず、MP4の出力はできない状態です。

ということで、その設定を行っていきます。

まずは、x264guiExがAviutlに認識されていることを確認しましょう。

「その他」＞「出力プラグイン情報」というところを開いてみましょう。

どうですか。
x264guiEx.auoが表示され、認識されていれば成功です。

されていない場合は、インストールの作業をもう一度見直してみてください。

次に、エンコード設定画面を開きます。

設定画面は、「ファイル」＞「プラグイン出力」のところから開けますが、何らかのAviutlプロジェクトを立ち上げていないと、選択できないと思います。

設定画面はこんな感じ。

緑で囲った部分を設定してください。

先ほどダウンロードし、設置したファイルを選ぶだけです。

画面に書いてある通り、それぞれ適切なものを選んでください。

これで、x264guiExの設定は終わりです。

Aviutl本体の設定に関しては、ほんの少しこの記事に書いてありますので、よろしければご覧ください。

https://naburacortan.blogspot.com/2019/11/aviutl-ver110.html

メモリの設定とメインウィンドウで再生する設定についてしか載せてませんが。

ようやくこれで、LinuxでもAviutlが使用できるようになりました。

さっきみたいにコマンドで起動することもできますし、本体のexeダブルクリックで起動することもできます。

お疲れ様でした。

wineのテーマ変更（おまけ）

Aviutlはもう使えるようになりましたから、別にこれはやらなくても大丈夫です。

ただせっかくなので、wineのテーマを変更してみよう、というコーナーです。

初期状態はこんなかんじです。

では、好きなテーマをダウンロードします。

今回僕はこちらのテーマを選びました。
（参考文献と同じものを選びました。）

https://www.deviantart.com/icube001/art/Cadoo-Visual-Style-1-0-17229878

では、wineの設定画面を開きます。
（winecfgと打てば出てきます。）

テーマのインストールで、先ほどダウンロードしたファイルを選択すれば完了です。
適用しておいてください。

するとこうなります。

少し明るい感じになりました。

以上です。

少し大変だったかもしれませんが、これでLinux & Aviutlライフがおくれます。

ではさようなら。
またお会いしましょう。

もしよければ、LINEスタンプの方もよろしくお願いします。

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。

参考文献：
https://bigmoro.cocolog-nifty.com/blog/2018/09/linux-mint-19wi.html
https://rigaya34589.blog.fc2.com/blog-entry-435.html
https://musaprg.hatenablog.com/entry/2017/07/04/231711
https://rigaya34589.blog.fc2.com/blog-entry-371.html
http://zakki.phpapps.jp/software03

2020年1月10日金曜日

[Enchant.js]Granim.jsを利用してマ〇オの無敵状態（スターの状態）みたいな虹色グラデーションをつくる

はい、こんにちは。
@CortanMathです。

少し遅れましたが、あけましておめでとうございます。

僕は今年（去年？）年賀状代わりにこんなものを作りました。
Enchant.jsを使用した横スクロールゲームになっています。

一応こちらにリンク張っておきます。

http://kumakuma.life.coocan.jp/ShiraoAkeome/

上のはバージョン1になります。

で、こっちがバージョン2。

http://kumakuma.life.coocan.jp/ShiraoAkeome2/

何が違うがおわかりいただけたでしょうか。

答えは無敵状態機能です。

以前のバージョンでは、1倍速⇒2倍速⇒8倍速という感じにスクロールスピードを上げ、難易度を高めていたのですが、さすがに8倍速は無理がありました。

ということで、いのししを5回倒すと永遠に無敵状態に入るようなアップデートを行いました。
（ゲームとしての仕様に問題があることに関してはアップデートされませんでした。）

実際に完成したものがこんな感じになっています。
無敵状態は動画の後半の方です。

でこれをつくるにあたって課題となったのが、マ〇オの無敵状態みたいにキラキラ光らせる処理です。

無敵状態なったとき敵に当たったらその敵を倒すという処理は、フラグの変数を使用すれば割と簡単に実現できます。

ただ、この無敵状態を表すため、プレイヤーを虹色にするという処理に悩みました。

いろいろ調べた結果、Granim.jsというライブラリを使用することに決めました。

Granim.jsについて

今回使用するGranim.jsというのは、いろいろな色のグラデーションをアニメーションさせることのできるJavaScriptライブラリです。

公式サイトにデモやソースコードが載っているので、そちらを見た方が理解がはやいと思います。

公式サイト：
https://sarcadass.github.io/granim.js/index.html

デモページ：
https://sarcadass.github.io/granim.js/examples.html

見てるだけでも、結構面白いです。

使い方は簡単で、以下のページからGranim.js本体をダウンロードし、HTMLファイルから読み込むだけです。

https://github.com/sarcadass/granim.js/releases

解凍したうちの「dist」フォルダ内に「granim.js」「granim.min.js」があると思います。

どちらか一方（どちらでもよい。minは圧縮されたファイルになっていて少し容量が少ない。）をコピーして使う感じですね。

公式サイトにサンプルコードがいろいろ載っているので、迷うことはあまりないと思います。

現在（この記事執筆時）の最新バージョンはv2.0.0です。

実際に無敵状態にする

では実際にやってみましょう。

まずは、Enchant.jsとGranim.jsをHTMLから読み込みます。

<script type="text/javascript" src="./js/lib/enchant.min.js"></script>
<script type="text/javascript" src="./js/lib/granim.min.js"></script>

今回はどちらも、minとなっている方（軽量化タイプ）を選びました。

ファイルのパスは各自のフォルダ構造に合わせて設定してください。

次にJavaScriptの方を書いていきます。

Enchant.jsを使用しますので、詳しい全体のコードの書き方などは、Enchant.jsのサイトを参考にしてください。

今回は無敵処理部分のみ載せておきます。

ちょっと長いです。

    //無敵状態画像
    var player_surface = new Surface(360, 180);

    var tmpCanvas = document.createElement('canvas');
    tmpCanvas.width = 360;
    tmpCanvas.height = 180;

    document.body.appendChild(tmpCanvas);
    tmpCanvas.style.visibility = 'hidden';

    var granimInstance = new Granim({
        element: tmpCanvas,
        direction: 'left-right',
        opacity: [1, 1],
        states: {
            "default-state": {
                gradients: [
                    ['#EB3349', '#F45C43'],
                    ['#FF8008', '#FFC837'],
                    ['#4CB8C4', '#3CD3AD'],
                    ['#24C6DC', '#514A9D'],
                    ['#FF512F', '#DD2476'],
                    ['#DA22FF', '#9733EE']
                ],
                transitionSpeed: 100
            }
        }
    });

    var mask = new Image();
    mask.src = './img/player.png';

    var invincibleDraw = function () {
        player_surface.context.globalCompositeOperation = 'source-over';
        player_surface.context.drawImage(tmpCanvas, 0, 0);
        player_surface.context.globalCompositeOperation = 'destination-in';
        player_surface.context.drawImage(mask, 0, 0);
    };

    mask.onload = function () {
        invincibleDraw();
    };


    var player = new Sprite(120, 180);
    player.image = game.assets['./img/player.png'];
    player.y = 120;
    main.addChild(player);

まず前提として、プレイヤーの画像はこんな感じになっていて、アニメーション用に3パターンがあります。
これらは、360×180の1つの画像にまとまっていまして、一つのパターンあたり120×180のサイズになっています。

上に乗せたコードは、メインシーン読み込み時に一度だけ実行されるものです。

player_surfaceというのは、無敵状態の画像を入れておく Surface(Canvasをラップしたもの)です。

大まかな流れとしては、

player_surfaceに無敵用のキラキラ画像を生成しておく。
⇓
通常時はplayerのスプライトの画像として、直接元の画像ファイルを指定しておく。
⇓
無敵状態に入った場合、playerのスプライトの画像を、player_surfaceに切り替える。

という感じですね。

スプライト自体は、120×180にし、サーフェイスの方はアニメーションの切り替えのため360×180にしてあります。

また、フレームの切り替えは、ここには載せていませんが、onenterframeの部分に書いてあります。

で、ここからが今回の本題となります。

どうやって、虹色画像を生成するかです。

Granim.jsではキャンバスを指定し、そこに虹色のグラデーションを生成することができます。

ということで今回は、360×180の一時的なキャンバスを生成し、bodyに追加後（追加しないと正しく動作しませんでした。）、非表示にしています。

あくまで、プレイヤーの全体の画像と同じサイズの虹色グラデーションを作り、画面上では見えないようにしているだけです。

ちなみに、このグラデーションは勝手にアニメーションされます。

granimInstanceというのが、実際にグラデーションを生成している部分ですね。

elementに描画するキャンバスを指定しています。

本来はCSSセレクタで指定するようです。
なので、一時的なキャンバスにidを設定し、element部分に「#id名」と指定してみましたが、うまく動きませんでした。

なぜか、キャンバスの変数を指定したら動きました。

Granim.jsの詳しい使い方は、公式サイトのAPIのところを見てください。

次に進みます。

先ほど作った虹色グラデーション画像を元のプレイヤー画像でマスクし、player_surfaceに描画します。

要するに、虹色グラデーション画像のうち、キャラ画像の形の部分だけが残る画像が生成されるわけです。

ただ、これだけだと、グラデーションがアニメーションされないので、invincibleDraw関数は毎フレーム事に呼び出します。

後は、無敵状態を表すフラグを変数で用意しておき、無敵の条件が揃ったらそれをtrueにする。

それをもとに、スプライトの画像をplayer_surfaceに切り替えたり、敵を倒す処理を書いたりすればよいわけです。

Granim.jsは別に無敵処理とかじゃなくても面白く使えると思うので、ぜひ試してみてください。

ではさようなら。
またお会いしましょう。

もしよければ、LINEスタンプの方もよろしくお願いします。

白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。