チュートリアル - 3D Textを生成するコンテンツを作ってみる 5/6 – PlayCanvas

3D化したテキストを生成させる

テキストを3D化させることは現状でも出来ていますが、最初のデモのように複製生成して背景を転げ落ちるようにします。

まずは、複製生成させるボタンを作成します。
ここではEntityのGroupの配下、Input Textの隣に Button Createという名前で作成します。

以下の画像の様に設定していきましょう。
Positionは y:-130 ,Elementは Width: 300, Height: 80, と変更。

ElementのColorやHoverなどの色の指定はお好みで変更しましょう。

Button Create配下のTextも、 CREATE と表示させ、ColorやFont Sizeも変更を行いましょう。

FontSize: 38ぐらいにします。Colorはお好みで指定しましょう。

ASSETSのScriptsフォルダに新しく inputCreate.js を作成し、以下のコードに書き換えます。

var InputCreate = pc.createScript('inputCreate');

// 3Dのテキストを作るEntityを設定
InputCreate.attributes.add("meshText", {type: "entity"});

InputCreate.prototype.initialize = function() {
  var self = this;

  // 作成した3Dのテキストを入れる親Entityを作成
  self.rigidGroup = new pc.Entity();
  self.rigidGroup.name = "RigidGroup";
  self.app.root.addChild(self.rigidGroup);

  self.entity.element.on("mousedown", self.buttonClick, this);


};

InputCreate.prototype.buttonClick = function() {
  // input要素に入力されたテキストを textMesh.js の createText() で3D化
  this.meshText.script.textMesh.createText(this.rigidGroup);
};

このコードでは、 text-mesh.js で作成する3Dテキストを、 rigidGroupという複製した3Dテキストを追加するEntityを作成する処理を追加している。
ここでは this.meshText.script.textMesh.createText(this.rigidGroup); を実行するが、引数に this.rigidGroup を追加している。
この引数を活用するために、次は text-mesh.js の createText() のコードを一部書き換えていきます。

text-mesh.js の createText() を以下のコードに書き換えます。

TextMesh.prototype.createText = function (parent=undefined) {
  // 引数parent で3DテキストのEntityを入れる親Entityを設定可能

  if (!parent) {
    this.destroyCharacters();
  }

  const font = this.fontData;
  const scalar = this.characterSize / font.unitsPerEm;

  var w = this.calculateWidth();
  var cursor = 0;
  switch (this.alignment) {
    case 0:
      break;
    case 1:
      cursor = -w * 0.5;
      break;
    case 2:
      cursor = -w;
      break;
  }

  var material = this.material ? this.material.resource : new pc.StandardMaterial();

  for (var i = 0; i < this.text.length; i++) {
    var character = this.text.charAt(i);

    var glyph = font.charToGlyph(character);

    var glyphData = this.parseCommands(glyph.path.commands);
    if (glyphData.vertices.length > 0) {
      var graphicsDevice = this.app.graphicsDevice;

      // Create a new mesh from the glyph data
      var mesh = new pc.Mesh(graphicsDevice);
      mesh.setPositions(glyphData.vertices);
      mesh.setNormals(glyphData.normals);
      mesh.setIndices(glyphData.indices);
      mesh.update(pc.PRIMITIVE_TRIANGLES);

      var meshInstance = new pc.MeshInstance(mesh, material);

      // Add a child entity for this character
      var entity = new pc.Entity(character);
      entity.addComponent('render', {
        meshInstances: [ meshInstance ],
        renderStyle: this.renderStyle
      });

      entity.setLocalPosition(cursor, 0, 0);

      if(!parent) {
        // scriptを登録したEntityの子要素として追加
        this.entity.addChild(entity);

        // 3Dテキストを配列に追加
        this.characters.push(entity);
      } else {
        // parent のEntityに子要素として追加
        parent.addChild(entity);

        // 位置と向きを設定
        entity.setPosition(this.entity.children[i].getPosition());
        entity.setEulerAngles(this.entity.getEulerAngles());

        // 物理演算を処理させるためにrigidbodyとcollisionを追加
        entity.addComponent("rigidbody", { type: "dynamic" });
        entity.addComponent("collision", { type: "box", halfExtents: new pc.Vec3(0.2, 0.2, 0.2) });
      }

    }

    if (i < this.text.length - 1) {
      var nextGlyph = font.charToGlyph(this.text.charAt(i + 1));
      cursor += font.getKerningValue(glyph, nextGlyph) * this.kerning * scalar;
    }

    cursor += glyph.advanceWidth * scalar + this.characterSpacing;
  }
};

ここでは引数を受け取ったEntityに複製した3Dテキストを追加するように処理を追記しました。
また、複製だけでは背景を転げ落ちないので、rigidbodyとcollisionを追加しています。
引数が無い場合には、今まで通りの挙動で複製はしないようにしています。

Launchで確認し、テキストを入力後にCREATEをクリックして3Dテキストが背景を転がり落ちたらOKです。

これで一通りのコンテンツは出来ましたので、Publishをして行きます。