2017年9月20日水曜日

RPGツクールから自宅のWEBカメラを操作する

気は確かか?とか言われそうですが確かです。

昨今、あらゆる技術やサービスの敷居か下がってきていると感じたので、それらを組み合わせて何かできないかと考えた結果、このようなことになってしまいましたw

本件で使用した主なツールは以下のようなものです。
■ハードウェア
Raspberry Pi 3
■サーバーソフトウェア
Node-RED
■ゲーム作成ツール
RPGツクールMV

いずれも学習コストの低さが売りのツールなので、マニュアルとかを見ればすぐに扱えるようになると思います。
難易度的にも差はないと思うので、既にどれかひとつでも扱えるのなら、他のツールも余裕なはずです。
つまり、もしあなたがツクールでゲームを作れる根性があるのなら Raspberry Pi と Node-RED を駆使した IoT(モノのインターネット)くらい余裕な時代になったわけですよ!(暴論)

ラズパイとウェブカメラと百均のスピーカーとカービィとカービィ

出来上がったモノの紹介

ゲーム内で然るべき操作をすると、自宅のウェブカメラが撮影を行い、ゲーム上でその写真を確認することができます。


実動版を公開しても良かったのですが、Raspberry Pi で他のこともやりたいし、いつまで自宅で動かしてるかも分からないので、サーバー処理だけ除いたモノを公開しています。

とてもよくわかる構成と撮影の流れ

私が渾身の力を込めて描いた構成図をご覧ください。
わ け わ か ら ん w
一応説明いたしますと、インターネットより上が自宅です。
Raspberry Pi がサーバーで、その中で Node-RED が動いていて、ゲームやら画像やらをプレイヤーに配信する、という構成で、ゲームからは以下のような流れで撮影が行われます。
  1. プレイヤーがゲーム内で撮影ボタンを押す
  2. すると、ゲームから Node-RED に XMLHttpRequest で HTTPリクエストが発生
  3. リクエストを受け取った Node-RED が撮影と画像の更新の Linux コマンドを実行
  4. その後、プレイヤーが写真を見るイベントを実行したら、ゲームのエラー表示要素「ErrorPrinter」を利用して画像を表示する
あ、図中のRPGツクールMVとは、RPGツクールMVで作られたHTML5形式のゲームということですよ。念のため。

もうちょっと詳しく

ここからは「おいらもやってみたい!」とかいう奇特な方へ向けた情報をダラダラと提供します。

それぞれどうやって入手するの?

2017年9月現在の情報です。

Raspberry Pi

買いましょう。
ラズパイ正規総代理店のアールエスコンポーネンツと契約を結んだ個人向けの正規代理店の Raspberry Pi Shop by KSY(ややこしいw)での購入をおすすめします。(アフィとか無いから素直にクリックしとけ)
Amazon などと比較しても安いことが多いです。

私は Raspberry Pi 3(5,000円くらい)を使用しましたが、恐ろしく安い Raspberry Pi Zero(700円くらい)とかでも可能なはずです。
初心者はACアダプターなども含まれるセットを買うのが無難です。

流行っているのでネットや本で多くの情報を得ることができます。
でも古い情報には注意です。(OSガー、ニホンゴガー、とかいう問題はもはや過去のもの)
あと、やたらコマンドを打たせたがるページが多いですが、ほとんどの作業は GUI 上でも行なえるので、CLI 恐怖症の人も安心だぞ(ちょっとウソです)

ちなみに公式サイトはこちら(英語が読めない人は Chrome の翻訳機能で頑張れ)

Node-RED

ラズパイの標準 OS 「Raspbian」に、もとから含まれています。
詳しくはこちら→Node-RED日本ユーザ会 : ドキュメント
比較的情報が少ないのがネック。

RPGツクールMV

税別7,980円。買いましょう。
ただし、まれに Steam で 80%OFF とかしているため買い時が難しいですw
詳しくはこちら→RPGツクールMV

ゲーム(ツクール)からどうやって XMLHttpRequest を送っているの?

PNDK_HttpRequest プラグインを利用しています。
◆プラグインコマンド:PNDK_HR clear
◆プラグインコマンド:PNDK_HR send http://sample.com:1880/shoot/
という感じに、リクエストを投げっぱなしにしてるだけです。

どうやってゲーム内に画像を表示しているの?

ぶっちゃけゲーム内じゃないんですよね。
ツクールは元々、エラー表示のために「ErrorPrinter」という ID をもつ <p> 要素が HTML 内に用意されているので、そこに <img> 要素を突っ込んでるだけです。
イベントコマンドの「スクリプト」で直接以下のような javascript を書いています。
【注】このBlogの制約で<>は全角になっています!
var elem = document.getElementById("ErrorPrinter");
elem.innerHTML = "img src='http://sample.com:1880/rpg/www/photo.jpg'";
消すときは以下のようなスクリプトを実行させています。
var elem = document.getElementById("ErrorPrinter");
elem.innerHTML = "";

え?なんでツクール使ってんの?HTML と JS でいいじゃん。

使いたかったからDEATH!

どうやってラズパイからWebカメラに撮影させてるの?

ラズパイに fswebcam パッケージをインストールして Node-RED の exec ノードで fswebcam コマンドを利用して撮影と画像更新を行っています。
こんな感じ("写真を取って撮って保存"のところ)です↓
Node-RED で作ったフロー

ウェブサーバーは?

Node-RED の設定で httpStatic を指定しています。
指定したディレクトリに HTML とか JPEG とかを置いています。
詳しくこちら→ Node-RED日本ユーザ会 : 設定

ちなみに自鯖にはダイナミックDNSを利用

ダイナミックDNS(DDNS)のサービスは mydns.jp を利用しています。
先の Node-RED のフローの"1時間毎にDDNS更新"のところで IP を通知しています。

はんだ付けとかするの?

せーへんせーへん。
USB とか差し込むだけやで。

ポート開けるんだよね?

せやで。
Node-RED の初期設定での使用ポートは 1880 だに。
お使いのネットワーク機器の設定が必要たい。

最後に

べつに何千円もかけて部屋を覗かれるゲームを作りたかったわけではないですよ。ええ。

ラズパイに人感センサーとか赤外線リモコンモジュールとか追加してみたり、Node-RED で WebSocket サーバー動かしてツクールにオンライン要素追加してみたり色々やりたいことがあるので、またなんか作ったら公開したいと思います。


2017年8月25日金曜日

ゲームが作れる!簡単ビジュアルプログラミングツールのまとめ

学校とかでプログラミングを勉強して、ゲームを作りたくなっちゃうお友達がわんさか増えると見込んで、簡単にゲームが作れる初心者向けのソフト(ツール・ゲームエンジン)を紹介するよ!

とりあえずいきなり Unity に手を出して挫折した人にもオススメだぞw

Scratch(スクラッチ)

https://scratch.mit.edu/
[日本語][無料][パソコン(Flash)]

たぶん一番有名で、一番使われているであろうビジュアルプログラミングツール。
完全に日本語化されていて、チュートリアルなんかの使い方説明も充実しているので、初めての人でもかんたん安心!
ゲームの仕組みや作り方を学習するには、うってつけです。

でも、2020年に開発を終了することが決定した Adobe Flash を利用している点が将来的に不安。(このページは2017年に書かれたよ)
たぶん Adobe Air を利用したオフラインエディターが今後の主流になるのかも?
それとも HTML5 化されるのかな?

それと日本語化されているのはすごく嬉しいけど、あまりそのことに慣れてしまうと他のプログラミング言語は英語がベースなので、もう少し本格的なゲームを作りたくなった時に苦労するかも……

プログラミン

http://www.mext.go.jp/programin/
[日本語][無料][パソコン(Flash)]

文部科学省が Scratch(スクラッチ)を参考にして作ったツールとのこと。
なんかやたらかわいくて、楽しくプログラミングの学習ができる。
反面、あまり本格的なゲーム制作には向かない。
あとなぜか Scratch とは逆にブロックを上に積み上げていく方式なのが、他の言語から見てもちょっと不自然……
Flash を利用しているという不安点は Scratch と同じ。

Viscuit(ビスケット)

http://www.viscuit.com/
[日本語][無料][パソコン(Flash)・スマホ(アプリ)]

かなり変わった方法で絵を動かしたりするので、ゲーム作りの勉強としては役に立たない。
そもそも他とはコンセプトが違うようだ
これも学習用ということで、ゲーム制作にはぜんぜん物足りないかな。
ちなみに食べるビスケット(Biscuit)とは文字が違うので注意。

プログル

http://proguru.jp/
[日本語][無料][パソコン・スマホ(ブラウザ)]

これゲームは作れない(/・ω・)/
勉強用だったわ。


「アクションエディター4」

http://omoshiro-game.com/
[日本語][無料][パソコン]

無料で 2D のアクションやシューティングゲームを制作できる Windows ソフト。
プログラムするというより、キャラクターの行動や強さを設定して作る、というイメージ。
画像の規格など、理解しないと使いこなせない部分も多いため、けっこう難しめだけどヘルプ(説明書)をザッと読んでみて理解できそうならチャレンジしてみよう!


RPGツクールMV

https://tkool.jp/
[日本語][有料][パソコン・スマホ(ブラウザ)]

その名の通り RPG を作るのに特化したゲーム作成ツール。
HTML5でゲームを出力できるので、スマホのブラウザでも遊べるゲームが作れるのが特徴!
ニコ動のサービス「RPGアツマール」にも投稿できちゃいます。
一応、ビジュアルプログラミングと言えなくもないと私は思ってるw

しかし1万円くらいするソフトなので、お子様はお年玉のチカラを借りる必要がある。
ちなみに学生には敷居が高いけど STEAM ではたまに半額セールとか(時には80%オフとか)やっているので興味のある人は Twitter でツクール開発部さんをフォローしておくと安くゲットできるチャンスをお知らせしてもらえるぞ。


ティラノビルダー(TyranoBuilder)

http://b.tyrano.jp/
[日本語][無料][パソコン・スマホ]

アドベンチャー・ノベル系ゲームが作れる開発ツールです。
イラストと文章を書くのが好きな人にピッタリなツールだね。
HTML5でゲームを出力できるので、スマホのブラウザでも遊べるゲームが作れるのが特徴!
ゲームが完成したら「ノベルゲームコレクション」というサイトに投稿しませう。

SMILE GAME BUILDER(スマイルゲームビルダー)

http://smilegamebuilder.com/jp/
[日本語][有料][パソコン]

プログラミング不要で 3D RPGを制作できる RPG 制作ツール。
しかし約1万円かつ購入は STEAM からのみと、ちょっと敷居は高め。
興味がある人は、まずは無料体験版を試してみよう。

Stencyl

http://www.stencyl.com/
[英語][無料と有料][パソコン・スマホ]

2D ゲーム作成に特化したゲーム作成ソフトウェア。
パソコンで作って Flash やスマホアプリとして出力することができる、どちらかというとプロ向けのツール。
バージョン3.5.0からは HTML5 に出力することもできるようになるらしいぞ!
でも残念ながら英語だ!

PlayCanvas(プレイキャンバス)

https://playcanvas.com/
[そこそこ日本語w][無料と有料][パソコン・スマホ(ブラウザ)]

まず最初に言っておくがこいつは全然ビジュアルプログラミングじゃない(爆)
3D ゲームをブラウザ上で作って遊べるゲームエンジン。
作成画面は英語だけど、日本ではGMOクラウド社が販売をおこなっているので、マニュアルはひと通り日本語化されているし、作成画面も Google Chrome ブラウザの翻訳機能を利用すれば、そこそこ理解できる内容になるので、結構ハードルは低めなんじゃないかなと思う。
そんなことより 3D ゲームは 2D ゲーム以上に覚えることが多いので、そっちのほうが大変。

MIT App Inventor

http://appinventor.mit.edu/explore/
[英語][無料][スマホ(Android)]

ビジュアルプログラミングでスマホアプリが作れちゃうツールです。
スマホ特有の GPS や 加速度センサーなどを利用したアプリも作れます。
ただしゲーム専用ではなく、色々なアプリが作れるタイプのツールなので、アクションゲームなどを作るのには不向き。
そしてなにより英語だ!
ちなみに Scratch(スクラッチ)と同じくマサチューセッツ工科大学(MIT)が提供しているゾ★



おわりに

なんだかんだでビジュアルプログラミングからノンプログラミング、果ては全然プログラミングが必要なものまで色々と紹介してしまいましたw
Unity と Unreal Engine は本ページの目的とも違いますし、意図的に外しています。

確かにみんなが使っている Unity とかのほうが情報も多いし安心感は大きいと思うけど、どんなゲームでも Unity で作ればオールOKというわけでもなく、作る人の技量や作りたいゲームの内容にあったツールを使っていくほうが、きっと有意義であり効率も良いと私は思っています。

どのツールを使うかより、どんなゲームを作るかのほうが大事ですからね★

2016年12月28日水曜日

ELECOM VRグラス P-VRG03 シリーズのレビュー【スマホ用 VR ゴーグル】

メガネ着用可でピント調節、レンズ間隔調節も可能な一見するとまさに理想的な VR ゴーグルなのですが、使ってみて気がついたことがあるので、まとめてみました。

※公式には、眼鏡を装着した状態での使用はできない、となっているので眼鏡によっては合わないかもしれません。

ダンボール製 VR メガネとは一線を画する雰囲気w

お値段は約3,000円。
正直、2,000円以下で同程度のスペックをもつ VR ゴーグルやメガネもあるので多少お高いと言わざるを得ません。
しかし、店頭で使い比べてみると、目の幅や視力に合わせて調節できる機能、小ぶりな眼鏡なら着用可能なスペース、しっかりとホールドされるスマホ、そして広角で歪みの少ない大型のレンズ、とやはりハコスコや Cardboard のような安価なメガネタイプとは一線を画する使いやすさを感じたので購入してみました。

なかなか充実した機能!
[クリックで拡大]
箱の中身は全部でこんな感じ。

本体と取説(ペライチ)と黒いのは遮光シート
そして特筆すべきはこの底上げ力!( ゚∀゚)

箱の約半分は底上げですw
なんでこんなことしたんでしょうか……
まだ下に何か入ってるのかと期待してしまいましたよ。

まぁ冗談はさておき、いざ実際に使い始めたところ、ある重要な欠点に気が付きました!
それは……





セットしたスマホが操作できねー(爆)





おーまいがぁー、店頭では取っ替え引っ替えしていたので気が付きませんでしたが、一度セットすると画面をタッチするすべがありません;
ハコスコのようにタッチ用の穴が開いてるわけでも、Cardboard のようにマグネット式のボタンがついてるわけでもありません。
そのため、例えば動画を見ようとした場合……
  1. ゴーグルにスマホを仮乗せ(まだ固定しない)
  2. 動画の再生ポチィー
  3. 急いでスマホを固定
  4. さらに急いでヘッドにマウント
という手順になりますナンダコレ。

これだと視点合わせで決定する機能を持つアプリしか快適に使用できません。
それ以外の点には満足しているだけに、この欠点は大きすぎます。

つまりエレコムさん的には、こいつも一緒に買っとけよ!っということなのでしょう。



オノレ ELECOM ハメヤガッタナ(泣)
まぁ買う前に気が付けって話ですね。

ちなみに上記商品、iPhone では動画の再生とか停止のコントロールくらいしかできないのでご注意ください。
android 使っててお金に余裕のある方は買ったらいいんじゃないっすかねハナホジ。

とりあえず、私は本体に穴開けてタッチできる仕組みを組み込めないか思案中ですw
もし成功したら追記します。期待しないでください。

[2017年8月8日いまさら追記]
穴あけではありませんが、android 端末であれば USB 変換アダプターを利用してマウスをつなげれば大方の問題は解決します。
USB 変換アダプターは百均でも売っているので、安価に解決したい方にはおすすめです。

↓こういうやつね。

[追記ここまで]

今回ご紹介した商品はこちら。この記事から買うやついないだろうけどな!



Cardboard やハコスコなどのビューア設定を初期状態に戻す方法

Cardboard はビューア(VR ゴーグル)の QRコードを読み込むだけで設定できるので便利なのですが、『やっぱり最初の状態に戻したい』なんてことも少なくありません。私はw

しかし困ったことにデフォルト(初期状態)に戻す方法が Cardboard には用意されていないようです。
まー、まだ Cardboard 程度なら一度消して再インストールすれば初期化できますが、YouTube アプリなどは面倒くさくてそうもいきません。

そこで初期化用のプロファイル QRコードを用意してみました。
iPhone 5系(s c SE)が対象ですが、iPhone 6 Pro でも最初に近い状態に戻りました。
android などでも利用できるかもしれません。

Unofficial Default for iPhone5

なお、目分量で初期状態を再現したものにすぎないため、完璧に初期化されるわけではないのでご注意ください。

2016年12月26日月曜日

iPhone で VR (YouTube・Cardboard )がずれる場合の対処法(android もOK)

最初 iPhone5s でこんな感じ↓に表示され、おいおいズレまくりやないかーい!と思い、色々と解決方法を探ってみました。

キツネさんがおらん……

ビューア(VR ゴーグル)で見ても映像が二重に見えてしまうという方は、以下の方法を試してみてください。

解決策その1:ビューアの QR コードを利用する

あまりにも基本的なことなので、スマホで VR やりたいとか思う人には説明不要かと思いますが、Google Cardboard の仕様に準拠しているビューアなら取説とか本体とかに設定用の QR コードがあるはずなので、そいつを YouTube やら Cardboard やらのアプリ内の設定(歯車マーク)の「ビューアを切り替える」から読み込ませることで、そのビューアに合わせた表示になってくれます。ふつうはw

こんな感じのやつネ

つーか「こんなことで解決するなら検索しねーよ」という方がほとんどでしょうからサッサと次の考えられる原因とその解決法に進みましょう。

なお、そもそも QR コードなんてない、もしくは無くした、という場合は、このページが便利です。

HYPERGRID BUSINESS の VR ヘッドセット QR コード一覧ページ

オフィシャルからアンオフィシャルな QR コードまで色々あるので、頑張っていい感じのを見つけ出せばいいと思います。
すげーたくさんあるけどがんばれ。

ちなみに、日本で最も広く利用されているであろうハコスコにはオフィシャルな QR コードはないので注意。
つーか、なんでないの?用意しとこうよ。

参考:
Cardboard やハコスコのビューア設定を初期状態に戻す方法

解決策その2:慣れるwww

いや真面目な話、これで解決する場合も多いです。
映像が二重に見えてしまうのは単に目が慣れていない(遠くを見ようとしていない)ことが原因であることも少なくありません。

とは言え、人によっては本当に合っていない場合もあるので、少し慣らしてみたけどやっぱ改善しないという方は、次の方法をお試しください。

補足:
実は冒頭のキツネさん画像も異常にズレているわけではないのです。
ビューアを通すことで↓下図のように見えるのです。


構造上、有効に利用できる画面の範囲は意外と狭く、特に iPhone5 などの画面が小さいスマホほど、この問題はより顕著になります。

解決策その3:自分に合った QRコード(プロファイル)を作成する

正直最も確実でおすすめな方法は、これだと思います。
メーカーが用意した QR コードはあくまで、そのビューアと推奨するスマホでいい具合に見える平均的な設定を行なってくれるだけで、個人の視力や瞳の間隔やらは考慮してくれません。

全部中心で揃ってるのが理想
たとえビューアにレンズ間隔やピント調節機能が付いていても、画面表示もそれに合わせて変更されなければ最適な環境にはできないのです。


そこで、自分にあった設定を記録した QR コードを作成する必要があります。
といっても特に難しいことはありません。
PC ブラウザで下記URLにアクセスし、スマホの画面を見ながら設定するだけです。

ビューア プロフィール生成ツール(え い ご w)

このサイトでは、左右の映像の位置や画角の調整、レンズの歪みの修正などをおこなうことができ、その設定を QR コードとして出力することができます。
つまり自分用のプロファイルの QR コードが作成できます。

極端な変更例ですが、中心点や画角、歪みの修正をおこなうとこんな感じ
どちらも角に視点を合わせていますが、これだけの違いが出ます。
ただしこのプロファイルが有効なのは Google Cardboard SDK を利用して制作されたアプリのみなので注意です。(まぁたいていのアプリはこれ使ってます)

ビューア プロフィール生成ツールの使い方

一見難しそうですが、やってみると簡単です。英語わからなくたってOKです。

1.まずは PC ブラウザでページにアクセス!

スマホじゃだめだよ PC だよ。え?PC ない?m9(^Д^)プギャー

2.今度はスマホでそのページにある QR コード読んでページにアクセス!

なんとこれだけで PC 側で設定変更するとスマホ側で表示の変化を即確認できるようになります!
※スマホを横向きにすると、表示を確認できるようになります。
※早ければ1秒程度で反映されますが、遅い時は数十秒かかります。

なお、もしかしたらこの時にスマホの PPI を入れろとメッセージが出るかもしれません。
お手元のスマホの PPI をググって入力してください。(数値だけ入れればOK)

iPhone の PPI は以下のとおりです。
iPhone 5 326 ppi iPhone 6 326 ppi iPhone 7 326 ppi
iPhone 5c 326 ppi iPhone 6 Plus 401 ppi iPhone 7 Plus 401 ppi
iPhone 5s 326 ppi iPhone 6s 326 ppi
iPhone SE 326 ppi iPhone 6s Plus 401 ppi

3.PC ページの下の方に、色々な設定項目があるので、いい感じにいじるw

Your Company ホントはメーカー名を入れるとこだけど、作者名でも入れておけばいいと思うよ。
ちなみに未記入でも OK です。
Viewer Name ビューアの名前。っていうかプロファイルの名前。
これは分かりやすい名前を入力しておくことをおすすめします。
Primary button type ビューアにどんなタッチ操作機能がついているかを選択します。
None:タッチ操作できない
Touch:指で画面に触れられる
Indirect Touch:マウスとかコントローラでタッチ操作できる
Magnet:Cardboard のように磁石式のボタンがある
Screen to lens distance (mm) 画面とレンズの間の平均距離。
画角などにも影響するので、正確な距離を入力してもいいけど、好みで調整してもいいと思う。
Inter-lens distance (mm) レンズの間隔。ビューア側でも調節できるなら自分の瞳の間隔。
疲れやすさ酔いやすさにも影響するので超絶重要!
だいたい子供は55mmくらいからで大人は65mmという人もいる。
ビューアを覗いて調整する時は、必ず遠くを見る感覚で両目の赤い点が重なるよう調整すること。
寄り目の状態で調整しても意味ないので注意!
Screen vertical alignment ビューアにスマホが、垂直方向にどう装着されるかを選択。
Bottom:下にそろえて装着
Center:まんなかに合わせて装着
Top:上部に合わせて装着
Center を選択しがちだが、多くのビューアは Bottom で作られているぞ。
つまりこういうことだ↓


しかしできるだけ画面は大きく使いたいもの。
特に画面の小さいスマホでは、装着しにくさを犠牲にしてでも画面を最大限に利用できる Center を選択するのもあり!
Tray to lens-center distance (mm) Bottom か Top を選択すると出てくる項目。
ガイドからレンズの中心までの距離を入れるところだけど、これは実際にビューアを覗いて真正面に赤い点が来るように調整するのがベストでしょう。
Distortion coefficients レンズの歪みを調整できるよ。
これも実際にビューアを覗いて調整することをおすすめします。
できるだけ垂直線がまっすぐになるよう調整しましょう。
なお、k1、k2 ともに 0.00 には設定できないので注意!
Advanced viewer parameters クリックすると以下の詳細設定項目が開きます。
 Field-of-view angles 上下左右の視野角を調整できます。
通常 50°以上にするようですが、好みで設定していいと思います。
 Viewer contains some embedded magnets. 磁石式のボタンを搭載しているならチェックボックスを ON にします。
これはアプリに磁石の影響を受ける磁力計を使わないように指示するためです。

入力内容に問題がなければ「Generate profile」ボタンが押せるようになるので押しませう。
すると QR コードが作成されるので、ダウンロードして利用しましょう。
(一度きりではなくアプリごとに読む場合もあるので必ず保存しておきましょう)

慣れれば簡単なのですが、Google さんはもう少し手軽に個人向けな設定変更ができる仕組みを用意すべきだったのではないかと思いますね。

2016年11月29日火曜日

RPGツクールMV アクティブなウィンドウの背景色を変更できるプラグイン

正直RPGツクールのデフォ UI はちょっと分かりにくくて UX がフンガァァァな感じなので、せめて今操作できるアクティブウインドウだけでも見て分かるようにしようと思い作りましたふんぬらば。

ダウンロードはこちら
ライセンスは MIT だよ。


このプラグインは、アクティブ(操作対象)となっているウィンドウ背景の不透明度やカラーを変更することができます。
上の画像は通常のウィンドウをより薄くして、アクティブウィンドウの不透明度を上げています。
ちなみに、初期のウィンドウ背景は、画像(img/system/Window.png)の時点で多少透過されているため、それ以上は不透明化できないことに気が付かず2時間くらい無駄にしてしまわないようにご注意ください。しくしく。

不透明度だけでなくRGBでのカラー成分変更にも対応しています↓


他のレイアウト変更プラグインとも共存できます。たぶん。
特にスマホでのタッチ操作を考慮したプラグインと組み合わせるといい感じになると思うよ!

なお、不透明度だけの変更であれば問題ないのですが、ウィンドウカラーも変更する場合は以下の点にご注意ください。

「システム」の「ウィンドウカラー」の設定と、本プラグインの「アクティブなウィンドウカラー(赤緑青)」が異なる値になっているとウィンドウの開閉時にちょいと負荷が増えます。

これは、そもそも「システム」の「ウィンドウカラー」で色を変更すると、その分負荷が増えるのに、さらにそこからアクティブなウィンドウのカラーを変更する処理が追加されるためです。

赤緑青すべてが 0 だと負荷は発生しません。

負荷の軽い順の設定は以下のとおりです。

【軽】不透明度だけ変更する(ウィンドウカラーは変更しない)
システムのウィンドウカラー  :すべて0
アクティブなウィンドウカラー :すべて0
⇒負荷はほとんど増えません。

【並】システムのウィンドウカラーを変更する
システムのウィンドウカラー  :変更
アクティブなウィンドウカラー :すべて0
⇒ウィンドウの開閉時の負荷がちょっと増えます。

【並】アクティブなウィンドウカラーを変更する
システムのウィンドウカラー  :すべて0
アクティブなウィンドウカラー :変更
⇒ウィンドウの開閉時の負荷がちょっと増えます。

【普】本プラグインなしでシステムのウィンドウカラーを変更する
システムのウィンドウカラー  :変更
⇒全てのウィンドウが変更対象になるため開閉時の負荷がやや増えます。

【普】どちらも同じ値にする(すべて0でもない)
システムのウィンドウカラー  :↓と同じ
アクティブなウィンドウカラー :↑と同じ
⇒全てのウィンドウが変更対象になるため開閉時の負荷がやや増えます。

【重】両方を異なる値にする(すべて0でもない)
システムのウィンドウカラー  :↓と異なる
アクティブなウィンドウカラー :↑と異なる
⇒全てのウィンドウが変更対象な上にアクティブの処理が追加されるため開閉時の負荷がまあまあ増えます。

PC 向けならば特に問題ないですが、スマホも考慮する場合は、カラー変更は避けたほうがいいかもしれません。
また、そもそもツクールMVの v1.3.4 現在はウィンドウ関連のメモリリーク問題があるので、liply様作の liply_GC.js などの対策プラグインと合わせて利用ことをおすすめします。

2016年11月24日木曜日

Blogger に初めて投稿

もし使いやすかったら、こっちに移設しようかな。🐧
うわ、絵文字かわいくないなw🐇

これ以前の記事は PALog(http://blog.pandako.com)やパンダコメモ(http://memo.pandako.com)からの移植です。