ナブラ・コルタンの研究所

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

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

貯蔵室からの脱出～脱出ゲーム～攻略方法

2020-03-01T00:34:00.001+09:00

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

この記事は、以前僕がUnityで制作して脱出ゲーム「貯蔵室からの脱出」の攻略方法になります。

ネタバレとなりますので、ご注意ください。

ちなみに、こちらのURLから遊べます。
よろしければどうぞ。

[unityroom版]
https://unityroom.com/games/escape_from_storageroom

一応、unityroomではなく、普通のサーバーに載せてあるものもあります。

2か所にアップロードしたのには、特に深い理由はないです。

unityroom版の場合、画面サイズが大きすぎてはみ出るかもしれません。
その時は、ブラウザの方から、ページの縮小を行ってください。

WebGL技術を使用しているため、スマホやタブレットではおそらく動きません。
PCで開くようにしてください。

では、解説の方を始めます。

の前に、もしよければ、LINEスタンプの方もよろしくお願いします。
このゲームに登場する白男君です。

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

攻略方法

OPが終わってゲームがスタートすると、まずこの正面の部屋が現れます。

以降、この部屋を「正面の部屋」、ここから右にある部屋を「右の部屋」、左にある部屋を「左の部屋」、真反対にある部屋を「後ろの部屋」と表すことにします。

正面の部屋でピラミッドをクリックし、色の順番を確認します。

幅の太い底から、幅の細い頂点にかけて、「黄→赤→黄→緑→赤→赤→緑→赤→黄→赤」となっています。

これを確認したら、右の部屋に移動します。

左奥にある木の箱をクリックして拡大します。

先ほどピラミッドで確認した通りの色を入力します。

赤（Red）→ R
緑（Green）→ G
黄（Yellow）→ Y

向きは、左から右にかけて印が細くなっているので、「Y→R→Y→G→R→R→G→R→Y→R」となります。

そうすると、ロックされていた木の箱が開きます。

中に入っているスパナを手に入れます。

では、正面の部屋に戻ります。
そこでやかんをクリックして拡大してください。

クリックすると、やかんが上に移動して、下の紙に「AK」と書いてあるのが見えます。

次に左の部屋へ移動します。

ここで赤いドーナッツ型の物体をクリックして拡大します。

「上ー下」と書いてあるのを確認します。

そうしましたら、右の部屋に移動して、机をクリック。

右の引き出しをクリックすると、次のような入力画面に移動します。

先ほど、やかん（YAKAN）の下にAKという文字がありました。

上ー下をして、「YAN」が残りますので、これを入力します。

マイナスドライバーを手に入れてください。

ついでに左側の引き出しを開き、取っ手を手に入れておいてください。

正面の部屋に戻り、椅子をクリックします。

★印が書いてあることを確認します。

次に、各部屋に１～７の数字のいずれかが書いてあることを確認してください。

先ほど開いた机の右引き出しに移動します。

これは、この小屋の見取り図になります。
OPでもありましたが、この小屋はちょっと変わった形（クロス）をしています。

★の書いてある四角形が、椅子のある部屋、つまり正面の部屋を表しています。

右下の三角形にも注目しておいてください。

これらを確認した上で、左の部屋に移動し、右下にある箱を拡大してください。

この箱の右下に三角形がありますよね。

これと、見取り図の三角形が合わさるような状態を考えます。

部屋に書いてある番号、見取り図を考慮した上で、次のような順番にボタンを押します。

「左→右→上→左→下→上→下」

すると、この箱が開きます。

中に入っているハンカチを手に入れてください。

それでは、2つの絵を確認しに行きます。

一つ目は、左の部屋の右端にある絵です。

最初は、古めの飾ってあります。

ここでハンカチを使い、表面を磨きます。

すると表面が剥がれて、水滴の付いたトマトの写真に変わります。

2つ目は、右の部屋の左端に飾ってある絵です。

これも同様にハンカチで磨くと、表面が剥がれて別の絵が出てきます。

正面の部屋にある絵も見ておきます。
こちらは、ハンカチでこする必要はありません。

雪の絵です。

では、後ろの部屋に移動し、シャッターが閉まっていることを確認してください。

右の部屋に移動します。

右の方にこのような装置があります。

先ほど確認した3枚の絵を参考に、

・雪の絵（男が2人）→ 2
・雨の絵（トマトが7つ）→ 7
・晴れの絵（猿が5つ）→ 5

「527」と入力します。

すると、ロックが解除されます。

後ろの部屋へ移動してみましょう。

シャッターが開いています。

クッションの後ろにあるハンマーを手に入れます。

正面の部屋にある骸骨のところへ移動しましょう。

目のところに、ガラスの玉が挟まっています。

ハンマーで割りましょう。

すると、中に紙が入っているのが確認できます。

この何も書いていない紙を手に入れておきます。

ここで、後ろの部屋に戻ります。

棚を拡大してください。

棚の左側面をクリックします。

すると次のような画面になるので、左下の鍵を手に入れてください。

左の部屋へ移動します。

少し奥行きのある壁があるので、そこを拡大します。

最初の状態ではロックされていて、何も反応しません。

先ほど拾った鍵でロックを解除します。

すると、スイッチが入れられるようになり、ランプが点灯します。

ここに、白紙をセットします。

この図形の順番をよく確認しておきます。

それから、後ろの部屋の棚も見ておいてください。

そうしましたら、左の部屋の下の方にある入力装置を拡大します。

上で確認したヒントを元に、「右→左→左→右→左→右」と押します。

すると窓が開き、鍵が中にあることが確認できます。

前に手に入れたドライバーを用いてネジを外し、鍵を手に入れます。

正面のドアのところへ移動してください。

今、手に入れた鍵を使って、中に入ります。

するとこのような小さい倉庫にたどり着きます。

では、いったん右の部屋に移動します。

そこにこのようなポスターが貼ってあるので、拡大します。

「Clock(時計)」×「Vase(花瓶)」と書いてあるのを確認します。

後ろの部屋へ移動し、時計を拡大します。

9時5分（9:05）であることを確認します。

4つの部屋を見渡し、花瓶の数を数えます。
計3つあるはずです。

そうしましたら、あの小さい倉庫へ戻ります。

ディスプレイをクリックします。

ここに、時計×花瓶（905 × 3）=2715 を入力します。

そうしますと、ディスプレイの電源が入ります。

ここで、左上にある「●」の位置と、「Z N L」という文字を覚えておいてください。

そうしましたら、左の部屋に移動し、大きな絵を拡大します。

左上に丸印があることを確認してください。

ここで、先ほどありました「Z N L」という文字を書くように、額縁の4隅をクリックしていきます。

「左上→右上→左下→右下→左下→左上→右下→右上→左上→→左下→右下」

そうしますと、絵が移動して、後ろに隠れていたアルファベットが見えるようになります。

後ろの部屋へ移動します。
棚を拡大し、その側面を表示します。

装置にハンドルを取り付けてください。

このスイッチをオンにした状態で戻ろうとすると、シャッターの裏面を見ることができます。

右下を出発し、左下につくまでのルートをよく覚えておいてください。

正面の部屋にある棚を確認します。

4か所に物が置いてあります。
物の種類は関係ありません。

その4つの位置を覚えていてください。

小さい倉庫に入り、危険な箱を拡大します。

アルファベットの壁と正面の棚を重ね合わせると、「A」「N」「R」「O」という文字が残ります。

これをシャッターの裏側の矢印の順番に読むと「O R N A」となりますので、これを入力します。

すると箱が開いて、爆弾を手に入れられます。

この部屋の右上にある浮き輪をクリックします。

最初に手に入れたスパナで固定具を外し、浮き輪を身に着けてください。

浮き輪がなくても、エンディングにはたどり着けます。
ただその場合、バッドエンドとなります。

クリアしたい場合は、浮き輪を外し、身に着けておいてください。

右の部屋へ移動します。

そこで、真ん中にある大きな石を拡大します。

この石に爆弾をセットしましょう。

すると、爆発して石が砕けます。

石の中から出てきた木の棒を手に入れてください。

そうしましたら、正面の部屋に移動し、天井にあるフックを拡大してください。

先ほど手に入れた木の棒をこのフックに引っ掛け、引っ張ります。

するとパイプから水が出てきて、

部屋に水が溜まります。

（浮き輪をしている場合は）天井まで浮き、煙突から脱出することができます。

クリアです。
おめでとうございます。

お疲れさまでした。

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

[Unity]WebGL で出力する際の注意点～テキストが表示されない、画面サイズが合わないなど～

[Unity]ゲームを作ったらunityroomで公開してみよう　～WebGLで手軽にブラウザで～

2020-02-24T21:21:00.001+09:00

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

今回は、「unityroom」について書きたいと思います。

「unityroom」って何かといいますと、UnityでWebGL向けに書き出したゲームを公開できるサービスになります。

通常、Unityで作成したゲームを公開しようと思ったら、Apple StoreやGoogle Playに申請したり、自分のサイトとかでexeを配布したり、サーバーを契約してWebGL出力のものをアップデートしたり、

などといった手段があります。

しかし、いずれもお金がかかったり、手間がかかったりして大変です。

そこで、便利なのがこの「unityroom」です。

Twitterアカウントさえあれば簡単に登録でき、無料でゲームを公開することができます。

それに加えて、ゲームの評価機能、コメント機能などもあったりして、プレイヤーやほかのクリエイターと交流できる点も魅力的ですね。

Twitterアカウント自体簡単に取得できますから、いまTwitterアカウントを持っていない方でも手軽に始められます。

では、やってみましょう。

簡単に大まかな流れを書いておきます。

とはいっても、登録後は画面の設定項目に従うだけなので、あまり詳しくは書きません。

unityroomを使ってみる

まずは、unityroomに登録します。

こちらがそのサイトです。

https://unityroom.com/

登録ボタンを開くと、こんな感じの画面になると思います。

そうしたらTwitterでログインをクリックします。

アプリ認証しておいてください。

するとプロフィールの設定画面になります。

基本的には、Twitterに登録してあるプロフィールが表示されます。

変更したい部分は、ここで変更しておいてください。

プロフィールの登録が終わったら、早速ゲームを登録していきます。

あらかじめUnityの方から、WebGLで出力しておいてください。

出力方法ではないですけど、出力時の注意点についてはこちらに書きましたので、よければご覧ください。

ゲームを登録するというボタンをクリックすると、このような画面が開きます。

タイトルや紹介文などを入力してください。

ゲームidというのは、そのゲームのURLに使われます。

設定が終わったら、その都度保存しておきましょう。

ゲームのアイコン画像などを設定します。

あとは左下にある、各設定項目を設定していってください。
画面の通りにやればすぐ終わると思います。

いろいろ設定がありますけど、基本設定と、WebGL設定、WebGLアップロードをやっておけば基本大丈夫です。

一通り終わったら、下の方にある公開設定から、自分の好きなものを選んでください。

多くの人に見てもらいたければ、一般公開にしておきましょう。

以上です。

おそらく簡単にゲームの公開ができたと思います。

自分がゲームをアップロードするだけでなく、他人のゲームをプレイするのも面白いですし、参考にもなると思いますので、積極的に使っていきましょう。

ちなみに僕が最初に作った作品は下の脱出ゲームになります。

https://unityroom.com/games/escape_from_storageroom

ということでこの記事を終わります。

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

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

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

https://github.com/ButTaiwan/genryu-font

[Unity]WebGLで出力する際の注意点～テキストが表示されない、画面サイズが合わないなど～

2020-02-24T11:09:00.001+09:00

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

この間、UnityでWebGL出力しようと思って、いくつかつまずいた点があったのでここに記録しておきます。

同じ症状で悩んでいる方のお役に立てれば、幸いです。

具体的に困った点は主に2つあります。

まず、「Unity上では動作していたのに、WebGLに持って行った際、日本語のテキストが表示されなかった」ということ。

そして、もう一つは、「WebGLとしてブラウザで動かしたとき、画面サイズの調節がうまくいかなかった」ということ。

画面のUIが崩れたり、あるいは、画面サイズが大きすぎて、スクロールしないと見れない状態に陥ったりしていました。

では、実際にそれぞれの解決策を見ていきましょう。

WebGLで日本語フォントが表示されない

まずは、テキストが表示されないという問題です。

Unityでは、テキストボックスを作成した際、標準で「Arial」というフォントを使用しています。

エディタ上で動かしている分にはこれで問題なく動くのですが、WebGLに書き出すと日本語が表示されなくなってしまいます。

これを防ぐためには、日本語対応のフォントを使うようにしましょう。

調べると無料のフォントもたくさんあります。

僕はこの「源流明朝」という無料のフォントを使用させていただきました。

ただ、著作権には気をつけてください。

2次作品に使用した場合、配布物に同梱してはいけないフォントなどもあります。

「配布可能か」、「商用利用はできるのか」、などのライセンスは良く確認しておいてください。

ちなみに先ほど僕が紹介したフォントは、「フォントを使用した制作物を有償・無償を問わず自由に公開・配布」可能と書いてありました。

フォントが用意できたら、テキストボックスのフォントを変更します。

非常に簡単です。

TextコンポーネントのFontというところに、ダウントードしたttfファイルを設定してやるだけです。

フォントの変更はいつでもできますが、早めに済ませておいた方が良いでしょう。

同じフォントサイズに設定していても、フォントの種類によって微妙に大きさが異なったりします。

場合によっては、フォントを変えたことにより、後から微調整が必要になることもあります。
（実際、僕がそうでした。）

画面サイズがうまく合わない

続きまして、画面サイズの問題です。

最初にも書きましたが、WebGLで出力すると（WebGLに限った話ではないかもしれませんが）画面のUIが崩れたり、あるいは、画面サイズが大きすぎて、スクロールしないと見れないことがあります。

それぞれ解決していきましょう。

まず、uGUIの方です。

Canvasを選択し、「Canvas Scaler」という項目を見てください。

UI Scale Modeを「Scale With Screen Size」というのにしてください。

これにより、UIはスクリーンサイズに合わせてレイアウトを維持してくれます。

そして、その下の部分で、基本となる画面の解像度を設定してきましょう。
僕は、Unityにおける「Srandalone」のサイズにしています。

この部分をしっかり設定しないと、画面全体が表示されず、一部だけ拡大されて表示されるということが起こる可能性があります。

Screen Match Modeは「Expand」にしました。

これで、UIのレイアウトが崩れたり、画面の一部だけが表示される、なんてことは起こらなくなると思います。

そうしたら次に、ブラウザのサイズにゲーム画面サイズを合わせるということをやっていきましょう。

こちらも簡単です。
ある無料アセットを導入し、ビルド時のテンプレートにそれを選択すればいいのです。

まず、Asset Store で、「responsive」と検索しましょう。

そうしましたら、この「Responsive WebGL Template」というのをダウンロード、インポートし、プロジェクトに導入してください。

ビルドセッティングから「Player Settings」を開きます。

WebGLテンプレートで、先ほどインポートした「Responsive」を選択します。

これで、一通りの設定が終わりました。

後は、WebGLで出力するだけです。

ブラウザのサイズを変更すると、縦横比を保ったまま、ゲーム画面のサイズも変わります。

お疲れさまでした。

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

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

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

[Unity]2DのUIにおいてRect Transformをスクリプトで操作して回転する方法

2020-02-23T19:01:00.002+09:00

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

今回は、UnityでuGUIのオブジェクトに付与されている「Rect Transform」を操作し、オブジェクトを回転させてみたいと思います。

一般的にUnityのオブジェクト（3Dモデルなど）には、Transformコンポーネントが追加されていて、これをスクリプトからいじることで、移動、回転、拡大縮小などの動きを実現できます。

一方、UIから追加できるオブジェクト（Canvasに乗せるオブジェクト）には、「Transform」ではなく、「Rect Transform」がついています。

おそらくこれは、UI系の座標はTransformの座標と区別する必要があるからなんでしょうね。
詳しいことはわかりませんが。

しかし、この「Rect Transform」というのがかなり複雑で厄介です。

アンカーだの、ピボットだの、いろいろ概念があって、僕もまだよく理解しきれていません。

でも、とりあえず、このオブジェクトたちを回転させることに成功したので、ここに書いておきます。

Rect Transform の移動

回転について書くといいましたが、まずは、少し移動についてみてみましょう。

あくまで、僕のメモ代わりなので、読み飛ばしていただいて構いません。

Rect Transformの付いたオブジェクトは次のように移動できます。

[SerializeField] GameObject obj;

private void moveObj(){

 Vector3 pos = obj.GetComponent<RectTransform>().anchoredPosition;
 pos.x += 550.0f;
 pos.y += 100.0f;
 obj.GetComponent<RectTransform>().anchoredPosition = pos;

}

まず、objを取得したあと、RectTransformコンポーネントからanchoredPositionを変数に代入します。

そこに、x方向、y方向にそれぞれ指定した移動量を足し引きし、最後、オブジェクトの位置座標に戻してやります。

少し回りくどいですね。

しかし、あるオブジェクトを現在の位置から相対的に動かしたい場合、こうしないといけないみたいです。
（もっと簡単な方法があるのかもしれませんが、いくら調べてもRect Transformに関する情報が少ない）

一方、ある絶対的な座標に移動させたい場合は、直接その座標を代入すればよいので、簡潔に済みます。

では、本題の回転に入ります。

Rect Transform の回転

Rect Transformに回転は、次のようになります。


[SerializeField] GameObject obj;

private void moveObj(){

 obj.GetComponent<RectTransform>().Rotate(0, 0, 7.0f);

}

たしか、これで左回転ができます。

これも、相対的な回転量、つまり、現在の状態からどれくらい回転させるかを指定できます。

とりあえず以上になります。

Rect Transformに関しては、まだ情報が少なく、少し苦労しました。

メモ的な記事でしたけど、お役に立てれば光栄です。

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

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

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

https://www.synthesiagame.com/download

Synthesiaバージョン9で自前のMIDIファイルを再生する～ポータブル版で手軽に試せる～

2020-01-28T19:59:00.000+09:00

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

YouTubeでピアノの自動演奏動画とかを調べると、必ずと言っていいほど出てくるこのソフトご存知ですか。

おそらく誰もが、一度は見たことがあると思います。

Synthesiaというソフトです。

無料版と有料版があり、無料版は機能が制限されています。

このソフトで何かできるかといいますと、

・内蔵の曲や自分で用意したMIDIファイルを再生する
・流れてくるバーに合わせて自分で演奏して楽しむ

みたいな感じです。

以前のバージョンでは、無料版でもMIDIファイル全体を再生できました。

が、現在のバージョン（ver.10以降）では、無料版だと途中でロックがかかってしまうようになっています。

そんなに高くないので有料版を購入すればいいのですが、ちょっとだけ試してみたい人には手が出しにくい状態になってしまっています。

でも大丈夫。
公式サイトではver.10だけでなく、ちょっと前のバージョン（ver.9）もダウンロードできます。

こちらのバージョンではロックがかからず、自分で作ったMIDIをフルで再生できます。

公式サイトからダウントードするわけですので、違法性はないですね。

これで試して気に入ったら、最新バージョン10を購入すればいいと思います。
おそらく新しい機能とかもあるのでしょう。
（調べてないので何がアップデートされたか知りません。すみません。）

Synthesiaのダウンロード

こちらの公式サイトからダウントードできます。

Older Versions というところをクリックして展開するとこんな感じで出てきます。

Synthesia 9をダウントードしましょう。

Windows XPと書いてありますが、Windows10でも動きました。

zipファイルでダウンロードされますので、展開するだけで使えるようになります。

インストール不要です。

起動するとこんな感じです。

音が出るように設定

初期の状態だと、MIDIを再生しても、おそらく音が出ません。

ですので、音が出るように設定しましょう。

「Settings」をクリックします。

Music Outputという項目があると思います。

これをonにして有効にすれば大丈夫です。

僕の場合、ここに音源が2つ出ていますが、これは「SGM-V2.01」というサウンドフォントが使えるように設定しているからです。

特に何もインストールしていない人は、MSGSだけが表示されていると思います。
ですので、これを有効にすればOKです。

で注意点なんですが、僕のように複数の音源が入っている場合、すべて有効にすると音がダブって聞こえてしまいます。

同時に鳴ればいいのですが、どうしてもずれて聞こえるので、音が遅延しているような感じになります。
どれか一つだけ選択しましょう。

せっかくリアルな音源が入っているのであれば、MSGSではなくそちらを選ぶべきしょうけどね。

これで最低限の設定が終わりました。

後はMIDIファイルを再生するだけです。

とはいっても簡単です。

再生したいMIDIファイルを、Synthesia本体のexeにドラッグアンドドロップするだけです。

操作しやすいように、デスクトップにSynthesiaのショートカットを作っておきました。

それで出てきた画面で、「Continue」を選べば、自動で再生されます。
簡単ですね。

自分で打ち込んだMIDIをYouTube用の動画にしたいときなどに役立つと思います。

それ以外でも、演奏して楽しむみたいな使い方もできるので、試してみてください。

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

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

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

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

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

2020-01-26T11:36:00.001+09:00

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上で完成です。

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

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

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

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

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

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

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

2020-01-23T23:51:00.000+09:00

はい、こんにちは。
@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

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

2020-01-10T22:58:00.001+09:00

はい、こんにちは。
@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スタンプの方もよろしくお願いします。

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

https://3d-wolf.com/products/snow.html

[Blender2.81]手軽にリアルな雪を生成できる無料アドオン「Real Snow」のご紹介

2019-12-27T22:31:00.001+09:00

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

今年もクリスマスが終わり、ますます気温の冷え込む真冬に突入しようとしています。

皆さんは、いかがお過ごしでしょうか。

僕は特にクリスマスに予定があったわけでもなく、家に引きこもり、Blenderとかで遊んでいました。

ということで今回は、こんな冬にピッタリなBlenderの無料アドオンをご紹介しようと思います。

その名は「Real Snow」というもので、少しパラメーター変更とボタン一つでとても簡単にリアルな雪が生成できます。
指定したオブジェクトに積もらせる感じで、生成できます。

YouTubeの方にも動画上げましたので良ければご覧ください。
（この記事を同じ内容ですが）

では早速やっていきましょう。

アドオン「Real Snow」のダウンロードと追加

まず、こちらのサイトから「Real Snow」本体をダウンロードしましょう。
zip形式でダウンロードできると思います。

そうしましたら、Blenderの方に追加していきます。

「Edit」>「Preferences...」を開きます。

「Add-ons」から、「Install...」をクリック。

そして、先ほどダウンロードしたzipファイルを選択してください。

こんな画面が出ていると思うので、「Mesh:Real Snow」にチェックを入れ、設定を保存してから閉じてください。

なんかエラーでた

インストールも終わったので早速使ってみようと思ったら、こんなエラーが出ました。

AttributeError: 'SubsurfModifier' object has no attribute 'quality'

'SubsurfModifier'モディファイヤに属性'quality'がありません。

エラーの意味が分かっても具体的な解決策がよくわからない...

で、なんとなくBlender2.8からBlender2.81にアップデートしてみたら見事解決しました。

物は試しですね。
Blender2.80では、Real Snowが使えないみたいです。

実際に使ってみる

ではあらためて、実際に使ってみましょう。

と言っても簡単。
雪を積もらせたいオブジェクトを選択して、プロパティパネルの「Real Snow」というタブから雪を設定してやるだけです。

雪が覆う率と、厚さを入力して、ボタンを押します。

パソコンによっては（また、指定したオブジェクトによっては）少し時間がかかると思います。

では、僕が実際に作ったものをご覧ください。

まずは、これ。
Planeを細分化し、スカルプトモードで凹凸を付けたものに雪を積もらせました。

メッシュが大きいので、少し重かったです。

次にBlenderお馴染みの猿を配置したものです。

そして、これはブログのトップにもあるやつですね。
白男君を2体、自由な感じに配置しました。

それで、最後にイノシシです。

面白いので、ぜひ使ってみてください。

これで以上になります。

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

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

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

Enchant.js製のスマホ向けアプリを横向き（縦）回転の表示に強制させる方法！また、画面を中央に表示する

2019-12-25T00:12:00.001+09:00

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

今回は、JavaScript製の軽量ゲームエンジン「Enchant.js」についての記事になります。

別にEnchant.jsを使用しない場合においても応用できると思います。

で、内容は、「JavaScriptでスマホ向けアプリを作成した際、画面の向きを固定する」「画面を中央に表示する」といったものになります。

Enchant.js製のスマホ向けゲームで、画面横向き（または縦向き）のみでプレイしてほしい場合などがあると思います。
ただ、標準のままだとスマホの傾きにより画面が回転し、ゲーム画面サイズが小さくなってしまったりしますよね。

ということで、「画面の向きを判断し、もし目的の向きでなかった場合、その向きに端末を回転させるよう促す」ということを今回やりたいと思います。

最初のころは、何があっても強制的に画面を横向き（縦向き）に表示したいと考えていました。

「画面の向きを判定」　⇒　「もし目的の向きでなかった場合、ゲーム画面を無理やり90度回転させ、調節する」

という予定でしたが、スプライトとかの回転はできても画面自体の回転は良くわからなかったのと、画面横向きでプレイさせたい際に、縦にもった状態で横向き表示する必要はないので、ただ警告を出すだけにしました。

また、それに加えて、Enchant.jsのゲーム画面を中央に表示するようにしたいと思います。
これをしないとゲーム画面は常に左上につめられて表示されるため、縦横比の異なるスマホとかでは、左右の余白のバランスがおかしなことになってしまいます。

スマホによって余白ができてしまうのはどうしようもないので、せめて、全体のバランスが良くなるようにしたいと思います。

では、やっていきましょう。

Enchant.jsでゲーム画面を横向き（縦向き）に

これを行うためにも、まず、スマホの向きが「今、縦なのか横なのか」を判断する必要があります。

書き方はいろいろあるのですが、今回はその中でもシンプルな書き方をします。

if (window.innerHeight > window.innerWidth) {
            //縦向きだった場合
        }

こんな感じです。

画面の幅と高さを出して、その長さの比較をするという簡単なやり方です。

で、この縦向きだった場合に、「端末を横向きにしてください。」みたいなメッセージを出せばよいわけです。

実際にメッセージ表示を実装するとこうなります。
gameオブジェクトがロードされたところに書きます。

var alert = new Scene();
alert.backgroundColor = 'black';

var message = new Label('端末を<br><br>横向きにして<br><br>持ってください。');
message.color = 'white';
message.font = '50px "Arial"';
message.textAlign = 'center';
message.x = (game.width - message._boundWidth) / 2;

alert.addChild(message);

if (window.innerHeight > window.innerWidth) {
    game.replaceScene(alert);
}

こんな感じです。

これで最初ゲームがロードされた際、もしスマホが縦向きだったら、横向きにしてくれという警告を出しています。
また、最初から横向きだった場合は、標準のrootSceneが読み込まれます。

rootSceneにゲーム本体を用意すればよいわけです。

それが嫌な人は、上記のコードのif分にelseを足し、そこにゲームのメインシーン（もしくはOPシーン）を読み込むように書けばいいと思います。

ただこのコードのままだと問題があります。

ロード時に端末が横向きだった場合は良いですが、縦向きだった場合、メッセージだけ表示してそれ以降なにも進みません。

端末を傾けて横にしたら～、という処理が必要なわけです。

その部分はこう書きます。
window.onload = function(){}; の外にでも書いてください。

  
  window.addEventListener("orientationchange", function () {
    location.reload();
});

こんな感じです。

端末を90度傾けたら、みたいなイベントのようです。（正確には違うかもしれない）
だから、横から縦にしても、縦から横にしても発生します。

で、そのイベント発生後、ウェブサイト自体をリロードしています。

そうすると先ほどのコードがまた読み込まれ、今度は、ゲームがスタートするという仕組みです。

リロードするというのはあまり賢い書き方ではないと思いますが、コードを簡潔にし、減らすために採用しました。

これで、画面の向きが解決しました。

画面を中央に表示する

今度はゲームの画面を中央に表示します。

  
  var game = new Core(640, 360);

var CenterMove = function (core) {
    var stage = document.getElementById('enchant-stage');
    stage.style.position = 'absolute';
    stage.style.top = (window.innerHeight - (core.height * core.scale)) / 2 + 'px';
    stage.style.left = (window.innerWidth - (core.width * core.scale)) / 2 + 'px';
    core._pageX = (window.innerWidth - (core.width * core.scale)) / 2;
    core._pageY = (window.innerHeight - (core.height * core.scale)) / 2;
};

CenterMove(game);

こんな感じです。

gameオブジェクトを渡し、それをちょうど画面真ん中に来るよう移動しています。

以上です。

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

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

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

https://www.blender.org/download/

Blender2.8への移行は簡単！？リアルタイムレンダラEeveeを使用するときのポイントなど

2019-12-10T23:19:00.001+09:00

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

Blender2.8が公開されてからだいぶ経ちましたね。

今では、Blender2.81とかが出ているのでしょうか。

おそらくほとんどのBlenderユーザーが、Blender2.79からBlender2.8もしくはそれより上に移行していることと思います。

ですが、今回は振り返りみたいな意味を込めて、また、まだ移行しきっていない方に向けて、Blender2.8への移行、Eeveeについて少しまとめてみようと思います。

Blender2.8への移行

まず、現在インストールされているBlenderをアンインストールします。
もしかしたら、旧バージョンと新バージョンを共存させることも可能かもしれませんが、僕は試していないのでわかりません。

もしインストーラー版ではなく、ポータブル版を使用していたなら、また圧縮してどこか違うところに保険として保存しておくとよいでしょう。

Blenderをアンインストールしても、設定は残ります。
（僕はポータブル版だったので残りましたが、インストール版は試していないので確かではありません。たぶん残ると思います。）

次に本体をこちらの公式サイトからダウンロードします。

Windows , Mac OS , Linuxに対応しており、インストーラー版とzip版（ポータブル版）があります。
好きな方を選んでください。

僕はzip版を選びます。
ポータブル版の方が好きなので。

そうしたらインストールしましょう。
ポータブル版は展開ですね。

それが終わったら起動しましょう。

ここの、「Load 2.79 Settings」というところをクリックすると、以前まで使用していた設定、アドオンなどがすべて引き継がれます。
（ただし、バージョンアップの関係で一部完全には移行できない部分があるようです。）

簡単でしょ。
Blender2.8への敷居が少し低くなったのではないでしょうか。

Eeveeを使用する

僕が以前、Eeveeで作った動画です。

SFチックな演出が簡単にできます。

EeveeというのはBlender2.8から搭載されたリアルタイムレンダラのことで、ほぼリアルタイムにレンダリングが可能。レンダリング処理も超速いです。

Cyclesに比べると物理的リアリティは劣りますが、それでも、十分なくらい美しく速くレンダリングが可能です。

ただ、いくつかポイントがあって、これをしないとリアリティのないしょぼい結果になってしまうかもしれません。というのをご紹介します。

まず、次の二つはおそらく必須でしょう。

Ambient Occlusion

オブジェクトの距離が近いところ、光が遮られやすい場所が暗くなったりなどし、リアリティが増します。

Screen Space Reflections

これにチェックを入れないと反射が起こりません。
必須です。

次に、必須ではないけど、面白い設定としてBloomをご紹介します。

これにチェックを入れることで、光が飽和し、グローやグレアのような効果がかかります。
Bloomの設定、および、光源（Emission）の強さを調節することで、好みの感じにできます。

上の動画とかも、Bloomを使って近未来感を出しています。

あとおまけとして、Volumetricをご紹介します。

これにチェックを入れることで、空間が霧に包まれたような感じになります。

炎とか煙のシミュレーションをする際にも、これにチェックを入れないと、煙が表示されません。

以上です。

ぜひBlender2.8で快適な3DCGライフを！

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

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

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