2020年4月4日土曜日

[Enchant.js]スマホで全画面表示した際、Viewportのサイズに画面を合わせる方法


Enchant.jsで沼にはまったところがあったので、ここにメモしておきます。



Enchant.jsをはじめとして、HTML5ベースに作ったWebアプリをスマホとかで全画面表示(ネイティブアプリっぽく表示)するとき、 metaタグでviewportとかの設定をすると思います。





ただ、このときに、ゲーム画面が全体にフィットしないという問題が起こりました。
スマホの解像度に合わせて作ったにも関わらず...




結構これで悩んだのですが、いろいろ試したり調べたりするうちに、「viewportで表示した際、innerHeightを取得すると、最初の一回 目はアドレスバーを考慮した数値が出てくる」ということがわかりました。


viewportでの表示の時と、普通のブラウザの時の表示で何が異なるかというと、主にアドレスバーの有無です。



ブラウザで表示した際のinnerHeightが500だったとします。
viewportで表示すると、アドレスバーがない分これより値が大きくなりそうですが、一回目の表示の際は500となることがわかりました。

で、その状態でリロードすると、innerHeightの値が500より大きい、すなわち、アドレスバーが消えた状態の高さが取得できました。




実際には、最初に読み込んでからしばらく時間が経ってからinnerHeightを取得すれば、正しい高さが取得できるようでしたので、次のような コードを実装すればこの問題は解決できると思われます。



var game = new Core(540, 930);

var CenterMove = function (core) {
    var scale = Math.min(window.innerWidth / core.width, window.innerHeight / core.height);
    core.scale = scale;

    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;
};

setTimeout(function () {
    CenterMove(game);
}, 55);
  


最初にgameオブジェクトを作成します。


正しい高さを取得するため55ms後にCenterMove関数を呼び出します。



ここでは、縦、横においてそれぞれ、拡大縮小率を計算し値が小さいものを選んで、それをgameオブジェクトのスケールとします。



その後は、画面を中央に表示しています。




以上です。


2020年3月3日火曜日

[Blender 2.82][EEVEE] Electricity(電気)をつくる ~電流が流れるCG~


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




Blenderで電気ショックみたいなCGつくりたいなと思っていたら、このチュートリアル動画を見つけました。



ということで、今回はこの動画通りに電流が流れる表現を作っていこうと思います。







ただ、Blenderのバージョンが違ったり、使用しているレンダラーが違ったりしたために、多少操作を変えているところがあります。

ご了承ください。





僕が使用しているBlenderは、

・Blender 2.82
・レンダラーはEEVEE

です。




もし、Blender 2.7系、Blender Render使用の場合は、チュートリアル動画を直接見た方がいいと思います。




Electricity(電気)をつくる



まず、Blenderを起動したら立方体は消しておきましょう。





Planeを追加します。






Tabキーを押して、編集モードに入ってください。

そこで、Y軸方向の大きさを0にします。

ちなみに現在、ビューは上方向から見ています。







重なっている頂点を削除します。
上の動画のバージョンでは、「Remove Doubles」という項目がありますが、2.82にはないようですね。


ということで、代わりに「Merge By Distance」を実行してください。









編集モードのまま、ある程度拡大します。








ここでオブジェクトモードに戻り、Emptyを追加します。







そうしましたら、Planeの端に移動させます。









Planeを選択し、「Displace」モディファイヤを追加します。








設定はこんな感じです。



Textureは、Newで新しく作成。
「Texture Coodinates」には、「Object」を指定。
「Object」には、先ほど作成したEmptyを指定します。






Planeを選択した状態で、編集モードに入ります。
全選択で、細分化します。




ここで、分割数は16を指定してください。




これと同じことをもう一回やってください。
つまり、256分割されるということです。(たぶん)






Emptyを選択します。
プロパティパネルから座標のところを開き、Z座標のところで右クリックし、「Insert Single Keyframe」を選択してください。


ちなみに、現在のフレームは1に合わせておいてから、実行してください。







グラフエディタを開いてください。
Nキーを押すと、右にパネルが出てきます。



「Generator」モディファイヤを追加してください。



上の画像のように、「0.20」を入力します。







Planeを選択し、編集モードで、Y軸方向に少し押し出します。









テクスチャの設定を開き、Typeは「Clouds」を選択します。





Sizeは2.0にしてください。
(正直、こういった数字は自分の好みで調節すればよいと思いますが)






Displaceモディファイヤの設定画面を開き、右下の数字に3.0を入力してください。








Planeを選択した状態で、ウェイトペイントモードに入ります。






こんな感じに塗ります。
中央は大きく動くので赤く、端はあまり動かないので青にします。







再び、Displaceモディファイヤの設定画面を開き、頂点グループに、今のウェイトペイントのグループを指定します。







そうしましたら、2つ目のDisplaceモディファイヤを追加します。
設定値は画像の通りです。




さっきと一緒ですね。
テクスチャは新規作成してください。






Textureというところの一番右のボタンを押すと、テクスチャの設定に飛べます。


Typeは「Clouds」で、Sizeは0.5にします。








電気の波形を見ながら、Planeの幅を調節します。
サイズを変えるときは、編集モードで行います。









「Subdivision Surface」を追加します。





下図のように、「Simple」を選択してください。







3つ目の「Displace」モディファイヤを追加します。
設定値は以下の通り。

テクスチャは新規作成です。







先ほどと同様に、右端のボタンから、テクスチャの設定に進みます。



Typeは「Clouds」、Sizeは0.10を指定します。






Eeveeの設定をします。




Bloomを有効にしてください。

ここの細かい設定は、後でレンダリング結果を見ながら微調整すればよいと思います。





マテリアルも設定しましょう。

Emissionを選択し、強さは10ぐらいが良いでしょう。



色は何でもいいですが、僕は定番(?)の青にしました。







これで一通りの作業が終わりました。



でも、まだ一本の電気です。


複製して増やしましょう。





複製するときは、PlaneとEmptyを同時に選択し、Shift + Dで増やせます。




複製後は、Planeを回転させたり、Emptyの位置をずらしたりすることで、動きのパターンが変わります。








以上です。




これは僕が最初に作ったやつです。



で、こっちは修正したやつです。
色や、形を変えて、自分好みに調整しました。






色を変えたり、動かしたりすると、より楽しいと思います。





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

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


https://line.me/S/sticker/7072968

無言で何かを伝えよう とする白男くん - LINE スタンプ | LINE STORE

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


お そらくいつでも使えるLINEスタンプ集


2020年3月1日日曜日

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


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




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

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




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


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



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

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




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


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




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




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


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


https://line.me/S/sticker/7072968

無言で何かを伝えよう とする白男くん - LINE スタンプ | LINE STORE

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


攻略方法



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

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






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



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



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



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



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

赤(Red)→ R
緑(Green)→ G
黄(Yellow)→ Y


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




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



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








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



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



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



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



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




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



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



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


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



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



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






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



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




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



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



これは、この小屋の見取り図になります。
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」となりますので、これを入力します。





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








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



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



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

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






右の部屋へ移動します。

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



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






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



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





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



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


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



部屋に水が溜まります。





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



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




お疲れさまでした。



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


お そらくいつでも使えるLINEスタンプ集


人気の記事