はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

Nuxt.js環境でGSAPプラグインを登録する方法

f:id:hollywis:20201020112351p:plain

Nuxt.jsにてGSAPのプラグインを使おうとする場合

Docs - GreenSock
このページの通りにやっても

Unexpected token {

とか色々出て動きません。


色々調べた結果、このようにgsap/dist/のパス指定してあげると動きます!

import { gsap } from "gsap";
import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";

gsap.registerPlugin(MotionPathPlugin);

参考:
Problem with Razzle and GSAP - GSAP - GreenSock

Nuxt.js のエラー 「Failed to execute 'appendChild' on 'Node': This node type does not support this method」

nuxt-linkで遷移した場合には問題ないのですが


リロードやURLを直接叩いた場合に以下のようなエラーが発生します

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild

原因としては、クライアントサイドとサーバーサイドのDOMに差異が発生しているためのようです。



特にv-ifを利用するとほぼ発生するように思います


その場合、v-ifの前後や、場合によってはコード全てを

<client-only></client-only>

で囲えば発生しなくなります



ご察しの通り、これで囲った部分は、クライアントサイドレンダリングになりますので

その辺りはご注意ください


参考:

【Vuetify】NuxtのSSRでVuetifyのDatePickerを使用したら「The client-side rendered virtual DOM tree is not matching server-rendered content. 」というエラー発生 - Qiita

ティラノスクリプトにfirebaseを連携させて自在に操る

f:id:hollywis:20200809020407j:plain

前回、シナリオゲームが手軽に作れるティラノスクリプト

強引にVue.jsを入れることをやりましたが。


次は、、、Firebaseを入れたい!!


やはり本格的なWebアプリケーションを作るためにはデータベースとの連携は必須。

そしてFirebaseのFirestoreならとても扱いやすい。


もし、Firebaseとティラノスクリプトが掛け算できるなら

どんなものでも作れそうですよね。


それではいきましょう!!

Firebaseを初期化する

f:id:hollywis:20200809014750p:plain

例によって強引にindex.htmlにscriptタグを埋め込みます。
firestoreとauthを使いたかったのでそれも入れています。


first.ksなどで初期化します。

;Firebase
[iscript]
console.log("Init firebase");
// Initialize Cloud Firestore through Firebase
firebase.initializeApp({
  apiKey: 'xxxxx',
  authDomain: 'yyyyy.firebaseapp.com',
  projectId: 'zzzzzzz'
});

f.db = firebase.firestore();
f.auth = firebase.auth();
[endscript]

初期設定をして

ティラノスクリプトのゲーム変数(f)にdbとauthを登録しておきます。

呼び出す!

こんな感じで、例えばscene1.ksのiscriptタグの中で

firebase authenticationのユーザログイン情報を取得したり。

;Firebase
[iscript]
f.auth.onAuthStateChanged(user => {
        if (user) {
          f.displayName = user.displayName;
          f.email = user.email;
          f.uid = user.uid;
        }
});
[endscript]


こんな感じで、firestoreの任意のコレクションからデータを取ったりできます

;Firebase
[iscript]
(async () => {
   let query = await f.db.collection("contact")
      .orderBy("created","asc").limit(20);

    const snapShot = await query.get();

    const datas = snapShot.docs.map(doc => {
      return doc.data();
    });
   console.log(datas);
})();
[endscript]


f.msg の内容 : [emb exp="f.msg"][p]

この例では、contactコレクションから20個データを取って来て

メッセージに1つ目の内容を表示しています

f:id:hollywis:20200809022108p:plain

まとめ

ティラノスクリプトでもFirebase使える!

[iscript]タグは万能!

いやぁー。もう何でも作れそうですね。

ティラノスクリプトに強引にVueを入れてみる

f:id:hollywis:20200808221334p:plain

こんにちは、ノベルゲームをHTML5を用いて気軽に作成できる

ティラノスクリプトをご存知でしょうか?

tyrano.jp

f:id:hollywis:20200809015734p:plain


最近、ノベルゲーム的な表現がしたくて触っているのですが。


使われているJsライブラリがjQueryになっていて、やはりVueの中で実行したい!



という思いが強くなって来たので、強引にVueを入れてみました。


強引にVueを入れる方法

やり方はとてもシンプルです。


index.htmlにVueのタグを入れるだけです


cliを入れたり、Nuxt.js上で実行したかったのですが、ティラノスクリプトはかなり複数のファイルとリンクしており

Vue化するには色々と問題が多かったため、シンプルにタグを入れる方法でいきます。

f:id:hollywis:20200808222156p:plain

こんな感じで、index.htmlの上の方でcdn版のvueを読み込みます。


そして、bodyタグの下の方でvue用のdivを定義して。

あとはcssでposition:absoluteとかでレイヤー化しておきます。

f:id:hollywis:20200808222307p:plain


次に、Vueをインスタンス化する必要がありますが。

やり方としては、ティラノスクリプトはJSを実行できる

[iscript]タグを利用します。


例えば,最初に実行されるfirst.ksや、シナリオ読み込み時に必ず実行されるmake.ksに

次のように書きます

f:id:hollywis:20200808222819p:plain

結果

f:id:hollywis:20200808221334p:plain

こんな感じで、Hello Vue!!が出てくる

Vueを操ってみる

Vueを操るには[iscript]タグを利用していきます。

先ほどの部分を少し改変します。

first.ksでnew Vueしたインスタンスをティラノスクリプトのゲーム変数に格納します

;Vue読み込み
[iscript]
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
// システム変数にVueを追加
f.vue = app;
[endscript]

そうすると、例えばscene1.ksなどでvueインスタンスを呼び出すことができるので

こんな感じでmessage変数にアクセスできるはず!

[iscript]
  f.vue.message = "こんにちは";
[endscript]

・・・

・・・

・・・

f:id:hollywis:20200809015507p:plain

変わった!!

まとめ

ティラノスクリプトでもVueは使える!!

ただし、ティラノスクリプトが優秀なのでVueを使う必要があるかは疑問ですけれど。。


それでは

技術ポートフォリオ

なんとなく自分の技術ポートフォリオをまとめてみました

重点科目はJS系、その他の言語は重点項目ではないので一旦排除しています。

  • Lv15までは守
  • Lv100までは破
  • Lv100以上は離の領域

総合力: Lv50 (システム開発歴10年ほど)

  • Nuxt.js : Lv10
  • Vue.js:Lv15
  • Firebase総合力:Lv5
  • Firebase FireStore:Lv15
  • Firebase Authentication:Lv10
  • Firebase Storage:Lv5
  • Firebase Functions:Lv10
  • Pixi.js,Three.js,babylon.js:Lv5~Lv10
  • サーバー構築 Lv20
  • システム設計 Lv35

守:ツールを十分に理解するフェーズ

【テーマ】通常の利用方法の範囲で忠実に実行する。2年くらいの利用実績。

課題
・Nuxt.js、Vue.jsのレベルを15まであげる
・Firebaseの総合力をレベルを15まで


破:基本理解が一定レベルを超え、ツールの垣根超えて縦横無尽に利用できるフェーズ

【テーマ】
ツールではなく根源的な法則の理解(基本の積み重ね)


・ほぼ入り口にはいっている。様々なライブラリを取り込み組み合わせて利用できるようになって来た

 現在レベル50
 →外部のJSライブラリをどんどん取り入れ、Lv15まで理解し、その後複合させて独自のシステムに昇華させるフェーズ


勉強: 破レベルの先輩コードに触れ学ぶ!
TODO:
  ティラノスクリプトソースコードを読む
  Pixi.jsソースコードを読む
  Three.jsのソースコードを読む
  普段使ってるOSSで不満に思ったことを書き留めておく

離:独自のフレームワークを生み出すレベル

【テーマ】
融通無碍の境地。

基本を全て押さえ、組み合わせもでき
かつムリなくシンプルに纏める、納める事ができる技術

2・6・2

『自己満曲線』に入ってないか定期的にチェックする。
・リリース
→体感としてLv70くらいを目指していた。
・フォーカス
→Lv1000を目指す事。

nuxt.js のSSRデバッグ方法 by Jetbrain

こちらの記事が参考になりました。
ありがとうございます。

k-sasaki.net


asyncDataのデバッグを諦めてconsole.logで頑張っていたところ

これで、デバッグできるようになりました!

f:id:hollywis:20200729112828p:plain

こんな感じで、ブレークポイントを入れたい場所に

「debugger;」

と書けばchromeのDevツールでブレークされます。

Jetbrain最高です。

babylon.js ステップ15 環境設定

ステップ15は環境設定です。

今までは無機質な虚無空間でしたが、ここで遂に空が登場します。

そうする事で、見栄えのする3D空間が完成します


いきましょう!!

f:id:hollywis:20200711204337j:plain


背景色の変更

シーンの背景色を変更するプロパティを使う事で簡単に、背景色を設定できます

  • scene.clearColor - 背景を変更する関数
scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);

Color3型をnewして色を設定できます

f:id:hollywis:20200711205002p:plain

アンビエントカラーの変更

次のプロパティを使うとアンビエントカラーを設定できます

scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);

clearColorの設定方法と同じように見えますが、アンビエントカラーについては、ambientColorシーンアイテムの最終的な色を決定するためにかなりの数の計算で使用されています。

主に、メッシュとの組み合わせて使用​​され、メッシュマテリアルのStandardMaterial.ambientColor によって最終的なアンビエントカラーが決まるようです。

スカイボックス

f:id:hollywis:20200711221127j:plain

美しい完璧な空を作りたいと思いませんか?

それを簡単に実現したのがスカイボックスです。

このボックスの中にカメラを設置すれば、あたかも広大な空の中にいるような演出ができます。

作り方は次の通り

まずは箱を作ります。

var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;

さらにinfiniteDistanceプロパティを設定します。

 skybox.infiniteDistance = true;

これによって、スカイボックスがカメラの位置に追随するため、カメラがスカイボックスから出てしまうことはなくなります。

skyboxMaterial.disableLighting = true;

ボックスに対するすべての光の反射を削除します


次に、空のテクスチャを内側に貼り付けます。

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

なお、設定している/skyboxディレクトリには6つの面に対するテクスチャが入っていて、適切な名前設定の必要があります

f:id:hollywis:20200711221500p:plain

  • 「skybox_nx.jpg」(左)
  • 「skybox_ny.jpg」(下)
  • 「skybox_nz.jpg」(背面)
  • 「skybox_px.jpg」(右)
  • 「skybox_py.jpg 」(上)
  • 「skybox_pz.jpg」(前)

そして、これらのテクスチャは合わせると継ぎ目なくつながっている必要があります。

あとどうやらjpgだけ対応していますpngを設定したらエラーになりました

f:id:hollywis:20200711221653p:plain

スカイボックステクスチャは、空だけのテクスチャである必要は なく。

建物、丘、山、木、湖、惑星、星などざまざまです。

f:id:hollywis:20200711221144p:plain

スカイボックスとGoogleで検索すると様々なテクスチャがあるかと思います。

そのほか、ddsファイルを利用する方法もあります

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/assets/textures/SpecularHDR.dds", scene)

最後に、レンダリング順序を設定します

skybox.renderingGroupId = 0;

// Some other mesh
myMesh.renderingGroupId = 1;

スカイボックスの設定renderingGroupIdを0にして、他のすべてのレンダリング可能なオブジェクトを0より大きくします。

スカイボックスの自動生成方法

var envTexture = new BABYLON.CubeTexture("/assets/textures/SpecularHDR.dds", scene);
scene.createDefaultSkybox(envTexture, true, 1000);

例はこちら
https://www.babylonjs-playground.com/#BH23ZD#1

スカイボックス用の画像を自分で生成する方法

1枚のパノラマ画像からスカイボックス用の6面の画像にする事をキューブマップ(cubemap)と呼びます。

そんなキューブマップをやってくれる便利なツールがありました


こちらのパノラマ画像のキューブマップ変換機が便利そうです
christinayan01.jp

名前の命名規則は、それぞれ次のように変更します

l ->「nx」(左)
d ->「ny」(下)
b ->「nz」(背面)
r ->「px」(右)
u ->「py 」(上)
f ->「pz」(前)


Fog霧

f:id:hollywis:20200711221235p:plain

フォグはかなり高度な効果なのですが、Babylon.jsのフォグは最大限に簡素化されています。

まず、次のようにフォグモードを定義します。

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;

モードは次の4種類

  • BABYLON.Scene.FOGMODE_NONE -デフォルト無効
  • BABYLON.Scene.FOGMODE_EXP -フォグ密度は指数関数に従
  • BABYLON.Scene.FOGMODE_EXP2 -上記と同じですが高速
  • BABYLON.Scene.FOGMODE_LINEAR -フォグ密度は線形関数に従う


EXPまたはEXP2の場合には密度を設定できます

scene.fogDensity = 0.01;

それ以外の場合には、位置を設定できます

scene.fogStart = 20.0;
scene.fogEnd = 60.0;

すべてのモードで色を設定できます

scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);

デモはこちら
https://www.babylonjs-playground.com/#7G0IQW

まとめ

環境設定として背景色やスカイボックス、霧の使い方を学びました。

これで解像度の高い空ができるかと思います